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

Rework events to use kebab-case names

pull/261/head
Cory LaViska 2020-10-09 17:45:16 -04:00
rodzic e3450fd759
commit 0df547631d
40 zmienionych plików z 220 dodań i 198 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

8
CONTRIBUTING.md
Wyświetl plik

@ -118,6 +118,14 @@ When designing a component's API, standard properties ("props") are generally us
There are some exceptions to this (e.g. when it significantly improves developer experience), but a good rule of thumbs is "will this need to change based on screen size?" If so, you probably want to use a CSS variable. There are some exceptions to this (e.g. when it significantly improves developer experience), but a good rule of thumbs is "will this need to change based on screen size?" If so, you probably want to use a CSS variable.
### Custom event names
All custom events must start with `sl-` as a namespace. For compatibility with frameworks that utilize DOM templates, custom events must have lowercase, kebab-style names. For example, use `sl-change` instead of `slChange`.
This convention avoids the problem of browsers lowercasing attributes, causing some frameworks to be unable to listen to them. This problem isn't specific to one framework, but [Vue's documentation](https://vuejs.org/v2/guide/components-custom-events.html#Event-Names) provides a good explanation of the problem.
> Additionally, `v-on` event listeners inside DOM templates will be automatically transformed to lowercase (due to HTML’s case-insensitivity), so `v-on:myEvent` would become `v-on:myevent` – making `myEvent` impossible to listen to.
### When to use a CSS custom property vs. a CSS part ### When to use a CSS custom property vs. a CSS part
There are two ways to enable customizations for components. One way is with CSS custom properties ("CSS variables"), the other is with CSS parts ("parts"). There are two ways to enable customizations for components. One way is with CSS custom properties ("CSS variables"), the other is with CSS parts ("parts").

2
docs/components/alert.md
Wyświetl plik

@ -69,7 +69,7 @@ Add the `closable` attribute to show a close button that will hide the alert.
<script> <script>
const alert = document.querySelector('.alert-closable'); const alert = document.querySelector('.alert-closable');
alert.addEventListener('slAfterHide', () => { alert.addEventListener('sl-after-hide', () => {
setTimeout(() => alert.open = true, 2000); setTimeout(() => alert.open = true, 2000);
}); });
</script> </script>

6
docs/components/animation.md
Wyświetl plik

@ -73,9 +73,9 @@ This example demonstrates all of the baked-in animations and easings. All animat
}); });
}); });
animationName.addEventListener('slChange', () => animation.name = animationName.value); animationName.addEventListener('sl-change', () => animation.name = animationName.value);
easingName.addEventListener('slChange', () => animation.easing = easingName.value); easingName.addEventListener('sl-change', () => animation.easing = easingName.value);
playbackRate.addEventListener('slChange', () => animation.playbackRate = playbackRate.value); playbackRate.addEventListener('sl-change', () => animation.playbackRate = playbackRate.value);
playbackRate.tooltipFormatter = val => `Playback Rate = ${val}`; playbackRate.tooltipFormatter = val => `Playback Rate = ${val}`;
</script> </script>

2
docs/components/details.md
Wyświetl plik

@ -50,7 +50,7 @@ Details are designed to function independently, but you can simulate a group or
const container = document.querySelector('.details-group-example'); const container = document.querySelector('.details-group-example');
// Close all other details when one is shown // Close all other details when one is shown
container.addEventListener('slShow', event => { container.addEventListener('sl-show', event => {
[...container.querySelectorAll('sl-details')].map(details => (details.open = event.target === details)); [...container.querySelectorAll('sl-details')].map(details => (details.open = event.target === details));
}); });
</script> </script>

2
docs/components/dialog.md
Wyświetl plik

@ -103,7 +103,7 @@ By default, dialogs are closed when the user clicks or taps on the overlay. To p
openButton.addEventListener('click', () => dialog.show()); openButton.addEventListener('click', () => dialog.show());
closeButton.addEventListener('click', () => dialog.hide()); closeButton.addEventListener('click', () => dialog.hide());
dialog.addEventListener('slOverlayDismiss', event => event.preventDefault()); dialog.addEventListener('sl-overlay-dismiss', event => event.preventDefault());
})(); })();
</script> </script>
``` ```

2
docs/components/drawer.md
Wyświetl plik

@ -199,7 +199,7 @@ By default, drawers are closed when the user clicks or taps on the overlay. To p
openButton.addEventListener('click', () => drawer.show()); openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide()); closeButton.addEventListener('click', () => drawer.hide());
drawer.addEventListener('slOverlayDismiss', event => event.preventDefault()); drawer.addEventListener('sl-overlay-dismiss', event => event.preventDefault());
})(); })();
</script> </script>
``` ```

2
docs/components/dropdown.md
Wyświetl plik

@ -141,7 +141,7 @@ When dropdowns are used with [menus](/components/menu.md), you can listen for th
const container = document.querySelector('.dropdown-selection'); const container = document.querySelector('.dropdown-selection');
const dropdown = container.querySelector('sl-dropdown'); const dropdown = container.querySelector('sl-dropdown');
dropdown.addEventListener('slSelect', event => { dropdown.addEventListener('sl-select', event => {
const selectedItem = event.detail.item; const selectedItem = event.detail.item;
console.log(selectedItem.value); console.log(selectedItem.value);
}); });

16
docs/components/form.md
Wyświetl plik

