kopia lustrzana https://github.com/shoelace-style/shoelace
Revert recent changes
Cory LaViska
rodzic
b8b68af316
commit
e32c15204c
|
|
@ -201,7 +201,17 @@ module.exports = {
|
|||
'no-restricted-imports': [
|
||||
'warn',
|
||||
{
|
||||
patterns: [
|
||||
{
|
||||
group: ['../*'],
|
||||
message: 'Usage of relative parent imports is not allowed.'
|
||||
}
|
||||
],
|
||||
paths: [
|
||||
{
|
||||
name: '.',
|
||||
message: 'Usage of local index imports is not allowed.'
|
||||
},
|
||||
{
|
||||
name: './index',
|
||||
message: 'Import from the source file instead.'
|
||||
|
|
@ -214,6 +224,16 @@ module.exports = {
|
|||
'warn',
|
||||
{
|
||||
groups: ['builtin', 'external', 'internal', 'unknown', 'parent', 'sibling', 'index', 'object', 'type'],
|
||||
pathGroups: [
|
||||
{
|
||||
pattern: '~/**',
|
||||
group: 'internal'
|
||||
},
|
||||
{
|
||||
pattern: 'dist/**',
|
||||
group: 'external'
|
||||
}
|
||||
],
|
||||
alphabetize: {
|
||||
order: 'asc',
|
||||
caseInsensitive: true
|
||||
|
|
|
|||
|
|
@ -108,6 +108,7 @@
|
|||
"textareas",
|
||||
"transitionend",
|
||||
"Triaging",
|
||||
"ttsc",
|
||||
"turbolinks",
|
||||
"unbundles",
|
||||
"unbundling",
|
||||
|
|
|
|||
|
|
@ -60,73 +60,4 @@ import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
|
|||
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]
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -194,7 +194,7 @@ const App = () => {
|
|||
|
||||
### 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
|
||||
<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
|
||||
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -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._ 🐛
|
||||
|
||||
## 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
|
||||
|
||||
- 🚨 BREAKING: refactored parts in `<sl-input>`, `<sl-range>`, `<sl-select>`, and `<sl-textarea>` to allow you to customize the label and help text position
|
||||
|
|
|
|||
|
|
@ -62,7 +62,9 @@
|
|||
"sinon": "^13.0.1",
|
||||
"strip-css-comments": "^5.0.0",
|
||||
"tslib": "^2.3.1",
|
||||
"typescript": "4.5.5"
|
||||
"ttypescript": "^1.5.13",
|
||||
"typescript": "4.5.5",
|
||||
"typescript-transform-paths": "^3.3.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.17.0"
|
||||
|
|
@ -505,6 +507,29 @@
|
|||
"integrity": "sha512-/MB0RS0Gn01s4pgmjy0FvsLfr3RRMrRphEuvTRserNcM8XVtoIVAtrjig/Gg0DPwDrN8Clm0L1j7iQay6S8D0g==",
|
||||
"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": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmjs.org/@custom-elements-manifest/analyzer/-/analyzer-0.5.7.tgz",
|
||||
|
|
@ -996,6 +1021,34 @@
|
|||
"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": {
|
||||
"version": "1.3.5",
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"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": {
|
||||
"version": "0.8.2",
|
||||
"resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz",
|
||||
|
|
@ -2250,6 +2313,13 @@
|
|||
"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": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
|
||||
|
|
@ -3727,6 +3797,13 @@
|
|||
"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": {
|
||||
"version": "3.1.5",
|
||||
"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
|
||||
|
|
@ -9081,6 +9158,13 @@
|
|||
"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": {
|
||||
"version": "9.1.0",
|
||||
"resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-9.1.0.tgz",
|
||||
|
|
@ -13150,6 +13234,59 @@
|
|||
"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": {
|
||||
"version": "3.12.0",
|
||||
"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz",
|
||||
|
|
@ -13210,6 +13347,23 @@
|
|||
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
|
||||
"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": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
|
||||
|
|
@ -13278,6 +13432,18 @@
|
|||
"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": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/typical/-/typical-4.0.0.tgz",
|
||||
|
|
@ -13566,6 +13732,13 @@
|
|||
"integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
|
||||
"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": {
|
||||
"version": "8.1.1",
|
||||
"resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz",
|
||||
|
|
@ -14113,6 +14286,16 @@
|
|||
"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": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
|
||||
|
|
@ -14523,6 +14706,23 @@
|
|||
"integrity": "sha512-/MB0RS0Gn01s4pgmjy0FvsLfr3RRMrRphEuvTRserNcM8XVtoIVAtrjig/Gg0DPwDrN8Clm0L1j7iQay6S8D0g==",
|
||||
"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": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmjs.org/@custom-elements-manifest/analyzer/-/analyzer-0.5.7.tgz",
|
||||
|
|
@ -14939,6 +15139,34 @@
|
|||
"integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
|
||||
"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": {
|
||||
"version": "1.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/accepts/-/accepts-1.3.5.tgz",
|
||||
|
|
@ -15798,6 +16026,13 @@
|
|||
"dev": true,
|
||||
"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": {
|
||||
"version": "0.8.2",
|
||||
"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": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
|
||||
|
|
@ -17119,6 +17361,13 @@
|
|||
"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": {
|
||||
"version": "3.1.5",
|
||||
"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": {
|
||||
"version": "9.1.0",
|
||||
"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": {
|
||||
"version": "3.12.0",
|
||||
"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": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
|
||||
|
|
@ -24382,6 +24678,15 @@
|
|||
"integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
|
||||
"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": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/typical/-/typical-4.0.0.tgz",
|
||||
|
|
@ -24592,6 +24897,13 @@
|
|||
"integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
|
||||
"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": {
|
||||
"version": "8.1.1",
|
||||
"resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz",
|
||||
|
|
@ -25023,6 +25335,13 @@
|
|||
"integrity": "sha512-faQrqNMzcPCHGVC2aaOINk13K+aaBDUPjGWl0teOXywElLjyVAB6Oe2jj62jHYtwsU49jXhScYbvPENK+6zAvQ==",
|
||||
"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": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
|
||||
|
|
|
|||
|
|
@ -105,7 +105,9 @@
|
|||
"sinon": "^13.0.1",
|
||||
"strip-css-comments": "^5.0.0",
|
||||
"tslib": "^2.3.1",
|
||||
"typescript": "4.5.5"
|
||||
"ttypescript": "^1.5.13",
|
||||
"typescript": "4.5.5",
|
||||
"typescript-transform-paths": "^3.3.1"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{ts,js}": [
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ fs.mkdirSync(outdir, { recursive: true });
|
|||
execSync(`node scripts/make-icons.js --outdir "${outdir}"`, { stdio: 'inherit' });
|
||||
if (types) {
|
||||
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) {
|
||||
console.error(chalk.red(err));
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { LitElement, html } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { emit } from '../../internal/event';
|
||||
import { watch } from '../../internal/watch';
|
||||
import { emit } from '~/internal/event';
|
||||
import { watch } from '~/internal/watch';
|
||||
import styles from './{{ tagWithoutPrefix tag }}.styles';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import { html, LitElement } from 'lit';
|
||||
import { customElement, property, query } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import '../../components/icon-button/icon-button';
|
||||
import { animateTo, stopAnimations } from '../../internal/animate';
|
||||
import { emit, waitForEvent } from '../../internal/event';
|
||||
import { HasSlotController } from '../../internal/slot';
|
||||
import { watch } from '../../internal/watch';
|
||||
import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry';
|
||||
import '~/components/icon-button/icon-button';
|
||||
import { animateTo, stopAnimations } from '~/internal/animate';
|
||||
import { emit, waitForEvent } from '~/internal/event';
|
||||
import { HasSlotController } from '~/internal/slot';
|
||||
import { watch } from '~/internal/watch';
|
||||
import { getAnimation, setDefaultAnimation } from '~/utilities/animation-registry';
|
||||
import styles from './alert.styles';
|
||||
|
||||
const toastStack = Object.assign(document.createElement('div'), { className: 'sl-toast-stack' });
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { html, LitElement } from 'lit';
|
||||
import { customElement, property, query, state } from 'lit/decorators.js';
|
||||
import '../../components/icon/icon';
|
||||
import { emit } from '../../internal/event';
|
||||
import { watch } from '../../internal/watch';
|
||||
import '~/components/icon/icon';
|
||||
import { emit } from '~/internal/event';
|
||||
import { watch } from '~/internal/watch';
|
||||
import styles from './animated-image.styles';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { html, LitElement } from 'lit';
|
||||
import { customElement, property, queryAsync } from 'lit/decorators.js';
|
||||
import { emit } from '../../internal/event';
|
||||
import { watch } from '../../internal/watch';
|
||||
import { emit } from '~/internal/event';
|
||||
import { watch } from '~/internal/watch';
|
||||
import styles from './animation.styles';
|
||||
import { animations } from './animations';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { html, LitElement } from 'lit';
|
||||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import '../../components/icon/icon';
|
||||
import '~/components/icon/icon';
|
||||
import styles from './avatar.styles';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { css } from 'lit';
|
||||
import { focusVisibleSelector } from '../../internal/focus-visible';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import { focusVisibleSelector } from '~/internal/focus-visible';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { html, LitElement } from 'lit';
|
|||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.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';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import { html, LitElement } from 'lit';
|
||||
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 type SlBreadcrumbItem from '../../components/breadcrumb-item/breadcrumb-item';
|
||||
|
||||
/**
|
||||
* @since 2.0
|
||||
*
|
||||
* @status stable
|
||||
*
|
||||
* @slot - One or more breadcrumb items to display.
|
||||
* @slot separator - The separator to use between breadcrumb items.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { css } from 'lit';
|
||||
import { focusVisibleSelector } from '../../internal/focus-visible';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import { focusVisibleSelector } from '~/internal/focus-visible';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
@ -632,13 +632,12 @@ export default css`
|
|||
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) {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
:host(.sl-button-group__button--focus),
|
||||
:host(.sl-button-group__button[checked]) {
|
||||
:host(.sl-button-group__button--focus) {
|
||||
z-index: 2;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -2,19 +2,13 @@ import { expect, fixture, html } from '@open-wc/testing';
|
|||
import sinon from 'sinon';
|
||||
import type SlButton from './button';
|
||||
|
||||
const variants = ['default', 'primary', 'success', 'neutral', 'warning', 'danger'];
|
||||
|
||||
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', () => {
|
||||
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 () => {
|
||||
const el = await fixture<SlButton>(html` <sl-button>Button Label</sl-button> `);
|
||||
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@ import { customElement, property, query, state } from 'lit/decorators.js';
|
|||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||
import { html, literal } from 'lit/static-html.js';
|
||||
import '../../components/spinner/spinner';
|
||||
import { emit } from '../../internal/event';
|
||||
import { FormSubmitController } from '../../internal/form';
|
||||
import { HasSlotController } from '../../internal/slot';
|
||||
import '~/components/spinner/spinner';
|
||||
import { emit } from '~/internal/event';
|
||||
import { FormSubmitController } from '~/internal/form';
|
||||
import { HasSlotController } from '~/internal/slot';
|
||||
import styles from './button.styles';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { html, LitElement } from 'lit';
|
||||
import { customElement } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { HasSlotController } from '../../internal/slot';
|
||||
import { HasSlotController } from '~/internal/slot';
|
||||
import styles from './card.styles';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { css } from 'lit';
|
||||
import { focusVisibleSelector } from '../../internal/focus-visible';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import { focusVisibleSelector } from '~/internal/focus-visible';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -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 sinon from 'sinon';
|
||||
import type SlCheckbox from './checkbox';
|
||||
|
||||
describe('<sl-checkbox>', () => {
|
||||
|
|
@ -43,49 +42,4 @@ describe('<sl-checkbox>', () => {
|
|||
el.checked = false;
|
||||
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;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ import { customElement, property, query, state } from 'lit/decorators.js';
|
|||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||
import { live } from 'lit/directives/live.js';
|
||||
import { emit } from '../../internal/event';
|
||||
import { FormSubmitController } from '../../internal/form';
|
||||
import { watch } from '../../internal/watch';
|
||||
import { emit } from '~/internal/event';
|
||||
import { FormSubmitController } from '~/internal/form';
|
||||
import { watch } from '~/internal/watch';
|
||||
import styles from './checkbox.styles';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { css } from 'lit';
|
||||
import { focusVisibleSelector } from '../../internal/focus-visible';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import { focusVisibleSelector } from '~/internal/focus-visible';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -5,21 +5,21 @@ import { classMap } from 'lit/directives/class-map.js';
|
|||
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||
import { live } from 'lit/directives/live.js';
|
||||
import { styleMap } from 'lit/directives/style-map.js';
|
||||
import '../../components/button-group/button-group';
|
||||
import '../../components/button/button';
|
||||
import '../../components/dropdown/dropdown';
|
||||
import '../../components/icon/icon';
|
||||
import '../../components/input/input';
|
||||
import '../../components/visually-hidden/visually-hidden';
|
||||
import { drag } from '../../internal/drag';
|
||||
import { emit } from '../../internal/event';
|
||||
import { FormSubmitController } from '../../internal/form';
|
||||
import { clamp } from '../../internal/math';
|
||||
import { watch } from '../../internal/watch';
|
||||
import { LocalizeController } from '../../utilities/localize';
|
||||
import '~/components/button-group/button-group';
|
||||
import '~/components/button/button';
|
||||
import '~/components/dropdown/dropdown';
|
||||
import type SlDropdown from '~/components/dropdown/dropdown';
|
||||
import '~/components/icon/icon';
|
||||
import '~/components/input/input';
|
||||
import type SlInput from '~/components/input/input';
|
||||
import '~/components/visually-hidden/visually-hidden';
|
||||
import { drag } from '~/internal/drag';
|
||||
import { emit } from '~/internal/event';
|
||||
import { FormSubmitController } from '~/internal/form';
|
||||
import { clamp } from '~/internal/math';
|
||||
import { watch } from '~/internal/watch';
|
||||
import { LocalizeController } from '~/utilities/localize';
|
||||
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;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { css } from 'lit';
|
||||
import { focusVisibleSelector } from '../../internal/focus-visible';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import { focusVisibleSelector } from '~/internal/focus-visible';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { html, LitElement } from 'lit';
|
||||
import { customElement, property, query } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import '../../components/icon/icon';
|
||||
import { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../../internal/animate';
|
||||
import { emit, waitForEvent } from '../../internal/event';
|
||||
import { watch } from '../../internal/watch';
|
||||
import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry';
|
||||
import '~/components/icon/icon';
|
||||
import { animateTo, shimKeyframesHeightAuto, stopAnimations } from '~/internal/animate';
|
||||
import { emit, waitForEvent } from '~/internal/event';
|
||||
import { watch } from '~/internal/watch';
|
||||
import { getAnimation, setDefaultAnimation } from '~/utilities/animation-registry';
|
||||
import styles from './details.styles';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -2,15 +2,15 @@ import { html, LitElement } from 'lit';
|
|||
import { customElement, property, query } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||
import '../../components/icon-button/icon-button';
|
||||
import { animateTo, stopAnimations } from '../../internal/animate';
|
||||
import { emit, waitForEvent } from '../../internal/event';
|
||||
import Modal from '../../internal/modal';
|
||||
import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll';
|
||||
import { HasSlotController } from '../../internal/slot';
|
||||
import { watch } from '../../internal/watch';
|
||||
import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry';
|
||||
import { LocalizeController } from '../../utilities/localize';
|
||||
import '~/components/icon-button/icon-button';
|
||||
import { animateTo, stopAnimations } from '~/internal/animate';
|
||||
import { emit, waitForEvent } from '~/internal/event';
|
||||
import Modal from '~/internal/modal';
|
||||
import { lockBodyScrolling, unlockBodyScrolling } from '~/internal/scroll';
|
||||
import { HasSlotController } from '~/internal/slot';
|
||||
import { watch } from '~/internal/watch';
|
||||
import { getAnimation, setDefaultAnimation } from '~/utilities/animation-registry';
|
||||
import { LocalizeController } from '~/utilities/localize';
|
||||
import styles from './dialog.styles';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { LitElement } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { watch } from '../../internal/watch';
|
||||
import { watch } from '~/internal/watch';
|
||||
import styles from './divider.styles';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -2,16 +2,16 @@ import { html, LitElement } from 'lit';
|
|||
import { customElement, property, query } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||
import '../../components/icon-button/icon-button';
|
||||
import { animateTo, stopAnimations } from '../../internal/animate';
|
||||
import { emit, waitForEvent } from '../../internal/event';
|
||||
import Modal from '../../internal/modal';
|
||||
import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll';
|
||||
import { HasSlotController } from '../../internal/slot';
|
||||
import { uppercaseFirstLetter } from '../../internal/string';
|
||||
import { watch } from '../../internal/watch';
|
||||
import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry';
|
||||
import { LocalizeController } from '../../utilities/localize';
|
||||
import '~/components/icon-button/icon-button';
|
||||
import { animateTo, stopAnimations } from '~/internal/animate';
|
||||
import { emit, waitForEvent } from '~/internal/event';
|
||||
import Modal from '~/internal/modal';
|
||||
import { lockBodyScrolling, unlockBodyScrolling } from '~/internal/scroll';
|
||||
import { HasSlotController } from '~/internal/slot';
|
||||
import { uppercaseFirstLetter } from '~/internal/string';
|
||||
import { watch } from '~/internal/watch';
|
||||
import { getAnimation, setDefaultAnimation } from '~/utilities/animation-registry';
|
||||
import { LocalizeController } from '~/utilities/localize';
|
||||
import styles from './drawer.styles';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -2,17 +2,17 @@ import { autoUpdate, computePosition, flip, offset, shift, size } from '@floatin
|
|||
import { html, LitElement } from 'lit';
|
||||
import { customElement, property, query } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { animateTo, stopAnimations } from '../../internal/animate';
|
||||
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 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';
|
||||
import { animateTo, stopAnimations } from '~/internal/animate';
|
||||
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 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
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { LitElement } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { LocalizeController } from '../../utilities/localize';
|
||||
import { LocalizeController } from '~/utilities/localize';
|
||||
|
||||
/**
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { html, LitElement } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { LocalizeController } from '../../utilities/localize';
|
||||
import { LocalizeController } from '~/utilities/localize';
|
||||
|
||||
/**
|
||||
* @since 2.0
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { LitElement } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { LocalizeController } from '../../utilities/localize';
|
||||
import { LocalizeController } from '~/utilities/localize';
|
||||
|
||||
/**
|
||||
* @since 2.0
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { css } from 'lit';
|
||||
import { focusVisibleSelector } from '../../internal/focus-visible';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import { focusVisibleSelector } from '~/internal/focus-visible';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { html, LitElement } from 'lit';
|
|||
import { customElement, property, query } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||
import '../../components/icon/icon';
|
||||
import '~/components/icon/icon';
|
||||
import styles from './icon-button.styles';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
/* eslint-disable no-restricted-imports */
|
||||
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 type SlIcon from './icon';
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ import { html, LitElement } from 'lit';
|
|||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||
import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
|
||||
import { emit } from '../../internal/event';
|
||||
import { watch } from '../../internal/watch';
|
||||
import { emit } from '~/internal/event';
|
||||
import { watch } from '~/internal/watch';
|
||||
import styles from './icon.styles';
|
||||
import { getIconLibrary, unwatchIcon, watchIcon } from './library';
|
||||
import { requestIcon } from './request';
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { getBasePath } from '../../utilities/base-path';
|
||||
import { getBasePath } from '~/utilities/base-path';
|
||||
import type { IconLibrary } from './library';
|
||||
|
||||
const library: IconLibrary = {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import type SlIcon from '~/components/icon/icon';
|
||||
import defaultLibrary from './library.default';
|
||||
import systemLibrary from './library.system';
|
||||
import type SlIcon from '../../components/icon/icon';
|
||||
|
||||
export type IconLibraryResolver = (name: string) => string;
|
||||
export type IconLibraryMutator = (svg: SVGElement) => void;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { requestInclude } from '../../components/include/request';
|
||||
import { requestInclude } from '~/components/include/request';
|
||||
|
||||
type IconFile =
|
||||
| {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { css } from 'lit';
|
||||
import { focusVisibleSelector } from '../../internal/focus-visible';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import { focusVisibleSelector } from '~/internal/focus-visible';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { html, LitElement } from 'lit';
|
||||
import { customElement, property, query } from 'lit/decorators.js';
|
||||
import { styleMap } from 'lit/directives/style-map.js';
|
||||
import '../../components/icon/icon';
|
||||
import { drag } from '../../internal/drag';
|
||||
import { emit } from '../../internal/event';
|
||||
import { clamp } from '../../internal/math';
|
||||
import { watch } from '../../internal/watch';
|
||||
import '~/components/icon/icon';
|
||||
import { drag } from '~/internal/drag';
|
||||
import { emit } from '~/internal/event';
|
||||
import { clamp } from '~/internal/math';
|
||||
import { watch } from '~/internal/watch';
|
||||
import styles from './image-comparer.styles';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { html, LitElement } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { emit } from '../../internal/event';
|
||||
import { watch } from '../../internal/watch';
|
||||
import { emit } from '~/internal/event';
|
||||
import { watch } from '~/internal/watch';
|
||||
import styles from './include.styles';
|
||||
import { requestInclude } from './request';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import formControlStyles from '../../styles/form-control.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
import formControlStyles from '~/styles/form-control.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { expect, fixture, html, waitUntil } from '@open-wc/testing';
|
||||
import { sendKeys } from '@web/test-runner-commands';
|
||||
import sinon from 'sinon';
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import { serialize } from '../../utilities/form';
|
||||
import type SlInput from './input';
|
||||
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@ import { customElement, property, query, state } from 'lit/decorators.js';
|
|||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||
import { live } from 'lit/directives/live.js';
|
||||
import '../../components/icon/icon';
|
||||
import { emit } from '../../internal/event';
|
||||
import { FormSubmitController } from '../../internal/form';
|
||||
import { HasSlotController } from '../../internal/slot';
|
||||
import { watch } from '../../internal/watch';
|
||||
import '~/components/icon/icon';
|
||||
import { emit } from '~/internal/event';
|
||||
import { FormSubmitController } from '~/internal/form';
|
||||
import { HasSlotController } from '~/internal/slot';
|
||||
import { watch } from '~/internal/watch';
|
||||
import styles from './input.styles';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { css } from 'lit';
|
||||
import { focusVisibleSelector } from '../../internal/focus-visible';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import { focusVisibleSelector } from '~/internal/focus-visible';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { html, LitElement } from 'lit';
|
||||
import { customElement, property, query } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import '../../components/icon/icon';
|
||||
import { watch } from '../../internal/watch';
|
||||
import '~/components/icon/icon';
|
||||
import { watch } from '~/internal/watch';
|
||||
import styles from './menu-item.styles';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import { html, LitElement } from 'lit';
|
||||
import { customElement, query } from 'lit/decorators.js';
|
||||
import { emit } from '../../internal/event';
|
||||
import { hasFocusVisible } from '../../internal/focus-visible';
|
||||
import { getTextContent } from '../../internal/slot';
|
||||
import type SlMenuItem from '~/components/menu-item/menu-item';
|
||||
import { emit } from '~/internal/event';
|
||||
import { hasFocusVisible } from '~/internal/focus-visible';
|
||||
import { getTextContent } from '~/internal/slot';
|
||||
import styles from './menu.styles';
|
||||
import type SlMenuItem from '../../components/menu-item/menu-item';
|
||||
export interface MenuSelectEventDetail {
|
||||
item: SlMenuItem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { html, LitElement } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { emit } from '../../internal/event';
|
||||
import { watch } from '../../internal/watch';
|
||||
import { emit } from '~/internal/event';
|
||||
import { watch } from '~/internal/watch';
|
||||
import styles from './mutation-observer.styles';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
|
|||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { ifDefined } from 'lit/directives/if-defined.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';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { html, LitElement } from 'lit';
|
||||
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';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { html, LitElement } from 'lit';
|
|||
import { customElement, property, query } from 'lit/decorators.js';
|
||||
import { styleMap } from 'lit/directives/style-map.js';
|
||||
import QrCreator from 'qr-creator';
|
||||
import { watch } from '../../internal/watch';
|
||||
import { watch } from '~/internal/watch';
|
||||
import styles from './qr-code.styles';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
`;
|
||||
|
|
@ -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 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';
|
||||
|
||||
describe('<sl-radio-button>', () => {
|
||||
|
|
@ -74,7 +74,7 @@ describe('<sl-radio-button>', () => {
|
|||
<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-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-button type="submit">Submit</sl-button>
|
||||
</form>
|
||||
|
|
@ -95,29 +95,5 @@ describe('<sl-radio-button>', () => {
|
|||
|
||||
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;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,13 +1,10 @@
|
|||
import { LitElement } from 'lit';
|
||||
import { customElement, property, query, state } from 'lit/decorators.js';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||
import { html } from 'lit/static-html.js';
|
||||
import { emit } from '../../internal/event';
|
||||
import { FormSubmitController } from '../../internal/form';
|
||||
import { HasSlotController } from '../../internal/slot';
|
||||
import { watch } from '../../internal/watch';
|
||||
import styles from './radio-button.styles';
|
||||
import styles from '~/components/button/button.styles';
|
||||
import RadioBase from '~/internal/radio';
|
||||
import { HasSlotController } from '~/internal/slot';
|
||||
|
||||
/**
|
||||
* @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.
|
||||
*
|
||||
* @csspart base - The component's internal wrapper.
|
||||
* @csspart button - The internal button element.
|
||||
* @csspart prefix - The prefix slot's container.
|
||||
* @csspart label - The button's label.
|
||||
* @csspart suffix - The suffix slot's container.
|
||||
*/
|
||||
@customElement('sl-radio-button')
|
||||
export default class SlRadioButton extends LitElement {
|
||||
export default class SlRadioButton extends RadioBase {
|
||||
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');
|
||||
|
||||
@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. */
|
||||
@property({ reflect: true }) variant: 'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' =
|
||||
'default';
|
||||
|
|
@ -134,54 +38,57 @@ export default class SlRadioButton extends LitElement {
|
|||
/** The button's size. */
|
||||
@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. */
|
||||
@property({ type: Boolean, reflect: true }) pill = false;
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div part="base">
|
||||
<input class="hidden-input" type="radio" aria-hidden="true" tabindex="-1" />
|
||||
<button
|
||||
part="button"
|
||||
class=${classMap({
|
||||
button: true,
|
||||
'button--default': this.variant === 'default',
|
||||
'button--primary': this.variant === 'primary',
|
||||
'button--success': this.variant === 'success',
|
||||
'button--neutral': this.variant === 'neutral',
|
||||
'button--warning': this.variant === 'warning',
|
||||
'button--danger': this.variant === 'danger',
|
||||
'button--small': this.size === 'small',
|
||||
'button--medium': this.size === 'medium',
|
||||
'button--large': this.size === 'large',
|
||||
'button--checked': this.checked,
|
||||
'button--disabled': this.disabled,
|
||||
'button--focused': this.hasFocus,
|
||||
'button--outline': true,
|
||||
'button--pill': this.pill,
|
||||
'button--has-label': this.hasSlotController.test('[default]'),
|
||||
'button--has-prefix': this.hasSlotController.test('prefix'),
|
||||
'button--has-suffix': this.hasSlotController.test('suffix')
|
||||
})}
|
||||
?disabled=${this.disabled}
|
||||
type="button"
|
||||
name=${ifDefined(this.name)}
|
||||
value=${ifDefined(this.value)}
|
||||
@blur=${this.handleBlur}
|
||||
@focus=${this.handleFocus}
|
||||
@click=${this.handleClick}
|
||||
>
|
||||
<span part="prefix" class="button__prefix">
|
||||
<slot name="prefix"></slot>
|
||||
</span>
|
||||
<span part="label" class="button__label">
|
||||
<slot></slot>
|
||||
</span>
|
||||
<span part="suffix" class="button__suffix">
|
||||
<slot name="suffix"></slot>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
part="base"
|
||||
class=${classMap({
|
||||
button: true,
|
||||
'button--default': this.variant === 'default',
|
||||
'button--primary': this.variant === 'primary',
|
||||
'button--success': this.variant === 'success',
|
||||
'button--neutral': this.variant === 'neutral',
|
||||
'button--warning': this.variant === 'warning',
|
||||
'button--danger': this.variant === 'danger',
|
||||
'button--small': this.size === 'small',
|
||||
'button--medium': this.size === 'medium',
|
||||
'button--large': this.size === 'large',
|
||||
'button--checked': this.checked,
|
||||
'button--disabled': this.disabled,
|
||||
'button--focused': this.hasFocus,
|
||||
'button--outline': true,
|
||||
'button--pill': this.pill,
|
||||
'button--has-label': this.hasSlotController.test('[default]'),
|
||||
'button--has-prefix': this.hasSlotController.test('prefix'),
|
||||
'button--has-suffix': this.hasSlotController.test('suffix')
|
||||
})}
|
||||
?disabled=${this.disabled}
|
||||
type="button"
|
||||
name=${ifDefined(this.name)}
|
||||
value=${ifDefined(this.value)}
|
||||
@blur=${this.handleBlur}
|
||||
@focus=${this.handleFocus}
|
||||
@click=${this.handleClick}
|
||||
>
|
||||
<span part="prefix" class="button__prefix">
|
||||
<slot name="prefix"></slot>
|
||||
</span>
|
||||
<span part="label" class="button__label">
|
||||
<slot></slot>
|
||||
</span>
|
||||
<span part="suffix" class="button__suffix">
|
||||
<slot name="suffix"></slot>
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { html, LitElement } from 'lit';
|
||||
import { customElement, property, query, state } from 'lit/decorators.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 type SlRadio from '../../components/radio/radio';
|
||||
|
||||
const RADIO_CHILDREN = ['sl-radio', 'sl-radio-button'];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { css } from 'lit';
|
||||
import { focusVisibleSelector } from '../../internal/focus-visible';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import { focusVisibleSelector } from '~/internal/focus-visible';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -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 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';
|
||||
|
||||
describe('<sl-radio>', () => {
|
||||
|
|
@ -75,7 +75,7 @@ describe('<sl-radio>', () => {
|
|||
<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 id="radio-3" name="a" value="3"></sl-radio>
|
||||
<sl-radio id="radio-2" name="a" value="3"></sl-radio>
|
||||
</sl-radio-group>
|
||||
<sl-button type="submit">Submit</sl-button>
|
||||
</form>
|
||||
|
|
@ -96,29 +96,5 @@ describe('<sl-radio>', () => {
|
|||
|
||||
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;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
import { html, LitElement } from 'lit';
|
||||
import { customElement, property, query, state } from 'lit/decorators.js';
|
||||
import { html } from 'lit';
|
||||
import { customElement } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||
import { live } from 'lit/directives/live.js';
|
||||
import { emit } from '../../internal/event';
|
||||
import { FormSubmitController } from '../../internal/form';
|
||||
import { watch } from '../../internal/watch';
|
||||
import RadioBase from '~/internal/radio';
|
||||
import styles from './radio.styles';
|
||||
|
||||
/**
|
||||
|
|
@ -24,102 +22,9 @@ import styles from './radio.styles';
|
|||
* @csspart label - The radio label.
|
||||
*/
|
||||
@customElement('sl-radio')
|
||||
export default class SlRadio extends LitElement {
|
||||
export default class SlRadio extends RadioBase {
|
||||
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() {
|
||||
return html`
|
||||
<label
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { css } from 'lit';
|
||||
import { focusVisibleSelector } from '../../internal/focus-visible';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import formControlStyles from '../../styles/form-control.styles';
|
||||
import { focusVisibleSelector } from '~/internal/focus-visible';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
import formControlStyles from '~/styles/form-control.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@ import { customElement, property, query, state } from 'lit/decorators.js';
|
|||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||
import { live } from 'lit/directives/live.js';
|
||||
import { emit } from '../../internal/event';
|
||||
import { FormSubmitController } from '../../internal/form';
|
||||
import { HasSlotController } from '../../internal/slot';
|
||||
import { watch } from '../../internal/watch';
|
||||
import { emit } from '~/internal/event';
|
||||
import { FormSubmitController } from '~/internal/form';
|
||||
import { HasSlotController } from '~/internal/slot';
|
||||
import { watch } from '~/internal/watch';
|
||||
import styles from './range.styles';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { css } from 'lit';
|
||||
import { focusVisibleSelector } from '../../internal/focus-visible';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import { focusVisibleSelector } from '~/internal/focus-visible';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@ import { customElement, property, query, state } from 'lit/decorators.js';
|
|||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { styleMap } from 'lit/directives/style-map.js';
|
||||
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
||||
import '../../components/icon/icon';
|
||||
import { emit } from '../../internal/event';
|
||||
import { clamp } from '../../internal/math';
|
||||
import { watch } from '../../internal/watch';
|
||||
import '~/components/icon/icon';
|
||||
import { emit } from '~/internal/event';
|
||||
import { clamp } from '~/internal/math';
|
||||
import { watch } from '~/internal/watch';
|
||||
import styles from './rating.styles';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { html, LitElement } from 'lit';
|
||||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
import { LocalizeController } from '../../utilities/localize';
|
||||
import { LocalizeController } from '~/utilities/localize';
|
||||
|
||||
interface UnitConfig {
|
||||
max: number;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { html, LitElement } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { emit } from '../../internal/event';
|
||||
import { watch } from '../../internal/watch';
|
||||
import { emit } from '~/internal/event';
|
||||
import { watch } from '~/internal/watch';
|
||||
import styles from './resize-observer.styles';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import formControlStyles from '../../styles/form-control.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
import formControlStyles from '~/styles/form-control.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
import { html, LitElement } from 'lit';
|
||||
import { customElement, property, query, state } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import '../../components/dropdown/dropdown';
|
||||
import '../../components/icon-button/icon-button';
|
||||
import '../../components/icon/icon';
|
||||
import '../../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 '~/components/dropdown/dropdown';
|
||||
import type SlDropdown from '~/components/dropdown/dropdown';
|
||||
import '~/components/icon-button/icon-button';
|
||||
import type SlIconButton from '~/components/icon-button/icon-button';
|
||||
import '~/components/icon/icon';
|
||||
import type SlMenuItem from '~/components/menu-item/menu-item';
|
||||
import '~/components/menu/menu';
|
||||
import type SlMenu from '~/components/menu/menu';
|
||||
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 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';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { css } from 'lit';
|
||||
import { focusVisibleSelector } from '../../internal/focus-visible';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import { focusVisibleSelector } from '~/internal/focus-visible';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { html, LitElement } from 'lit';
|
||||
import { customElement, property, query } from 'lit/decorators.js';
|
||||
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||
import { drag } from '../../internal/drag';
|
||||
import { emit } from '../../internal/event';
|
||||
import { clamp } from '../../internal/math';
|
||||
import { watch } from '../../internal/watch';
|
||||
import { LocalizeController } from '../../utilities/localize';
|
||||
import { drag } from '~/internal/drag';
|
||||
import { emit } from '~/internal/event';
|
||||
import { clamp } from '~/internal/math';
|
||||
import { watch } from '~/internal/watch';
|
||||
import { LocalizeController } from '~/utilities/localize';
|
||||
import styles from './split-panel.styles';
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { css } from 'lit';
|
||||
import { focusVisibleSelector } from '../../internal/focus-visible';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
import { focusVisibleSelector } from '~/internal/focus-visible';
|
||||
import componentStyles from '~/styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Ładowanie…
Reference in New Issue