kemet-ui 3.0.1 → 4.0.0

package/dist/components/kemet-select/kemet-select.d.ts

@@ -1,119 +0,0 @@
-import { LitElement, TemplateResult } from 'lit';
-import { FormSubmitController } from '../../utilities/controllers/forms';
-import { KemetFieldInterface } from '../kemet-field/types';
-import type KemetOption from './kemet-option';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-select
- * @summary An enhanced select element.
- *
- * @prop {string} slug - A string the uniquely identifies the select
- * @prop {string} name - The name of the select
- * @prop {string} value - The value of the select
- * @prop {array} options - The options the select contains
- * @prop {string} status - The status of the select
- * @prop {boolean} required - Determines whether the field is required
- * @prop {boolean} disabled - Determines whether the field is disabled
- * @prop {boolean} multiple - Support of multiple choice selections
- * @prop {string} icon - The dropdown icon
- * @prop {number} iconSize - The dropdown icon size
- * @prop {boolean} filled - Displays a filled select
- * @prop {boolean} rounded - Displays rounded corners
- *
- * @csspart select
- *
- * @cssproperty --kemet-select-padding - The padding on the textarea.
- * @cssproperty --kemet-select-border - The border of the textarea.
- * @cssproperty --kemet-select-border-color-error - The border of the error state.
- * @cssproperty --kemet-select-border-color-success - The border of the success state.
- * @cssproperty --kemet-select-border-color-warning - The border of the warning state.
- * @cssproperty --kemet-select-border-radius-rounded - The border radius on rounded.
- * @cssproperty --kemet-select-border-filled - The border on filled.
- * @cssproperty --kemet-select-color-filled - The color on filled.
- * @cssproperty --kemet-select-background-color-filled - The background-color on filled.
- * @cssproperty --kemet-select-background-color-error - The error state background color.
- * @cssproperty --kemet-select-background-color-success - The success state background color.
- * @cssproperty --kemet-select-background-color-warning - The warning state background color.
- * @cssproperty --kemet-select-icon-right - The space on the right of the icon.
- *
- * @event kemet-input-focused - Fires when the input receives and loses focus
- * @event kemet-input-status - Fires when there's a change in status
- * @event kemet-input-change - Fires when the select input changes
- *
- */
-interface IOptions {
-    label: string;
-    value: string;
-    disabled: boolean;
-    selected: boolean;
-}
-export default class KemetSelect extends LitElement {
-    formSubmitController: FormSubmitController;
-    static styles: import("lit").CSSResult[];
-    slug: string;
-    name: string;
-    value: string;
-    options: IOptions[];
-    status: string;
-    required: boolean;
-    disabled: boolean;
-    multiple: boolean;
-    icon: string;
-    iconSize: number;
-    filled: boolean;
-    rounded: boolean;
-    invalid: boolean;
-    control: KemetFieldInterface;
-    select: HTMLSelectElement;
-    selectedOption: HTMLOptionElement;
-    optionElements: NodeListOf<KemetOption>;
-    hasFocus: boolean;
-    constructor();
-    firstUpdated(): void;
-    render(): TemplateResult<1>;
-    /**
-     * Generates the option elements
-     * @private
-     * @returns {TemplateResult} An option element
-     */
-    makeOptions(): TemplateResult<1>[];
-    /**
-     * Generates a dropdown icon
-     * @private
-     */
-    makeIcon(): TemplateResult<1>;
-    /**
-     * Handles when the input receives focus
-     * @private
-     */
-    handleFocus(): void;
-    /**
-     * Handles when the input loses focus
-     * @private
-     */
-    handleBlur(): void;
-    /**
-     * Handles when the input changes value
-     * @private
-     */
-    handleChange(): void;
-    /**
-     * Handles when the input has an error
-     * @private
-     */
-    handleInvalid(): void;
-    /**
-     * Checks the validity of the standard select
-     * @public
-     * @returns {boolean}
-     */
-    checkValidity(): boolean;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-select': KemetSelect;
-    }
-}
-export {};

package/dist/components/kemet-select/kemet-select.js