@ -31,7 +31,7 @@ Shoelace forms don't make use of `action` and `method` attributes and they don't
const form = document.querySelector('.form-overview'); const form = document.querySelector('.form-overview');
// Watch for the slSubmit event // Watch for the slSubmit event
form.addEventListener('slSubmit', event => { form.addEventListener('sl-submit', event => {
const formData = event.detail.formData; const formData = event.detail.formData;
let output = ''; let output = '';
@ -69,7 +69,7 @@ Shoelace forms don't make use of `action` and `method` attributes and they don't
## Form Control Validation ## Form Control Validation
Client-side validation can be enabled through the browser's [constraint validations API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) for many form controls. You can enable it using props such as `required`, `pattern`, `minlength`, and `maxlength`. As the user interacts with the form control, the `invalid` attribute will reflect its validity based on its current value and the constraints that have been defined. Client-side validation can be enabled through the browser's [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) for many form controls. You can enable it using props such as `required`, `pattern`, `minlength`, and `maxlength`. As the user interacts with the form control, the `invalid` attribute will reflect its validity based on its current value and the constraints that have been defined.
When a form control is invalid, the containing form will not be submitted. Instead, the browser will show the user a relevant error message. If you don't want to use client-side validation, you can suppress this behavior by adding `novalidate` to the `<sl-form>` element. When a form control is invalid, the containing form will not be submitted. Instead, the browser will show the user a relevant error message. If you don't want to use client-side validation, you can suppress this behavior by adding `novalidate` to the `<sl-form>` element.
@ -103,7 +103,7 @@ To make a field required, use the `required` prop. The form will not be submitte
<script> <script>
const form = document.querySelector('.input-validation-required'); const form = document.querySelector('.input-validation-required');
form.addEventListener('slSubmit', () => alert('All fields are valid!')); form.addEventListener('sl-submit', () => alert('All fields are valid!'));
</script> </script>
``` ```
@ -120,7 +120,7 @@ To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/
<script> <script>
const form = document.querySelector('.input-validation-pattern'); const form = document.querySelector('.input-validation-pattern');
form.addEventListener('slSubmit', () => alert('All fields are valid!')); form.addEventListener('sl-submit', () => alert('All fields are valid!'));
</script> </script>
``` ```
@ -139,7 +139,7 @@ Some input types will automatically trigger constraints, such as `email` and `ur
<script> <script>
const form = document.querySelector('.input-validation-type'); const form = document.querySelector('.input-validation-type');
form.addEventListener('slSubmit', () => alert('All fields are valid!')); form.addEventListener('sl-submit', () => alert('All fields are valid!'));
</script> </script>
``` ```
@ -158,8 +158,8 @@ To create a custom validation error, use the `setCustomValidity` method. The for
const form = document.querySelector('.input-validation-custom'); const form = document.querySelector('.input-validation-custom');
const input = form.querySelector('sl-input'); const input = form.querySelector('sl-input');
form.addEventListener('slSubmit', () => alert('All fields are valid!')); form.addEventListener('sl-submit', () => alert('All fields are valid!'));
input.addEventListener('slInput', () => { input.addEventListener('sl-input', () => {
if (input.value === 'shoelace') { if (input.value === 'shoelace') {
input.setCustomValidity(''); input.setCustomValidity('');
} else { } else {
@ -204,7 +204,7 @@ The `invalid` attribute reflects the form control's validity, so you can style i
To opt out of the browser's built-in validation and use your own, add the `novalidate` attribute to the form. This will ignore all constraints and prevent the browser from showing its own warnings when form controls are invalid. To opt out of the browser's built-in validation and use your own, add the `novalidate` attribute to the form. This will ignore all constraints and prevent the browser from showing its own warnings when form controls are invalid.
Remember that the `invalid` prop on form controls reflects validity as defined by the [constraint validation API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation). You can set it initially, but the `invalid` prop will update as the user interacts with the form control. As such, you should not rely on it to set invalid styles using a custom validation library. Remember that the `invalid` prop on form controls reflects validity as defined by the [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation). You can set it initially, but the `invalid` prop will update as the user interacts with the form control. As such, you should not rely on it to set invalid styles using a custom validation library.
Instead, toggle a class and target it in your stylesheet as shown below. Instead, toggle a class and target it in your stylesheet as shown below.

2
docs/components/format-bytes.md
Wyświetl plik

@ -16,7 +16,7 @@ Formats a number as a human readable bytes value.
const formatter = container.querySelector('sl-format-bytes'); const formatter = container.querySelector('sl-format-bytes');
const input = container.querySelector('sl-input'); const input = container.querySelector('sl-input');
input.addEventListener('slInput', () => formatter.value = input.value || 0); input.addEventListener('sl-input', () => formatter.value = input.value || 0);
</script> </script>
``` ```

4
docs/components/icon.md
Wyświetl plik

@ -103,7 +103,7 @@ Custom icons can be loaded individually with the `src` attribute. Only SVGs on a
}); });
// Filter as the user types // Filter as the user types
input.addEventListener('slInput', () => { input.addEventListener('sl-input', () => {
[...list.querySelectorAll('.icon-list-item')].map(item => { [...list.querySelectorAll('.icon-list-item')].map(item => {
const filter = input.value.toLowerCase(); const filter = input.value.toLowerCase();
if (filter === '') { if (filter === '') {
@ -119,7 +119,7 @@ Custom icons can be loaded individually with the `src` attribute. Only SVGs on a
const iconType = localStorage.getItem('sl-icon:type') || 'outline'; const iconType = localStorage.getItem('sl-icon:type') || 'outline';
select.value = iconType; select.value = iconType;
list.setAttribute('data-type', select.value); list.setAttribute('data-type', select.value);
select.addEventListener('slChange', () => { select.addEventListener('sl-change', () => {
list.setAttribute('data-type', select.value); list.setAttribute('data-type', select.value);
localStorage.setItem('sl-icon:type', select.value); localStorage.setItem('sl-icon:type', select.value);
}); });

2
docs/components/input.md
Wyświetl plik

@ -146,7 +146,7 @@ Dropdowns can be used in the `prefix` or `suffix` slot to make inputs more versa
const dropdown = container.querySelector('sl-dropdown'); const dropdown = container.querySelector('sl-dropdown');
const trigger = dropdown.querySelector('sl-button'); const trigger = dropdown.querySelector('sl-button');
dropdown.addEventListener('slSelect', event => { dropdown.addEventListener('sl-select', event => {
const selectedItem = event.detail.item; const selectedItem = event.detail.item;
trigger.textContent = selectedItem.textContent; trigger.textContent = selectedItem.textContent;
[...dropdown.querySelectorAll('sl-menu-item')].map(item => item.checked = item === selectedItem); [...dropdown.querySelectorAll('sl-menu-item')].map(item => item.checked = item === selectedItem);

2
docs/components/tag.md
Wyświetl plik

@ -48,7 +48,7 @@ Use the `clearable` attribute to add a clear button to the tag.
<script> <script>
const div = document.querySelector('.tags-clearable'); const div = document.querySelector('.tags-clearable');
div.addEventListener('slClear', event => { div.addEventListener('sl-clear', event => {
const tag = event.target; const tag = event.target;
tag.style.opacity = '0'; tag.style.opacity = '0';
setTimeout(() => tag.style.opacity = '1', 2000); setTimeout(() => tag.style.opacity = '1', 2000);

22
docs/getting-started/changelog.md
Wyświetl plik

@ -8,6 +8,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
## Next ## Next
- 🚨 BREAKING CHANGE: Transformed all Shoelace events to lowercase ([details](#why-did-event-names-change))
- Added support for dropdowns and non-icon elements to `sl-input` - Added support for dropdowns and non-icon elements to `sl-input`
- Added `spellcheck` prop to `sl-input` - Added `spellcheck` prop to `sl-input`
- Added `sl-icon-library` to allow custom icon library registration - Added `sl-icon-library` to allow custom icon library registration
@ -17,6 +18,19 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
- Fixed a bug where tabbing into slotted elements closes `sl-dropdown` when used in a shadow root [#223](https://github.com/shoelace-style/shoelace/issues/223) - Fixed a bug where tabbing into slotted elements closes `sl-dropdown` when used in a shadow root [#223](https://github.com/shoelace-style/shoelace/issues/223)
- Fixed a bug where scroll anchoring caused undesirable scrolling when `sl-details` are grouped - Fixed a bug where scroll anchoring caused undesirable scrolling when `sl-details` are grouped
### Why did event names change?
Shoelace events were updated to use a lowercase, kebab-style naming convention. Instead of event names such as `slChange` and `slAfterShow`, you'll need to use `sl-change` and `sl-after-show` now.
This change was necessary to address a critical issue in frameworks that use DOM templates with declarative event bindings such as `<sl-button @slChange="handler">`. Due to HTML's case-insensitivity, browsers translate attribute names to lowercase, turning `@slChange` into `@slchange`, making it impossible to listen to `slChange`.
While declarative event binding is a non-standard feature, not supporting it would make Shoelace much harder to use in popular frameworks. To accommodate those users and provide a better developer experience, we decided to change the naming convention while Shoelace is still in beta.
The following pages demonstrate why this change was necessary.
- [This Polymer FAQ from Custom Elements Everywhere](https://custom-elements-everywhere.com/#faq-polymer])
- [Vue's Event Names documentation](https://vuejs.org/v2/guide/components-custom-events.html#Event-Names)
## 2.0.0-beta.19 ## 2.0.0-beta.19
- Added `input`, `label`, `prefix`, `clear-button`, `suffix`, `help-text` exported parts to `sl-select` to make the input customizable - Added `input`, `label`, `prefix`, `clear-button`, `suffix`, `help-text` exported parts to `sl-select` to make the input customizable
@ -35,7 +49,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
- Added `sl-responsive-embed` component - Added `sl-responsive-embed` component
- Fixed a bug where swapping an animated element wouldn't restart the animation in `sl-animation` - Fixed a bug where swapping an animated element wouldn't restart the animation in `sl-animation`
- Fixed a bug where the cursor was incorrect when `sl-select` was disabled - Fixed a bug where the cursor was incorrect when `sl-select` was disabled
- Fixed a bug where `slBlur` and `slFocus` were emitted twice in `sl-select` - Fixed a bug where `slblur` and `slfocus` were emitted twice in `sl-select`
- Fixed a bug where clicking on `sl-menu` wouldn't focus it - Fixed a bug where clicking on `sl-menu` wouldn't focus it
- Fixed a bug in the popover utility where `onAfterShow` would fire too soon - Fixed a bug in the popover utility where `onAfterShow` would fire too soon
- Fixed a bug where `bottom` and `right` placements didn't render properly in `sl-tab-group` - Fixed a bug where `bottom` and `right` placements didn't render properly in `sl-tab-group`
@ -72,7 +86,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
- Add `hoist` prop to `sl-color-picker`, `sl-dropdown`, and `sl-select` to work around panel clipping - Add `hoist` prop to `sl-color-picker`, `sl-dropdown`, and `sl-select` to work around panel clipping
- Add `sl-format-bytes` utility component - Add `sl-format-bytes` utility component
- Add `clearable` and `required` props to `sl-select` - Add `clearable` and `required` props to `sl-select`
- Add `slClear` event to `sl-input` - Add `slclear` event to `sl-input`
- Added keyboard support to the preview resizer in the docs - Added keyboard support to the preview resizer in the docs
- Fixed a bug where the `aria-selected` state was incorrect in `sl-menu-item` - Fixed a bug where the `aria-selected` state was incorrect in `sl-menu-item`
- Fixed a bug where custom properties applied to `sl-tooltip` didn't affect show/hide transitions - Fixed a bug where custom properties applied to `sl-tooltip` didn't affect show/hide transitions
@ -100,7 +114,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
- Added `tag` part to `sl-select` - Added `tag` part to `sl-select`
- Updated `package.json` so custom elements imports can be consumed from the root - Updated `package.json` so custom elements imports can be consumed from the root
- Fixed a bug where scrolling dialogs didn't resize properly in Safari - Fixed a bug where scrolling dialogs didn't resize properly in Safari
- Fixed a bug where `slShow` and `slHide` would be emitted twice in some components - Fixed a bug where `slshow` and `slhide` would be emitted twice in some components
- Fixed a bug where `custom-elements/index.d.ts` was broken due to an unclosed comment (fixed in Stencil 1.17.3) - Fixed a bug where `custom-elements/index.d.ts` was broken due to an unclosed comment (fixed in Stencil 1.17.3)
- Fixed bug where inputs were not using border radius tokens - Fixed bug where inputs were not using border radius tokens
- Fixed a bug where the text color was being erroneously set in `sl-progress-ring` - Fixed a bug where the text color was being erroneously set in `sl-progress-ring`
@ -110,7 +124,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
## 2.0.0-beta.13 ## 2.0.0-beta.13
- Added `slActivate` and `slDeactivate` events to `sl-menu-item` - Added `slactivate` and `sldeactivate` events to `sl-menu-item`
- Added experimental `sl-animation` component - Added experimental `sl-animation` component
- Added shields to documentation - Added shields to documentation
- Fixed a bug where link buttons would have `type="button"` - Fixed a bug where link buttons would have `type="button"`

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

@ -33,14 +33,14 @@ Refer to a component's documentation for a complete list of its properties.
### Events ### Events
You can listen for standard events such as `click`, `mouseover`, etc. as you normally would. In addition, some components emit custom events. These work the same way as standard events, but are prefixed with `sl` to prevent collisions with standard events and other libraries. You can listen for standard events such as `click`, `mouseover`, etc. as you normally would. In addition, some components emit custom events. These work the same way as standard events, but are prefixed with `sl-` to prevent collisions with standard events and other libraries.
```html ```html
<sl-checkbox>Check me</sl-checkbox> <sl-checkbox>Check me</sl-checkbox>
<script> <script>
const checkbox = document.querySelector('sl-checkbox'); const checkbox = document.querySelector('sl-checkbox');
checkbox.addEventListener('slChange', event => { checkbox.addEventListener('sl-change', event => {
console.log(event.target.checked ? 'checked' : 'not checked'); console.log(event.target.checked ? 'checked' : 'not checked');
}); });
</script> </script>

150
src/components.d.ts vendored
Wyświetl plik

@ -297,7 +297,7 @@ export namespace Components {
*/ */
"setCustomValidity": (message: string) => Promise<void>; "setCustomValidity": (message: string) => Promise<void>;
/** /**
* When `inline` is true, this determines the size of the color picker's trigger. * Determines the size of the color picker's trigger. This has no effect on inline color pickers.
*/ */
"size": 'small' | 'medium' | 'large'; "size": 'small' | 'medium' | 'large';
/** /**
@ -1468,19 +1468,19 @@ declare namespace LocalJSX {
/** /**
* Emitted after the alert closes and all transitions are complete. * Emitted after the alert closes and all transitions are complete.
*/ */
"onSlAfterHide"?: (event: CustomEvent<any>) => void; "onSl-after-hide"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted after the alert opens and all transitions are complete. * Emitted after the alert opens and all transitions are complete.
*/ */
"onSlAfterShow"?: (event: CustomEvent<any>) => void; "onSl-after-show"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. * Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed.
*/ */
"onSlHide"?: (event: CustomEvent<any>) => void; "onSl-hide"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. * Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened.
*/ */
"onSlShow"?: (event: CustomEvent<any>) => void; "onSl-show"?: (event: CustomEvent<any>) => void;
/** /**
* Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. * Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.
*/ */
@ -1534,15 +1534,15 @@ declare namespace LocalJSX {
/** /**
* Emitted when the animation is canceled. * Emitted when the animation is canceled.
*/ */
"onSlCancel"?: (event: CustomEvent<any>) => void; "onSl-cancel"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the animation finishes. * Emitted when the animation finishes.
*/ */
"onSlFinish"?: (event: CustomEvent<any>) => void; "onSl-finish"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the animation starts or restarts. * Emitted when the animation starts or restarts.
*/ */
"onSlStart"?: (event: CustomEvent<any>) => void; "onSl-start"?: (event: CustomEvent<any>) => void;
/** /**
* Pauses the animation. The animation will resume when this prop is removed. * Pauses the animation. The animation will resume when this prop is removed.
*/ */
@ -1616,11 +1616,11 @@ declare namespace LocalJSX {
/** /**
* Emitted when the button loses focus. * Emitted when the button loses focus.
*/ */
"onSlBlur"?: (event: CustomEvent<any>) => void; "onSl-blur"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the button gains focus. * Emitted when the button gains focus.
*/ */
"onSlFocus"?: (event: CustomEvent<any>) => void; "onSl-focus"?: (event: CustomEvent<any>) => void;
/** /**
* Set to true to draw a pill-style button with rounded edges. * Set to true to draw a pill-style button with rounded edges.
*/ */
@ -1678,15 +1678,15 @@ declare namespace LocalJSX {
/** /**
* Emitted when the control loses focus. * Emitted when the control loses focus.
*/ */
"onSlBlur"?: (event: CustomEvent<any>) => void; "onSl-blur"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the control's checked state changes. * Emitted when the control's checked state changes.
*/ */
"onSlChange"?: (event: CustomEvent<any>) => void; "onSl-change"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the control gains focus. * Emitted when the control gains focus.
*/ */
"onSlFocus"?: (event: CustomEvent<any>) => void; "onSl-focus"?: (event: CustomEvent<any>) => void;
/** /**
* Set to true to make the checkbox a required field. * Set to true to make the checkbox a required field.
*/ */
@ -1724,29 +1724,29 @@ declare namespace LocalJSX {
/** /**
* Emitted after the color picker closes and all transitions are complete. * Emitted after the color picker closes and all transitions are complete.
*/ */
"onSlAfterHide"?: (event: CustomEvent<any>) => void; "onSl-after-hide"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted after the color picker opens and all transitions are complete. * Emitted after the color picker opens and all transitions are complete.
*/ */
"onSlAfterShow"?: (event: CustomEvent<any>) => void; "onSl-after-show"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the color picker's value changes. * Emitted when the color picker's value changes.
*/ */
"onSlChange"?: (event: CustomEvent<any>) => void; "onSl-change"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the color picker closes. Calling `event.preventDefault()` will prevent it from being closed. * Emitted when the color picker closes. Calling `event.preventDefault()` will prevent it from being closed.
*/ */
"onSlHide"?: (event: CustomEvent<any>) => void; "onSl-hide"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the color picker opens. Calling `event.preventDefault()` will prevent it from being opened. * Emitted when the color picker opens. Calling `event.preventDefault()` will prevent it from being opened.
*/ */
"onSlShow"?: (event: CustomEvent<any>) => void; "onSl-show"?: (event: CustomEvent<any>) => void;
/** /**
* Whether to show the opacity slider. * Whether to show the opacity slider.
*/ */
"opacity"?: boolean; "opacity"?: boolean;
/** /**
* When `inline` is true, this determines the size of the color picker's trigger. * Determines the size of the color picker's trigger. This has no effect on inline color pickers.
*/ */
"size"?: 'small' | 'medium' | 'large'; "size"?: 'small' | 'medium' | 'large';
/** /**
@ -1770,19 +1770,19 @@ declare namespace LocalJSX {
/** /**
* Emitted after the details closes and all transitions are complete. * Emitted after the details closes and all transitions are complete.
*/ */
"onSlAfterHide"?: (event: CustomEvent<any>) => void; "onSl-after-hide"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted after the details opens and all transitions are complete. * Emitted after the details opens and all transitions are complete.
*/ */
"onSlAfterShow"?: (event: CustomEvent<any>) => void; "onSl-after-show"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the details closes. Calling `event.preventDefault()` will prevent it from being closed. * Emitted when the details closes. Calling `event.preventDefault()` will prevent it from being closed.
*/ */
"onSlHide"?: (event: CustomEvent<any>) => void; "onSl-hide"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the details opens. Calling `event.preventDefault()` will prevent it from being opened. * Emitted when the details opens. Calling `event.preventDefault()` will prevent it from being opened.
*/ */
"onSlShow"?: (event: CustomEvent<any>) => void; "onSl-show"?: (event: CustomEvent<any>) => void;
/** /**
* Indicates whether or not the details is open. You can use this in lieu of the show/hide methods. * Indicates whether or not the details is open. You can use this in lieu of the show/hide methods.
*/ */
@ -1804,23 +1804,23 @@ declare namespace LocalJSX {
/** /**
* Emitted after the dialog closes and all transitions are complete. * Emitted after the dialog closes and all transitions are complete.
*/ */
"onSlAfterHide"?: (event: CustomEvent<any>) => void; "onSl-after-hide"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted after the dialog opens and all transitions are complete. * Emitted after the dialog opens and all transitions are complete.
*/ */
"onSlAfterShow"?: (event: CustomEvent<any>) => void; "onSl-after-show"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. * Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed.
*/ */
"onSlHide"?: (event: CustomEvent<any>) => void; "onSl-hide"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing. * Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing.
*/ */
"onSlOverlayDismiss"?: (event: CustomEvent<any>) => void; "onSl-overlay-dismiss"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. * Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened.
*/ */
"onSlShow"?: (event: CustomEvent<any>) => void; "onSl-show"?: (event: CustomEvent<any>) => void;
/** /**
* Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. * Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods.
*/ */
@ -1842,23 +1842,23 @@ declare namespace LocalJSX {
/** /**
* Emitted after the drawer closes and all transitions are complete. * Emitted after the drawer closes and all transitions are complete.
*/ */
"onSlAfterHide"?: (event: CustomEvent<any>) => void; "onSl-after-hide"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted after the drawer opens and all transitions are complete. * Emitted after the drawer opens and all transitions are complete.
*/ */
"onSlAfterShow"?: (event: CustomEvent<any>) => void; "onSl-after-show"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed. * Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed.
*/ */
"onSlHide"?: (event: CustomEvent<any>) => void; "onSl-hide"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing. * Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing.
*/ */
"onSlOverlayDismiss"?: (event: CustomEvent<any>) => void; "onSl-overlay-dismiss"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened. * Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened.
*/ */
"onSlShow"?: (event: CustomEvent<any>) => void; "onSl-show"?: (event: CustomEvent<any>) => void;
/** /**
* Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods. * Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.
*/ */
@ -1888,19 +1888,19 @@ declare namespace LocalJSX {
/** /**
* Emitted after the dropdown closes and all transitions are complete. * Emitted after the dropdown closes and all transitions are complete.
*/ */
"onSlAfterHide"?: (event: CustomEvent<any>) => void; "onSl-after-hide"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted after the dropdown opens and all transitions are complete. * Emitted after the dropdown opens and all transitions are complete.
*/ */
"onSlAfterShow"?: (event: CustomEvent<any>) => void; "onSl-after-show"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed. * Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.
*/ */
"onSlHide"?: (event: CustomEvent<any>) => void; "onSl-hide"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened. * Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.
*/ */
"onSlShow"?: (event: CustomEvent<any>) => void; "onSl-show"?: (event: CustomEvent<any>) => void;
/** /**
* Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. * Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods.
*/ */
@ -1933,7 +1933,7 @@ declare namespace LocalJSX {
/** /**
* Emitted when the form is submitted. This event will not be emitted if any form control inside of it is in an invalid state, unless the form has the `novalidate` attribute. Note that there is never a need to prevent this event, since it doen't send a GET or POST request like native forms. To "prevent" submission, use a conditional around the XHR request you use to submit the form's data with. * Emitted when the form is submitted. This event will not be emitted if any form control inside of it is in an invalid state, unless the form has the `novalidate` attribute. Note that there is never a need to prevent this event, since it doen't send a GET or POST request like native forms. To "prevent" submission, use a conditional around the XHR request you use to submit the form's data with.
*/ */
"onSlSubmit"?: (event: CustomEvent<any>) => void; "onSl-submit"?: (event: CustomEvent<any>) => void;
} }
interface SlFormatBytes { interface SlFormatBytes {
/** /**
@ -1965,11 +1965,11 @@ declare namespace LocalJSX {
/** /**
* Emitted when the icon failed to load. * Emitted when the icon failed to load.
*/ */
"onSlError"?: (event: CustomEvent<any>) => void; "onSl-error"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the icon has loaded. * Emitted when the icon has loaded.
*/ */
"onSlLoad"?: (event: CustomEvent<any>) => void; "onSl-load"?: (event: CustomEvent<any>) => void;
/** /**
* An external URL of an SVG file. * An external URL of an SVG file.
*/ */
@ -2015,7 +2015,7 @@ declare namespace LocalJSX {
/** /**
* Emitted when the slider position changes. * Emitted when the slider position changes.
*/ */
"onSlChange"?: (event: CustomEvent<any>) => void; "onSl-change"?: (event: CustomEvent<any>) => void;
/** /**
* The position of the divider as a percentage. * The position of the divider as a percentage.
*/ */
@ -2081,23 +2081,23 @@ declare namespace LocalJSX {
/** /**
* Emitted when the control loses focus. * Emitted when the control loses focus.
*/ */
"onSlBlur"?: (event: CustomEvent<any>) => void; "onSl-blur"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the control's value changes. * Emitted when the control's value changes.
*/ */
"onSlChange"?: (event: CustomEvent<any>) => void; "onSl-change"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the clear button is activated. * Emitted when the clear button is activated.
*/ */
"onSlClear"?: (event: CustomEvent<any>) => void; "onSl-clear"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the control gains focus. * Emitted when the control gains focus.
*/ */
"onSlFocus"?: (event: CustomEvent<any>) => void; "onSl-focus"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the control receives input. * Emitted when the control receives input.
*/ */
"onSlInput"?: (event: CustomEvent<any>) => void; "onSl-input"?: (event: CustomEvent<any>) => void;
/** /**
* A pattern to validate input against. * A pattern to validate input against.
*/ */
@ -2147,15 +2147,15 @@ declare namespace LocalJSX {
/** /**
* Emitted when the menu loses focus. * Emitted when the menu loses focus.
*/ */
"onSlBlur"?: (event: CustomEvent<any>) => void; "onSl-blur"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the menu gains focus. * Emitted when the menu gains focus.
*/ */
"onSlFocus"?: (event: CustomEvent<any>) => void; "onSl-focus"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when a menu item is selected. * Emitted when a menu item is selected.
*/ */
"onSlSelect"?: (event: CustomEvent<any>) => void; "onSl-select"?: (event: CustomEvent<any>) => void;
} }
interface SlMenuDivider { interface SlMenuDivider {
} }
@ -2175,11 +2175,11 @@ declare namespace LocalJSX {
/** /**
* Emitted when the menu item becomes active. * Emitted when the menu item becomes active.
*/ */
"onSlActivate"?: (event: CustomEvent<any>) => void; "onSl-activate"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the menu item becomes inactive. * Emitted when the menu item becomes inactive.
*/ */
"onSlDeactivate"?: (event: CustomEvent<any>) => void; "onSl-deactivate"?: (event: CustomEvent<any>) => void;
/** /**
* A unique value to store in the menu item. * A unique value to store in the menu item.
*/ */
@ -2227,15 +2227,15 @@ declare namespace LocalJSX {
/** /**
* Emitted when the control loses focus. * Emitted when the control loses focus.
*/ */
"onSlBlur"?: (event: CustomEvent<any>) => void; "onSl-blur"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the control's checked state changes. * Emitted when the control's checked state changes.
*/ */
"onSlChange"?: (event: CustomEvent<any>) => void; "onSl-change"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the control gains focus. * Emitted when the control gains focus.
*/ */
"onSlFocus"?: (event: CustomEvent<any>) => void; "onSl-focus"?: (event: CustomEvent<any>) => void;
/** /**
* The radio's value attribute. * The radio's value attribute.
*/ */
@ -2265,15 +2265,15 @@ declare namespace LocalJSX {
/** /**
* Emitted when the control loses focus. * Emitted when the control loses focus.
*/ */
"onSlBlur"?: (event: CustomEvent<any>) => void; "onSl-blur"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the control's value changes. * Emitted when the control's value changes.
*/ */
"onSlChange"?: (event: CustomEvent<any>) => void; "onSl-change"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the control gains focus. * Emitted when the control gains focus.
*/ */
"onSlFocus"?: (event: CustomEvent<any>) => void; "onSl-focus"?: (event: CustomEvent<any>) => void;
/** /**
* The input's step attribute. * The input's step attribute.
*/ */
@ -2307,7 +2307,7 @@ declare namespace LocalJSX {
/** /**
* Emitted when the rating's value changes. * Emitted when the rating's value changes.
*/ */
"onSlChange"?: (event: CustomEvent<any>) => void; "onSl-change"?: (event: CustomEvent<any>) => void;
/** /**
* The minimum increment value allowed by the control. * The minimum increment value allowed by the control.
*/ */
@ -2363,15 +2363,15 @@ declare namespace LocalJSX {
/** /**
* Emitted when the control loses focus * Emitted when the control loses focus
*/ */
"onSlBlur"?: (event: CustomEvent<any>) => void; "onSl-blur"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the control's value changes. * Emitted when the control's value changes.
*/ */
"onSlChange"?: (event: CustomEvent<any>) => void; "onSl-change"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the control gains focus * Emitted when the control gains focus
*/ */
"onSlFocus"?: (event: CustomEvent<any>) => void; "onSl-focus"?: (event: CustomEvent<any>) => void;
/** /**
* Set to true to draw a pill-style select with rounded edges. * Set to true to draw a pill-style select with rounded edges.
*/ */
@ -2421,15 +2421,15 @@ declare namespace LocalJSX {
/** /**
* Emitted when the control loses focus. * Emitted when the control loses focus.
*/ */
"onSlBlur"?: (event: CustomEvent<any>) => void; "onSl-blur"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the control's checked state changes. * Emitted when the control's checked state changes.
*/ */
"onSlChange"?: (event: CustomEvent<any>) => void; "onSl-change"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the control gains focus. * Emitted when the control gains focus.
*/ */
"onSlFocus"?: (event: CustomEvent<any>) => void; "onSl-focus"?: (event: CustomEvent<any>) => void;
/** /**
* Set to true to make the switch a required field. * Set to true to make the switch a required field.
*/ */
@ -2457,11 +2457,11 @@ declare namespace LocalJSX {
/** /**
* Emitted when a tab is hidden. * Emitted when a tab is hidden.
*/ */
"onSlTabHide"?: (event: CustomEvent<any>) => void; "onSl-tab-hide"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when a tab is shown. * Emitted when a tab is shown.
*/ */
"onSlTabShow"?: (event: CustomEvent<any>) => void; "onSl-tab-show"?: (event: CustomEvent<any>) => void;
/** /**
* The placement of the tabs. * The placement of the tabs.
*/ */
@ -2485,7 +2485,7 @@ declare namespace LocalJSX {
/** /**
* Emitted when the clear button is activated. * Emitted when the clear button is activated.
*/ */
"onSlClear"?: (event: CustomEvent<any>) => void; "onSl-clear"?: (event: CustomEvent<any>) => void;
/** /**
* Set to true to draw a pill-style tag with rounded edges. * Set to true to draw a pill-style tag with rounded edges.
*/ */
@ -2547,19 +2547,19 @@ declare namespace LocalJSX {
/** /**
* Emitted when the control loses focus. * Emitted when the control loses focus.
*/ */
"onSlBlur"?: (event: CustomEvent<any>) => void; "onSl-blur"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the control's value changes. * Emitted when the control's value changes.
*/ */
"onSlChange"?: (event: CustomEvent<any>) => void; "onSl-change"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the control gains focus. * Emitted when the control gains focus.
*/ */
"onSlFocus"?: (event: CustomEvent<any>) => void; "onSl-focus"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the control receives input. * Emitted when the control receives input.
*/ */
"onSlInput"?: (event: CustomEvent<any>) => void; "onSl-input"?: (event: CustomEvent<any>) => void;
/** /**
* The textarea's placeholder text. * The textarea's placeholder text.
*/ */
@ -2609,19 +2609,19 @@ declare namespace LocalJSX {
/** /**
* Emitted after the tooltip has hidden and all transitions are complete. * Emitted after the tooltip has hidden and all transitions are complete.
*/ */
"onSlAfterHide"?: (event: CustomEvent<any>) => void; "onSl-after-hide"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted after the tooltip has shown and all transitions are complete. * Emitted after the tooltip has shown and all transitions are complete.
*/ */
"onSlAfterShow"?: (event: CustomEvent<any>) => void; "onSl-aftershow"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. * Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden.
*/ */
"onSlHide"?: (event: CustomEvent<any>) => void; "onSl-hide"?: (event: CustomEvent<any>) => void;
/** /**
* Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. * Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown.
*/ */
"onSlShow"?: (event: CustomEvent<any>) => void; "onSl-show"?: (event: CustomEvent<any>) => void;
/** /**
* Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. * Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.
*/ */

10
src/components/alert/alert.tsx
Wyświetl plik

@ -53,16 +53,16 @@ export class Alert {
} }
/** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */ /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */
@Event() slShow: EventEmitter; @Event({ eventName: 'sl-show' }) slShow: EventEmitter;
/** Emitted after the alert opens and all transitions are complete. */ /** Emitted after the alert opens and all transitions are complete. */
@Event() slAfterShow: EventEmitter; @Event({ eventName: 'sl-after-show' }) slAfterShow: EventEmitter;
/** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */ /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */
@Event() slHide: EventEmitter; @Event({ eventName: 'sl-hide' }) slHide: EventEmitter;
/** Emitted after the alert closes and all transitions are complete. */ /** Emitted after the alert closes and all transitions are complete. */
@Event() slAfterHide: EventEmitter; @Event({ eventName: 'sl-after-hide' }) slAfterHide: EventEmitter;
connectedCallback() { connectedCallback() {
this.handleCloseClick = this.handleCloseClick.bind(this); this.handleCloseClick = this.handleCloseClick.bind(this);
@ -136,7 +136,7 @@ export class Alert {
this.show(); this.show();
this.host.addEventListener( this.host.addEventListener(
'slAfterHide', 'sl-after-hide',
() => { () => {
this.host.remove(); this.host.remove();
resolve(); resolve();

6
src/components/animation/animation.tsx
Wyświetl plik

@ -89,13 +89,13 @@ export class Animate {
} }
/** Emitted when the animation is canceled. */ /** Emitted when the animation is canceled. */
@Event() slCancel: EventEmitter; @Event({ eventName: 'sl-cancel' }) slCancel: EventEmitter;
/** Emitted when the animation finishes. */ /** Emitted when the animation finishes. */
@Event() slFinish: EventEmitter; @Event({ eventName: 'sl-finish' }) slFinish: EventEmitter;
/** Emitted when the animation starts or restarts. */ /** Emitted when the animation starts or restarts. */
@Event() slStart: EventEmitter; @Event({ eventName: 'sl-start' }) slStart: EventEmitter;
connectedCallback() { connectedCallback() {
this.handleAnimationFinish = this.handleAnimationFinish.bind(this); this.handleAnimationFinish = this.handleAnimationFinish.bind(this);

8
src/components/button-group/button-group.tsx
Wyświetl plik

@ -26,13 +26,13 @@ export class ButtonGroup {
} }
componentDidLoad() { componentDidLoad() {
this.buttonGroup.addEventListener('slFocus', this.handleFocus); this.buttonGroup.addEventListener('sl-focus', this.handleFocus);
this.buttonGroup.addEventListener('slBlur', this.handleBlur); this.buttonGroup.addEventListener('sl-blur', this.handleBlur);
} }
disconnectedCallback() { disconnectedCallback() {
this.buttonGroup.removeEventListener('slFocus', this.handleFocus); this.buttonGroup.removeEventListener('sl-focus', this.handleFocus);
this.buttonGroup.removeEventListener('slBlur', this.handleBlur); this.buttonGroup.removeEventListener('sl-blur', this.handleBlur);
} }
handleFocus(event: CustomEvent) { handleFocus(event: CustomEvent) {

4
src/components/button/button.tsx
Wyświetl plik

@ -65,10 +65,10 @@ export class Button {
@Prop() download: string; @Prop() download: string;
/** Emitted when the button loses focus. */ /** Emitted when the button loses focus. */
@Event() slBlur: EventEmitter; @Event({ eventName: 'sl-blur' }) slBlur: EventEmitter;
/** Emitted when the button gains focus. */ /** Emitted when the button gains focus. */
@Event() slFocus: EventEmitter; @Event({ eventName: 'sl-focus' }) slFocus: EventEmitter;
connectedCallback() { connectedCallback() {
this.handleBlur = this.handleBlur.bind(this); this.handleBlur = this.handleBlur.bind(this);

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

@ -49,13 +49,13 @@ export class Checkbox {
@Prop({ mutable: true, reflect: true }) invalid = false; @Prop({ mutable: true, reflect: true }) invalid = false;
/** Emitted when the control loses focus. */ /** Emitted when the control loses focus. */
@Event() slBlur: EventEmitter; @Event({ eventName: 'sl-blur' }) slBlur: EventEmitter;
/** Emitted when the control's checked state changes. */ /** Emitted when the control's checked state changes. */
@Event() slChange: EventEmitter; @Event({ eventName: 'sl-change' }) slChange: EventEmitter;
/** Emitted when the control gains focus. */ /** Emitted when the control gains focus. */
@Event() slFocus: EventEmitter; @Event({ eventName: 'sl-focus' }) slFocus: EventEmitter;
@Watch('checked') @Watch('checked')
@Watch('indeterminate') @Watch('indeterminate')

24
src/components/color-picker/color-picker.tsx
Wyświetl plik

@ -58,7 +58,7 @@ export class ColorPicker {
/** Set to true to render the color picker inline rather than inside a dropdown. */ /** Set to true to render the color picker inline rather than inside a dropdown. */
@Prop() inline = false; @Prop() inline = false;
/** When `inline` is true, this determines the size of the color picker's trigger. */ /** Determines the size of the color picker's trigger. This has no effect on inline color pickers. */
@Prop() size: 'small' | 'medium' | 'large' = 'medium'; @Prop() size: 'small' | 'medium' | 'large' = 'medium';
/** The input's name attribute. */ /** The input's name attribute. */
@ -109,19 +109,19 @@ export class ColorPicker {
]; ];
/** Emitted when the color picker's value changes. */ /** Emitted when the color picker's value changes. */
@Event() slChange: EventEmitter; @Event({ eventName: 'sl-change' }) slChange: EventEmitter;
/** Emitted when the color picker opens. Calling `event.preventDefault()` will prevent it from being opened. */ /** Emitted when the color picker opens. Calling `event.preventDefault()` will prevent it from being opened. */
@Event() slShow: EventEmitter; @Event({ eventName: 'sl-show' }) slShow: EventEmitter;
/** Emitted after the color picker opens and all transitions are complete. */ /** Emitted after the color picker opens and all transitions are complete. */
@Event() slAfterShow: EventEmitter; @Event({ eventName: 'sl-after-show' }) slAfterShow: EventEmitter;
/** Emitted when the color picker closes. Calling `event.preventDefault()` will prevent it from being closed. */ /** Emitted when the color picker closes. Calling `event.preventDefault()` will prevent it from being closed. */
@Event() slHide: EventEmitter; @Event({ eventName: 'sl-hide' }) slHide: EventEmitter;
/** Emitted after the color picker closes and all transitions are complete. */ /** Emitted after the color picker closes and all transitions are complete. */
@Event() slAfterHide: EventEmitter; @Event({ eventName: 'sl-after-hide' }) slAfterHide: EventEmitter;
@Watch('value') @Watch('value')
handleValueChange(newValue: string, oldValue: string) { handleValueChange(newValue: string, oldValue: string) {
@ -189,7 +189,7 @@ export class ColorPicker {
return new Promise(resolve => { return new Promise(resolve => {
this.dropdown.addEventListener( this.dropdown.addEventListener(
'slAfterShow', 'sl-after-show',
() => { () => {
this.input.reportValidity(); this.input.reportValidity();
resolve(); resolve();
@ -740,7 +740,7 @@ export class ColorPicker {
value={this.inputValue} value={this.inputValue}
disabled={this.disabled} disabled={this.disabled}
onKeyDown={this.handleInputKeyDown} onKeyDown={this.handleInputKeyDown}
onSlChange={this.handleInputChange} onSl-change={this.handleInputChange}
/> />
<sl-button <sl-button
ref={el => (this.copyButton = el)} ref={el => (this.copyButton = el)}
@ -789,10 +789,10 @@ export class ColorPicker {
aria-disabled={this.disabled} aria-disabled={this.disabled}
containingElement={this.host} containingElement={this.host}
hoist={this.hoist} hoist={this.hoist}
onSlShow={this.handleDropdownShow} onSl-show={this.handleDropdownShow}
onSlAfterShow={this.handleDropdownAfterShow} onSl-after-show={this.handleDropdownAfterShow}
onSlHide={this.handleDropdownHide} onSl-hide={this.handleDropdownHide}
onSlAfterHide={this.handleDropdownAfterHide} onSl-after-hide={this.handleDropdownAfterHide}
> >
<button <button
ref={el => (this.trigger = el)} ref={el => (this.trigger = el)}

8
src/components/details/details.tsx
Wyświetl plik

@ -44,16 +44,16 @@ export class Details {
} }
/** Emitted when the details opens. Calling `event.preventDefault()` will prevent it from being opened. */ /** Emitted when the details opens. Calling `event.preventDefault()` will prevent it from being opened. */
@Event() slShow: EventEmitter; @Event({ eventName: 'sl-show' }) slShow: EventEmitter;
/** Emitted after the details opens and all transitions are complete. */ /** Emitted after the details opens and all transitions are complete. */
@Event() slAfterShow: EventEmitter; @Event({ eventName: 'sl-after-show' }) slAfterShow: EventEmitter;
/** Emitted when the details closes. Calling `event.preventDefault()` will prevent it from being closed. */ /** Emitted when the details closes. Calling `event.preventDefault()` will prevent it from being closed. */
@Event() slHide: EventEmitter; @Event({ eventName: 'sl-hide' }) slHide: EventEmitter;
/** Emitted after the details closes and all transitions are complete. */ /** Emitted after the details closes and all transitions are complete. */
@Event() slAfterHide: EventEmitter; @Event({ eventName: 'sl-after-hide' }) slAfterHide: EventEmitter;
connectedCallback() { connectedCallback() {
this.handleBodyTransitionEnd = this.handleBodyTransitionEnd.bind(this); this.handleBodyTransitionEnd = this.handleBodyTransitionEnd.bind(this);

10
src/components/dialog/dialog.tsx
Wyświetl plik

@ -57,19 +57,19 @@ export class Dialog {
} }
/** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */ /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */
@Event() slShow: EventEmitter; @Event({ eventName: 'sl-show' }) slShow: EventEmitter;
/** Emitted after the dialog opens and all transitions are complete. */ /** Emitted after the dialog opens and all transitions are complete. */
@Event() slAfterShow: EventEmitter; @Event({ eventName: 'sl-after-show' }) slAfterShow: EventEmitter;
/** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */ /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */
@Event() slHide: EventEmitter; @Event({ eventName: 'sl-hide' }) slHide: EventEmitter;
/** Emitted after the dialog closes and all transitions are complete. */ /** Emitted after the dialog closes and all transitions are complete. */
@Event() slAfterHide: EventEmitter; @Event({ eventName: 'sl-after-hide' }) slAfterHide: EventEmitter;
/** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing. */ /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing. */
@Event() slOverlayDismiss: EventEmitter; @Event({ eventName: 'sl-overlay-dismiss' }) slOverlayDismiss: EventEmitter;
connectedCallback() { connectedCallback() {
this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this); this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);

10
src/components/drawer/drawer.tsx
Wyświetl plik

@ -65,19 +65,19 @@ export class Drawer {
} }
/** Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened. */ /** Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened. */
@Event() slShow: EventEmitter; @Event({ eventName: 'sl-show' }) slShow: EventEmitter;
/** Emitted after the drawer opens and all transitions are complete. */ /** Emitted after the drawer opens and all transitions are complete. */
@Event() slAfterShow: EventEmitter; @Event({ eventName: 'sl-after-show' }) slAfterShow: EventEmitter;
/** Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed. */ /** Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed. */
@Event() slHide: EventEmitter; @Event({ eventName: 'sl-hide' }) slHide: EventEmitter;
/** Emitted after the drawer closes and all transitions are complete. */ /** Emitted after the drawer closes and all transitions are complete. */
@Event() slAfterHide: EventEmitter; @Event({ eventName: 'sl-after-hide' }) slAfterHide: EventEmitter;
/** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing. */ /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing. */
@Event() slOverlayDismiss: EventEmitter; @Event({ eventName: 'sl-overlay-dismiss' }) slOverlayDismiss: EventEmitter;
connectedCallback() { connectedCallback() {
this.handleCloseClick = this.handleCloseClick.bind(this); this.handleCloseClick = this.handleCloseClick.bind(this);

16
src/components/dropdown/dropdown.tsx
Wyświetl plik

@ -71,16 +71,16 @@ export class Dropdown {
@Prop() hoist = false; @Prop() hoist = false;
/** Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened. */ /** Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened. */
@Event() slShow: EventEmitter; @Event({ eventName: 'sl-show' }) slShow: EventEmitter;
/** Emitted after the dropdown opens and all transitions are complete. */ /** Emitted after the dropdown opens and all transitions are complete. */
@Event() slAfterShow: EventEmitter; @Event({ eventName: 'sl-after-show' }) slAfterShow: EventEmitter;
/** Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed. */ /** Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed. */
@Event() slHide: EventEmitter; @Event({ eventName: 'sl-hide' }) slHide: EventEmitter;
/** Emitted after the dropdown closes and all transitions are complete. */ /** Emitted after the dropdown closes and all transitions are complete. */
@Event() slAfterHide: EventEmitter; @Event({ eventName: 'sl-after-hide' }) slAfterHide: EventEmitter;
@Watch('open') @Watch('open')
handleOpenChange() { handleOpenChange() {
@ -155,8 +155,8 @@ export class Dropdown {
return; return;
} }
this.panel.addEventListener('slActivate', this.handleMenuItemActivate); this.panel.addEventListener('sl-activate', this.handleMenuItemActivate);
this.panel.addEventListener('slSelect', this.handlePanelSelect); this.panel.addEventListener('sl-select', this.handlePanelSelect);
document.addEventListener('keydown', this.handleDocumentKeyDown); document.addEventListener('keydown', this.handleDocumentKeyDown);
document.addEventListener('mousedown', this.handleDocumentMouseDown); document.addEventListener('mousedown', this.handleDocumentMouseDown);
@ -179,8 +179,8 @@ export class Dropdown {
return; return;
} }
this.panel.removeEventListener('slActivate', this.handleMenuItemActivate); this.panel.removeEventListener('sl-activate', this.handleMenuItemActivate);
this.panel.removeEventListener('slSelect', this.handlePanelSelect); this.panel.removeEventListener('sl-select', this.handlePanelSelect);
document.addEventListener('keydown', this.handleDocumentKeyDown); document.addEventListener('keydown', this.handleDocumentKeyDown);
document.removeEventListener('mousedown', this.handleDocumentMouseDown); document.removeEventListener('mousedown', this.handleDocumentMouseDown);

2
src/components/form/form.tsx
Wyświetl plik

@ -34,7 +34,7 @@ export class Form {
* event, since it doen't send a GET or POST request like native forms. To "prevent" submission, use a conditional * event, since it doen't send a GET or POST request like native forms. To "prevent" submission, use a conditional
* around the XHR request you use to submit the form's data with. * around the XHR request you use to submit the form's data with.
*/ */
@Event() slSubmit: EventEmitter; @Event({ eventName: 'sl-submit' }) slSubmit: EventEmitter;
connectedCallback() { connectedCallback() {
this.formControls = [ this.formControls = [

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

@ -35,10 +35,10 @@ export class Icon {
@Prop() library = 'default'; @Prop() library = 'default';
/** Emitted when the icon has loaded. */ /** Emitted when the icon has loaded. */
@Event() slLoad: EventEmitter; @Event({ eventName: 'sl-load' }) slLoad: EventEmitter;
/** Emitted when the icon failed to load. */ /** Emitted when the icon failed to load. */
@Event() slError: EventEmitter; @Event({ eventName: 'sl-error' }) slError: EventEmitter;
@Watch('name') @Watch('name')
@Watch('src') @Watch('src')

2
src/components/image-comparer/image-comparer.tsx
Wyświetl plik

@ -36,7 +36,7 @@ export class ImageComparer {
} }
/** Emitted when the slider position changes. */ /** Emitted when the slider position changes. */
@Event() slChange: EventEmitter; @Event({ eventName: 'sl-change' }) slChange: EventEmitter;
connectedCallback() { connectedCallback() {
this.dividerPosition = this.position; this.dividerPosition = this.position;

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

@ -124,19 +124,19 @@ export class Input {
} }
/** Emitted when the control's value changes. */ /** Emitted when the control's value changes. */
@Event() slChange: EventEmitter; @Event({ eventName: 'sl-change' }) slChange: EventEmitter;
/** Emitted when the clear button is activated. */ /** Emitted when the clear button is activated. */
@Event() slClear: EventEmitter; @Event({ eventName: 'sl-clear' }) slClear: EventEmitter;
/** Emitted when the control receives input. */ /** Emitted when the control receives input. */
@Event() slInput: EventEmitter; @Event({ eventName: 'sl-input' }) slInput: EventEmitter;
/** Emitted when the control gains focus. */ /** Emitted when the control gains focus. */
@Event() slFocus: EventEmitter; @Event({ eventName: 'sl-focus' }) slFocus: EventEmitter;
/** Emitted when the control loses focus. */ /** Emitted when the control loses focus. */
@Event() slBlur: EventEmitter; @Event({ eventName: 'sl-blur' }) slBlur: EventEmitter;
connectedCallback() { connectedCallback() {
this.handleChange = this.handleChange.bind(this); this.handleChange = this.handleChange.bind(this);

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

@ -43,10 +43,10 @@ export class MenuItem {
} }
/** Emitted when the menu item becomes active. */ /** Emitted when the menu item becomes active. */
@Event() slActivate: EventEmitter; @Event({ eventName: 'sl-activate' }) slActivate: EventEmitter;
/** Emitted when the menu item becomes inactive. */ /** Emitted when the menu item becomes inactive. */
@Event() slDeactivate: EventEmitter; @Event({ eventName: 'sl-deactivate' }) slDeactivate: EventEmitter;
render() { render() {
return ( return (

6
src/components/menu/menu.tsx
Wyświetl plik

@ -23,13 +23,13 @@ export class Menu {
@State() hasFocus = false; @State() hasFocus = false;
/** Emitted when the menu gains focus. */ /** Emitted when the menu gains focus. */
@Event() slFocus: EventEmitter; @Event({ eventName: 'sl-focus' }) slFocus: EventEmitter;
/** Emitted when the menu loses focus. */ /** Emitted when the menu loses focus. */
@Event() slBlur: EventEmitter; @Event({ eventName: 'sl-blur' }) slBlur: EventEmitter;
/** Emitted when a menu item is selected. */ /** Emitted when a menu item is selected. */
@Event() slSelect: EventEmitter; @Event({ eventName: 'sl-select' }) slSelect: EventEmitter;
connectedCallback() { connectedCallback() {
this.handleBlur = this.handleBlur.bind(this); this.handleBlur = this.handleBlur.bind(this);

6
src/components/radio/radio.tsx
Wyświetl plik

@ -56,13 +56,13 @@ export class Radio {
} }
/** Emitted when the control loses focus. */ /** Emitted when the control loses focus. */
@Event() slBlur: EventEmitter; @Event({ eventName: 'sl-blur' }) slBlur: EventEmitter;
/** Emitted when the control's checked state changes. */ /** Emitted when the control's checked state changes. */
@Event() slChange: EventEmitter; @Event({ eventName: 'sl-change' }) slChange: EventEmitter;
/** Emitted when the control gains focus. */ /** Emitted when the control gains focus. */
@Event() slFocus: EventEmitter; @Event({ eventName: 'sl-focus' }) slFocus: EventEmitter;
connectedCallback() { connectedCallback() {
this.handleClick = this.handleClick.bind(this); this.handleClick = this.handleClick.bind(this);

6
src/components/range/range.tsx
Wyświetl plik

@ -54,13 +54,13 @@ export class Range {
@Prop() tooltipFormatter = (value: number) => value.toString(); @Prop() tooltipFormatter = (value: number) => value.toString();
/** Emitted when the control's value changes. */ /** Emitted when the control's value changes. */
@Event() slChange: EventEmitter; @Event({ eventName: 'sl-change' }) slChange: EventEmitter;
/** Emitted when the control loses focus. */ /** Emitted when the control loses focus. */
@Event() slBlur: EventEmitter; @Event({ eventName: 'sl-blur' }) slBlur: EventEmitter;
/** Emitted when the control gains focus. */ /** Emitted when the control gains focus. */
@Event() slFocus: EventEmitter; @Event({ eventName: 'sl-focus' }) slFocus: EventEmitter;
connectedCallback() { connectedCallback() {
this.handleInput = this.handleInput.bind(this); this.handleInput = this.handleInput.bind(this);

2
src/components/rating/rating.tsx
Wyświetl plik

@ -48,7 +48,7 @@ export class Rating {
} }
/** Emitted when the rating's value changes. */ /** Emitted when the rating's value changes. */
@Event() slChange: EventEmitter; @Event({ eventName: 'sl-change' }) slChange: EventEmitter;
connectedCallback() { connectedCallback() {
this.handleClick = this.handleClick.bind(this); this.handleClick = this.handleClick.bind(this);

20
src/components/select/select.tsx
Wyświetl plik

@ -109,13 +109,13 @@ export class Select {
} }
/** Emitted when the control's value changes. */ /** Emitted when the control's value changes. */
@Event() slChange: EventEmitter; @Event({ eventName: 'sl-change' }) slChange: EventEmitter;
/** Emitted when the control gains focus */ /** Emitted when the control gains focus */
@Event() slFocus: EventEmitter; @Event({ eventName: 'sl-focus' }) slFocus: EventEmitter;
/** Emitted when the control loses focus */ /** Emitted when the control loses focus */
@Event() slBlur: EventEmitter; @Event({ eventName: 'sl-blur' }) slBlur: EventEmitter;
connectedCallback() { connectedCallback() {
this.handleBlur = this.handleBlur.bind(this); this.handleBlur = this.handleBlur.bind(this);
@ -304,7 +304,7 @@ export class Select {
clearable clearable
onClick={this.handleTagClick} onClick={this.handleTagClick}
onKeyDown={this.handleTagKeyDown} onKeyDown={this.handleTagKeyDown}
onSlClear={event => { onSl-clear={event => {
event.stopPropagation(); event.stopPropagation();
item.checked = false; item.checked = false;
this.syncValueFromItems(); this.syncValueFromItems();
@ -393,8 +393,8 @@ export class Select {
'select--large': this.size === 'large', 'select--large': this.size === 'large',
'select--pill': this.pill 'select--pill': this.pill
}} }}
onSlShow={this.handleMenuShow} onSl-show={this.handleMenuShow}
onSlHide={this.handleMenuHide} onSl-hide={this.handleMenuHide}
> >
<sl-input <sl-input
slot="trigger" slot="trigger"
@ -413,9 +413,9 @@ export class Select {
required={this.required} required={this.required}
aria-labelledby={this.labelId} aria-labelledby={this.labelId}
aria-describedby={this.helpTextId} aria-describedby={this.helpTextId}
onSlFocus={this.handleFocus} onSl-focus={this.handleFocus}
onSlBlur={this.handleBlur} onSl-blur={this.handleBlur}
onSlClear={this.handleClear} onSl-clear={this.handleClear}
onKeyDown={this.handleKeyDown} onKeyDown={this.handleKeyDown}
onKeyUp={this.handleKeyUp} onKeyUp={this.handleKeyUp}
onCut={this.handleCut} onCut={this.handleCut}
@ -432,7 +432,7 @@ export class Select {
</span> </span>
</sl-input> </sl-input>
<sl-menu ref={el => (this.menu = el)} part="menu" class="select__menu" onSlSelect={this.handleMenuSelect}> <sl-menu ref={el => (this.menu = el)} part="menu" class="select__menu" onSl-select={this.handleMenuSelect}>
<slot onSlotchange={this.handleSlotChange} /> <slot onSlotchange={this.handleSlotChange} />
</sl-menu> </sl-menu>
</sl-dropdown> </sl-dropdown>

6
src/components/switch/switch.tsx
Wyświetl plik

@ -51,13 +51,13 @@ export class Switch {
} }
/** Emitted when the control loses focus. */ /** Emitted when the control loses focus. */
@Event() slBlur: EventEmitter; @Event({ eventName: 'sl-blur' }) slBlur: EventEmitter;
/** Emitted when the control's checked state changes. */ /** Emitted when the control's checked state changes. */
@Event() slChange: EventEmitter; @Event({eventName: 'sl-change' }) slChange: EventEmitter;
/** Emitted when the control gains focus. */ /** Emitted when the control gains focus. */
@Event() slFocus: EventEmitter; @Event({eventName: 'sl-focus' }) slFocus: EventEmitter;
connectedCallback() { connectedCallback() {
this.handleClick = this.handleClick.bind(this); this.handleClick = this.handleClick.bind(this);

4
src/components/tab-group/tab-group.tsx
Wyświetl plik

@ -46,10 +46,10 @@ export class TabGroup {
} }
/** Emitted when a tab is shown. */ /** Emitted when a tab is shown. */
@Event() slTabShow: EventEmitter; @Event({ eventName: 'sl-tab-show' }) slTabShow: EventEmitter;
/** Emitted when a tab is hidden. */ /** Emitted when a tab is hidden. */
@Event() slTabHide: EventEmitter; @Event({ eventName: 'sl-tab-hide' }) slTabHide: EventEmitter;
connectedCallback() { connectedCallback() {
this.handleClick = this.handleClick.bind(this); this.handleClick = this.handleClick.bind(this);

2
src/components/tag/tag.tsx
Wyświetl plik

@ -32,7 +32,7 @@ export class Tag {
@Prop({ reflect: true }) clearable = false; @Prop({ reflect: true }) clearable = false;
/** Emitted when the clear button is activated. */ /** Emitted when the clear button is activated. */
@Event() slClear: EventEmitter; @Event({ eventName: 'sl-clear' }) slClear: EventEmitter;
connectedCallback() { connectedCallback() {
this.handleClearClick = this.handleClearClick.bind(this); this.handleClearClick = this.handleClearClick.bind(this);

8
src/components/textarea/textarea.tsx
Wyświetl plik

@ -91,16 +91,16 @@ export class Textarea {
@Prop() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'; @Prop() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
/** Emitted when the control's value changes. */ /** Emitted when the control's value changes. */
@Event() slChange: EventEmitter; @Event({ eventName: 'sl-change' }) slChange: EventEmitter;
/** Emitted when the control receives input. */ /** Emitted when the control receives input. */
@Event() slInput: EventEmitter; @Event({ eventName: 'sl-input' }) slInput: EventEmitter;
/** Emitted when the control gains focus. */ /** Emitted when the control gains focus. */
@Event() slFocus: EventEmitter; @Event({ eventName: 'sl-focus' }) slFocus: EventEmitter;
/** Emitted when the control loses focus. */ /** Emitted when the control loses focus. */
@Event() slBlur: EventEmitter; @Event({ eventName: 'sl-blur' }) slBlur: EventEmitter;
@Watch('rows') @Watch('rows')
handleRowsChange() { handleRowsChange() {

8
src/components/tooltip/tooltip.tsx
Wyświetl plik

@ -73,16 +73,16 @@ export class Tooltip {
} }
/** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */ /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */
@Event() slShow: EventEmitter; @Event({ eventName: 'sl-show' }) slShow: EventEmitter;
/** Emitted after the tooltip has shown and all transitions are complete. */ /** Emitted after the tooltip has shown and all transitions are complete. */
@Event() slAfterShow: EventEmitter; @Event({ eventName: 'sl-aftershow' }) slAfterShow: EventEmitter;
/** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */ /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */
@Event() slHide: EventEmitter; @Event({ eventName: 'sl-hide' }) slHide: EventEmitter;
/** Emitted after the tooltip has hidden and all transitions are complete. */ /** Emitted after the tooltip has hidden and all transitions are complete. */
@Event() slAfterHide: EventEmitter; @Event({ eventName: 'sl-after-hide' }) slAfterHide: EventEmitter;
connectedCallback() { connectedCallback() {
this.handleBlur = this.handleBlur.bind(this); this.handleBlur = this.handleBlur.bind(this);