(this.buttonGroup = el)}
part="base"
class="button-group"
aria-label=${this.label}
+ @focusout=${this.handleBlur}
+ @focusin=${this.handleFocus}
>
-
`;
}
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 11855ef19..76103d06a 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -1,4 +1,6 @@
-import { classMap, html, Shoemaker } from '@shoelace-style/shoemaker';
+import { LitElement, customElement, html, internalProperty, property, unsafeCSS } from 'lit-element';
+import { classMap } from 'lit-html/directives/class-map';
+import { event, EventEmitter } from '../../internal/event';
import styles from 'sass:./button.scss';
import { hasSlot } from '../../internal/slot';
@@ -18,80 +20,66 @@ import { hasSlot } from '../../internal/slot';
* @part label - The button's label.
* @part suffix - The suffix container.
* @part caret - The button's caret.
- *
- * @emit sl-blur - Emitted when the button loses focus.
- * @emit sl-focus - Emitted when the button gains focus.
*/
-export default class SlButton extends Shoemaker {
- static tag = 'sl-button';
- static props = [
- 'hasFocus',
- 'hasLabel',
- 'hasPrefix',
- 'hasSuffix',
- 'type',
- 'size',
- 'caret',
- 'disabled',
- 'loading',
- 'pill',
- 'circle',
- 'submit',
- 'name',
- 'value',
- 'href',
- 'target',
- 'download'
- ];
- static reflect = ['type', 'size', 'caret', 'disabled', 'loading', 'pill', 'circle', 'submit'];
- static styles = styles;
+@customElement('sl-button')
+export class SlButton extends LitElement {
+ static styles = unsafeCSS(styles);
- private button: HTMLButtonElement | HTMLLinkElement;
- private hasFocus = false;
- private hasLabel = false;
- private hasPrefix = false;
- private hasSuffix = false;
+ button: HTMLButtonElement | HTMLLinkElement;
+
+ @internalProperty() private hasFocus = false;
+ @internalProperty() private hasLabel = false;
+ @internalProperty() private hasPrefix = false;
+ @internalProperty() private hasSuffix = false;
/** The button's type. */
- type: 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' = 'default';
+ @property({ reflect: true }) type: 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' =
+ 'default';
/** The button's size. */
- size: 'small' | 'medium' | 'large' = 'medium';
+ @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
/** Draws the button with a caret for use with dropdowns, popovers, etc. */
- caret = false;
+ @property({ type: Boolean, reflect: true }) caret = false;
/** Disables the button. */
- disabled = false;
+ @property({ type: Boolean, reflect: true }) disabled = false;
/** Draws the button in a loading state. */
- loading = false;
+ @property({ type: Boolean, reflect: true }) loading = false;
/** Draws a pill-style button with rounded edges. */
- pill = false;
+ @property({ type: Boolean, reflect: true }) pill = false;
/** Draws a circle button. */
- circle = false;
+ @property({ type: Boolean, reflect: true }) circle = false;
/** Indicates if activating the button should submit the form. Ignored when `href` is set. */
- submit = false;
+ @property({ type: Boolean, reflect: true }) submit = false;
/** An optional name for the button. Ignored when `href` is set. */
- name: string;
+ @property() name: string;
/** An optional value for the button. Ignored when `href` is set. */
- value: string;
+ @property() value: string;
/** When set, the underlying button will be rendered as an `` with this `href` instead of a `
@@ -228,9 +216,9 @@ export default class SlButton extends Shoemaker {
target=${this.target ? this.target : null}
download=${this.download ? this.download : null}
rel=${this.target ? 'noreferrer noopener' : null}
- onblur=${this.handleBlur.bind(this)}
- onfocus=${this.handleFocus.bind(this)}
- onclick=${this.handleClick.bind(this)}
+ onblur=${this.handleBlur}
+ onfocus=${this.handleFocus}
+ onclick=${this.handleClick}
>
${interior}
diff --git a/src/components/card/card.ts b/src/components/card/card.ts
index 9ff7a6bb4..cf45a8524 100644
--- a/src/components/card/card.ts
+++ b/src/components/card/card.ts
@@ -1,4 +1,5 @@
-import { classMap, html, Shoemaker } from '@shoelace-style/shoemaker';
+import { LitElement, customElement, html, internalProperty, unsafeCSS } from 'lit-element';
+import { classMap } from 'lit-html/directives/class-map';
import styles from 'sass:./card.scss';
import { hasSlot } from '../../internal/slot';
@@ -17,16 +18,16 @@ import { hasSlot } from '../../internal/slot';
* @part body - The card's body.
* @part footer - The card's footer, if present.
*/
-export default class SlCard extends Shoemaker {
- static tag = 'sl-card';
- static props = ['hasFooter', 'hasImage', 'hasHeader'];
- static styles = styles;
+@customElement('sl-card')
+export class SlCard extends LitElement {
+ static styles = unsafeCSS(styles);
- private hasFooter = false;
- private hasImage = false;
- private hasHeader = false;
+ @internalProperty() private hasFooter = false;
+ @internalProperty() private hasImage = false;
+ @internalProperty() private hasHeader = false;
- onConnect() {
+ connectedCallback() {
+ super.connectedCallback();
this.handleSlotChange();
}
@@ -48,19 +49,19 @@ export default class SlCard extends Shoemaker {
})}
>
-
-
-
`;
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index f5d180ea3..f966a1c0b 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -1,4 +1,6 @@
-import { classMap, html, Shoemaker } from '@shoelace-style/shoemaker';
+import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { classMap } from 'lit-html/directives/class-map';
+import { event, EventEmitter } from '../../internal/event';
import styles from 'sass:./checkbox.scss';
let id = 0;
@@ -14,44 +16,49 @@ let id = 0;
* @part checked-icon - The container the wraps the checked icon.
* @part indeterminate-icon - The container that wraps the indeterminate icon.
* @part label - The checkbox label.
- *
- * @emit sl-blur - Emitted when the control loses focus.
- * @emit sl-change - Emitted when the control's checked state changes.
- * @emit sl-focus - Emitted when the control gains focus.
*/
-export default class SlCheckbox extends Shoemaker {
- static tag = 'sl-checkbox';
- static props = ['hasFocus', 'name', 'value', 'disabled', 'required', 'checked', 'indeterminate', 'invalid'];
- static reflect = ['checked', 'indeterminate', 'invalid'];
- static styles = styles;
+@customElement('sl-checkbox')
+export class SlCheckbox extends LitElement {
+ static styles = unsafeCSS(styles);
+
+ @query('input[type="checkbox"]') input: HTMLInputElement;
private inputId = `checkbox-${++id}`;
private labelId = `checkbox-label-${id}`;
- private hasFocus = false;
- private input: HTMLInputElement;
+
+ @internalProperty() private hasFocus = false;
/** The checkbox's name attribute. */
- name: string;
+ @property({ reflect: true }) name: string;
/** The checkbox's value attribute. */
- value: string;
+ @property() value: string;
/** Disables the checkbox. */
- disabled = false;
+ @property({ type: Boolean, reflect: true }) disabled = false;
/** Makes the checkbox a required field. */
- required = false;
+ @property({ type: Boolean, reflect: true }) required = false;
/** Draws the checkbox in a checked state. */
- checked = false;
+ @property({ type: Boolean, reflect: true }) checked = false;
/** Draws the checkbox in an indeterminate state. */
- indeterminate = false;
+ @property({ type: Boolean, reflect: true }) indeterminate = false;
/** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
- invalid = false;
+ @property({ type: Boolean, reflect: true }) invalid = false;
- onReady() {
+ /** Emitted when the control loses focus. */
+ @event('sl-blur') slBlur: EventEmitter
@@ -657,8 +652,8 @@ export default class SlColorPicker extends Shoemaker {
${this.opacity
@@ -682,19 +677,19 @@ export default class SlColorPicker extends Shoemaker {
+ @keydown=${this.handleAlphaKeyDown}
+ >
`
: ''}
(this.details = el)}
part="base"
class=${classMap({
details: true,
@@ -167,7 +175,6 @@ export default class SlDetails extends Shoemaker {
})}
>
(this.header = el)}
part="header"
id=${`${this.componentId}-header`}
class="details__header"
@@ -176,23 +183,19 @@ export default class SlDetails extends Shoemaker {
aria-controls=${`${this.componentId}-content`}
aria-disabled=${this.disabled ? 'true' : 'false'}
tabindex=${this.disabled ? '-1' : '0'}
- onclick=${this.handleSummaryClick.bind(this)}
- onkeydown=${this.handleSummaryKeyDown.bind(this)}
+ @click=${this.handleSummaryClick}
+ @keydown=${this.handleSummaryKeyDown}
>
${this.summary}
- ;
+
+ /** Emitted after the dialog opens and all transitions are complete. */
+ @event('sl-after-show') slAfterShow: EventEmitter;
+
+ /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */
+ @event('sl-hide') slHide: EventEmitter;
+
+ /** Emitted after the dialog closes and all transitions are complete. */
+ @event('sl-after-hide') slAfterHide: EventEmitter;
+
+ /**
+ * Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and
+ * allow you to set it on a different element in the dialog, such as an input or button.
+ */
+ @event('sl-initial-focus') slInitialFocus: EventEmitter;
+
+ /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing. */
+ @event('sl-overlay-dismiss') slOverlayDismiss: EventEmitter;
+
+ connectedCallback() {
+ super.connectedCallback();
- onConnect() {
this.modal = new Modal(this, {
onfocusOut: () => this.panel.focus()
});
@@ -80,7 +96,8 @@ export default class SlDialog extends Shoemaker {
}
}
- onDisconnect() {
+ disconnectedCallback() {
+ super.disconnectedCallback();
unlockBodyScrolling(this);
}
@@ -90,7 +107,7 @@ export default class SlDialog extends Shoemaker {
return;
}
- const slShow = this.emit('sl-show');
+ const slShow = this.slShow.emit();
if (slShow.defaultPrevented) {
this.open = false;
return;
@@ -107,15 +124,15 @@ export default class SlDialog extends Shoemaker {
if (hasPreventScroll) {
// Wait for the next frame before setting initial focus so the dialog is technically visible
requestAnimationFrame(() => {
- const slInitialFocus = this.emit('sl-initial-focus');
+ const slInitialFocus = this.slInitialFocus.emit();
if (!slInitialFocus.defaultPrevented) {
this.panel.focus({ preventScroll: true });
}
});
} else {
// Once Safari supports { preventScroll: true } we can remove this nasty little hack, but until then we need to
- // wait for the transition to complete before setting focus, otherwise the panel may render in a buggy way its
- // out of view initially.
+ // wait for the transition to complete before setting focus, otherwise the panel may render in a buggy way
+ // that's out of view initially.
//
// Fiddle: https://jsfiddle.net/g6buoafq/1/
// Safari: https://bugs.webkit.org/show_bug.cgi?id=178583
@@ -123,7 +140,7 @@ export default class SlDialog extends Shoemaker {
this.dialog.addEventListener(
'transitionend',
() => {
- const slInitialFocus = this.emit('sl-initial-focus');
+ const slInitialFocus = this.slInitialFocus.emit();
if (!slInitialFocus.defaultPrevented) {
this.panel.focus();
}
@@ -140,7 +157,7 @@ export default class SlDialog extends Shoemaker {
return;
}
- const slHide = this.emit('sl-hide');
+ const slHide = this.slHide.emit();
if (slHide.defaultPrevented) {
this.open = true;
return;
@@ -164,8 +181,7 @@ export default class SlDialog extends Shoemaker {
}
handleOverlayClick() {
- const slOverlayDismiss = this.emit('sl-overlay-dismiss');
-
+ const slOverlayDismiss = this.slOverlayDismiss.emit();
if (!slOverlayDismiss.defaultPrevented) {
this.hide();
}
@@ -183,7 +199,7 @@ export default class SlDialog extends Shoemaker {
this.isVisible = this.open;
this.willShow = false;
this.willHide = false;
- this.open ? this.emit('sl-after-show') : this.emit('sl-after-hide');
+ this.open ? this.slAfterShow.emit() : this.slAfterHide.emit();
}
}
@@ -194,7 +210,6 @@ export default class SlDialog extends Shoemaker {
render() {
return html`
;
+
+ /** Emitted after the drawer opens and all transitions are complete. */
+ @event('sl-after-show') slAfterShow: EventEmitter;
+
+ /** Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed. */
+ @event('sl-hide') slHide: EventEmitter;
+
+ /** Emitted after the drawer closes and all transitions are complete. */
+ @event('sl-after-hide') slAfterHide: EventEmitter;
+
+ /** Emitted when the drawer opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and allow you to set it on a different element in the drawer, such as an input or button. */
+ @event('sl-initial-focus') slInitialFocus: EventEmitter;
+
+ /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing. */
+ @event('sl-overlay-dismiss') slOverlayDismiss: EventEmitter;
+
+ connectedCallback() {
+ super.connectedCallback();
- onConnect() {
this.modal = new Modal(this, {
onfocusOut: () => (this.contained ? null : this.panel.focus())
});
@@ -89,7 +102,8 @@ export default class SlDrawer extends Shoemaker {
}
}
- onDisconnect() {
+ disconnectedCallback() {
+ super.disconnectedCallback();
unlockBodyScrolling(this);
}
@@ -99,7 +113,7 @@ export default class SlDrawer extends Shoemaker {
return;
}
- const slShow = this.emit('sl-show');
+ const slShow = this.slShow.emit();
if (slShow.defaultPrevented) {
this.open = false;
return;
@@ -119,7 +133,7 @@ export default class SlDrawer extends Shoemaker {
if (hasPreventScroll) {
// Wait for the next frame before setting initial focus so the drawer is technically visible
requestAnimationFrame(() => {
- const slInitialFocus = this.emit('sl-initial-focus');
+ const slInitialFocus = this.slInitialFocus.emit();
if (!slInitialFocus.defaultPrevented) {
this.panel.focus({ preventScroll: true });
}
@@ -135,7 +149,7 @@ export default class SlDrawer extends Shoemaker {
this.drawer.addEventListener(
'transitionend',
() => {
- const slInitialFocus = this.emit('sl-initial-focus');
+ const slInitialFocus = this.slInitialFocus.emit();
if (!slInitialFocus.defaultPrevented) {
this.panel.focus();
}
@@ -152,7 +166,7 @@ export default class SlDrawer extends Shoemaker {
return;
}
- const slHide = this.emit('sl-hide');
+ const slHide = this.slHide.emit();
if (slHide.defaultPrevented) {
this.open = true;
return;
@@ -176,8 +190,7 @@ export default class SlDrawer extends Shoemaker {
}
handleOverlayClick() {
- const slOverlayDismiss = this.emit('sl-overlay-dismiss');
-
+ const slOverlayDismiss = this.slOverlayDismiss.emit();
if (!slOverlayDismiss.defaultPrevented) {
this.hide();
}
@@ -195,14 +208,13 @@ export default class SlDrawer extends Shoemaker {
this.isVisible = this.open;
this.willShow = false;
this.willHide = false;
- this.open ? this.emit('sl-after-show') : this.emit('sl-after-hide');
+ this.open ? this.slAfterShow.emit() : this.slAfterHide.emit();
}
}
render() {
return html`
;
+
+ /** Emitted after the dropdown opens and all transitions are complete. */
+ @event('sl-after-show') slAfterShow: EventEmitter;
+
+ /** Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed. */
+ @event('sl-hide') slHide: EventEmitter;
+
+ /** Emitted after the dropdown closes and all transitions are complete. */
+ @event('sl-after-hide') slAfterHide: EventEmitter;
handlePopoverOptionsChange() {
this.popover.setOptions({
@@ -84,7 +92,8 @@ export default class SlDropdown extends Shoemaker {
});
}
- onConnect() {
+ connectedCallback() {
+ super.connectedCallback();
this.handleMenuItemActivate = this.handleMenuItemActivate.bind(this);
this.handlePanelSelect = this.handlePanelSelect.bind(this);
this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
@@ -95,15 +104,15 @@ export default class SlDropdown extends Shoemaker {
}
}
- onReady() {
+ firstUpdated() {
this.popover = new Popover(this.trigger, this.positioner, {
strategy: this.hoist ? 'fixed' : 'absolute',
placement: this.placement,
distance: this.distance,
skidding: this.skidding,
transitionElement: this.panel,
- onAfterHide: () => this.emit('sl-after-hide'),
- onAfterShow: () => this.emit('sl-after-show'),
+ onAfterHide: () => this.slAfterHide.emit(),
+ onAfterShow: () => this.slAfterShow.emit(),
onTransitionEnd: () => {
if (!this.open) {
this.panel.scrollTop = 0;
@@ -117,7 +126,8 @@ export default class SlDropdown extends Shoemaker {
}
}
- onDisconnect() {
+ disconnectedCallback() {
+ super.disconnectedCallback();
this.hide();
this.popover.destroy();
}
@@ -294,7 +304,7 @@ export default class SlDropdown extends Shoemaker {
return;
}
- const slShow = this.emit('sl-show');
+ const slShow = this.slShow.emit();
if (slShow.defaultPrevented) {
this.open = false;
return;
@@ -317,7 +327,7 @@ export default class SlDropdown extends Shoemaker {
return;
}
- const slHide = this.emit('sl-hide');
+ const slHide = this.slHide.emit();
if (slHide.defaultPrevented) {
this.open = true;
return;
@@ -378,19 +388,17 @@ export default class SlDropdown extends Shoemaker {
(this.trigger = el)}
- onclick=${this.handleTriggerClick.bind(this)}
- onkeydown=${this.handleTriggerKeyDown.bind(this)}
- onkeyup=${this.handleTriggerKeyUp.bind(this)}
+ @click=${this.handleTriggerClick}
+ @keydown=${this.handleTriggerKeyDown}
+ @keyup=${this.handleTriggerKeyUp}
>
-
(this.body = el)}
- class="details__body"
- ontransitionend=${this.handleBodyTransitionEnd.bind(this)}
- >
+
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index 623d98d4c..d13b08c7b 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -1,4 +1,6 @@
-import { classMap, html, Shoemaker } from '@shoelace-style/shoemaker';
+import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { classMap } from 'lit-html/directives/class-map';
+import { event, EventEmitter } from '../../internal/event';
import styles from 'sass:./dialog.scss';
import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll';
import { hasSlot } from '../../internal/slot';
@@ -27,47 +29,61 @@ let id = 0;
* @part close-button - The close button.
* @part body - The dialog body.
* @part footer - The dialog footer.
- *
- * @emit sl-show - Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened.
- * @emit sl-after-show - Emitted after the dialog opens and all transitions are complete.
- * @emit sl-hide - Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed.
- * @emit sl-after-hide - Emitted after the dialog closes and all transitions are complete.
- * @emit sl-initial-focus - Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()`
- * will prevent focus and allow you to set it on a different element in the dialog, such as an input or button.
- * @emit sl-overlay-dismiss - Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the
- * dialog from closing.
*/
-export default class SlDialog extends Shoemaker {
- static tag = 'sl-dialog';
- static props = ['hasFooter', 'isVisible', 'open', 'label', 'noHeader'];
- static reflect = ['open'];
- static styles = styles;
+@customElement('sl-dialog')
+export class SlDialog extends LitElement {
+ static styles = unsafeCSS(styles);
+
+ @query('.dialog') dialog: HTMLElement;
+ @query('.dialog__panel') panel: HTMLElement;
private componentId = `dialog-${++id}`;
- private dialog: HTMLElement;
- private hasFooter = false;
- private isVisible = false;
private modal: Modal;
- private panel: HTMLElement;
private willShow = false;
private willHide = false;
+ @internalProperty() private hasFooter = false;
+ @internalProperty() private isVisible = false;
+
/** Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. */
- open = false;
+ @property({ type: Boolean, reflect: true }) open = false;
/**
* The dialog's label as displayed in the header. You should always include a relevant label even when using
* `no-header`, as it is required for proper accessibility.
*/
- label = '';
+ @property({ reflect: true }) label = '';
/**
* Disables the header. This will also remove the default close button, so please ensure you provide an easy,
* accessible way for users to dismiss the dialog.
*/
- noHeader = false;
+ @property({ attribute: 'no-header', type: Boolean, reflect: true }) noHeader = false;
+
+ /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */
+ @event('sl-show') slShow: EventEmitter
-
(this.dialog = el)}
part="base"
class=${classMap({
dialog: true,
@@ -202,13 +217,12 @@ export default class SlDialog extends Shoemaker {
'dialog--visible': this.isVisible,
'dialog--has-footer': this.hasFooter
})}
- onkeydown=${this.handleKeyDown.bind(this)}
- ontransitionend=${this.handleTransitionEnd.bind(this)}
+ @keydown=${this.handleKeyDown}
+ @transitionend=${this.handleTransitionEnd}
>
-
+
diff --git a/src/components/drawer/drawer.ts b/src/components/drawer/drawer.ts
index 3f4e8b856..369f7b45b 100644
--- a/src/components/drawer/drawer.ts
+++ b/src/components/drawer/drawer.ts
@@ -1,4 +1,6 @@
-import { classMap, html, Shoemaker } from '@shoelace-style/shoemaker';
+import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { classMap } from 'lit-html/directives/class-map';
+import { event, EventEmitter } from '../../internal/event';
import styles from 'sass:./drawer.scss';
import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll';
import { hasSlot } from '../../internal/slot';
@@ -27,56 +29,67 @@ let id = 0;
* @part close-button - The close button.
* @part body - The drawer body.
* @part footer - The drawer footer.
- *
- * @emit sl-show - Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened.
- * @emit sl-after-show - Emitted after the drawer opens and all transitions are complete.
- * @emit sl-hide - Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed.
- * @emit sl-after-hide - Emitted after the drawer closes and all transitions are complete.
- * @emit sl-initial-focus - Emitted when the drawer opens and the panel gains focus. Calling `event.preventDefault()`
- * will prevent focus and allow you to set it on a different element in the drawer, such as an input or button.
- * @emit sl-overlay-dismiss - Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the
- * drawer from closing.
*/
-export default class SlDrawer extends Shoemaker {
- static tag = 'sl-drawer';
- static props = ['hasFooter', 'isVisible', 'open', 'label', 'placement', 'contained', 'noHeader'];
- static reflect = ['open'];
- static styles = styles;
+@customElement('sl-drawer')
+export class SlDrawer extends LitElement {
+ static styles = unsafeCSS(styles);
+
+ @query('.drawer') drawer: HTMLElement;
+ @query('.drawer__panel') panel: HTMLElement;
private componentId = `drawer-${++id}`;
- private drawer: HTMLElement;
- private hasFooter = false;
- private isVisible = false;
private modal: Modal;
- private panel: HTMLElement;
private willShow = false;
private willHide = false;
+ @internalProperty() private hasFooter = false;
+ @internalProperty() private isVisible = false;
+
/** Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods. */
- open = false;
+ @property({ type: Boolean, reflect: true }) open = false;
/**
* The drawer's label as displayed in the header. You should always include a relevant label even when using
* `no-header`, as it is required for proper accessibility.
*/
- label = '';
+ @property({ reflect: true }) label = '';
/** The direction from which the drawer will open. */
- placement: 'top' | 'right' | 'bottom' | 'left' = 'right';
+ @property({ reflect: true }) placement: 'top' | 'right' | 'bottom' | 'left' = 'right';
/**
* By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
* its parent element, set this prop and add `position: relative` to the parent.
*/
- contained = false;
+ @property({ type: Boolean, reflect: true }) contained = false;
/**
* Removes the header. This will also remove the default close button, so please ensure you provide an easy,
* accessible way for users to dismiss the drawer.
*/
- noHeader = false;
+ @property({ attribute: 'no-header', type: Boolean, reflect: true }) noHeader = false;
+
+ /** Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened. */
+ @event('sl-show') slShow: EventEmitter (this.panel = el)}
part="panel"
class="dialog__panel"
role="dialog"
@@ -228,18 +242,18 @@ export default class SlDialog extends Shoemaker {
exportparts="base:close-button"
class="dialog__close"
name="x"
- onclick="${this.handleCloseClick.bind(this)}"
- />
+ @click="${this.handleCloseClick}"
+ >
`
: ''}
-
(this.drawer = el)}
part="base"
class=${classMap({
drawer: true,
@@ -216,13 +228,12 @@ export default class SlDrawer extends Shoemaker {
'drawer--fixed': !this.contained,
'drawer--has-footer': this.hasFooter
})}
- onkeydown=${this.handleKeyDown.bind(this)}
- ontransitionend=${this.handleTransitionEnd.bind(this)}
+ @keydown=${this.handleKeyDown}
+ @transitionend=${this.handleTransitionEnd}
>
-
+
diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts
index 99f5042bb..35949274a 100644
--- a/src/components/dropdown/dropdown.ts
+++ b/src/components/dropdown/dropdown.ts
@@ -1,4 +1,6 @@
-import { classMap, html, Shoemaker } from '@shoelace-style/shoemaker';
+import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { classMap } from 'lit-html/directives/class-map';
+import { event, EventEmitter } from '../../internal/event';
import styles from 'sass:./dropdown.scss';
import { SlMenu, SlMenuItem } from '../../shoelace';
import { scrollIntoView } from '../../internal/scroll';
@@ -17,33 +19,27 @@ let id = 0;
* @part base - The component's base wrapper.
* @part trigger - The container that wraps the trigger.
* @part panel - The panel that gets shown when the dropdown is open.
- *
- * @emit sl-show - Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.
- * @emit sl-after-show - Emitted after the dropdown opens and all transitions are complete.
- * @emit sl-hide - Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.
- * @emit sl-after-hide - Emitted after the dropdown closes and all transitions are complete.
*/
-export default class SlDropdown extends Shoemaker {
- static tag = 'sl-dropdown';
- static props = ['open', 'placement', 'closeOnSelect', 'containingElement', 'distance', 'skidding', 'hoist'];
- static reflect = ['open'];
- static styles = styles;
+@customElement('sl-dropdown')
+export class SlDropdown extends LitElement {
+ static styles = unsafeCSS(styles);
+
+ @query('.dropdown__trigger') trigger: HTMLElement;
+ @query('.dropdown__panel') panel: HTMLElement;
+ @query('.dropdown__positioner') positioner: HTMLElement;
private componentId = `dropdown-${++id}`;
private isVisible = false;
- private panel: HTMLElement;
- private positioner: HTMLElement;
private popover: Popover;
- private trigger: HTMLElement;
/** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */
- open = false;
+ @property({ type: Boolean }) open = false;
/**
* The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
* inside of the viewport.
*/
- placement:
+ @property() placement:
| 'top'
| 'top-start'
| 'top-end'
@@ -58,22 +54,34 @@ export default class SlDropdown extends Shoemaker {
| 'left-end' = 'bottom-start';
/** Determines whether the dropdown should hide when a menu item is selected. */
- closeOnSelect = true;
+ @property({ attribute: 'close-on-select', type: Boolean }) closeOnSelect = true;
/** The dropdown will close when the user interacts outside of this element (e.g. clicking). */
- containingElement: HTMLElement;
+ @property() containingElement: HTMLElement;
/** The distance in pixels from which to offset the panel away from its trigger. */
- distance = 2;
+ @property({ type: Number }) distance = 2;
/** The distance in pixels from which to offset the panel along its trigger. */
- skidding = 0;
+ @property({ type: Number }) skidding = 0;
/**
* Enable this option to prevent the panel from being clipped when the component is placed inside a container with
* `overflow: auto|scroll`.
*/
- hoist = false;
+ @property({ type: Boolean }) hoist = false;
+
+ /** Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened. */
+ @event('sl-show') slShow: EventEmitter (this.panel = el)}
part="panel"
class="drawer__panel"
role="dialog"
@@ -243,18 +254,18 @@ export default class SlDrawer extends Shoemaker {
exportparts="base:close-button"
class="drawer__close"
name="x"
- onclick=${this.handleCloseClick.bind(this)}
- />
+ @click=${this.handleCloseClick}
+ >
`
: ''}
-
(this.positioner = el)} class="dropdown__positioner">
+
(this.panel = el)}
part="panel"
class="dropdown__panel"
role="menu"
diff --git a/src/components/form/form.ts b/src/components/form/form.ts
index 211d880e4..2e71962e5 100644
--- a/src/components/form/form.ts
+++ b/src/components/form/form.ts
@@ -1,4 +1,5 @@
-import { html, Shoemaker } from '@shoelace-style/shoemaker';
+import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { event, EventEmitter } from '../../internal/event';
import styles from 'sass:./form.scss';
import {
SlButton,
@@ -26,25 +27,30 @@ interface FormControl {
* @slot - The form's content.
*
* @part base - The component's base wrapper.
- *
- * @emit sl-submit - 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. Event details will contain:
- * `{ formData: FormData; formControls: HTMLElement[] }`
*/
-export default class SlForm extends Shoemaker {
- static tag = 'sl-form';
- static props = ['novalidate'];
- static styles = styles;
+@customElement('sl-form')
+export class SlForm extends LitElement {
+ static styles = unsafeCSS(styles);
+
+ @query('.form') form: HTMLElement;
- private form: HTMLElement;
private formControls: FormControl[];
/** Prevent the form from validating inputs before submitting. */
- novalidate = false;
+ @property({ type: Boolean, reflect: true }) novalidate = false;
+
+ /**
+ * @emit sl-submit - 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. Event details will contain:
+ * `{ formData: FormData; formControls: HTMLElement[] }`
+ */
+ @event('sl-submit') slSubmit: EventEmitter<{ formData: FormData; formControls: HTMLElement[] }>;
+
+ connectedCallback() {
+ super.connectedCallback();
- onConnect() {
this.formControls = [
{
tag: 'button',
@@ -183,9 +189,6 @@ export default class SlForm extends Shoemaker {
el.name && !el.disabled ? formData.append(el.name, el.value) : null
}
];
-
- this.handleClick = this.handleClick.bind(this);
- this.handleKeyDown = this.handleKeyDown.bind(this);
}
/** Serializes all form controls elements and returns a `FormData` object. */
@@ -230,7 +233,7 @@ export default class SlForm extends Shoemaker {
}
}
- this.emit('sl-submit', { detail: { formData, formControls } });
+ this.slSubmit.emit({ detail: { formData, formControls } });
return true;
}
@@ -271,15 +274,8 @@ export default class SlForm extends Shoemaker {
render() {
return html`
-
(this.form = el)}
- part="base"
- class="form"
- role="form"
- onclick=${this.handleClick.bind(this)}
- onkeydown=${this.handleKeyDown.bind(this)}
- >
- ;
+
+ /** Emitted when the icon failed to load. Event details may include: `{ status: number }` */
+ @event('sl-error') slError: EventEmitter<{ status: number }>;
+
+ connectedCallback() {
+ super.connectedCallback();
watchIcon(this);
}
- onReady() {
+ firstUpdated() {
this.setIcon();
}
- onDisconnect() {
+ update(changedProps: Map) {
+ if (['name', 'src', 'library'].find(prop => changedProps.has(prop))) {
+ this.setIcon();
+ }
+
+ super.update(changedProps);
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
unwatchIcon(this);
}
@@ -84,18 +98,18 @@ export default class SlIcon extends Shoemaker {
library.mutator(svgEl);
}
- this.svg = html([svgEl.outerHTML] as any);
- this.emit('sl-load');
+ this.svg = svgEl.outerHTML;
+ this.slLoad.emit();
} else {
this.svg = '';
- this.emit('sl-error', { detail: { status: file.status } });
+ this.slError.emit({ detail: { status: file.status } });
}
} else {
this.svg = '';
- this.emit('sl-error', { detail: { status: file.status } });
+ this.slError.emit({ detail: { status: file.status } });
}
} catch {
- this.emit('sl-error');
+ this.slError.emit({ detail: { status: -1 } });
}
} else if (this.svg) {
// If we can't resolve a URL and an icon was previously set, remove it
@@ -103,23 +117,11 @@ export default class SlIcon extends Shoemaker {
}
}
- watchName() {
- this.setIcon();
- }
-
- watchSrc() {
- this.setIcon();
- }
-
- watchLibrary() {
- this.setIcon();
- }
-
handleChange() {
this.setIcon();
}
render() {
- return html` ;
+
+ update(changedProps: Map) {
+ super.update(changedProps);
+
+ if (changedProps.has('position')) {
+ this.slChange.emit();
+ }
+ }
handleDrag(event: any) {
const { width } = this.base.getBoundingClientRect();
@@ -66,7 +75,7 @@ export default class SlImageComparer extends Shoemaker {
event.preventDefault();
drag(event, this.base, x => {
- this.position = clamp((x / width) * 100, 0, 100);
+ this.position = Number(clamp((x / width) * 100, 0, 100).toFixed(2));
});
}
@@ -87,51 +96,41 @@ export default class SlImageComparer extends Shoemaker {
}
}
- watchPosition() {
- this.emit('sl-change');
- }
-
render() {
return html`
- ;
/** Sets focus on the rating. */
setFocus(options?: FocusOptions) {
@@ -51,11 +56,20 @@ export default class SlRating extends Shoemaker {
this.rating.blur();
}
- onReady() {
+ firstUpdated() {
focusVisible.observe(this.rating);
}
- onDisconnect() {
+ update(changedProps: Map) {
+ super.update(changedProps);
+
+ if (changedProps.has('value')) {
+ this.slChange.emit();
+ }
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
focusVisible.unobserve(this.rating);
}
@@ -125,10 +139,6 @@ export default class SlRating extends Shoemaker {
return Math.ceil(numberToRound * multiplier) / multiplier;
}
- watchValue() {
- this.emit('sl-change');
- }
-
render() {
const counter = Array.from(Array(this.max).keys());
let displayValue = 0;
@@ -141,7 +151,6 @@ export default class SlRating extends Shoemaker {
return html`
+
`;
}
diff --git a/src/components/format-bytes/format-bytes.ts b/src/components/format-bytes/format-bytes.ts
index 874aaac01..6ff6c4d37 100644
--- a/src/components/format-bytes/format-bytes.ts
+++ b/src/components/format-bytes/format-bytes.ts
@@ -1,22 +1,20 @@
-import { Shoemaker } from '@shoelace-style/shoemaker';
+import { LitElement, customElement, property } from 'lit-element';
import { formatBytes } from '../../internal/number';
/**
* @since 2.0
* @status stable
*/
-export default class SlFormatBytes extends Shoemaker {
- static tag = 'sl-format-bytes';
- static props = ['value', 'unit', 'locale'];
-
+@customElement('sl-format-bytes')
+export class SlFormatBytes extends LitElement {
/** The number to format in bytes. */
- value = 0;
+ @property({ type: Number }) value = 0;
/** The unit to display. */
- unit: 'bytes' | 'bits' = 'bytes';
+ @property() unit: 'bytes' | 'bits' = 'bytes';
/** The locale to use when formatting the number. */
- locale: string;
+ @property() locale: string;
render() {
return formatBytes(this.value, {
diff --git a/src/components/format-date/format-date.ts b/src/components/format-date/format-date.ts
index 83e66dcd2..783515d68 100644
--- a/src/components/format-date/format-date.ts
+++ b/src/components/format-date/format-date.ts
@@ -1,65 +1,49 @@
-import { Shoemaker } from '@shoelace-style/shoemaker';
+import { LitElement, customElement, property } from 'lit-element';
/**
* @since 2.0
* @status stable
*/
-export default class SlFormatDate extends Shoemaker {
- static tag = 'sl-format-date';
- static props = [
- 'date',
- 'locale',
- 'weekday',
- 'era',
- 'year',
- 'month',
- 'day',
- 'hour',
- 'minute',
- 'second',
- 'timeZoneName',
- 'timeZone',
- 'hourFormat'
- ];
-
+@customElement('sl-format-date')
+export class SlFormatDate extends LitElement {
/** The date/time to format. If not set, the current date and time will be used. */
- date: Date | string = new Date();
+ @property() date: Date | string = new Date();
/** The locale to use when formatting the date/time. */
- locale: string;
+ @property() locale: string;
/** The format for displaying the weekday. */
- weekday: 'narrow' | 'short' | 'long';
+ @property() weekday: 'narrow' | 'short' | 'long';
/** The format for displaying the era. */
- era: 'narrow' | 'short' | 'long';
+ @property() era: 'narrow' | 'short' | 'long';
/** The format for displaying the year. */
- year: 'numeric' | '2-digit';
+ @property() year: 'numeric' | '2-digit';
/** The format for displaying the month. */
- month: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long';
+ @property() month: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long';
/** The format for displaying the day. */
- day: 'numeric' | '2-digit';
+ @property() day: 'numeric' | '2-digit';
/** The format for displaying the hour. */
- hour: 'numeric' | '2-digit';
+ @property() hour: 'numeric' | '2-digit';
/** The format for displaying the minute. */
- minute: 'numeric' | '2-digit';
+ @property() minute: 'numeric' | '2-digit';
/** The format for displaying the second. */
- second: 'numeric' | '2-digit';
+ @property() second: 'numeric' | '2-digit';
/** The format for displaying the time. */
- timeZoneName: 'short' | 'long';
+ @property({ attribute: 'time-zone-name' }) timeZoneName: 'short' | 'long';
/** The time zone to express the time in. */
- timeZone: string;
+ @property({ attribute: 'time-zone' }) timeZone: string;
/** When set, 24 hour time will always be used. */
- hourFormat: 'auto' | '12' | '24' = 'auto';
+ @property({ attribute: 'hour-format' }) hourFormat: 'auto' | '12' | '24' = 'auto';
render() {
const date = new Date(this.date);
diff --git a/src/components/format-number/format-number.ts b/src/components/format-number/format-number.ts
index 195d25456..8860ddc53 100644
--- a/src/components/format-number/format-number.ts
+++ b/src/components/format-number/format-number.ts
@@ -1,57 +1,43 @@
-import { Shoemaker } from '@shoelace-style/shoemaker';
+import { LitElement, customElement, property } from 'lit-element';
/**
* @since 2.0
* @status stable
*/
-export default class SlFormatNumber extends Shoemaker {
- static tag = 'sl-format-number';
- static props = [
- 'value',
- 'locale',
- 'type',
- 'noGrouping',
- 'currency',
- 'currencyDisplay',
- 'minimumIntegerDigits',
- 'minimumFractionDigits',
- 'maximumFractionDigits',
- 'minimumSignificantDigits',
- 'maximumSignificantDigits'
- ];
-
+@customElement('sl-format-number')
+export class SlFormatNumber extends LitElement {
/** The number to format. */
- value = 0;
+ @property({ type: Number }) value = 0;
/** The locale to use when formatting the number. */
- locale: string;
+ @property() locale: string;
/** The formatting style to use. */
- type: 'currency' | 'decimal' | 'percent' = 'decimal';
+ @property() type: 'currency' | 'decimal' | 'percent' = 'decimal';
/** Turns off grouping separators. */
- noGrouping = false;
+ @property({ type: Boolean }) noGrouping = false;
/** The currency to use when formatting. Must be an ISO 4217 currency code such as `USD` or `EUR`. */
- currency = 'USD';
+ @property() currency = 'USD';
/** How to display the currency. */
- currencyDisplay: 'symbol' | 'narrowSymbol' | 'code' | 'name' = 'symbol';
+ @property({ attribute: 'currency-display' }) currencyDisplay: 'symbol' | 'narrowSymbol' | 'code' | 'name' = 'symbol';
/** The minimum number of integer digits to use. Possible values are 1 - 21. */
- minimumIntegerDigits: number;
+ @property({ attribute: 'minimum-integer-digits', type: Number }) minimumIntegerDigits: number;
/** The minimum number of fraction digits to use. Possible values are 0 - 20. */
- minimumFractionDigits: number;
+ @property({ attribute: 'minimum-fraction-digits', type: Number }) minimumFractionDigits: number;
/** The maximum number of fraction digits to use. Possible values are 0 - 20. */
- maximumFractionDigits: number;
+ @property({ attribute: 'maximum-fraction-digits', type: Number }) maximumFractionDigits: number;
/** The minimum number of significant digits to use. Possible values are 1 - 21. */
- minimumSignificantDigits: number;
+ @property({ attribute: 'minimum-significant-digits', type: Number }) minimumSignificantDigits: number;
/** The maximum number of significant digits to use,. Possible values are 1 - 21. */
- maximumSignificantDigits: number;
+ @property({ attribute: 'maximum-significant-digits', type: Number }) maximumSignificantDigits: number;
render() {
if (isNaN(this.value)) {
diff --git a/src/components/icon-button/icon-button.ts b/src/components/icon-button/icon-button.ts
index 9100ca8c6..70236cb08 100644
--- a/src/components/icon-button/icon-button.ts
+++ b/src/components/icon-button/icon-button.ts
@@ -1,4 +1,6 @@
-import { classMap, html, Shoemaker } from '@shoelace-style/shoemaker';
+import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { classMap } from 'lit-html/directives/class-map';
+import { ifDefined } from 'lit-html/directives/if-defined';
import styles from 'sass:./icon-button.scss';
import { focusVisible } from '../../internal/focus-visible';
@@ -10,53 +12,57 @@ import { focusVisible } from '../../internal/focus-visible';
*
* @part base - The component's base wrapper.
*/
-export default class SlIconButton extends Shoemaker {
- static tag = 'sl-icon-button';
- static props = ['name', 'library', 'src', 'label', 'disabled'];
- static reflect = ['disabled'];
- static styles = styles;
+@customElement('sl-icon-button')
+export class SlIconButton extends LitElement {
+ static styles = unsafeCSS(styles);
- private button: HTMLButtonElement;
+ @query('button') button: HTMLButtonElement;
/** The name of the icon to draw. */
- name: string;
+ @property() name: string;
/** The name of a registered custom icon library. */
- library: string;
+ @property() library: string;
/** An external URL of an SVG file. */
- src: string;
+ @property() src: string;
/**
* A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should
* always include a label that describes what the icon button does.
*/
- label: string;
+ @property() label: string;
/** Disables the button. */
- disabled = false;
+ @property({ type: Boolean }) disabled = false;
- onReady() {
+ firstUpdated() {
focusVisible.observe(this.button);
}
disconnectedCallback() {
+ super.disconnectedCallback();
focusVisible.unobserve(this.button);
}
render() {
return html`
`;
}
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index 2f8cccc56..eeb0f9fdd 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -1,4 +1,6 @@
-import { html, Hole, Shoemaker } from '@shoelace-style/shoemaker';
+import { LitElement, customElement, html, internalProperty, property, unsafeCSS } from 'lit-element';
+import { unsafeSVG } from 'lit-html/directives/unsafe-svg';
+import { event, EventEmitter } from '../../internal/event';
import styles from 'sass:./icon.scss';
import { getIconLibrary, watchIcon, unwatchIcon } from './library';
import { requestIcon } from './request';
@@ -10,38 +12,50 @@ const parser = new DOMParser();
* @status stable
*
* @part base - The component's base wrapper.
- *
- * @emit sl-load - Emitted when the icon has loaded.
- * @emit sl-error - Emitted when the icon failed to load. Event details may include: `{ status: number }`
*/
-export default class SlIcon extends Shoemaker {
- static tag = 'sl-icon';
- static props = ['svg', 'name', 'src', 'label', 'library'];
- static styles = styles;
+@customElement('sl-icon')
+export class SlIcon extends LitElement {
+ static styles = unsafeCSS(styles);
- private svg: Hole | string;
+ @internalProperty() private svg = '';
/** The name of the icon to draw. */
- name: string;
+ @property() name: string;
/** An external URL of an SVG file. */
- src: string;
+ @property() src: string;
/** An alternative description to use for accessibility. If omitted, the name or src will be used to generate it. */
- label: string;
+ @property() label: string;
/** The name of a registered custom icon library. */
- library = 'default';
+ @property() library = 'default';
- onConnect() {
+ /** Emitted when the icon has loaded. */
+ @event('sl-load') slLoad: EventEmitter${this.svg}
`;
+ return html` ${unsafeSVG(this.svg)}
`;
}
}
diff --git a/src/components/icon/library.ts b/src/components/icon/library.ts
index bd721dcd2..423af6b88 100644
--- a/src/components/icon/library.ts
+++ b/src/components/icon/library.ts
@@ -1,4 +1,4 @@
-import Icon from './icon';
+import { SlIcon } from './icon';
import { getBasePath } from '../../utilities/base-path';
export type IconLibraryResolver = (name: string) => string;
@@ -16,13 +16,13 @@ let registry: IconLibraryRegistry[] = [
resolver: name => `${getBasePath()}/assets/icons/${name}.svg`
}
];
-let watchedIcons: Icon[] = [];
+let watchedIcons: SlIcon[] = [];
-export function watchIcon(icon: Icon) {
+export function watchIcon(icon: SlIcon) {
watchedIcons.push(icon);
}
-export function unwatchIcon(icon: Icon) {
+export function unwatchIcon(icon: SlIcon) {
watchedIcons = watchedIcons.filter(el => el !== icon);
}
diff --git a/src/components/image-comparer/image-comparer.ts b/src/components/image-comparer/image-comparer.ts
index fa0bab27e..9da17408a 100644
--- a/src/components/image-comparer/image-comparer.ts
+++ b/src/components/image-comparer/image-comparer.ts
@@ -1,5 +1,7 @@
-import { html, styleMap, Shoemaker } from '@shoelace-style/shoemaker';
+import { LitElement, customElement, html, property, query, unsafeCSS } from 'lit-element';
+import { styleMap } from 'lit-html/directives/style-map';
import styles from 'sass:./image-comparer.scss';
+import { event, EventEmitter } from '../../internal/event';
import { clamp } from '../../internal/math';
/**
@@ -17,19 +19,26 @@ import { clamp } from '../../internal/math';
* @part after - The container that holds the "after" image.
* @part divider - The divider that separates the images.
* @part handle - The handle that the user drags to expose the after image.
- *
- * @emit sl-change - Emitted when the slider position changes.
*/
-export default class SlImageComparer extends Shoemaker {
- static tag = 'sl-image-comparer';
- static props = ['position'];
- static styles = styles;
+@customElement('sl-image-comparer')
+export class SlImageComparer extends LitElement {
+ static styles = unsafeCSS(styles);
- private base: HTMLElement;
- private handle: HTMLElement;
+ @query('.image-comparer') base: HTMLElement;
+ @query('.image-comparer__handle') handle: HTMLElement;
/** The position of the divider as a percentage. */
- position = 50;
+ @property({ type: Number, reflect: true }) position = 50;
+
+ @event('sl-change') slChange: EventEmitter (this.base = el)}
- part="base"
- class="image-comparer"
- onkeydown=${this.handleKeyDown.bind(this)}
- >
+
diff --git a/src/components/include/include.ts b/src/components/include/include.ts
index 2d75c64ca..ce0384763 100644
--- a/src/components/include/include.ts
+++ b/src/components/include/include.ts
@@ -1,38 +1,45 @@
-import { html, Shoemaker } from '@shoelace-style/shoemaker';
+import { LitElement, customElement, html, property, unsafeCSS } from 'lit-element';
+import { event, EventEmitter } from '../../internal/event';
import styles from 'sass:./include.scss';
import { requestInclude } from './request';
/**
* @since 2.0
* @status stable
- *
- * @emit sl-load - Emitted when the included file is loaded.
- * @emit sl-error - Emitted when the included file fails to load due to an error. Event details will include: `
- * { status: number}`
*/
-export default class SlInclude extends Shoemaker {
- static tag = 'sl-include';
- static props = ['html', 'src', 'mode', ' allowScripts'];
- static styles = styles;
+@customElement('sl-include')
+export class SlInclude extends LitElement {
+ static styles = unsafeCSS(styles);
/** The location of the HTML file to include. */
- src: string;
+ @property() src: string;
/** The fetch mode to use. */
- mode: 'cors' | 'no-cors' | 'same-origin' = 'cors';
+ @property() mode: 'cors' | 'no-cors' | 'same-origin' = 'cors';
/**
* Allows included scripts to be executed. You must ensure the content you're including is trusted, otherwise this
* option can lead to XSS vulnerabilities in your app!
*/
- allowScripts = false;
+ @property({ attribute: 'allow-scripts', type: Boolean }) allowScripts = false;
- watchSrc() {
+ /** Emitted when the included file is loaded. */
+ @event('sl-load') slLoad: EventEmitter;
+
+ /** Emitted when the included file fails to load due to an error. */
+ @event('sl-error') slError: EventEmitter<{ status: number }>;
+
+ connectedCallback() {
+ super.connectedCallback();
this.loadSource();
}
- onConnect() {
- this.loadSource();
+ update(changedProps: Map) {
+ super.update(changedProps);
+
+ if (changedProps.has('src')) {
+ this.loadSource();
+ }
}
executeScript(script: HTMLScriptElement) {
@@ -58,7 +65,7 @@ export default class SlInclude extends Shoemaker {
}
if (!file.ok) {
- this.emit('sl-error', { detail: { status: file.status } });
+ this.slError.emit({ detail: { status: file.status } });
return;
}
@@ -68,13 +75,13 @@ export default class SlInclude extends Shoemaker {
[...this.querySelectorAll('script')].map(script => this.executeScript(script));
}
- this.emit('sl-load');
+ this.slLoad.emit();
} catch {
- this.emit('sl-error');
+ this.slError.emit({ detail: { status: -1 } });
}
}
render() {
- return html`;
+
+ /** Emitted when the clear button is activated. */
+ @event('sl-clear') slClear: EventEmitter;
+
+ /** Emitted when the control receives input. */
+ @event('sl-input') slInput: EventEmitter;
+
+ /** Emitted when the control gains focus. */
+ @event('sl-focus') slFocus: EventEmitter;
+
+ /** Emitted when the control loses focus. */
+ @event('sl-blur') slBlur: EventEmitter;
+
+ connectedCallback() {
+ super.connectedCallback();
this.handleSlotChange = this.handleSlotChange.bind(this);
this.shadowRoot!.addEventListener('slotchange', this.handleSlotChange);
+ }
+
+ firstUpdated() {
this.handleSlotChange();
}
- onDisconnect() {
+ update(changedProps: Map) {
+ super.update(changedProps);
+
+ if (changedProps.has('helpText') || changedProps.has('label')) {
+ this.handleSlotChange();
+ }
+
+ if (changedProps.has('value')) {
+ this.invalid = !this.input.checkValidity();
+ }
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
this.shadowRoot!.removeEventListener('slotchange', this.handleSlotChange);
}
@@ -208,8 +206,8 @@ export default class SlInput extends Shoemaker {
if (this.value !== this.input.value) {
this.value = this.input.value;
- this.emit('sl-input');
- this.emit('sl-change');
+ this.slInput.emit();
+ this.slChange.emit();
}
}
@@ -226,12 +224,12 @@ export default class SlInput extends Shoemaker {
handleChange() {
this.value = this.input.value;
- this.emit('sl-change');
+ this.slChange.emit();
}
handleInput() {
this.value = this.input.value;
- this.emit('sl-input');
+ this.slInput.emit();
}
handleInvalid() {
@@ -240,19 +238,19 @@ export default class SlInput extends Shoemaker {
handleBlur() {
this.hasFocus = false;
- this.emit('sl-blur');
+ this.slBlur.emit();
}
handleFocus() {
this.hasFocus = true;
- this.emit('sl-focus');
+ this.slFocus.emit();
}
handleClearClick(event: MouseEvent) {
this.value = '';
- this.emit('sl-clear');
- this.emit('sl-input');
- this.emit('sl-change');
+ this.slClear.emit();
+ this.slInput.emit();
+ this.slChange.emit();
this.input.focus();
event.stopPropagation();
@@ -267,18 +265,6 @@ export default class SlInput extends Shoemaker {
this.hasLabelSlot = hasSlot(this, 'label');
}
- watchHelpText() {
- this.handleSlotChange();
- }
-
- watchLabel() {
- this.handleSlotChange();
- }
-
- watchValue() {
- this.invalid = !this.input.checkValidity();
- }
-
render() {
return renderFormControl(
{
@@ -311,41 +297,40 @@ export default class SlInput extends Shoemaker {
})}
>
-
-
`
@@ -369,19 +354,19 @@ export default class SlInput extends Shoemaker {
part="password-toggle-button"
class="input__password-toggle"
type="button"
- onclick=${this.handlePasswordToggle.bind(this)}
+ @click=${this.handlePasswordToggle}
tabindex="-1"
>
${this.isPasswordVisible
? html`
-
`
: html`
${' '}
-
`}
@@ -389,7 +374,7 @@ export default class SlInput extends Shoemaker {
: ''}
-
`
diff --git a/src/components/menu-divider/menu-divider.ts b/src/components/menu-divider/menu-divider.ts
index b8aba67e0..0849391ad 100644
--- a/src/components/menu-divider/menu-divider.ts
+++ b/src/components/menu-divider/menu-divider.ts
@@ -1,4 +1,4 @@
-import { html, Shoemaker } from '@shoelace-style/shoemaker';
+import { LitElement, customElement, html, unsafeCSS } from 'lit-element';
import styles from 'sass:./menu-divider.scss';
/**
@@ -9,11 +9,11 @@ import styles from 'sass:./menu-divider.scss';
*
* @part base - The component's base wrapper.
*/
-export default class SlMenuDivider extends Shoemaker {
- static tag = 'sl-menu-divider';
- static styles = styles;
+@customElement('sl-menu-divider')
+export class SlMenuDivider extends LitElement {
+ static styles = unsafeCSS(styles);
render() {
- return html` `;
+ return html` `;
}
}
diff --git a/src/components/menu-item/menu-item.ts b/src/components/menu-item/menu-item.ts
index 108f9cdee..0bbba8bb5 100644
--- a/src/components/menu-item/menu-item.ts
+++ b/src/components/menu-item/menu-item.ts
@@ -1,5 +1,6 @@
-import { classMap, html, Shoemaker } from '@shoelace-style/shoemaker';
+import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
import styles from 'sass:./menu-item.scss';
+import { classMap } from 'lit-html/directives/class-map';
/**
* @since 2.0
@@ -17,23 +18,22 @@ import styles from 'sass:./menu-item.scss';
* @part label - The menu item label.
* @part suffix - The suffix container.
*/
-export default class SlMenuItem extends Shoemaker {
- static tag = 'sl-menu-item';
- static props = ['hasFocus', 'checked', 'value', 'disabled'];
- static reflect = ['checked', 'disabled'];
- static styles = styles;
+@customElement('sl-menu-item')
+export class SlMenuItem extends LitElement {
+ static styles = unsafeCSS(styles);
- private hasFocus = false;
- private menuItem: HTMLElement;
+ @query('.menu-item') menuItem: HTMLElement;
+
+ @internalProperty() private hasFocus = false;
/** Draws the item in a checked state. */
- checked = false;
+ @property({ type: Boolean, reflect: true }) checked = false;
/** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
- value = '';
+ @property() value = '';
/** Draws the menu item in a disabled state. */
- disabled = false;
+ @property({ type: Boolean, reflect: true }) disabled = false;
/** Sets focus on the button. */
setFocus(options?: FocusOptions) {
@@ -64,7 +64,6 @@ export default class SlMenuItem extends Shoemaker {
render() {
return html`
;
+
+ /** Emitted when the control's checked state changes. */
+ @event('sl-change') slChange: EventEmitter;
+
+ /** Emitted when the control gains focus. */
+ @event('sl-focus') slFocus: EventEmitter;
+
+ update(changedProps: Map) {
+ super.update(changedProps);
+
+ if (changedProps.has('checked')) {
+ if (this.checked) {
+ this.getSiblingRadios().map(radio => (radio.checked = false));
+ }
+ this.input.checked = this.checked;
+ this.slChange.emit();
+ }
+ }
/** Sets focus on the radio. */
setFocus(options?: FocusOptions) {
@@ -81,17 +100,17 @@ export default class SlRadio extends Shoemaker {
}
handleClick() {
- this.checked = this.input.checked;
+ this.checked = true;
}
handleBlur() {
this.hasFocus = false;
- this.emit('sl-blur');
+ this.slBlur.emit();
}
handleFocus() {
this.hasFocus = true;
- this.emit('sl-focus');
+ this.slFocus.emit();
}
handleKeyDown(event: KeyboardEvent) {
@@ -116,14 +135,6 @@ export default class SlRadio extends Shoemaker {
this.input.focus();
}
- watchChecked() {
- if (this.checked) {
- this.getSiblingRadios().map(radio => (radio.checked = false));
- }
- this.input.checked = this.checked;
- this.emit('sl-change');
- }
-
render() {
return html`
`;
diff --git a/src/components/range/range.scss b/src/components/range/range.scss
index 5f5dae48c..0a005fe90 100644
--- a/src/components/range/range.scss
+++ b/src/components/range/range.scss
@@ -122,7 +122,7 @@
}
}
-// Tooltip
+// Tooltip output
.range__tooltip {
position: absolute;
z-index: var(--sl-z-index-tooltip);
diff --git a/src/components/range/range.ts b/src/components/range/range.ts
index 60050b927..6a50f1b38 100644
--- a/src/components/range/range.ts
+++ b/src/components/range/range.ts
@@ -1,4 +1,7 @@
-import { classMap, html, Shoemaker } from '@shoelace-style/shoemaker';
+import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { classMap } from 'lit-html/directives/class-map';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { event, EventEmitter } from '../../internal/event';
import styles from 'sass:./range.scss';
import { renderFormControl } from '../../internal/form-control';
import { hasSlot } from '../../internal/slot';
@@ -15,81 +18,71 @@ let id = 0;
* @part base - The component's base wrapper.
* @part input - The native range input.
* @part tooltip - The range tooltip.
- *
- * @emit sl-change - Emitted when the control's value changes.
- * @emit sl-blur - Emitted when the control loses focus.
- * @emit sl-focus - Emitted when the control gains focus.
*/
-export default class SlRange extends Shoemaker {
- static tag = 'sl-range';
- static props = [
- 'hasFocus',
- 'hasHelpTextSlot',
- 'hasLabelSlot',
- 'hasTooltip',
- 'name',
- 'value',
- 'label',
- 'helpText',
- 'disabled',
- 'invalid',
- 'min',
- 'max',
- 'step',
- 'tooltip',
- 'tooltipFormatter'
- ];
- static reflect = ['disabled', 'invalid'];
- static styles = styles;
+@customElement('sl-range')
+export class SlRange extends LitElement {
+ static styles = unsafeCSS(styles);
+
+ @query('.range__control') input: HTMLInputElement;
+ @query('.range__tooltip') output: HTMLOutputElement;
- private hasFocus = false;
- private hasHelpTextSlot = false;
- private hasLabelSlot = false;
- private hasTooltip = false;
private helpTextId = `input-help-text-${id}`;
- private input: HTMLInputElement;
private inputId = `input-${++id}`;
private labelId = `input-label-${id}`;
- private output: HTMLElement;
private resizeObserver: ResizeObserver;
+ @internalProperty() private hasFocus = false;
+ @internalProperty() private hasHelpTextSlot = false;
+ @internalProperty() private hasLabelSlot = false;
+ @internalProperty() private hasTooltip = false;
+
/** The input's name attribute. */
- name = '';
+ @property() name = '';
/** The input's value attribute. */
- value: number;
+ @property({ type: Number }) value: number;
/** The range's label. Alternatively, you can use the label slot. */
- label = '';
+ @property() label = '';
/** The range's help text. Alternatively, you can use the help-text slot. */
- helpText = '';
+ @property({ attribute: 'help-text' }) helpText = '';
/** Disables the input. */
- disabled = false;
+ @property({ type: Boolean, reflect: true }) disabled = false;
/**
* This will be true when the control is in an invalid state. Validity in range inputs is determined by the message
* provided by the `setCustomValidity` method.
*/
- invalid = false;
+ @property({ type: Boolean, reflect: true }) invalid = false;
/** The input's min attribute. */
- min = 0;
+ @property({ type: Number }) min = 0;
/** The input's max attribute. */
- max = 100;
+ @property({ type: Number }) max = 100;
/** The input's step attribute. */
- step = 1;
+ @property({ type: Number }) step = 1;
/** The preferred placedment of the tooltip. */
- tooltip: 'top' | 'bottom' | 'none' = 'top';
+ @property() tooltip: 'top' | 'bottom' | 'none' = 'top';
/** A function used to format the tooltip's value. */
- tooltipFormatter = (value: number) => value.toString();
+ @property() tooltipFormatter = (value: number) => value.toString();
- onConnect() {
+ /** Emitted when the control's value changes. */
+ @event('sl-change') slChange: EventEmitter;
+
+ /** Emitted when the control loses focus. */
+ @event('sl-blur') slBlur: EventEmitter;
+
+ /** Emitted when the control gains focus. */
+ @event('sl-focus') slFocus: EventEmitter;
+
+ connectedCallback() {
+ super.connectedCallback();
this.handleSlotChange = this.handleSlotChange.bind(this);
this.shadowRoot!.addEventListener('slotchange', this.handleSlotChange);
@@ -100,12 +93,21 @@ export default class SlRange extends Shoemaker {
this.handleSlotChange();
}
- onReady() {
+ firstUpdated() {
this.syncTooltip();
this.resizeObserver = new ResizeObserver(() => this.syncTooltip());
}
- onDisconnect() {
+ update(changedProps: Map) {
+ super.update(changedProps);
+
+ if (changedProps.has('label') || changedProps.has('helpText')) {
+ this.handleSlotChange();
+ }
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
this.shadowRoot!.removeEventListener('slotchange', this.handleSlotChange);
}
@@ -127,7 +129,7 @@ export default class SlRange extends Shoemaker {
handleInput() {
this.value = Number(this.input.value);
- this.emit('sl-change');
+ this.slChange.emit();
requestAnimationFrame(() => this.syncTooltip());
}
@@ -135,14 +137,14 @@ export default class SlRange extends Shoemaker {
handleBlur() {
this.hasFocus = false;
this.hasTooltip = false;
- this.emit('sl-blur');
+ this.slBlur.emit();
this.resizeObserver.unobserve(this.input);
}
handleFocus() {
this.hasFocus = true;
this.hasTooltip = true;
- this.emit('sl-focus');
+ this.slFocus.emit();
this.resizeObserver.observe(this.input);
}
@@ -167,14 +169,6 @@ export default class SlRange extends Shoemaker {
}
}
- watchLabel() {
- this.handleSlotChange();
- }
-
- watchHelpText() {
- this.handleSlotChange();
- }
-
render() {
return renderFormControl(
{
@@ -198,29 +192,24 @@ export default class SlRange extends Shoemaker {
'range--tooltip-top': this.tooltip === 'top',
'range--tooltip-bottom': this.tooltip === 'bottom'
})}
- ontouchstart=${this.handleTouchStart.bind(this)}
+ @touchstart=${this.handleTouchStart.bind(this)}
>
(this.input = el)}
type="range"
class="range__control"
name=${this.name}
- disabled=${this.disabled ? true : null}
- min=${this.min}
- max=${this.max}
- step=${this.step}
.value=${this.value}
- oninput=${this.handleInput.bind(this)}
- onfocus=${this.handleFocus.bind(this)}
- onblur=${this.handleBlur.bind(this)}
+ ?disabled=${this.disabled ? true : null}
+ min=${ifDefined(this.min)}
+ max=${ifDefined(this.max)}
+ step=${ifDefined(this.step)}
+ @input=${this.handleInput.bind(this)}
+ @focus=${this.handleFocus.bind(this)}
+ @blur=${this.handleBlur.bind(this)}
/>
${this.tooltip !== 'none'
- ? html`
-
- `
+ ? html` `
: ''}
`
diff --git a/src/components/rating/rating.ts b/src/components/rating/rating.ts
index ded9e8e03..50993addb 100644
--- a/src/components/rating/rating.ts
+++ b/src/components/rating/rating.ts
@@ -1,4 +1,8 @@
-import { classMap, html, styleMap, Shoemaker } from '@shoelace-style/shoemaker';
+import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { classMap } from 'lit-html/directives/class-map';
+import { styleMap } from 'lit-html/directives/style-map';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { event, EventEmitter } from '../../internal/event';
import styles from 'sass:./rating.scss';
import { focusVisible } from '../../internal/focus-visible';
import { clamp } from '../../internal/math';
@@ -10,36 +14,37 @@ import { clamp } from '../../internal/math';
* @dependency sl-icon
*
* @part base - The component's base wrapper.
- *
- * @emit sl-change - Emitted when the rating's value changes.
*/
-export default class SlRating extends Shoemaker {
- static tag = 'sl-rating';
- static props = ['hoverValue', 'isHovering', 'value', 'max', 'precision', 'readonly', 'disabled', 'symbol'];
- static reflect = ['readonly', 'disabled'];
- static styles = styles;
+@customElement('sl-rating')
+export class SlRating extends LitElement {
+ static styles = unsafeCSS(styles);
- private hoverValue = 0;
- private isHovering = false;
- private rating: HTMLElement;
+ @query('.rating') rating: HTMLElement;
+
+ @internalProperty() private hoverValue = 0;
+ @internalProperty() private isHovering = false;
/** The current rating. */
- value = 0;
+ @property({ type: Number }) value = 0;
/** The highest rating to show. */
- max = 5;
+ @property({ type: Number }) max = 5;
/** The minimum increment value allowed by the control. */
- precision = 1;
+ @property({ type: Number }) precision = 1;
/** Makes the rating readonly. */
- readonly = false;
+ @property({ type: Boolean, reflect: true }) readonly = false;
/** Disables the rating. */
- disabled = false;
+ @property({ type: Boolean, reflect: true }) disabled = false;
/** The name of the icon to display as the symbol. */
- symbol: string | ((value: number) => string) = 'star-fill';
+ // @ts-ignore
+ @property() getSymbol = (value?: number) => '
-
-
(this.handle = el)}
part="handle"
class="image-comparer__handle"
role="scrollbar"
- aria-valuenow="${this.position}"
+ aria-valuenow=${this.position}
aria-valuemin="0"
aria-valuemax="100"
tabindex="0"
>
-
(this.menuItem = el)}
part="base"
class=${classMap({
'menu-item': true,
@@ -76,25 +75,25 @@ export default class SlMenuItem extends Shoemaker {
aria-disabled=${this.disabled ? 'true' : 'false'}
aria-checked=${this.checked ? 'true' : 'false'}
tabindex=${!this.disabled ? '0' : null}
- onfocus=${this.handleFocus.bind(this)}
- onblur=${this.handleBlur.bind(this)}
- onmouseenter=${this.handleMouseEnter.bind(this)}
- onmouseleave=${this.handleMouseLeave.bind(this)}
+ @focus=${this.handleFocus}
+ @blur=${this.handleBlur}
+ @mouseenter=${this.handleMouseEnter}
+ @mouseleave=${this.handleMouseLeave}
>
`;
diff --git a/src/components/menu-label/menu-label.ts b/src/components/menu-label/menu-label.ts
index d568c3d71..e4561f9ea 100644
--- a/src/components/menu-label/menu-label.ts
+++ b/src/components/menu-label/menu-label.ts
@@ -1,4 +1,4 @@
-import { html, Shoemaker } from '@shoelace-style/shoemaker';
+import { LitElement, customElement, html, unsafeCSS } from 'lit-element';
import styles from 'sass:./menu-label.scss';
/**
@@ -11,14 +11,14 @@ import styles from 'sass:./menu-label.scss';
*
* @part base - The component's base wrapper.
*/
-export default class SlMenuLabel extends Shoemaker {
- static tag = 'sl-menu-label';
- static styles = styles;
+@customElement('sl-menu-label')
+export class SlMenuLabel extends LitElement {
+ static styles = unsafeCSS(styles);
render() {
return html`
`;
}
diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts
index 82d6c8aa4..dea45f5cb 100644
--- a/src/components/menu/menu.ts
+++ b/src/components/menu/menu.ts
@@ -1,4 +1,5 @@
-import { html, Shoemaker } from '@shoelace-style/shoemaker';
+import { LitElement, customElement, html, query, unsafeCSS } from 'lit-element';
+import { event, EventEmitter } from '../../internal/event';
import styles from 'sass:./menu.scss';
import { SlMenuItem } from '../../shoelace';
import { getTextContent } from '../../internal/slot';
@@ -10,17 +11,19 @@ import { getTextContent } from '../../internal/slot';
* @slot - The menu's content, including menu items, menu dividers, and menu labels.
*
* @part base - The component's base wrapper.
- *
- * @emit sl-select - Emitted when a menu item is selected. Event details will contain: `{ item: SlMenuItem }`
*/
-export default class SlMenu extends Shoemaker {
- static tag = 'sl-menu';
- static styles = styles;
+@customElement('sl-menu')
+export class SlMenu extends LitElement {
+ static styles = unsafeCSS(styles);
+
+ @query('.menu') menu: HTMLElement;
- private menu: HTMLElement;
private typeToSelectString = '';
private typeToSelectTimeout: any;
+ /** Emitted when a menu item is selected. */
+ @event('sl-select') slSelect: EventEmitter<{ item: SlMenuItem }>;
+
/**
* Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.
* The key passed will be appended to the internal query and the selection will be updated. After a brief period, the
@@ -62,7 +65,7 @@ export default class SlMenu extends Shoemaker {
const item = target.closest('sl-menu-item') as SlMenuItem;
if (item && !item.disabled) {
- this.emit('sl-select', { detail: { item } });
+ this.slSelect.emit({ detail: { item } });
}
}
@@ -73,7 +76,7 @@ export default class SlMenu extends Shoemaker {
event.preventDefault();
if (item) {
- this.emit('sl-select', { detail: { item } });
+ this.slSelect.emit({ detail: { item } });
}
}
@@ -115,16 +118,8 @@ export default class SlMenu extends Shoemaker {
render() {
return html`
- (this.menu = el)}
- part="base"
- class="menu"
- role="menu"
- onclick=${this.handleClick.bind(this)}
- onkeydown=${this.handleKeyDown.bind(this)}
- tabindex="0"
- >
- ) {
+ super.update(changedProps);
+
+ if (changedProps.has('percentage')) {
+ this.updateProgress();
+ }
}
- onReady() {
+ firstUpdated() {
this.updateProgress();
}
@@ -55,10 +58,9 @@ export default class SlProgressRing extends Shoemaker {
r=${this.size / 2 - this.strokeWidth * 2}
cx=${this.size / 2}
cy=${this.size / 2}
- />
+ >
(this.indicator = el)}
class="progress-ring__indicator"
stroke-width="${this.strokeWidth}"
stroke-linecap="round"
@@ -66,11 +68,11 @@ export default class SlProgressRing extends Shoemaker {
r=${this.size / 2 - this.strokeWidth * 2}
cx=${this.size / 2}
cy=${this.size / 2}
- />
+ >
-
`;
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index 99f42d804..74325cc9b 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -1,4 +1,6 @@
-import { classMap, html, Shoemaker } from '@shoelace-style/shoemaker';
+import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
+import { classMap } from 'lit-html/directives/class-map';
+import { event, EventEmitter } from '../../internal/event';
import styles from 'sass:./radio.scss';
let id = 0;
@@ -13,39 +15,56 @@ let id = 0;
* @part control - The radio control.
* @part checked-icon - The container the wraps the checked icon.
* @part label - The radio label.
- *
- * @emit sl-blur - Emitted when the control loses focus.
- * @emit sl-change - Emitted when the control's checked state changes.
- * @emit sl-focus - Emitted when the control gains focus.
*/
-export default class SlRadio extends Shoemaker {
- static tag = 'sl-radio';
- static props = ['hasFocus', 'name', 'value', 'disabled', 'checked', 'invalid'];
- static reflect = ['checked', 'invalid'];
- static styles = styles;
+@customElement('sl-radio')
+export class SlRadio extends LitElement {
+ static styles = unsafeCSS(styles);
+
+ @query('input[type="radio"]') input: HTMLInputElement;
- private hasFocus = false;
private inputId = `radio-${++id}`;
private labelId = `radio-label-${id}`;
- private input: HTMLInputElement;
+
+ @internalProperty() private hasFocus = false;
/** The radio's name attribute. */
- name: string;
+ @property() name: string;
/** The radio's value attribute. */
- value: string;
+ @property() value: string;
/** Disables the radio. */
- disabled = false;
+ @property({ type: Boolean, reflect: true }) disabled = false;
/** Draws the radio in a checked state. */
- checked = false;
+ @property({ type: Boolean, reflect: true }) checked = false;
/**
* This will be true when the control is in an invalid state. Validity in range inputs is determined by the message
* provided by the `setCustomValidity` method.
*/
- invalid = false;
+ @property({ type: Boolean, reflect: true }) invalid = false;
+
+ /** Emitted when the control loses focus. */
+ @event('sl-blur') slBlur: EventEmitter (this.rating = el)}
part="base"
class=${classMap({
rating: true,
@@ -154,18 +163,17 @@ export default class SlRating extends Shoemaker {
aria-valuemin=${0}
aria-valuemax=${this.max}
tabindex=${this.disabled ? '-1' : '0'}
- onclick=${this.handleClick.bind(this)}
- onkeydown=${this.handleKeyDown.bind(this)}
- onmouseenter=${this.handleMouseEnter.bind(this)}
- onmouseleave=${this.handleMouseLeave.bind(this)}
- onmousemove=${this.handleMouseMove.bind(this)}
+ @click=${this.handleClick}
+ @keydown=${this.handleKeyDown}
+ @mouseenter=${this.handleMouseEnter}
+ @mouseleave=${this.handleMouseLeave}
+ @mousemove=${this.handleMouseMove}
>