@@ -1,198 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { FormSubmitController } from '../../utilities/controllers/forms';
-import { emitEvent } from '../../utilities/misc/events';
-import { stylesSelect } from './styles';
-let KemetSelect = class KemetSelect extends LitElement {
-    constructor() {
-        super();
-        this.name = 'select';
-        this.icon = 'chevron-down';
-        this.iconSize = 16;
-        /** @internal */
-        this.formSubmitController = new FormSubmitController(this);
-        /** @internal */
-        this.control = this.closest('kemet-field');
-    }
-    firstUpdated() {
-        this.select = this.shadowRoot.querySelector('select');
-        this.selectedOption = this.querySelector('[selected]');
-        this.value = this.selectedOption ? this.selectedOption.value : '';
-    }
-    render() {
-        return html `
-      <select
-        part="select"
-        id=${this.slug}
-        name=${this.name}
-        ?required=${this.required}
-        ?disabled=${this.disabled}
-        ?multiple=${this.multiple}
-        @change=${this.handleChange}
-        @focus=${this.handleFocus}
-        @blur=${this.handleBlur}
-        @invalid=${this.handleInvalid}
-      >
-        ${this.makeOptions()}
-      </select>
-      ${this.makeIcon()}
-      <slot @slotchange=${() => this.makeOptions()}></slot>
-    `;
-    }
-    /**
-     * Generates the option elements
-     * @private
-     * @returns {TemplateResult} An option element
-     */
-    makeOptions() {
-        this.options = [];
-        this.optionElements = this.querySelectorAll('kemet-option');
-        this.optionElements.forEach((option) => {
-            this.options = this.options.concat({
-                label: option.label,
-                value: option.value,
-                disabled: option.disabled,
-                selected: option.selected,
-            });
-        });
-        return this.options.map(option => html `<option value=${option.value} ?disabled=${option.disabled} ?selected=${option.selected}>
-          ${option.label}
-        </option>`);
-    }
-    /**
-     * Generates a dropdown icon
-     * @private
-     */
-    makeIcon() {
-        if (this.icon || this.icon !== '') {
-            return html `<kemet-icon icon=${this.icon} size=${this.iconSize}></kemet-icon>`;
-        }
-        return null;
-    }
-    /**
-     * Handles when the input receives focus
-     * @private
-     */
-    handleFocus() {
-        this.hasFocus = true;
-        emitEvent(this, 'kemet-input-focused', true);
-    }
-    /**
-     * Handles when the input loses focus
-     * @private
-     */
-    handleBlur() {
-        this.hasFocus = false;
-        emitEvent(this, 'kemet-input-focused', false);
-        this.select.checkValidity();
-        if (!this.select.checkValidity()) {
-            this.invalid = true;
-            this.status = 'error';
-            this.control.status = 'error';
-            emitEvent(this, 'kemet-input-status', {
-                status: 'error',
-                validity: this.select.validity,
-                element: this,
-            });
-        }
-    }
-    /**
-     * Handles when the input changes value
-     * @private
-     */
-    handleChange() {
-        this.value = this.select.value;
-        emitEvent(this, 'kemet-input-change', this.value);
-        if (this.select.checkValidity()) {
-            this.invalid = false;
-            this.status = 'standard';
-            emitEvent(this, 'kemet-input-status', {
-                status: 'standard',
-                validity: this.select.validity,
-                element: this,
-            });
-        }
-    }
-    /**
-     * Handles when the input has an error
-     * @private
-     */
-    handleInvalid() {
-        this.invalid = true;
-        this.status = 'error';
-        emitEvent(this, 'kemet-input-status', {
-            status: 'error',
-            validity: this.select.validity,
-            element: this,
-        });
-    }
-    /**
-     * Checks the validity of the standard select
-     * @public
-     * @returns {boolean}
-     */
-    checkValidity() {
-        return this.select.checkValidity();
-    }
-};
-KemetSelect.styles = [stylesSelect];
-__decorate([
-    property({ type: String })
-], KemetSelect.prototype, "slug", void 0);
-__decorate([
-    property({ type: String })
-], KemetSelect.prototype, "name", void 0);
-__decorate([
-    property({ type: String })
-], KemetSelect.prototype, "value", void 0);
-__decorate([
-    property({ type: Array })
-], KemetSelect.prototype, "options", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], KemetSelect.prototype, "status", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetSelect.prototype, "required", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetSelect.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean })
-], KemetSelect.prototype, "multiple", void 0);
-__decorate([
-    property({ type: String })
-], KemetSelect.prototype, "icon", void 0);
-__decorate([
-    property({ type: Number, attribute: 'icon-size' })
-], KemetSelect.prototype, "iconSize", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetSelect.prototype, "filled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetSelect.prototype, "rounded", void 0);
-__decorate([
-    state()
-], KemetSelect.prototype, "invalid", void 0);
-__decorate([
-    state()
-], KemetSelect.prototype, "control", void 0);
-__decorate([
-    state()
-], KemetSelect.prototype, "select", void 0);
-__decorate([
-    state()
-], KemetSelect.prototype, "selectedOption", void 0);
-__decorate([
-    state()
-], KemetSelect.prototype, "optionElements", void 0);
-__decorate([
-    state()
-], KemetSelect.prototype, "hasFocus", void 0);
-KemetSelect = __decorate([
-    customElement('kemet-select')
-], KemetSelect);
-export default KemetSelect;
-//# sourceMappingURL=kemet-select.js.map

package/dist/components/kemet-select/kemet-select.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-select.js","sourceRoot":"","sources":["../../../src/components/kemet-select/kemet-select.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { KemetFieldInterface } from '../kemet-field/types';\nimport { stylesSelect } from './styles';\n\nimport type KemetOption from './kemet-option';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-select\n * @summary An enhanced select element.\n *\n * @prop {string} slug - A string the uniquely identifies the select\n * @prop {string} name - The name of the select\n * @prop {string} value - The value of the select\n * @prop {array} options - The options the select contains\n * @prop {string} status - The status of the select\n * @prop {boolean} required - Determines whether the field is required\n * @prop {boolean} disabled - Determines whether the field is disabled\n * @prop {boolean} multiple - Support of multiple choice selections\n * @prop {string} icon - The dropdown icon\n * @prop {number} iconSize - The dropdown icon size\n * @prop {boolean} filled - Displays a filled select\n * @prop {boolean} rounded - Displays rounded corners\n *\n * @csspart select\n *\n * @cssproperty --kemet-select-padding - The padding on the textarea.\n * @cssproperty --kemet-select-border - The border of the textarea.\n * @cssproperty --kemet-select-border-color-error - The border of the error state.\n * @cssproperty --kemet-select-border-color-success - The border of the success state.\n * @cssproperty --kemet-select-border-color-warning - The border of the warning state.\n * @cssproperty --kemet-select-border-radius-rounded - The border radius on rounded.\n * @cssproperty --kemet-select-border-filled - The border on filled.\n * @cssproperty --kemet-select-color-filled - The color on filled.\n * @cssproperty --kemet-select-background-color-filled - The background-color on filled.\n * @cssproperty --kemet-select-background-color-error - The error state background color.\n * @cssproperty --kemet-select-background-color-success - The success state background color.\n * @cssproperty --kemet-select-background-color-warning - The warning state background color.\n * @cssproperty --kemet-select-icon-right - The space on the right of the icon.\n *\n * @event kemet-input-focused - Fires when the input receives and loses focus\n * @event kemet-input-status - Fires when there's a change in status\n * @event kemet-input-change - Fires when the select input changes\n *\n */\n\ninterface IOptions {\n  label: string;\n  value: string;\n  disabled: boolean;\n  selected: boolean;\n}\n\n@customElement('kemet-select')\nexport default class KemetSelect extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesSelect];\n\n  @property({ type: String })\n  slug: string;\n\n  @property({ type: String })\n  name: string = 'select';\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: Array })\n  options: IOptions[];\n\n  @property({ type: String, reflect: true })\n  status: string;\n\n  @property({ type: Boolean, reflect: true })\n  required: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  @property({ type: Boolean })\n  multiple: boolean;\n\n  @property({ type: String })\n  icon: string = 'chevron-down';\n\n  @property({ type: Number, attribute: 'icon-size' })\n  iconSize: number = 16;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  rounded: boolean;\n\n  @state()\n  invalid: boolean;\n\n  @state()\n  control: KemetFieldInterface;\n\n  @state()\n  select: HTMLSelectElement;\n\n  @state()\n  selectedOption: HTMLOptionElement;\n\n  @state()\n  optionElements: NodeListOf<KemetOption>;\n\n  @state()\n  hasFocus: boolean;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n\n    /** @internal */\n    this.control = this.closest('kemet-field');\n  }\n\n  firstUpdated() {\n    this.select = this.shadowRoot.querySelector('select');\n    this.selectedOption = this.querySelector('[selected]');\n    this.value = this.selectedOption ? this.selectedOption.value : '';\n  }\n\n  render() {\n    return html`\n      <select\n        part=\"select\"\n        id=${this.slug}\n        name=${this.name}\n        ?required=${this.required}\n        ?disabled=${this.disabled}\n        ?multiple=${this.multiple}\n        @change=${this.handleChange}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        @invalid=${this.handleInvalid}\n      >\n        ${this.makeOptions()}\n      </select>\n      ${this.makeIcon()}\n      <slot @slotchange=${() => this.makeOptions()}></slot>\n    `;\n  }\n\n  /**\n   * Generates the option elements\n   * @private\n   * @returns {TemplateResult} An option element\n   */\n  makeOptions(): TemplateResult<1>[] {\n    this.options = [];\n    this.optionElements = this.querySelectorAll('kemet-option');\n\n    this.optionElements.forEach((option: KemetOption) => {\n      this.options = this.options.concat({\n        label: option.label,\n        value: option.value,\n        disabled: option.disabled,\n        selected: option.selected,\n      });\n    });\n\n    return this.options.map(\n      option => html`<option value=${option.value} ?disabled=${option.disabled} ?selected=${option.selected}>\n          ${option.label}\n        </option>`,\n    );\n  }\n\n  /**\n   * Generates a dropdown icon\n   * @private\n   */\n  makeIcon() {\n    if (this.icon || this.icon !== '') {\n      return html`<kemet-icon icon=${this.icon} size=${this.iconSize}></kemet-icon>`;\n    }\n\n    return null;\n  }\n\n  /**\n   * Handles when the input receives focus\n   * @private\n   */\n  handleFocus() {\n    this.hasFocus = true;\n    emitEvent(this, 'kemet-input-focused', true);\n  }\n\n  /**\n   * Handles when the input loses focus\n   * @private\n   */\n  handleBlur() {\n    this.hasFocus = false;\n    emitEvent(this, 'kemet-input-focused', false);\n\n    this.select.checkValidity();\n\n    if (!this.select.checkValidity()) {\n      this.invalid = true;\n      this.status = 'error';\n      this.control.status = 'error';\n\n      emitEvent(this, 'kemet-input-status', {\n        status: 'error',\n        validity: this.select.validity,\n        element: this,\n      });\n    }\n  }\n\n  /**\n   * Handles when the input changes value\n   * @private\n   */\n  handleChange() {\n    this.value = this.select.value;\n    emitEvent(this, 'kemet-input-change', this.value);\n\n    if (this.select.checkValidity()) {\n      this.invalid = false;\n      this.status = 'standard';\n\n      emitEvent(this, 'kemet-input-status', {\n        status: 'standard',\n        validity: this.select.validity,\n        element: this,\n      });\n    }\n  }\n\n  /**\n   * Handles when the input has an error\n   * @private\n   */\n  handleInvalid() {\n    this.invalid = true;\n    this.status = 'error';\n\n    emitEvent(this, 'kemet-input-status', {\n      status: 'error',\n      validity: this.select.validity,\n      element: this,\n    });\n  }\n\n  /**\n   * Checks the validity of the standard select\n   * @public\n   * @returns {boolean}\n   */\n  checkValidity(): boolean {\n    return this.select.checkValidity();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-select': KemetSelect\n  }\n}\n"]}

