mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Revert recent changes

pull/721/head
Cory LaViska 2022-03-24 07:48:03 -04:00
rodzic b8b68af316
commit e32c15204c
134 zmienionych plików z 815 dodań i 903 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

20
.eslintrc.cjs
Wyświetl plik

@ -201,7 +201,17 @@ module.exports = {
'no-restricted-imports': [ 'no-restricted-imports': [
'warn', 'warn',
{ {
patterns: [
{
group: ['../*'],
message: 'Usage of relative parent imports is not allowed.'
}
],
paths: [ paths: [
{
name: '.',
message: 'Usage of local index imports is not allowed.'
},
{ {
name: './index', name: './index',
message: 'Import from the source file instead.' message: 'Import from the source file instead.'
@ -214,6 +224,16 @@ module.exports = {
'warn', 'warn',
{ {
groups: ['builtin', 'external', 'internal', 'unknown', 'parent', 'sibling', 'index', 'object', 'type'], groups: ['builtin', 'external', 'internal', 'unknown', 'parent', 'sibling', 'index', 'object', 'type'],
pathGroups: [
{
pattern: '~/**',
group: 'internal'
},
{
pattern: 'dist/**',
group: 'external'
}
],
alphabetize: { alphabetize: {
order: 'asc', order: 'asc',
caseInsensitive: true caseInsensitive: true

1
cspell.json
Wyświetl plik

@ -108,6 +108,7 @@
"textareas", "textareas",
"transitionend", "transitionend",
"Triaging", "Triaging",
"ttsc",
"turbolinks", "turbolinks",
"unbundles", "unbundles",
"unbundling", "unbundling",

69
docs/components/checkbox.md
Wyświetl plik

@ -60,73 +60,4 @@ import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
const App = () => <SlCheckbox disabled>Disabled</SlCheckbox>; const App = () => <SlCheckbox disabled>Disabled</SlCheckbox>;
``` ```
### Custom Validity
Use the `setCustomValidity()` method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.
```html preview
<form class="custom-validity">
<sl-checkbox>Check me</sl-checkbox>
<br />
<sl-button type="submit" variant="primary" style="margin-top: 1rem;">Submit</sl-button>
</form>
<script>
const form = document.querySelector('.custom-validity');
const checkbox = form.querySelector('sl-checkbox');
const errorMessage = `Don't forget to check me!`;
// Set initial validity as soon as the element is defined
customElements.whenDefined('sl-checkbox').then(() => {
checkbox.setCustomValidity(errorMessage);
});
// Update validity on change
checkbox.addEventListener('sl-change', () => {
checkbox.setCustomValidity(checkbox.checked ? '' : errorMessage);
});
// Handle submit
form.addEventListener('submit', event => {
event.preventDefault();
alert('All fields are valid!');
});
</script>
```
```jsx react
import { useEffect, useRef } from 'react';
import { SlButton, SlCheckbox } from '@shoelace-style/shoelace/dist/react';
const App = () => {
const checkbox = useRef(null);
const errorMessage = `Don't forget to check me!`;
function handleChange() {
checkbox.current.setCustomValidity(checkbox.current.checked ? '' : errorMessage);
}
function handleSubmit(event) {
event.preventDefault();
alert('All fields are valid!');
}
useEffect(() => {
checkbox.current.setCustomValidity(errorMessage);
}, []);
return (
<form class="custom-validity" onSubmit={handleSubmit}>
<SlCheckbox ref={checkbox} onSlChange={handleChange}>
Check me
</SlCheckbox>
<br />
<SlButton type="submit" variant="primary" style={{ marginTop: '1rem' }}>
Submit
</SlButton>
</form>
);
};
```
[component-metadata:sl-checkbox] [component-metadata:sl-checkbox]

86
docs/components/radio-button.md
Wyświetl plik

@ -414,90 +414,4 @@ const App = () => (
); );
``` ```
### Custom Validity
Use the `setCustomValidity()` method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.
```html preview
<form class="custom-validity">
<sl-radio-group label="Select an option">
<sl-radio-button name="a" value="1" checked>Not me</sl-radio-button>
<sl-radio-button name="a" value="2">Me neither</sl-radio-button>
<sl-radio-button name="a" value="3">Choose me</sl-radio-button>
</sl-radio-group>
<br />
<sl-button type="submit" variant="primary">Submit</sl-button>
</form>
<script>
const form = document.querySelector('.custom-validity');
const radioButton = form.querySelectorAll('sl-radio-button')[2];
const errorMessage = 'You must choose this option';
// Set initial validity as soon as the element is defined
customElements.whenDefined('sl-radio-button').then(() => {
radioButton.setCustomValidity(errorMessage);
});
// Update validity when a selection is made
form.addEventListener('sl-change', () => {
const isValid = radioButton.checked;
radioButton.setCustomValidity(isValid ? '' : errorMessage);
});
// Handle form submit
form.addEventListener('submit', event => {
event.preventDefault();
alert('All fields are valid!');
});
</script>
```
```jsx react
import { useEffect, useRef } from 'react';
import { SlButton, SlIcon, SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => {
const radio = useRef(null);
const errorMessage = 'You must choose this option';
function handleChange(event) {
radio.current.setCustomValidity(radio.current.checked ? '' : errorMessage);
}
function handleSubmit(event) {
event.preventDefault();
alert('All fields are valid!');
}
useEffect(() => {
radio.current.setCustomValidity(errorMessage);
}, []);
return (
<form class="custom-validity" onSubmit={handleSubmit}>
<SlRadioGroup label="Select an option">
<SlRadioButton name="a" value="1" checked onSlChange={handleChange}>
Not me
</SlRadioButton>
<SlRadioButton name="a" value="2" onSlChange={handleChange}>
Me neither
</SlRadioButton>
<SlRadioButton ref={radio} name="a" value="3" onSlChange={handleChange}>
Choose me
</SlRadioButton>
</SlRadioGroup>
<br />
<SlButton type="submit" variant="primary">
Submit
</SlButton>
</form>
);
};
```
[component-metadata:sl-radio-button] [component-metadata:sl-radio-button]

86
docs/components/radio.md
Wyświetl plik

@ -96,90 +96,4 @@ const App = () => (
); );
``` ```
### Custom Validity
Use the `setCustomValidity()` method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.
```html preview
<form class="custom-validity">
<sl-radio-group label="Select an option">
<sl-radio name="a" value="1" checked>Not me</sl-radio>
<sl-radio name="a" value="2">Me neither</sl-radio>
<sl-radio name="a" value="3">Choose me</sl-radio>
</sl-radio-group>
<br />
<sl-button type="submit" variant="primary">Submit</sl-button>
</form>
<script>
const form = document.querySelector('.custom-validity');
const radio = form.querySelectorAll('sl-radio')[2];
const errorMessage = 'You must choose this option';
// Set initial validity as soon as the element is defined
customElements.whenDefined('sl-radio').then(() => {
radio.setCustomValidity(errorMessage);
});
// Update validity when a selection is made
form.addEventListener('sl-change', () => {
const isValid = radio.checked;
radio.setCustomValidity(isValid ? '' : errorMessage);
});
// Handle form submit
form.addEventListener('submit', event => {
event.preventDefault();
alert('All fields are valid!');
});
</script>
```
```jsx react
import { useEffect, useRef } from 'react';
import { SlButton, SlIcon, SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const App = () => {
const radio = useRef(null);
const errorMessage = 'You must choose this option';
function handleChange(event) {
radio.current.setCustomValidity(radio.current.checked ? '' : errorMessage);
}
function handleSubmit(event) {
event.preventDefault();
alert('All fields are valid!');
}
useEffect(() => {
radio.current.setCustomValidity(errorMessage);
}, []);
return (
<form class="custom-validity" onSubmit={handleSubmit}>
<SlRadioGroup label="Select an option">
<SlRadio name="a" value="1" checked onSlChange={handleChange}>
Not me
</SlRadio>
<SlRadio name="a" value="2" onSlChange={handleChange}>
Me neither
</SlRadio>
<SlRadio ref={radio} name="a" value="3" onSlChange={handleChange}>
Choose me
</SlRadio>
</SlRadioGroup>
<br />
<SlButton type="submit" variant="primary">
Submit
</SlButton>
</form>
);
};
```
[component-metadata:sl-radio] [component-metadata:sl-radio]

4
docs/getting-started/form-controls.md
Wyświetl plik

@ -194,7 +194,7 @@ const App = () => {
### Custom Validation ### Custom Validation
To create a custom validation error, pass a non-empty string to the `setCustomValidity()` method. This will override any existing validation constraints. The form will not be submitted when a custom validity is set and the browser will show a validation error when the containing form is submitted. To make the input valid again, call `setCustomValidity()` again with an empty string. To create a custom validation error, use the `setCustomValidity` method. The form will not be submitted when this method is called with anything other than an empty string, and its message will be shown by the browser as the validation error. To make the input valid again, call the method a second time with an empty string as the argument.
```html preview ```html preview
<form class="input-validation-custom"> <form class="input-validation-custom">
@ -257,8 +257,6 @@ const App = () => {
}; };
``` ```
?> Custom validation can be applied to any form control that supports the `setCustomValidity()` method. It is not limited to inputs and textareas.
### Custom Validation Styles ### Custom Validation Styles
The `invalid` attribute reflects the form control's validity, so you can style invalid fields using the `[invalid]` selector. The example below demonstrates how you can give erroneous fields a different appearance. Type something other than "shoelace" to demonstrate this. The `invalid` attribute reflects the form control's validity, so you can style invalid fields using the `[invalid]` selector. The example below demonstrates how you can give erroneous fields a different appearance. Type something other than "shoelace" to demonstrate this.

9
docs/resources/changelog.md
Wyświetl plik

@ -6,15 +6,6 @@ Components with the <sl-badge variant="warning" pill>Experimental</sl-badge> bad
_During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛 _During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
## 2.0.0-beta.73
- Added `button` part to `<sl-radio-button>`
- Added custom validity examples and tests to `<sl-checkbox>`, `<sl-radio>`, and `<sl-radio-button>`
- Fixed a bug that prevented a number of properties, methods, etc. from being documented in `<sl-radio>` and `<sl-radio-button>`
- Fixed a bug that prevented `setCustomValidity()` from working with `<sl-radio-button>`
- Fixed a bug where the right border of a checked `<sl-radio-button>` was the wrong color
- Once again removed path aliasing because it doesn't work with Web Test Runner's esbuild plugin
## 2.0.0-beta.72 ## 2.0.0-beta.72
- 🚨 BREAKING: refactored parts in `<sl-input>`, `<sl-range>`, `<sl-select>`, and `<sl-textarea>` to allow you to customize the label and help text position - 🚨 BREAKING: refactored parts in `<sl-input>`, `<sl-range>`, `<sl-select>`, and `<sl-textarea>` to allow you to customize the label and help text position

321
package-lock.json wygenerowano
Wyświetl plik

@ -62,7 +62,9 @@
"sinon": "^13.0.1", "sinon": "^13.0.1",
"strip-css-comments": "^5.0.0", "strip-css-comments": "^5.0.0",
"tslib": "^2.3.1", "tslib": "^2.3.1",
"typescript": "4.5.5" "ttypescript": "^1.5.13",
"typescript": "4.5.5",
"typescript-transform-paths": "^3.3.1"
}, },
"engines": { "engines": {
"node": ">=14.17.0" "node": ">=14.17.0"
@ -505,6 +507,29 @@
"integrity": "sha512-/MB0RS0Gn01s4pgmjy0FvsLfr3RRMrRphEuvTRserNcM8XVtoIVAtrjig/Gg0DPwDrN8Clm0L1j7iQay6S8D0g==", "integrity": "sha512-/MB0RS0Gn01s4pgmjy0FvsLfr3RRMrRphEuvTRserNcM8XVtoIVAtrjig/Gg0DPwDrN8Clm0L1j7iQay6S8D0g==",
"dev": true "dev": true
}, },
"node_modules/@cspotcode/source-map-consumer": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/@cspotcode/source-map-consumer/-/source-map-consumer-0.8.0.tgz",
"integrity": "sha512-41qniHzTU8yAGbCp04ohlmSrZf8bkf/iJsl3V0dRGsQN/5GFfx+LbCSsCpp2gqrqjTVg/K6O8ycoV35JIwAzAg==",
"dev": true,
"peer": true,
"engines": {
"node": ">= 12"
}
},
"node_modules/@cspotcode/source-map-support": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.7.0.tgz",
"integrity": "sha512-X4xqRHqN8ACt2aHVe51OxeA2HjbcL4MqFqXkrmQszJ1NOUuUu5u6Vqx/0lZSVNku7velL5FC/s5uEAj1lsBMhA==",
"dev": true,
"peer": true,
"dependencies": {
"@cspotcode/source-map-consumer": "0.8.0"
},
"engines": {
"node": ">=12"
}
},
"node_modules/@custom-elements-manifest/analyzer": { "node_modules/@custom-elements-manifest/analyzer": {
"version": "0.5.7", "version": "0.5.7",
"resolved": "https://registry.npmjs.org/@custom-elements-manifest/analyzer/-/analyzer-0.5.7.tgz", "resolved": "https://registry.npmjs.org/@custom-elements-manifest/analyzer/-/analyzer-0.5.7.tgz",
@ -996,6 +1021,34 @@
"node": ">= 6" "node": ">= 6"
} }
}, },
"node_modules/@tsconfig/node10": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.8.tgz",
"integrity": "sha512-6XFfSQmMgq0CFLY1MslA/CPUfhIL919M1rMsa5lP2P097N2Wd1sSX0tx1u4olM16fLNhtHZpRhedZJphNJqmZg==",
"dev": true,
"peer": true
},
"node_modules/@tsconfig/node12": {
"version": "1.0.9",
"resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.9.tgz",
"integrity": "sha512-/yBMcem+fbvhSREH+s14YJi18sp7J9jpuhYByADT2rypfajMZZN4WQ6zBGgBKp53NKmqI36wFYDb3yaMPurITw==",
"dev": true,
"peer": true
},
"node_modules/@tsconfig/node14": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.1.tgz",
"integrity": "sha512-509r2+yARFfHHE7T6Puu2jjkoycftovhXRqW328PDXTVGKihlb1P8Z9mMZH04ebyajfRY7dedfGynlrFHJUQCg==",
"dev": true,
"peer": true
},
"node_modules/@tsconfig/node16": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.2.tgz",
"integrity": "sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA==",
"dev": true,
"peer": true
},
"node_modules/@types/accepts": { "node_modules/@types/accepts": {
"version": "1.3.5", "version": "1.3.5",
"resolved": "https://registry.npmjs.org/@types/accepts/-/accepts-1.3.5.tgz", "resolved": "https://registry.npmjs.org/@types/accepts/-/accepts-1.3.5.tgz",
@ -2027,6 +2080,16 @@
"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
} }
}, },
"node_modules/acorn-walk": {
"version": "8.2.0",
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
"integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
"dev": true,
"peer": true,
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/after": { "node_modules/after": {
"version": "0.8.2", "version": "0.8.2",
"resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz", "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz",
@ -2250,6 +2313,13 @@
"node": ">= 6" "node": ">= 6"
} }
}, },
"node_modules/arg": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
"integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
"dev": true,
"peer": true
},
"node_modules/argparse": { "node_modules/argparse": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@ -3727,6 +3797,13 @@
"node": ">=10" "node": ">=10"
} }
}, },
"node_modules/create-require": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
"integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
"dev": true,
"peer": true
},
"node_modules/cross-fetch": { "node_modules/cross-fetch": {
"version": "3.1.5", "version": "3.1.5",
"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz", "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
@ -9081,6 +9158,13 @@
"semver": "bin/semver.js" "semver": "bin/semver.js"
} }
}, },
"node_modules/make-error": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
"integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
"dev": true,
"peer": true
},
"node_modules/make-fetch-happen": { "node_modules/make-fetch-happen": {
"version": "9.1.0", "version": "9.1.0",
"resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-9.1.0.tgz", "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-9.1.0.tgz",
@ -13150,6 +13234,59 @@
"node": ">=0.8.0" "node": ">=0.8.0"
} }
}, },
"node_modules/ts-node": {
"version": "10.6.0",
"resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.6.0.tgz",
"integrity": "sha512-CJen6+dfOXolxudBQXnVjRVvYTmTWbyz7cn+xq2XTsvnaXbHqr4gXSCNbS2Jj8yTZMuGwUoBESLaOkLascVVvg==",
"dev": true,
"peer": true,
"dependencies": {
"@cspotcode/source-map-support": "0.7.0",
"@tsconfig/node10": "^1.0.7",
"@tsconfig/node12": "^1.0.7",
"@tsconfig/node14": "^1.0.0",
"@tsconfig/node16": "^1.0.2",
"acorn": "^8.4.1",
"acorn-walk": "^8.1.1",
"arg": "^4.1.0",
"create-require": "^1.1.0",
"diff": "^4.0.1",
"make-error": "^1.1.1",
"v8-compile-cache-lib": "^3.0.0",
"yn": "3.1.1"
},
"bin": {
"ts-node": "dist/bin.js",
"ts-node-cwd": "dist/bin-cwd.js",
"ts-node-script": "dist/bin-script.js",
"ts-node-transpile-only": "dist/bin-transpile.js",
"ts-script": "dist/bin-script-deprecated.js"
},
"peerDependencies": {
"@swc/core": ">=1.2.50",
"@swc/wasm": ">=1.2.50",
"@types/node": "*",
"typescript": ">=2.7"
},
"peerDependenciesMeta": {
"@swc/core": {
"optional": true
},
"@swc/wasm": {
"optional": true
}
}
},
"node_modules/ts-node/node_modules/diff": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
"integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
"dev": true,
"peer": true,
"engines": {
"node": ">=0.3.1"
}
},
"node_modules/tsconfig-paths": { "node_modules/tsconfig-paths": {
"version": "3.12.0", "version": "3.12.0",
"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz",
@ -13210,6 +13347,23 @@
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
"dev": true "dev": true
}, },
"node_modules/ttypescript": {
"version": "1.5.13",
"resolved": "https://registry.npmjs.org/ttypescript/-/ttypescript-1.5.13.tgz",
"integrity": "sha512-KT/RBfGGlVJFqEI8cVvI3nMsmYcFvPSZh8bU0qX+pAwbi7/ABmYkzn7l/K8skw0xmYjVCoyaV6WLsBQxdadybQ==",
"dev": true,
"dependencies": {
"resolve": ">=1.9.0"
},
"bin": {
"ttsc": "bin/tsc",
"ttsserver": "bin/tsserver"
},
"peerDependencies": {
"ts-node": ">=8.0.2",
"typescript": ">=3.2.2"
}
},
"node_modules/type-check": { "node_modules/type-check": {
"version": "0.4.0", "version": "0.4.0",
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@ -13278,6 +13432,18 @@
"node": ">=4.2.0" "node": ">=4.2.0"
} }
}, },
"node_modules/typescript-transform-paths": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/typescript-transform-paths/-/typescript-transform-paths-3.3.1.tgz",
"integrity": "sha512-c+8Cqd2rsRtTU68rJI0NX/OtqgBDddNs1fIxm1nCNyhn0WpoyqtpUxc1w9Ke5c5kgE4/OT5xYbKf2cf694RYEg==",
"dev": true,
"dependencies": {
"minimatch": "^3.0.4"
},
"peerDependencies": {
"typescript": ">=3.6.5"
}
},
"node_modules/typical": { "node_modules/typical": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/typical/-/typical-4.0.0.tgz", "resolved": "https://registry.npmjs.org/typical/-/typical-4.0.0.tgz",
@ -13566,6 +13732,13 @@
"integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==", "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
"dev": true "dev": true
}, },
"node_modules/v8-compile-cache-lib": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.0.tgz",
"integrity": "sha512-mpSYqfsFvASnSn5qMiwrr4VKfumbPyONLCOPmsR3A6pTY/r0+tSaVbgPWSAIuzbk3lCTa+FForeTiO+wBQGkjA==",
"dev": true,
"peer": true
},
"node_modules/v8-to-istanbul": { "node_modules/v8-to-istanbul": {
"version": "8.1.1", "version": "8.1.1",
"resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz", "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz",
@ -14113,6 +14286,16 @@
"node": ">= 4.0.0" "node": ">= 4.0.0"
} }
}, },
"node_modules/yn": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
"integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
"dev": true,
"peer": true,
"engines": {
"node": ">=6"
}
},
"node_modules/yocto-queue": { "node_modules/yocto-queue": {
"version": "0.1.0", "version": "0.1.0",
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@ -14523,6 +14706,23 @@
"integrity": "sha512-/MB0RS0Gn01s4pgmjy0FvsLfr3RRMrRphEuvTRserNcM8XVtoIVAtrjig/Gg0DPwDrN8Clm0L1j7iQay6S8D0g==", "integrity": "sha512-/MB0RS0Gn01s4pgmjy0FvsLfr3RRMrRphEuvTRserNcM8XVtoIVAtrjig/Gg0DPwDrN8Clm0L1j7iQay6S8D0g==",
"dev": true "dev": true
}, },
"@cspotcode/source-map-consumer": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/@cspotcode/source-map-consumer/-/source-map-consumer-0.8.0.tgz",
"integrity": "sha512-41qniHzTU8yAGbCp04ohlmSrZf8bkf/iJsl3V0dRGsQN/5GFfx+LbCSsCpp2gqrqjTVg/K6O8ycoV35JIwAzAg==",
"dev": true,
"peer": true
},
"@cspotcode/source-map-support": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.7.0.tgz",
"integrity": "sha512-X4xqRHqN8ACt2aHVe51OxeA2HjbcL4MqFqXkrmQszJ1NOUuUu5u6Vqx/0lZSVNku7velL5FC/s5uEAj1lsBMhA==",
"dev": true,
"peer": true,
"requires": {
"@cspotcode/source-map-consumer": "0.8.0"
}
},
"@custom-elements-manifest/analyzer": { "@custom-elements-manifest/analyzer": {
"version": "0.5.7", "version": "0.5.7",
"resolved": "https://registry.npmjs.org/@custom-elements-manifest/analyzer/-/analyzer-0.5.7.tgz", "resolved": "https://registry.npmjs.org/@custom-elements-manifest/analyzer/-/analyzer-0.5.7.tgz",
@ -14939,6 +15139,34 @@
"integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==", "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
"dev": true "dev": true
}, },
"@tsconfig/node10": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.8.tgz",
"integrity": "sha512-6XFfSQmMgq0CFLY1MslA/CPUfhIL919M1rMsa5lP2P097N2Wd1sSX0tx1u4olM16fLNhtHZpRhedZJphNJqmZg==",
"dev": true,
"peer": true
},
"@tsconfig/node12": {
"version": "1.0.9",
"resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.9.tgz",
"integrity": "sha512-/yBMcem+fbvhSREH+s14YJi18sp7J9jpuhYByADT2rypfajMZZN4WQ6zBGgBKp53NKmqI36wFYDb3yaMPurITw==",
"dev": true,
"peer": true
},
"@tsconfig/node14": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.1.tgz",
"integrity": "sha512-509r2+yARFfHHE7T6Puu2jjkoycftovhXRqW328PDXTVGKihlb1P8Z9mMZH04ebyajfRY7dedfGynlrFHJUQCg==",
"dev": true,
"peer": true
},
"@tsconfig/node16": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.2.tgz",
"integrity": "sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA==",
"dev": true,
"peer": true
},
"@types/accepts": { "@types/accepts": {
"version": "1.3.5", "version": "1.3.5",
"resolved": "https://registry.npmjs.org/@types/accepts/-/accepts-1.3.5.tgz", "resolved": "https://registry.npmjs.org/@types/accepts/-/accepts-1.3.5.tgz",
@ -15798,6 +16026,13 @@
"dev": true, "dev": true,
"requires": {} "requires": {}
}, },
"acorn-walk": {
"version": "8.2.0",
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
"integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
"dev": true,
"peer": true
},
"after": { "after": {
"version": "0.8.2", "version": "0.8.2",
"resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz", "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz",
@ -15973,6 +16208,13 @@
} }
} }
}, },
"arg": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
"integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
"dev": true,
"peer": true
},
"argparse": { "argparse": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@ -17119,6 +17361,13 @@
"yaml": "^1.10.0" "yaml": "^1.10.0"
} }
}, },
"create-require": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
"integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
"dev": true,
"peer": true
},
"cross-fetch": { "cross-fetch": {
"version": "3.1.5", "version": "3.1.5",
"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz", "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
@ -21122,6 +21371,13 @@
} }
} }
}, },
"make-error": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
"integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
"dev": true,
"peer": true
},
"make-fetch-happen": { "make-fetch-happen": {
"version": "9.1.0", "version": "9.1.0",
"resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-9.1.0.tgz", "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-9.1.0.tgz",
@ -24284,6 +24540,37 @@
} }
} }
}, },
"ts-node": {
"version": "10.6.0",
"resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.6.0.tgz",
"integrity": "sha512-CJen6+dfOXolxudBQXnVjRVvYTmTWbyz7cn+xq2XTsvnaXbHqr4gXSCNbS2Jj8yTZMuGwUoBESLaOkLascVVvg==",
"dev": true,
"peer": true,
"requires": {
"@cspotcode/source-map-support": "0.7.0",
"@tsconfig/node10": "^1.0.7",
"@tsconfig/node12": "^1.0.7",
"@tsconfig/node14": "^1.0.0",
"@tsconfig/node16": "^1.0.2",
"acorn": "^8.4.1",
"acorn-walk": "^8.1.1",
"arg": "^4.1.0",
"create-require": "^1.1.0",
"diff": "^4.0.1",
"make-error": "^1.1.1",
"v8-compile-cache-lib": "^3.0.0",
"yn": "3.1.1"
},
"dependencies": {
"diff": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
"integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
"dev": true,
"peer": true
}
}
},
"tsconfig-paths": { "tsconfig-paths": {
"version": "3.12.0", "version": "3.12.0",
"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz",
@ -24336,6 +24623,15 @@
} }
} }
}, },
"ttypescript": {
"version": "1.5.13",
"resolved": "https://registry.npmjs.org/ttypescript/-/ttypescript-1.5.13.tgz",
"integrity": "sha512-KT/RBfGGlVJFqEI8cVvI3nMsmYcFvPSZh8bU0qX+pAwbi7/ABmYkzn7l/K8skw0xmYjVCoyaV6WLsBQxdadybQ==",
"dev": true,
"requires": {
"resolve": ">=1.9.0"
}
},
"type-check": { "type-check": {
"version": "0.4.0", "version": "0.4.0",
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@ -24382,6 +24678,15 @@
"integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==", "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
"dev": true "dev": true
}, },
"typescript-transform-paths": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/typescript-transform-paths/-/typescript-transform-paths-3.3.1.tgz",
"integrity": "sha512-c+8Cqd2rsRtTU68rJI0NX/OtqgBDddNs1fIxm1nCNyhn0WpoyqtpUxc1w9Ke5c5kgE4/OT5xYbKf2cf694RYEg==",
"dev": true,
"requires": {
"minimatch": "^3.0.4"
}
},
"typical": { "typical": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/typical/-/typical-4.0.0.tgz", "resolved": "https://registry.npmjs.org/typical/-/typical-4.0.0.tgz",
@ -24592,6 +24897,13 @@
"integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==", "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
"dev": true "dev": true
}, },
"v8-compile-cache-lib": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.0.tgz",
"integrity": "sha512-mpSYqfsFvASnSn5qMiwrr4VKfumbPyONLCOPmsR3A6pTY/r0+tSaVbgPWSAIuzbk3lCTa+FForeTiO+wBQGkjA==",
"dev": true,
"peer": true
},
"v8-to-istanbul": { "v8-to-istanbul": {
"version": "8.1.1", "version": "8.1.1",
"resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz", "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz",
@ -25023,6 +25335,13 @@
"integrity": "sha512-faQrqNMzcPCHGVC2aaOINk13K+aaBDUPjGWl0teOXywElLjyVAB6Oe2jj62jHYtwsU49jXhScYbvPENK+6zAvQ==", "integrity": "sha512-faQrqNMzcPCHGVC2aaOINk13K+aaBDUPjGWl0teOXywElLjyVAB6Oe2jj62jHYtwsU49jXhScYbvPENK+6zAvQ==",
"dev": true "dev": true
}, },
"yn": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
"integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
"dev": true,
"peer": true
},
"yocto-queue": { "yocto-queue": {
"version": "0.1.0", "version": "0.1.0",
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

4
package.json
Wyświetl plik

@ -105,7 +105,9 @@
"sinon": "^13.0.1", "sinon": "^13.0.1",
"strip-css-comments": "^5.0.0", "strip-css-comments": "^5.0.0",
"tslib": "^2.3.1", "tslib": "^2.3.1",
"typescript": "4.5.5" "ttypescript": "^1.5.13",
"typescript": "4.5.5",
"typescript-transform-paths": "^3.3.1"
}, },
"lint-staged": { "lint-staged": {
"*.{ts,js}": [ "*.{ts,js}": [

2
scripts/build.js
Wyświetl plik

@ -34,7 +34,7 @@ fs.mkdirSync(outdir, { recursive: true });
execSync(`node scripts/make-icons.js --outdir "${outdir}"`, { stdio: 'inherit' }); execSync(`node scripts/make-icons.js --outdir "${outdir}"`, { stdio: 'inherit' });
if (types) { if (types) {
console.log('Running the TypeScript compiler...'); console.log('Running the TypeScript compiler...');
execSync(`tsc --project ./tsconfig.json --outdir "${outdir}"`, { stdio: 'inherit' }); execSync(`ttsc --project ./tsconfig.prod.json --outdir "${outdir}"`, { stdio: 'inherit' });
} }
} catch (err) { } catch (err) {
console.error(chalk.red(err)); console.error(chalk.red(err));

4
scripts/plop/templates/component/component.hbs
Wyświetl plik

@ -1,7 +1,7 @@
import { LitElement, html } from 'lit'; import { LitElement, html } from 'lit';
import { customElement, property } from 'lit/decorators.js'; import { customElement, property } from 'lit/decorators.js';
import { emit } from '../../internal/event'; import { emit } from '~/internal/event';
import { watch } from '../../internal/watch'; import { watch } from '~/internal/watch';
import styles from './{{ tagWithoutPrefix tag }}.styles'; import styles from './{{ tagWithoutPrefix tag }}.styles';
/** /**

2
scripts/plop/templates/component/styles.hbs
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

2
src/components/alert/alert.styles.ts
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

12
src/components/alert/alert.ts
Wyświetl plik

@ -1,12 +1,12 @@
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import { customElement, property, query } from 'lit/decorators.js'; import { customElement, property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'; import { classMap } from 'lit/directives/class-map.js';
import '../../components/icon-button/icon-button'; import '~/components/icon-button/icon-button';
import { animateTo, stopAnimations } from '../../internal/animate'; import { animateTo, stopAnimations } from '~/internal/animate';
import { emit, waitForEvent } from '../../internal/event'; import { emit, waitForEvent } from '~/internal/event';
import { HasSlotController } from '../../internal/slot'; import { HasSlotController } from '~/internal/slot';
import { watch } from '../../internal/watch'; import { watch } from '~/internal/watch';
import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry'; import { getAnimation, setDefaultAnimation } from '~/utilities/animation-registry';
import styles from './alert.styles'; import styles from './alert.styles';
const toastStack = Object.assign(document.createElement('div'), { className: 'sl-toast-stack' }); const toastStack = Object.assign(document.createElement('div'), { className: 'sl-toast-stack' });

2
src/components/animated-image/animated-image.styles.ts
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

6
src/components/animated-image/animated-image.ts
Wyświetl plik

@ -1,8 +1,8 @@
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js'; import { customElement, property, query, state } from 'lit/decorators.js';
import '../../components/icon/icon'; import '~/components/icon/icon';
import { emit } from '../../internal/event'; import { emit } from '~/internal/event';
import { watch } from '../../internal/watch'; import { watch } from '~/internal/watch';
import styles from './animated-image.styles'; import styles from './animated-image.styles';
/** /**

2
src/components/animation/animation.styles.ts
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

4
src/components/animation/animation.ts
Wyświetl plik

@ -1,7 +1,7 @@
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import { customElement, property, queryAsync } from 'lit/decorators.js'; import { customElement, property, queryAsync } from 'lit/decorators.js';
import { emit } from '../../internal/event'; import { emit } from '~/internal/event';
import { watch } from '../../internal/watch'; import { watch } from '~/internal/watch';
import styles from './animation.styles'; import styles from './animation.styles';
import { animations } from './animations'; import { animations } from './animations';

2
src/components/avatar/avatar.styles.ts
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

2
src/components/avatar/avatar.ts
Wyświetl plik

@ -1,7 +1,7 @@
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import { customElement, property, state } from 'lit/decorators.js'; import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'; import { classMap } from 'lit/directives/class-map.js';
import '../../components/icon/icon'; import '~/components/icon/icon';
import styles from './avatar.styles'; import styles from './avatar.styles';
/** /**

2
src/components/badge/badge.styles.ts
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

4
src/components/breadcrumb-item/breadcrumb-item.styles.ts
Wyświetl plik

@ -1,6 +1,6 @@
import { css } from 'lit'; import { css } from 'lit';
import { focusVisibleSelector } from '../../internal/focus-visible'; import { focusVisibleSelector } from '~/internal/focus-visible';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

2
src/components/breadcrumb-item/breadcrumb-item.ts
Wyświetl plik

@ -2,7 +2,7 @@ import { html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js'; import { customElement, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'; import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js'; import { ifDefined } from 'lit/directives/if-defined.js';
import { HasSlotController } from '../../internal/slot'; import { HasSlotController } from '~/internal/slot';
import styles from './breadcrumb-item.styles'; import styles from './breadcrumb-item.styles';
/** /**

2
src/components/breadcrumb/breadcrumb.styles.ts
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

6
src/components/breadcrumb/breadcrumb.ts
Wyświetl plik

@ -1,13 +1,13 @@
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import { customElement, property, query } from 'lit/decorators.js'; import { customElement, property, query } from 'lit/decorators.js';
import '../../components/icon/icon'; import type SlBreadcrumbItem from '~/components/breadcrumb-item/breadcrumb-item';
import '~/components/icon/icon';
import styles from './breadcrumb.styles'; import styles from './breadcrumb.styles';
import type SlBreadcrumbItem from '../../components/breadcrumb-item/breadcrumb-item';
/** /**
* @since 2.0 * @since 2.0
*
* @status stable * @status stable
*
* @slot - One or more breadcrumb items to display. * @slot - One or more breadcrumb items to display.
* @slot separator - The separator to use between breadcrumb items. * @slot separator - The separator to use between breadcrumb items.
* *

2
src/components/button-group/button-group.styles.ts
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

9
src/components/button/button.styles.ts
Wyświetl plik

@ -1,6 +1,6 @@
import { css } from 'lit'; import { css } from 'lit';
import { focusVisibleSelector } from '../../internal/focus-visible'; import { focusVisibleSelector } from '~/internal/focus-visible';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}
@ -632,13 +632,12 @@ export default css`
mix-blend-mode: multiply; mix-blend-mode: multiply;
} }
/* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */ /* Bump focused buttons up so their focus ring isn't clipped */
:host(.sl-button-group__button--hover) { :host(.sl-button-group__button--hover) {
z-index: 1; z-index: 1;
} }
:host(.sl-button-group__button--focus), :host(.sl-button-group__button--focus) {
:host(.sl-button-group__button[checked]) {
z-index: 2; z-index: 2;
} }
`; `;

16
src/components/button/button.test.ts
Wyświetl plik

@ -2,19 +2,13 @@ import { expect, fixture, html } from '@open-wc/testing';
import sinon from 'sinon'; import sinon from 'sinon';
import type SlButton from './button'; import type SlButton from './button';
const variants = ['default', 'primary', 'success', 'neutral', 'warning', 'danger'];
describe('<sl-button>', () => { describe('<sl-button>', () => {
describe('accessibility tests', () => {
variants.forEach(variant => {
it(`is should be accessible when variant is "${variant}"`, async () => {
const el = await fixture<SlButton>(html` <sl-button variant="${variant}"> Button Label </sl-button> `);
await expect(el).to.be.accessible();
});
});
});
describe('when provided no parameters', () => { describe('when provided no parameters', () => {
it('passes accessibility test', async () => {
const el = await fixture<SlButton>(html` <sl-button>Button Label</sl-button> `);
await expect(el).to.be.accessible();
});
it('default values are set correctly', async () => { it('default values are set correctly', async () => {
const el = await fixture<SlButton>(html` <sl-button>Button Label</sl-button> `); const el = await fixture<SlButton>(html` <sl-button>Button Label</sl-button> `);

8
src/components/button/button.ts
Wyświetl plik

@ -3,10 +3,10 @@ import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'; import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js'; import { ifDefined } from 'lit/directives/if-defined.js';
import { html, literal } from 'lit/static-html.js'; import { html, literal } from 'lit/static-html.js';
import '../../components/spinner/spinner'; import '~/components/spinner/spinner';
import { emit } from '../../internal/event'; import { emit } from '~/internal/event';
import { FormSubmitController } from '../../internal/form'; import { FormSubmitController } from '~/internal/form';
import { HasSlotController } from '../../internal/slot'; import { HasSlotController } from '~/internal/slot';
import styles from './button.styles'; import styles from './button.styles';
/** /**

2
src/components/card/card.styles.ts
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

2
src/components/card/card.ts
Wyświetl plik

@ -1,7 +1,7 @@
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js'; import { customElement } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'; import { classMap } from 'lit/directives/class-map.js';
import { HasSlotController } from '../../internal/slot'; import { HasSlotController } from '~/internal/slot';
import styles from './card.styles'; import styles from './card.styles';
/** /**

4
src/components/checkbox/checkbox.styles.ts
Wyświetl plik

@ -1,6 +1,6 @@
import { css } from 'lit'; import { css } from 'lit';
import { focusVisibleSelector } from '../../internal/focus-visible'; import { focusVisibleSelector } from '~/internal/focus-visible';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

48
src/components/checkbox/checkbox.test.ts
Wyświetl plik

@ -1,6 +1,5 @@
import { aTimeout, expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing'; import { expect, fixture, html, oneEvent } from '@open-wc/testing';
import { sendKeys } from '@web/test-runner-commands'; import { sendKeys } from '@web/test-runner-commands';
import sinon from 'sinon';
import type SlCheckbox from './checkbox'; import type SlCheckbox from './checkbox';
describe('<sl-checkbox>', () => { describe('<sl-checkbox>', () => {
@ -43,49 +42,4 @@ describe('<sl-checkbox>', () => {
el.checked = false; el.checked = false;
await el.updateComplete; await el.updateComplete;
}); });
describe('when submitting a form', () => {
it('should submit the correct value', async () => {
const form = await fixture<HTMLFormElement>(html`
<form>
<sl-checkbox name="a" value="1" checked></sl-checkbox>
<sl-button type="submit">Submit</sl-button>
</form>
`);
const button = form.querySelector('sl-button')!;
const submitHandler = sinon.spy((event: SubmitEvent) => {
formData = new FormData(form);
event.preventDefault();
});
let formData: FormData;
form.addEventListener('submit', submitHandler);
button.click();
await waitUntil(() => submitHandler.calledOnce);
expect(formData!.get('a')).to.equal('1');
});
it('should show a constraint validation error when setCustomValidity() is called', async () => {
const form = await fixture<HTMLFormElement>(html`
<form>
<sl-checkbox name="a" value="1" checked></sl-checkbox>
<sl-button type="submit">Submit</sl-button>
</form>
`);
const button = form.querySelector('sl-button')!;
const checkbox = form.querySelector('sl-checkbox')!;
const submitHandler = sinon.spy((event: SubmitEvent) => event.preventDefault());
// Submitting the form after setting custom validity should not trigger the handler
checkbox.setCustomValidity('Invalid selection');
form.addEventListener('submit', submitHandler);
button.click();
await aTimeout(100);
expect(submitHandler).to.not.have.been.called;
});
});
}); });

6
src/components/checkbox/checkbox.ts
Wyświetl plik

@ -3,9 +3,9 @@ import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'; import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js'; import { ifDefined } from 'lit/directives/if-defined.js';
import { live } from 'lit/directives/live.js'; import { live } from 'lit/directives/live.js';
import { emit } from '../../internal/event'; import { emit } from '~/internal/event';
import { FormSubmitController } from '../../internal/form'; import { FormSubmitController } from '~/internal/form';
import { watch } from '../../internal/watch'; import { watch } from '~/internal/watch';
import styles from './checkbox.styles'; import styles from './checkbox.styles';
/** /**

4
src/components/color-picker/color-picker.styles.ts
Wyświetl plik

@ -1,6 +1,6 @@
import { css } from 'lit'; import { css } from 'lit';
import { focusVisibleSelector } from '../../internal/focus-visible'; import { focusVisibleSelector } from '~/internal/focus-visible';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

28
src/components/color-picker/color-picker.ts
Wyświetl plik

@ -5,21 +5,21 @@ import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js'; import { ifDefined } from 'lit/directives/if-defined.js';
import { live } from 'lit/directives/live.js'; import { live } from 'lit/directives/live.js';
import { styleMap } from 'lit/directives/style-map.js'; import { styleMap } from 'lit/directives/style-map.js';
import '../../components/button-group/button-group'; import '~/components/button-group/button-group';
import '../../components/button/button'; import '~/components/button/button';
import '../../components/dropdown/dropdown'; import '~/components/dropdown/dropdown';
import '../../components/icon/icon'; import type SlDropdown from '~/components/dropdown/dropdown';
import '../../components/input/input'; import '~/components/icon/icon';
import '../../components/visually-hidden/visually-hidden'; import '~/components/input/input';
import { drag } from '../../internal/drag'; import type SlInput from '~/components/input/input';
import { emit } from '../../internal/event'; import '~/components/visually-hidden/visually-hidden';
import { FormSubmitController } from '../../internal/form'; import { drag } from '~/internal/drag';
import { clamp } from '../../internal/math'; import { emit } from '~/internal/event';
import { watch } from '../../internal/watch'; import { FormSubmitController } from '~/internal/form';
import { LocalizeController } from '../../utilities/localize'; import { clamp } from '~/internal/math';
import { watch } from '~/internal/watch';
import { LocalizeController } from '~/utilities/localize';
import styles from './color-picker.styles'; import styles from './color-picker.styles';
import type SlDropdown from '../../components/dropdown/dropdown';
import type SlInput from '../../components/input/input';
const hasEyeDropper = 'EyeDropper' in window; const hasEyeDropper = 'EyeDropper' in window;

4
src/components/details/details.styles.ts
Wyświetl plik

@ -1,6 +1,6 @@
import { css } from 'lit'; import { css } from 'lit';
import { focusVisibleSelector } from '../../internal/focus-visible'; import { focusVisibleSelector } from '~/internal/focus-visible';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

10
src/components/details/details.ts
Wyświetl plik

@ -1,11 +1,11 @@
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import { customElement, property, query } from 'lit/decorators.js'; import { customElement, property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'; import { classMap } from 'lit/directives/class-map.js';
import '../../components/icon/icon'; import '~/components/icon/icon';
import { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../../internal/animate'; import { animateTo, shimKeyframesHeightAuto, stopAnimations } from '~/internal/animate';
import { emit, waitForEvent } from '../../internal/event'; import { emit, waitForEvent } from '~/internal/event';
import { watch } from '../../internal/watch'; import { watch } from '~/internal/watch';
import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry'; import { getAnimation, setDefaultAnimation } from '~/utilities/animation-registry';
import styles from './details.styles'; import styles from './details.styles';
/** /**

2
src/components/dialog/dialog.styles.ts
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

18
src/components/dialog/dialog.ts
Wyświetl plik

@ -2,15 +2,15 @@ import { html, LitElement } from 'lit';
import { customElement, property, query } from 'lit/decorators.js'; import { customElement, property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'; import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js'; import { ifDefined } from 'lit/directives/if-defined.js';
import '../../components/icon-button/icon-button'; import '~/components/icon-button/icon-button';
import { animateTo, stopAnimations } from '../../internal/animate'; import { animateTo, stopAnimations } from '~/internal/animate';
import { emit, waitForEvent } from '../../internal/event'; import { emit, waitForEvent } from '~/internal/event';
import Modal from '../../internal/modal'; import Modal from '~/internal/modal';
import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll'; import { lockBodyScrolling, unlockBodyScrolling } from '~/internal/scroll';
import { HasSlotController } from '../../internal/slot'; import { HasSlotController } from '~/internal/slot';
import { watch } from '../../internal/watch'; import { watch } from '~/internal/watch';
import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry'; import { getAnimation, setDefaultAnimation } from '~/utilities/animation-registry';
import { LocalizeController } from '../../utilities/localize'; import { LocalizeController } from '~/utilities/localize';
import styles from './dialog.styles'; import styles from './dialog.styles';
/** /**

2
src/components/divider/divider.styles.ts
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

2
src/components/divider/divider.ts
Wyświetl plik

@ -1,6 +1,6 @@
import { LitElement } from 'lit'; import { LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js'; import { customElement, property } from 'lit/decorators.js';
import { watch } from '../../internal/watch'; import { watch } from '~/internal/watch';
import styles from './divider.styles'; import styles from './divider.styles';
/** /**

2
src/components/drawer/drawer.styles.ts
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

20
src/components/drawer/drawer.ts
Wyświetl plik

@ -2,16 +2,16 @@ import { html, LitElement } from 'lit';
import { customElement, property, query } from 'lit/decorators.js'; import { customElement, property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'; import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js'; import { ifDefined } from 'lit/directives/if-defined.js';
import '../../components/icon-button/icon-button'; import '~/components/icon-button/icon-button';
import { animateTo, stopAnimations } from '../../internal/animate'; import { animateTo, stopAnimations } from '~/internal/animate';
import { emit, waitForEvent } from '../../internal/event'; import { emit, waitForEvent } from '~/internal/event';
import Modal from '../../internal/modal'; import Modal from '~/internal/modal';
import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll'; import { lockBodyScrolling, unlockBodyScrolling } from '~/internal/scroll';
import { HasSlotController } from '../../internal/slot'; import { HasSlotController } from '~/internal/slot';
import { uppercaseFirstLetter } from '../../internal/string'; import { uppercaseFirstLetter } from '~/internal/string';
import { watch } from '../../internal/watch'; import { watch } from '~/internal/watch';
import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry'; import { getAnimation, setDefaultAnimation } from '~/utilities/animation-registry';
import { LocalizeController } from '../../utilities/localize'; import { LocalizeController } from '~/utilities/localize';
import styles from './drawer.styles'; import styles from './drawer.styles';
/** /**

2
src/components/dropdown/dropdown.styles.ts
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

20
src/components/dropdown/dropdown.ts
Wyświetl plik

@ -2,17 +2,17 @@ import { autoUpdate, computePosition, flip, offset, shift, size } from '@floatin
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import { customElement, property, query } from 'lit/decorators.js'; import { customElement, property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'; import { classMap } from 'lit/directives/class-map.js';
import { animateTo, stopAnimations } from '../../internal/animate'; import type SlButton from '~/components/button/button';
import { emit, waitForEvent } from '../../internal/event'; import type SlIconButton from '~/components/icon-button/icon-button';
import { scrollIntoView } from '../../internal/scroll'; import type SlMenuItem from '~/components/menu-item/menu-item';
import { getTabbableBoundary } from '../../internal/tabbable'; import type SlMenu from '~/components/menu/menu';
import { watch } from '../../internal/watch'; import { animateTo, stopAnimations } from '~/internal/animate';
import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry'; import { emit, waitForEvent } from '~/internal/event';
import { scrollIntoView } from '~/internal/scroll';
import { getTabbableBoundary } from '~/internal/tabbable';
import { watch } from '~/internal/watch';
import { getAnimation, setDefaultAnimation } from '~/utilities/animation-registry';
import styles from './dropdown.styles'; import styles from './dropdown.styles';
import type SlButton from '../../components/button/button';
import type SlIconButton from '../../components/icon-button/icon-button';
import type SlMenuItem from '../../components/menu-item/menu-item';
import type SlMenu from '../../components/menu/menu';
/** /**
* @since 2.0 * @since 2.0

2
src/components/format-bytes/format-bytes.ts
Wyświetl plik

@ -1,6 +1,6 @@
import { LitElement } from 'lit'; import { LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js'; import { customElement, property } from 'lit/decorators.js';
import { LocalizeController } from '../../utilities/localize'; import { LocalizeController } from '~/utilities/localize';
/** /**

2
src/components/format-date/format-date.ts
Wyświetl plik

@ -1,6 +1,6 @@
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js'; import { customElement, property } from 'lit/decorators.js';
import { LocalizeController } from '../../utilities/localize'; import { LocalizeController } from '~/utilities/localize';
/** /**
* @since 2.0 * @since 2.0

2
src/components/format-number/format-number.ts
Wyświetl plik

@ -1,6 +1,6 @@
import { LitElement } from 'lit'; import { LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js'; import { customElement, property } from 'lit/decorators.js';
import { LocalizeController } from '../../utilities/localize'; import { LocalizeController } from '~/utilities/localize';
/** /**
* @since 2.0 * @since 2.0

4
src/components/icon-button/icon-button.styles.ts
Wyświetl plik

@ -1,6 +1,6 @@
import { css } from 'lit'; import { css } from 'lit';
import { focusVisibleSelector } from '../../internal/focus-visible'; import { focusVisibleSelector } from '~/internal/focus-visible';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

2
src/components/icon-button/icon-button.ts
Wyświetl plik

@ -2,7 +2,7 @@ import { html, LitElement } from 'lit';
import { customElement, property, query } from 'lit/decorators.js'; import { customElement, property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'; import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js'; import { ifDefined } from 'lit/directives/if-defined.js';
import '../../components/icon/icon'; import '~/components/icon/icon';
import styles from './icon-button.styles'; import styles from './icon-button.styles';
/** /**

2
src/components/icon/icon.styles.ts
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

2
src/components/icon/icon.test.ts
Wyświetl plik

@ -1,4 +1,6 @@
/* eslint-disable no-restricted-imports */
import { elementUpdated, expect, fixture, html, oneEvent } from '@open-wc/testing'; import { elementUpdated, expect, fixture, html, oneEvent } from '@open-wc/testing';
/* @ts-expect-error - TODO - switch to path aliases when Web Test Runner's esbuild plugin allows it */
import { registerIconLibrary } from '../../../dist/shoelace.js'; import { registerIconLibrary } from '../../../dist/shoelace.js';
import type SlIcon from './icon'; import type SlIcon from './icon';

4
src/components/icon/icon.ts
Wyświetl plik

@ -2,8 +2,8 @@ import { html, LitElement } from 'lit';
import { customElement, property, state } from 'lit/decorators.js'; import { customElement, property, state } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js'; import { ifDefined } from 'lit/directives/if-defined.js';
import { unsafeSVG } from 'lit/directives/unsafe-svg.js'; import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
import { emit } from '../../internal/event'; import { emit } from '~/internal/event';
import { watch } from '../../internal/watch'; import { watch } from '~/internal/watch';
import styles from './icon.styles'; import styles from './icon.styles';
import { getIconLibrary, unwatchIcon, watchIcon } from './library'; import { getIconLibrary, unwatchIcon, watchIcon } from './library';
import { requestIcon } from './request'; import { requestIcon } from './request';

2
src/components/icon/library.default.ts
Wyświetl plik

@ -1,4 +1,4 @@
import { getBasePath } from '../../utilities/base-path'; import { getBasePath } from '~/utilities/base-path';
import type { IconLibrary } from './library'; import type { IconLibrary } from './library';
const library: IconLibrary = { const library: IconLibrary = {

2
src/components/icon/library.ts
Wyświetl plik

@ -1,6 +1,6 @@
import type SlIcon from '~/components/icon/icon';
import defaultLibrary from './library.default'; import defaultLibrary from './library.default';
import systemLibrary from './library.system'; import systemLibrary from './library.system';
import type SlIcon from '../../components/icon/icon';
export type IconLibraryResolver = (name: string) => string; export type IconLibraryResolver = (name: string) => string;
export type IconLibraryMutator = (svg: SVGElement) => void; export type IconLibraryMutator = (svg: SVGElement) => void;

2
src/components/icon/request.ts
Wyświetl plik

@ -1,4 +1,4 @@
import { requestInclude } from '../../components/include/request'; import { requestInclude } from '~/components/include/request';
type IconFile = type IconFile =
| { | {

4
src/components/image-comparer/image-comparer.styles.ts
Wyświetl plik

@ -1,6 +1,6 @@
import { css } from 'lit'; import { css } from 'lit';
import { focusVisibleSelector } from '../../internal/focus-visible'; import { focusVisibleSelector } from '~/internal/focus-visible';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

10
src/components/image-comparer/image-comparer.ts
Wyświetl plik

@ -1,11 +1,11 @@
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import { customElement, property, query } from 'lit/decorators.js'; import { customElement, property, query } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js'; import { styleMap } from 'lit/directives/style-map.js';
import '../../components/icon/icon'; import '~/components/icon/icon';
import { drag } from '../../internal/drag'; import { drag } from '~/internal/drag';
import { emit } from '../../internal/event'; import { emit } from '~/internal/event';
import { clamp } from '../../internal/math'; import { clamp } from '~/internal/math';
import { watch } from '../../internal/watch'; import { watch } from '~/internal/watch';
import styles from './image-comparer.styles'; import styles from './image-comparer.styles';
/** /**

2
src/components/include/include.styles.ts
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

4
src/components/include/include.ts
Wyświetl plik

@ -1,7 +1,7 @@
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js'; import { customElement, property } from 'lit/decorators.js';
import { emit } from '../../internal/event'; import { emit } from '~/internal/event';
import { watch } from '../../internal/watch'; import { watch } from '~/internal/watch';
import styles from './include.styles'; import styles from './include.styles';
import { requestInclude } from './request'; import { requestInclude } from './request';

4
src/components/input/input.styles.ts
Wyświetl plik

@ -1,6 +1,6 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
import formControlStyles from '../../styles/form-control.styles'; import formControlStyles from '~/styles/form-control.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

1
src/components/input/input.test.ts
Wyświetl plik

@ -1,6 +1,7 @@
import { expect, fixture, html, waitUntil } from '@open-wc/testing'; import { expect, fixture, html, waitUntil } from '@open-wc/testing';
import { sendKeys } from '@web/test-runner-commands'; import { sendKeys } from '@web/test-runner-commands';
import sinon from 'sinon'; import sinon from 'sinon';
// eslint-disable-next-line no-restricted-imports
import { serialize } from '../../utilities/form'; import { serialize } from '../../utilities/form';
import type SlInput from './input'; import type SlInput from './input';

10
src/components/input/input.ts
Wyświetl plik

@ -3,11 +3,11 @@ import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'; import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js'; import { ifDefined } from 'lit/directives/if-defined.js';
import { live } from 'lit/directives/live.js'; import { live } from 'lit/directives/live.js';
import '../../components/icon/icon'; import '~/components/icon/icon';
import { emit } from '../../internal/event'; import { emit } from '~/internal/event';
import { FormSubmitController } from '../../internal/form'; import { FormSubmitController } from '~/internal/form';
import { HasSlotController } from '../../internal/slot'; import { HasSlotController } from '~/internal/slot';
import { watch } from '../../internal/watch'; import { watch } from '~/internal/watch';
import styles from './input.styles'; import styles from './input.styles';
/** /**

4
src/components/menu-item/menu-item.styles.ts
Wyświetl plik

@ -1,6 +1,6 @@
import { css } from 'lit'; import { css } from 'lit';
import { focusVisibleSelector } from '../../internal/focus-visible'; import { focusVisibleSelector } from '~/internal/focus-visible';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

4
src/components/menu-item/menu-item.ts
Wyświetl plik

@ -1,8 +1,8 @@
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import { customElement, property, query } from 'lit/decorators.js'; import { customElement, property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'; import { classMap } from 'lit/directives/class-map.js';
import '../../components/icon/icon'; import '~/components/icon/icon';
import { watch } from '../../internal/watch'; import { watch } from '~/internal/watch';
import styles from './menu-item.styles'; import styles from './menu-item.styles';
/** /**

2
src/components/menu-label/menu-label.styles.ts
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

2
src/components/menu/menu.styles.ts
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

8
src/components/menu/menu.ts
Wyświetl plik

@ -1,10 +1,10 @@
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import { customElement, query } from 'lit/decorators.js'; import { customElement, query } from 'lit/decorators.js';
import { emit } from '../../internal/event'; import type SlMenuItem from '~/components/menu-item/menu-item';
import { hasFocusVisible } from '../../internal/focus-visible'; import { emit } from '~/internal/event';
import { getTextContent } from '../../internal/slot'; import { hasFocusVisible } from '~/internal/focus-visible';
import { getTextContent } from '~/internal/slot';
import styles from './menu.styles'; import styles from './menu.styles';
import type SlMenuItem from '../../components/menu-item/menu-item';
export interface MenuSelectEventDetail { export interface MenuSelectEventDetail {
item: SlMenuItem; item: SlMenuItem;
} }

2
src/components/mutation-observer/mutation-observer.styles.ts
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

4
src/components/mutation-observer/mutation-observer.ts
Wyświetl plik

@ -1,7 +1,7 @@
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js'; import { customElement, property } from 'lit/decorators.js';
import { emit } from '../../internal/event'; import { emit } from '~/internal/event';
import { watch } from '../../internal/watch'; import { watch } from '~/internal/watch';
import styles from './mutation-observer.styles'; import styles from './mutation-observer.styles';
/** /**

2
src/components/progress-bar/progress-bar.styles.ts
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

2
src/components/progress-bar/progress-bar.ts
Wyświetl plik

@ -3,7 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'; import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js'; import { ifDefined } from 'lit/directives/if-defined.js';
import { styleMap } from 'lit/directives/style-map.js'; import { styleMap } from 'lit/directives/style-map.js';
import { LocalizeController } from '../../utilities/localize'; import { LocalizeController } from '~/utilities/localize';
import styles from './progress-bar.styles'; import styles from './progress-bar.styles';
/** /**

2
src/components/progress-ring/progress-ring.styles.ts
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

2
src/components/progress-ring/progress-ring.ts
Wyświetl plik

@ -1,6 +1,6 @@
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js'; import { customElement, property, query, state } from 'lit/decorators.js';
import { LocalizeController } from '../../utilities/localize'; import { LocalizeController } from '~/utilities/localize';
import styles from './progress-ring.styles'; import styles from './progress-ring.styles';
/** /**

2
src/components/qr-code/qr-code.styles.ts
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

2
src/components/qr-code/qr-code.ts
Wyświetl plik

@ -2,7 +2,7 @@ import { html, LitElement } from 'lit';
import { customElement, property, query } from 'lit/decorators.js'; import { customElement, property, query } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js'; import { styleMap } from 'lit/directives/style-map.js';
import QrCreator from 'qr-creator'; import QrCreator from 'qr-creator';
import { watch } from '../../internal/watch'; import { watch } from '~/internal/watch';
import styles from './qr-code.styles'; import styles from './qr-code.styles';
/** /**

25
src/components/radio-button/radio-button.styles.ts
Wyświetl plik

@ -1,25 +0,0 @@
import { css } from 'lit';
import buttonStyles from '../button/button.styles';
export default css`
${buttonStyles}
label {
display: inline-block;
position: relative;
}
/* We use a hidden input so constraint validation errors work, since they don't appear to show when used with buttons.
We can't actually hide it, though, otherwise the messages will be suppressed by the browser. */
.hidden-input {
all: unset;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
outline: dotted 1px red;
opacity: 0;
z-index: -1;
}
`;

30
src/components/radio-button/radio-button.test.ts
Wyświetl plik

@ -1,7 +1,7 @@
import { aTimeout, expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing'; import { expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
import { sendKeys } from '@web/test-runner-commands'; import { sendKeys } from '@web/test-runner-commands';
import sinon from 'sinon'; import sinon from 'sinon';
import type SlRadioGroup from '../../components/radio-group/radio-group'; import type SlRadioGroup from '~/components/radio-group/radio-group';
import type SlRadioButton from './radio-button'; import type SlRadioButton from './radio-button';
describe('<sl-radio-button>', () => { describe('<sl-radio-button>', () => {
@ -74,7 +74,7 @@ describe('<sl-radio-button>', () => {
<sl-radio-group> <sl-radio-group>
<sl-radio-button id="radio-1" name="a" value="1" checked></sl-radio-button> <sl-radio-button id="radio-1" name="a" value="1" checked></sl-radio-button>
<sl-radio-button id="radio-2" name="a" value="2"></sl-radio-button> <sl-radio-button id="radio-2" name="a" value="2"></sl-radio-button>
<sl-radio-button id="radio-3" name="a" value="3"></sl-radio-button> <sl-radio-button id="radio-2" name="a" value="3"></sl-radio-button>
</sl-radio-group> </sl-radio-group>
<sl-button type="submit">Submit</sl-button> <sl-button type="submit">Submit</sl-button>
</form> </form>
@ -95,29 +95,5 @@ describe('<sl-radio-button>', () => {
expect(formData!.get('a')).to.equal('2'); expect(formData!.get('a')).to.equal('2');
}); });
it('should show a constraint validation error when setCustomValidity() is called', async () => {
const form = await fixture<HTMLFormElement>(html`
<form>
<sl-radio-group>
<sl-radio-button id="radio-1" name="a" value="1" checked></sl-radio-button>
<sl-radio-button id="radio-2" name="a" value="2"></sl-radio-button>
</sl-radio-group>
<sl-button type="submit">Submit</sl-button>
</form>
`);
const button = form.querySelector('sl-button')!;
const radio = form.querySelectorAll('sl-radio-button')[1]!;
const submitHandler = sinon.spy((event: SubmitEvent) => event.preventDefault());
// Submitting the form after setting custom validity should not trigger the handler
radio.setCustomValidity('Invalid selection');
form.addEventListener('submit', submitHandler);
button.click();
await aTimeout(100);
expect(submitHandler).to.not.have.been.called;
});
}); });
}); });

195
src/components/radio-button/radio-button.ts
Wyświetl plik

@ -1,13 +1,10 @@
import { LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js';
import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'; import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js'; import { ifDefined } from 'lit/directives/if-defined.js';
import { html } from 'lit/static-html.js'; import { html } from 'lit/static-html.js';
import { emit } from '../../internal/event'; import styles from '~/components/button/button.styles';
import { FormSubmitController } from '../../internal/form'; import RadioBase from '~/internal/radio';
import { HasSlotController } from '../../internal/slot'; import { HasSlotController } from '~/internal/slot';
import { watch } from '../../internal/watch';
import styles from './radio-button.styles';
/** /**
* @since 2.0 * @since 2.0
@ -24,109 +21,16 @@ import styles from './radio-button.styles';
* @slot suffix - Used to append an icon or similar element to the button. * @slot suffix - Used to append an icon or similar element to the button.
* *
* @csspart base - The component's internal wrapper. * @csspart base - The component's internal wrapper.
* @csspart button - The internal button element.
* @csspart prefix - The prefix slot's container. * @csspart prefix - The prefix slot's container.
* @csspart label - The button's label. * @csspart label - The button's label.
* @csspart suffix - The suffix slot's container. * @csspart suffix - The suffix slot's container.
*/ */
@customElement('sl-radio-button') @customElement('sl-radio-button')
export default class SlRadioButton extends LitElement { export default class SlRadioButton extends RadioBase {
static styles = styles; static styles = styles;
@query('.button') input: HTMLInputElement;
@query('.hidden-input') hiddenInput: HTMLInputElement;
protected readonly formSubmitController = new FormSubmitController(this, {
value: (control: SlRadioButton) => (control.checked ? control.value : undefined)
});
private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix'); private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
@state() protected hasFocus = false;
/** The radio's name attribute. */
@property() name: string;
/** The radio's value attribute. */
@property() value: string;
/** Disables the radio. */
@property({ type: Boolean, reflect: true }) disabled = false;
/** Draws the radio in a checked state. */
@property({ type: Boolean, reflect: true }) checked = false;
/**
* This will be true when the control is in an invalid state. Validity in radios is determined by the message provided
* by the `setCustomValidity` method.
*/
@property({ type: Boolean, reflect: true }) invalid = false;
connectedCallback(): void {
super.connectedCallback();
this.setAttribute('role', 'radio');
}
/** Simulates a click on the radio. */
click() {
this.input.click();
}
/** Sets focus on the radio. */
focus(options?: FocusOptions) {
this.input.focus(options);
}
/** Removes focus from the radio. */
blur() {
this.input.blur();
}
/** Checks for validity and shows the browser's validation message if the control is invalid. */
reportValidity() {
return this.hiddenInput.reportValidity();
}
/** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
setCustomValidity(message: string) {
this.hiddenInput.setCustomValidity(message);
}
handleBlur() {
this.hasFocus = false;
emit(this, 'sl-blur');
}
handleClick() {
if (!this.disabled) {
this.checked = true;
}
}
handleFocus() {
this.hasFocus = true;
emit(this, 'sl-focus');
}
@watch('checked')
handleCheckedChange() {
this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
if (this.hasUpdated) {
emit(this, 'sl-change');
}
}
@watch('disabled', { waitUntilFirstUpdate: true })
handleDisabledChange() {
this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
// Disabled form controls are always valid, so we need to recheck validity when the state changes
if (this.hasUpdated) {
this.input.disabled = this.disabled;
this.invalid = !this.input.checkValidity();
}
}
/** The button's variant. */ /** The button's variant. */
@property({ reflect: true }) variant: 'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = @property({ reflect: true }) variant: 'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' =
'default'; 'default';
@ -134,54 +38,57 @@ export default class SlRadioButton extends LitElement {
/** The button's size. */ /** The button's size. */
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium'; @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
/**
* This will be true when the control is in an invalid state. Validity in radio buttons is determined by the message
* provided by the `setCustomValidity` method.
*/
@property({ type: Boolean, reflect: true }) invalid = false;
/** Draws a pill-style button with rounded edges. */ /** Draws a pill-style button with rounded edges. */
@property({ type: Boolean, reflect: true }) pill = false; @property({ type: Boolean, reflect: true }) pill = false;
render() { render() {
return html` return html`
<div part="base"> <button
<input class="hidden-input" type="radio" aria-hidden="true" tabindex="-1" /> part="base"
<button class=${classMap({
part="button" button: true,
class=${classMap({ 'button--default': this.variant === 'default',
button: true, 'button--primary': this.variant === 'primary',
'button--default': this.variant === 'default', 'button--success': this.variant === 'success',
'button--primary': this.variant === 'primary', 'button--neutral': this.variant === 'neutral',
'button--success': this.variant === 'success', 'button--warning': this.variant === 'warning',
'button--neutral': this.variant === 'neutral', 'button--danger': this.variant === 'danger',
'button--warning': this.variant === 'warning', 'button--small': this.size === 'small',
'button--danger': this.variant === 'danger', 'button--medium': this.size === 'medium',
'button--small': this.size === 'small', 'button--large': this.size === 'large',
'button--medium': this.size === 'medium', 'button--checked': this.checked,
'button--large': this.size === 'large', 'button--disabled': this.disabled,
'button--checked': this.checked, 'button--focused': this.hasFocus,
'button--disabled': this.disabled, 'button--outline': true,
'button--focused': this.hasFocus, 'button--pill': this.pill,
'button--outline': true, 'button--has-label': this.hasSlotController.test('[default]'),
'button--pill': this.pill, 'button--has-prefix': this.hasSlotController.test('prefix'),
'button--has-label': this.hasSlotController.test('[default]'), 'button--has-suffix': this.hasSlotController.test('suffix')
'button--has-prefix': this.hasSlotController.test('prefix'), })}
'button--has-suffix': this.hasSlotController.test('suffix') ?disabled=${this.disabled}
})} type="button"
?disabled=${this.disabled} name=${ifDefined(this.name)}
type="button" value=${ifDefined(this.value)}
name=${ifDefined(this.name)} @blur=${this.handleBlur}
value=${ifDefined(this.value)} @focus=${this.handleFocus}
@blur=${this.handleBlur} @click=${this.handleClick}
@focus=${this.handleFocus} >
@click=${this.handleClick} <span part="prefix" class="button__prefix">
> <slot name="prefix"></slot>
<span part="prefix" class="button__prefix"> </span>
<slot name="prefix"></slot> <span part="label" class="button__label">
</span> <slot></slot>
<span part="label" class="button__label"> </span>
<slot></slot> <span part="suffix" class="button__suffix">
</span> <slot name="suffix"></slot>
<span part="suffix" class="button__suffix"> </span>
<slot name="suffix"></slot> </button>
</span>
</button>
</div>
`; `;
} }
} }

2
src/components/radio-group/radio-group.styles.ts
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

4
src/components/radio-group/radio-group.ts
Wyświetl plik

@ -1,9 +1,9 @@
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js'; import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'; import { classMap } from 'lit/directives/class-map.js';
import '../../components/button-group/button-group'; import '~/components/button-group/button-group';
import type SlRadio from '~/components/radio/radio';
import styles from './radio-group.styles'; import styles from './radio-group.styles';
import type SlRadio from '../../components/radio/radio';
const RADIO_CHILDREN = ['sl-radio', 'sl-radio-button']; const RADIO_CHILDREN = ['sl-radio', 'sl-radio-button'];

4
src/components/radio/radio.styles.ts
Wyświetl plik

@ -1,6 +1,6 @@
import { css } from 'lit'; import { css } from 'lit';
import { focusVisibleSelector } from '../../internal/focus-visible'; import { focusVisibleSelector } from '~/internal/focus-visible';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

30
src/components/radio/radio.test.ts
Wyświetl plik

@ -1,7 +1,7 @@
import { aTimeout, expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing'; import { expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
import { sendKeys } from '@web/test-runner-commands'; import { sendKeys } from '@web/test-runner-commands';
import sinon from 'sinon'; import sinon from 'sinon';
import type SlRadioGroup from '../../components/radio-group/radio-group'; import type SlRadioGroup from '~/components/radio-group/radio-group';
import type SlRadio from './radio'; import type SlRadio from './radio';
describe('<sl-radio>', () => { describe('<sl-radio>', () => {
@ -75,7 +75,7 @@ describe('<sl-radio>', () => {
<sl-radio-group> <sl-radio-group>
<sl-radio id="radio-1" name="a" value="1" checked></sl-radio> <sl-radio id="radio-1" name="a" value="1" checked></sl-radio>
<sl-radio id="radio-2" name="a" value="2"></sl-radio> <sl-radio id="radio-2" name="a" value="2"></sl-radio>
<sl-radio id="radio-3" name="a" value="3"></sl-radio> <sl-radio id="radio-2" name="a" value="3"></sl-radio>
</sl-radio-group> </sl-radio-group>
<sl-button type="submit">Submit</sl-button> <sl-button type="submit">Submit</sl-button>
</form> </form>
@ -96,29 +96,5 @@ describe('<sl-radio>', () => {
expect(formData!.get('a')).to.equal('2'); expect(formData!.get('a')).to.equal('2');
}); });
it('should show a constraint validation error when setCustomValidity() is called', async () => {
const form = await fixture<HTMLFormElement>(html`
<form>
<sl-radio-group>
<sl-radio id="radio-1" name="a" value="1" checked></sl-radio>
<sl-radio id="radio-2" name="a" value="2"></sl-radio>
</sl-radio-group>
<sl-button type="submit">Submit</sl-button>
</form>
`);
const button = form.querySelector('sl-button')!;
const radio = form.querySelectorAll('sl-radio')[1]!;
const submitHandler = sinon.spy((event: SubmitEvent) => event.preventDefault());
// Submitting the form after setting custom validity should not trigger the handler
radio.setCustomValidity('Invalid selection');
form.addEventListener('submit', submitHandler);
button.click();
await aTimeout(100);
expect(submitHandler).to.not.have.been.called;
});
}); });
}); });

103
src/components/radio/radio.ts
Wyświetl plik

@ -1,11 +1,9 @@
import { html, LitElement } from 'lit'; import { html } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js'; import { customElement } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'; import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js'; import { ifDefined } from 'lit/directives/if-defined.js';
import { live } from 'lit/directives/live.js'; import { live } from 'lit/directives/live.js';
import { emit } from '../../internal/event'; import RadioBase from '~/internal/radio';
import { FormSubmitController } from '../../internal/form';
import { watch } from '../../internal/watch';
import styles from './radio.styles'; import styles from './radio.styles';
/** /**
@ -24,102 +22,9 @@ import styles from './radio.styles';
* @csspart label - The radio label. * @csspart label - The radio label.
*/ */
@customElement('sl-radio') @customElement('sl-radio')
export default class SlRadio extends LitElement { export default class SlRadio extends RadioBase {
static styles = styles; static styles = styles;
@query('.radio__input') input: HTMLInputElement;
protected readonly formSubmitController = new FormSubmitController(this, {
value: (control: HTMLInputElement) => (control.checked ? control.value : undefined)
});
@state() protected hasFocus = false;
/** The radio's name attribute. */
@property() name: string;
/** The radio's value attribute. */
@property() value: string;
/** Disables the radio. */
@property({ type: Boolean, reflect: true }) disabled = false;
/** Draws the radio in a checked state. */
@property({ type: Boolean, reflect: true }) checked = false;
/**
* This will be true when the control is in an invalid state. Validity in radios is determined by the message provided
* by the `setCustomValidity` method.
*/
@property({ type: Boolean, reflect: true }) invalid = false;
connectedCallback(): void {
super.connectedCallback();
this.setAttribute('role', 'radio');
}
/** Simulates a click on the radio. */
click() {
this.input.click();
}
/** Sets focus on the radio. */
focus(options?: FocusOptions) {
this.input.focus(options);
}
/** Removes focus from the radio. */
blur() {
this.input.blur();
}
/** Checks for validity and shows the browser's validation message if the control is invalid. */
reportValidity() {
return this.input.reportValidity();
}
/** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
setCustomValidity(message: string) {
this.input.setCustomValidity(message);
this.invalid = !this.input.checkValidity();
}
handleBlur() {
this.hasFocus = false;
emit(this, 'sl-blur');
}
handleClick() {
if (!this.disabled) {
this.checked = true;
}
}
handleFocus() {
this.hasFocus = true;
emit(this, 'sl-focus');
}
@watch('checked')
handleCheckedChange() {
this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
if (this.hasUpdated) {
emit(this, 'sl-change');
}
}
@watch('disabled', { waitUntilFirstUpdate: true })
handleDisabledChange() {
this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
// Disabled form controls are always valid, so we need to recheck validity when the state changes
if (this.hasUpdated) {
this.input.disabled = this.disabled;
this.invalid = !this.input.checkValidity();
}
}
render() { render() {
return html` return html`
<label <label

6
src/components/range/range.styles.ts
Wyświetl plik

@ -1,7 +1,7 @@
import { css } from 'lit'; import { css } from 'lit';
import { focusVisibleSelector } from '../../internal/focus-visible'; import { focusVisibleSelector } from '~/internal/focus-visible';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
import formControlStyles from '../../styles/form-control.styles'; import formControlStyles from '~/styles/form-control.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

8
src/components/range/range.ts
Wyświetl plik

@ -3,10 +3,10 @@ import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'; import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js'; import { ifDefined } from 'lit/directives/if-defined.js';
import { live } from 'lit/directives/live.js'; import { live } from 'lit/directives/live.js';
import { emit } from '../../internal/event'; import { emit } from '~/internal/event';
import { FormSubmitController } from '../../internal/form'; import { FormSubmitController } from '~/internal/form';
import { HasSlotController } from '../../internal/slot'; import { HasSlotController } from '~/internal/slot';
import { watch } from '../../internal/watch'; import { watch } from '~/internal/watch';
import styles from './range.styles'; import styles from './range.styles';
/** /**

4
src/components/rating/rating.styles.ts
Wyświetl plik

@ -1,6 +1,6 @@
import { css } from 'lit'; import { css } from 'lit';
import { focusVisibleSelector } from '../../internal/focus-visible'; import { focusVisibleSelector } from '~/internal/focus-visible';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

8
src/components/rating/rating.ts
Wyświetl plik

@ -3,10 +3,10 @@ import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'; import { classMap } from 'lit/directives/class-map.js';
import { styleMap } from 'lit/directives/style-map.js'; import { styleMap } from 'lit/directives/style-map.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js'; import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import '../../components/icon/icon'; import '~/components/icon/icon';
import { emit } from '../../internal/event'; import { emit } from '~/internal/event';
import { clamp } from '../../internal/math'; import { clamp } from '~/internal/math';
import { watch } from '../../internal/watch'; import { watch } from '~/internal/watch';
import styles from './rating.styles'; import styles from './rating.styles';
/** /**

2
src/components/relative-time/relative-time.ts
Wyświetl plik

@ -1,6 +1,6 @@
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import { customElement, property, state } from 'lit/decorators.js'; import { customElement, property, state } from 'lit/decorators.js';
import { LocalizeController } from '../../utilities/localize'; import { LocalizeController } from '~/utilities/localize';
interface UnitConfig { interface UnitConfig {
max: number; max: number;

2
src/components/resize-observer/resize-observer.styles.ts
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

4
src/components/resize-observer/resize-observer.ts
Wyświetl plik

@ -1,7 +1,7 @@
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js'; import { customElement, property } from 'lit/decorators.js';
import { emit } from '../../internal/event'; import { emit } from '~/internal/event';
import { watch } from '../../internal/watch'; import { watch } from '~/internal/watch';
import styles from './resize-observer.styles'; import styles from './resize-observer.styles';
/** /**

2
src/components/responsive-media/responsive-media.styles.ts
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

4
src/components/select/select.styles.ts
Wyświetl plik

@ -1,6 +1,6 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
import formControlStyles from '../../styles/form-control.styles'; import formControlStyles from '~/styles/form-control.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

28
src/components/select/select.ts
Wyświetl plik

@ -1,21 +1,21 @@
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js'; import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js'; import { classMap } from 'lit/directives/class-map.js';
import '../../components/dropdown/dropdown'; import '~/components/dropdown/dropdown';
import '../../components/icon-button/icon-button'; import type SlDropdown from '~/components/dropdown/dropdown';
import '../../components/icon/icon'; import '~/components/icon-button/icon-button';
import '../../components/menu/menu'; import type SlIconButton from '~/components/icon-button/icon-button';
import '../../components/tag/tag'; import '~/components/icon/icon';
import { emit } from '../../internal/event'; import type SlMenuItem from '~/components/menu-item/menu-item';
import { FormSubmitController } from '../../internal/form'; import '~/components/menu/menu';
import { getTextContent, HasSlotController } from '../../internal/slot'; import type SlMenu from '~/components/menu/menu';
import { watch } from '../../internal/watch'; import type { MenuSelectEventDetail } from '~/components/menu/menu';
import '~/components/tag/tag';
import { emit } from '~/internal/event';
import { FormSubmitController } from '~/internal/form';
import { getTextContent, HasSlotController } from '~/internal/slot';
import { watch } from '~/internal/watch';
import styles from './select.styles'; import styles from './select.styles';
import type SlDropdown from '../../components/dropdown/dropdown';
import type SlIconButton from '../../components/icon-button/icon-button';
import type SlMenuItem from '../../components/menu-item/menu-item';
import type { MenuSelectEventDetail } from '../../components/menu/menu';
import type SlMenu from '../../components/menu/menu';
import type { TemplateResult } from 'lit'; import type { TemplateResult } from 'lit';
/** /**

2
src/components/skeleton/skeleton.styles.ts
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

2
src/components/spinner/spinner.styles.ts
Wyświetl plik

@ -1,5 +1,5 @@
import { css } from 'lit'; import { css } from 'lit';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

4
src/components/split-panel/split-panel.styles.ts
Wyświetl plik

@ -1,6 +1,6 @@
import { css } from 'lit'; import { css } from 'lit';
import { focusVisibleSelector } from '../../internal/focus-visible'; import { focusVisibleSelector } from '~/internal/focus-visible';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

10
src/components/split-panel/split-panel.ts
Wyświetl plik

@ -1,11 +1,11 @@
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import { customElement, property, query } from 'lit/decorators.js'; import { customElement, property, query } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js'; import { ifDefined } from 'lit/directives/if-defined.js';
import { drag } from '../../internal/drag'; import { drag } from '~/internal/drag';
import { emit } from '../../internal/event'; import { emit } from '~/internal/event';
import { clamp } from '../../internal/math'; import { clamp } from '~/internal/math';
import { watch } from '../../internal/watch'; import { watch } from '~/internal/watch';
import { LocalizeController } from '../../utilities/localize'; import { LocalizeController } from '~/utilities/localize';
import styles from './split-panel.styles'; import styles from './split-panel.styles';
/** /**

4
src/components/switch/switch.styles.ts
Wyświetl plik

@ -1,6 +1,6 @@
import { css } from 'lit'; import { css } from 'lit';
import { focusVisibleSelector } from '../../internal/focus-visible'; import { focusVisibleSelector } from '~/internal/focus-visible';
import componentStyles from '../../styles/component.styles'; import componentStyles from '~/styles/component.styles';
export default css` export default css`
${componentStyles} ${componentStyles}

Some files were not shown because too many files have changed in this diff Show More