package/dist/components/kemet-select/styles.d.ts

@@ -1 +0,0 @@
-export declare const stylesSelect: import("lit").CSSResult;

package/dist/components/kemet-select/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsF9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesSelect = css`\n  :host {\n    --kemet-select-padding: 1rem;\n    --kemet-select-border: 1px solid rgb(var(--kemet-color-foreground));\n    --kemet-select-border-color-error: 1px solid rgb(var(--kemet-color-error));\n    --kemet-select-border-color-success: 1px solid rgb(var(--kemet-color-success));\n    --kemet-select-border-color-warning: 1px solid rgb(var(--kemet-color-warning));\n    --kemet-select-border-radius-rounded: var(--kemet-border-radius-md);\n    --kemet-select-border-filled: none;\n    --kemet-select-color-filled: rgb(var(--kemet-color-white));\n    --kemet-select-background-color-filled: rgb(var(--kemet-color-primary));\n    --kemet-select-color-filled: rgb(var(--kemet-color-white));\n    --kemet-select-background-color-error: rgb(var(--kemet-color-error));\n    --kemet-select-background-color-success: rgb(var(--kemet-color-success));\n    --kemet-select-background-color-success: rgb(var(--kemet-color-success));\n    --kemet-select-background-color-warning: rgb(var(--kemet-color-warning));\n    --kemet-select-icon-right: 1rem;\n\n    position: relative;\n    display: block;\n  }\n\n  select {\n    color: rgb(var(--kemet-color-text));\n    display: block;\n    font-size: 1rem;\n    width: 100%;\n    padding: var(--kemet-select-padding);\n    border: var(--kemet-select-border);\n    appearance: none;\n    box-sizing: border-box;\n    background-color: transparent;\n  }\n\n  option {\n    color: rgb(var(--kemet-color-black));\n  }\n\n  :host([status='error']) select {\n    border: var(--kemet-select-border-color-error);\n  }\n\n  :host([status='success']) select {\n    border: var(--kemet-select-border-color-success);\n  }\n\n  :host([status='warning']) select {\n    border: var(--kemet-select-border-color-warning);\n  }\n\n  :host([disabled]) select {\n    opacity: 0.5;\n  }\n\n  :host([rounded]) select {\n    border-radius: var(--kemet-select-border-radius-rounded);\n  }\n\n  :host([filled]) select {\n    border: var(--kemet-select-border-filled);\n    color: var(--kemet-select-color-filled);\n    background-color: var(--kemet-select-background-color-filled);\n  }\n\n  :host([filled]) kemet-icon {\n    color: var(--kemet-select-color-filled);\n  }\n\n  :host([status='error'][filled]) select {\n    background-color: var(--kemet-select-background-color-error);\n  }\n\n  :host([status='success'][filled]) select {\n    background-color: var(--kemet-select-background-color-success);\n  }\n\n  :host([status='warning'][filled]) select {\n    background-color: var(--kemet-select-background-color-warning);\n  }\n\n  kemet-icon {\n    position: absolute;\n    right: var(--kemet-select-icon-right);\n    top: 50%;\n    transform: translateY(-50%);\n  }\n`;\n"]}

package/dist/components/kemet-select/types.d.ts

@@ -1,20 +0,0 @@
-export interface KemetSelectInterface extends HTMLElement {
-    slug?: string;
-    name?: string;
-    value?: string;
-    options?: any[];
-    status?: string;
-    required?: boolean;
-    disabled?: boolean;
-    multiple?: boolean;
-    icon?: string;
-    iconSize?: number;
-    filled?: boolean;
-    rounded?: boolean;
-}
-export interface KemetOptionInterface extends HTMLElement {
-    label?: string;
-    value?: string;
-    disabled?: boolean;
-    selected?: boolean;
-}

package/dist/components/kemet-select/types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=types.js.map

package/dist/components/kemet-select/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-select/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface KemetSelectInterface extends HTMLElement {\n  slug?: string,\n  name?: string,\n  value?: string,\n  options?: any[],\n  status?: string,\n  required?: boolean,\n  disabled?: boolean,\n  multiple?: boolean,\n  icon?: string,\n  iconSize?: number,\n  filled?: boolean,\n  rounded?: boolean,\n}\n\nexport interface KemetOptionInterface extends HTMLElement {\n  label?: string,\n  value?: string,\n  disabled?: boolean,\n  selected?: boolean,\n}\n"]}

package/dist/components/kemet-sortable/docs/stories.d.ts

@@ -1,10 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import '../kemet-sortable';
-import '../kemet-sortable-item';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-declare const meta: Meta;
-export default meta;
-declare type Story = StoryObj;
-export declare const Standard: Story;

package/dist/components/kemet-sortable/docs/stories.js

@@ -1,29 +0,0 @@
-import { html } from 'lit';
-import '../kemet-sortable';
-import '../kemet-sortable-item';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-const meta = {
-    title: 'Components / Sortable',
-    component: 'kemet-sortable',
-    args: {
-        numItems: 3,
-    },
-};
-export default meta;
-const Template = (args) => {
-    const items = [];
-    for (let i = 0; i < args.numItems; i += 1) {
-        items.push(html `<kemet-sortable-item>Item ${i + 1}</kemet-sortable-item>`);
-    }
-    return html `
-    <kemet-sortable>
-      ${items}
-    </kemet-sortable>
-  `;
-};
-export const Standard = {
-    render: args => Template(args),
-};
-//# sourceMappingURL=stories.js.map

package/dist/components/kemet-sortable/docs/stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-sortable/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,wBAAwB,CAAC;AAEhC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE;QACJ,QAAQ,EAAE,CAAC;KACZ;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,KAAK,GAAG,EAAE,CAAC;IAEjB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE;QACzC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAA,6BAA6B,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;KAC5E;IAED,OAAO,IAAI,CAAA;;QAEL,KAAK;;GAEV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CAC/B,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-sortable';\nimport '../kemet-sortable-item';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Sortable',\n  component: 'kemet-sortable',\n  args: {\n    numItems: 3,\n  },\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n  const items = [];\n\n  for (let i = 0; i < args.numItems; i += 1) {\n    items.push(html`<kemet-sortable-item>Item ${i + 1}</kemet-sortable-item>`);\n  }\n\n  return html`\n    <kemet-sortable>\n      ${items}\n    </kemet-sortable>\n  `;\n};\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n"]}

package/dist/components/kemet-sortable/kemet-sortable-item.d.ts

@@ -1,21 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * @since 1.3.0
- * @status stable
- *
- * @tagname kemet-sortable-item
- * @summary An item in a sortable list.
- *
- * @prop {boolean} ghost - Automatically set to true when an item is dragged to a new spot.
- */
-export default class KemetSortableItem extends LitElement {
-    static styles: import("lit").CSSResult[];
-    ghost: boolean;
-    firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-sortable-item': KemetSortableItem;
-    }
-}

package/dist/components/kemet-sortable/kemet-sortable-item.js

@@ -1,30 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { stylesSortableItem } from './styles';
-/**
- * @since 1.3.0
- * @status stable
- *
- * @tagname kemet-sortable-item
- * @summary An item in a sortable list.
- *
- * @prop {boolean} ghost - Automatically set to true when an item is dragged to a new spot.
- */
-let KemetSortableItem = class KemetSortableItem extends LitElement {
-    firstUpdated() {
-        this.draggable = true;
-    }
-    render() {
-        return html `<slot></slot>`;
-    }
-};
-KemetSortableItem.styles = [stylesSortableItem];
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetSortableItem.prototype, "ghost", void 0);
-KemetSortableItem = __decorate([
-    customElement('kemet-sortable-item')
-], KemetSortableItem);
-export default KemetSortableItem;
-//# sourceMappingURL=kemet-sortable-item.js.map

package/dist/components/kemet-sortable/kemet-sortable-item.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-sortable-item.js","sourceRoot":"","sources":["../../../src/components/kemet-sortable/kemet-sortable-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE9C;;;;;;;;GAQG;AAGH,IAAqB,iBAAiB,GAAtC,MAAqB,iBAAkB,SAAQ,UAAU;IAMvD,YAAY;QACV,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AAZQ,wBAAM,GAAG,CAAC,kBAAkB,CAAC,CAAC;AAGrC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC5B;AAJI,iBAAiB;IADrC,aAAa,CAAC,qBAAqB,CAAC;GAChB,iBAAiB,CAarC;eAboB,iBAAiB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesSortableItem } from './styles';\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-sortable-item\n * @summary An item in a sortable list.\n *\n * @prop {boolean} ghost - Automatically set to true when an item is dragged to a new spot.\n */\n\n@customElement('kemet-sortable-item')\nexport default class KemetSortableItem extends LitElement {\n  static styles = [stylesSortableItem];\n\n  @property({ type: Boolean, reflect: true })\n  ghost: boolean;\n\n  firstUpdated() {\n    this.draggable = true;\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-sortable-item': KemetSortableItem\n  }\n}\n"]}

package/dist/components/kemet-sortable/kemet-sortable.d.ts

@@ -1,25 +0,0 @@
-import { LitElement } from 'lit';
-import type KemetSortableItem from './kemet-sortable-item';
-/**
- * @since 1.3.0
- * @status stable
- *
- * @tagname kemet-sortable
- * @summary A list that can be sorted by drag and drop.
- *
- * @event kemet-sortable-drag-end - Fires when an item has been moved to a new spot.
- */
-export default class KemetSortable extends LitElement {
-    static styles: import("lit").CSSResult[];
-    sortableItem: KemetSortableItem;
-    firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    handleDragStart(event: DragEvent): void;
-    handleDragOver(event: DragEvent): void;
-    handleDragEnd(event: DragEvent): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-sortable': KemetSortable;
-    }
-}

package/dist/components/kemet-sortable/kemet-sortable.js

@@ -1,77 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-import { polyfill } from 'mobile-drag-drop';
-import { emitEvent } from '../../utilities/misc/events';
-import { stylesSortable } from './styles';
-const getMouseOffset = (event) => {
-    const target = event.target;
-    const targetRect = target.getBoundingClientRect();
-    return {
-        x: event.pageX - targetRect.left,
-        y: event.pageY - targetRect.top,
-    };
-};
-const getElementVerticalCenter = (element) => {
-    const rect = element.getBoundingClientRect();
-    return (rect.bottom - rect.top) / 2;
-};
-/**
- * @since 1.3.0
- * @status stable
- *
- * @tagname kemet-sortable
- * @summary A list that can be sorted by drag and drop.
- *
- * @event kemet-sortable-drag-end - Fires when an item has been moved to a new spot.
- */
-let KemetSortable = class KemetSortable extends LitElement {
-    firstUpdated() {
-        polyfill();
-        this.addEventListener('dragstart', event => this.handleDragStart(event), false);
-        this.addEventListener('dragenter', (event) => { event.preventDefault(); });
-    }
-    render() {
-        return html `<slot></slot>`;
-    }
-    handleDragStart(event) {
-        this.sortableItem = event.target;
-        this.addEventListener('dragover', dragOverEvent => this.handleDragOver(dragOverEvent), false);
-        this.addEventListener('dragend', dragEndEvent => this.handleDragEnd(dragEndEvent), false);
-        setTimeout(() => {
-            this.sortableItem.ghost = true;
-        }, 0);
-    }
-    handleDragOver(event) {
-        event.preventDefault();
-        const target = event.target;
-        if (target && target.tagName === 'KEMET-SORTABLE-ITEM') {
-            const offset = getMouseOffset(event);
-            const middleY = getElementVerticalCenter(target);
-            if (offset.y > middleY) {
-                this.insertBefore(this.sortableItem, target.nextSibling);
-            }
-            else {
-                this.insertBefore(this.sortableItem, target);
-            }
-        }
-    }
-    handleDragEnd(event) {
-        event.preventDefault();
-        this.sortableItem.ghost = false;
-        emitEvent(this, 'kemet-sortable-drag-end', {
-            event,
-            current: this.sortableItem,
-            all: this.querySelectorAll('kemet-sortable-item'),
-        });
-    }
-};
-KemetSortable.styles = [stylesSortable];
-__decorate([
-    state()
-], KemetSortable.prototype, "sortableItem", void 0);
-KemetSortable = __decorate([
-    customElement('kemet-sortable')
-], KemetSortable);
-export default KemetSortable;
-//# sourceMappingURL=kemet-sortable.js.map

package/dist/components/kemet-sortable/kemet-sortable.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-sortable.js","sourceRoot":"","sources":["../../../src/components/kemet-sortable/kemet-sortable.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\nimport { polyfill } from 'mobile-drag-drop';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesSortable } from './styles';\nimport type KemetSortableItem from './kemet-sortable-item';\n\nconst getMouseOffset = (event: DragEvent) => {\n  const target = event.target as HTMLElement;\n  const targetRect = target.getBoundingClientRect();\n  return {\n    x: event.pageX - targetRect.left,\n    y: event.pageY - targetRect.top,\n  };\n};\n\nconst getElementVerticalCenter = (element: HTMLElement) => {\n  const rect = element.getBoundingClientRect();\n  return (rect.bottom - rect.top) / 2;\n};\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-sortable\n * @summary A list that can be sorted by drag and drop.\n *\n * @event kemet-sortable-drag-end - Fires when an item has been moved to a new spot.\n */\n\n@customElement('kemet-sortable')\nexport default class KemetSortable extends LitElement {\n  static styles = [stylesSortable];\n\n  @state()\n  sortableItem: KemetSortableItem;\n\n  firstUpdated() {\n    polyfill();\n\n    this.addEventListener('dragstart', event => this.handleDragStart(event), false);\n    this.addEventListener('dragenter', (event) => { event.preventDefault(); });\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  handleDragStart(event: DragEvent) {\n    this.sortableItem = event.target as KemetSortableItem;\n\n    this.addEventListener('dragover', dragOverEvent => this.handleDragOver(dragOverEvent), false);\n    this.addEventListener('dragend', dragEndEvent => this.handleDragEnd(dragEndEvent), false);\n\n    setTimeout(() => {\n      this.sortableItem.ghost = true;\n    }, 0);\n  }\n\n  handleDragOver(event: DragEvent) {\n    event.preventDefault();\n\n    const target = event.target as KemetSortableItem;\n\n    if (target && target.tagName === 'KEMET-SORTABLE-ITEM') {\n      const offset = getMouseOffset(event);\n      const middleY = getElementVerticalCenter(target);\n\n      if (offset.y > middleY) {\n        this.insertBefore(this.sortableItem, target.nextSibling);\n      } else {\n        this.insertBefore(this.sortableItem, target);\n      }\n    }\n  }\n\n  handleDragEnd(event: DragEvent) {\n    event.preventDefault();\n    this.sortableItem.ghost = false;\n\n    emitEvent(this, 'kemet-sortable-drag-end', {\n      event,\n      current: this.sortableItem,\n      all: this.querySelectorAll('kemet-sortable-item'),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-sortable': KemetSortable\n  }\n}\n"]}

package/dist/components/kemet-sortable/styles.d.ts

@@ -1,2 +0,0 @@
-export declare const stylesSortable: import("lit").CSSResult;
-export declare const stylesSortableItem: import("lit").CSSResult;

package/dist/components/kemet-sortable/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-sortable/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;CAMhC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;CAYpC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesSortable = css`\n  :host {\n    display: flex;\n    gap: 1rem;\n    flex-direction: column;\n  }\n`;\n\nexport const stylesSortableItem = css`\n  :host {\n    cursor: grab;\n    display: block;\n    padding: 1rem;\n    border: 1px solid rgb(var(--kemet-color-foreground));\n  }\n\n  :host([ghost]) {\n    opacity: 0.5;\n    border-style: dashed;\n  }\n`;\n"]}

package/dist/components/kemet-sortable/types.d.ts

@@ -1,3 +0,0 @@
-export interface KemetSortableItemInterface extends HTMLElement {
-    ghost?: boolean;
-}

package/dist/components/kemet-sortable/types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=types.js.map

package/dist/components/kemet-sortable/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-sortable/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface KemetSortableItemInterface extends HTMLElement {\n  ghost?: boolean,\n}\n"]}

package/dist/components/kemet-svgs/docs/stories.d.ts

@@ -1,10 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import '../kemet-svg';
-import '../kemet-svgs';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-declare const meta: Meta;
-export default meta;
-declare type Story = StoryObj;
-export declare const Standard: Story;