kemet-ui 2.0.0 → 2.0.2

package/dist/src/components/kemet-radio/kemet-radios.d.ts

@@ -1,49 +0,0 @@
-import { LitElement } from 'lit';
-import { FormSubmitController } from '../../utilities/controllers/forms';
-import { TypeAxis, TypeStatus } from './types';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-radios
- * @summary A group of radio buttons.
- *
- * @prop {string} legend - The legend text for the fieldset
- * @prop {string} axis - The direction of the button's layout
- * @prop {string} value - The value of the selected radio button
- * @prop {string} name - The name of the radio button set
- * @prop {string} status - The status of the radio button set
- * @prop {string} message - Validation message for the user
- * @prop {boolean} required - Determines whether or not the radio button set is required
- *
- * @csspart fieldset - The fieldset element.
- * @csspart legend - The legend element.
- *
- * @event kemet-radios-change - Fires when the state of the checkbox changes
- *
- */
-export default class KemetRadios extends LitElement {
-    formSubmitController: FormSubmitController;
-    static styles: import("lit").CSSResult[];
-    legend: string;
-    axis: TypeAxis;
-    value: string;
-    name: string;
-    status: TypeStatus;
-    message: string;
-    required: string;
-    radios: any;
-    constructor();
-    firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    handleClick(event: any): void;
-    handleKeyDown(event: any): void;
-    handleSlotChange(): void;
-    makeMessage(): import("lit-html").TemplateResult<1>;
-    checkValidity(): boolean;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-radios': KemetRadios;
-    }
-}

package/dist/src/components/kemet-radio/kemet-radios.js

@@ -1,143 +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 { stylesRadios } from './styles';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-radios
- * @summary A group of radio buttons.
- *
- * @prop {string} legend - The legend text for the fieldset
- * @prop {string} axis - The direction of the button's layout
- * @prop {string} value - The value of the selected radio button
- * @prop {string} name - The name of the radio button set
- * @prop {string} status - The status of the radio button set
- * @prop {string} message - Validation message for the user
- * @prop {boolean} required - Determines whether or not the radio button set is required
- *
- * @csspart fieldset - The fieldset element.
- * @csspart legend - The legend element.
- *
- * @event kemet-radios-change - Fires when the state of the checkbox changes
- *
- */
-let KemetRadios = class KemetRadios extends LitElement {
-    constructor() {
-        super();
-        this.legend = '';
-        this.axis = 'horizontal';
-        this.name = 'radios';
-        this.status = 'standard';
-        /** @internal */
-        this.formSubmitController = new FormSubmitController(this);
-    }
-    firstUpdated() {
-        this.radios = this.querySelectorAll('kemet-radio');
-        this.setAttribute('role', 'radiogroup');
-    }
-    render() {
-        return html `
-      <fieldset part="fieldset">
-        ${this.legend !== '' ? html `<legend part="legend">${this.legend}</legend>` : null}
-        <slot @click=${event => this.handleClick(event)} @keydown=${event => this.handleKeyDown(event)} @slotchange=${() => this.handleSlotChange()}></slot>
-      </fieldset>
-      ${this.makeMessage()}
-    `;
-    }
-    handleClick(event) {
-        const { target } = event;
-        this.radios.forEach((radio) => {
-            radio.checked = false;
-            radio.tabIndex = radio === target ? 0 : -1;
-            radio.setAttribute('aria-checked', 'false');
-        });
-        if (!target.disabled) {
-            target.checked = true;
-            target.setAttribute('aria-checked', 'true');
-            this.value = target.value;
-            this.status = 'standard';
-            emitEvent(this, 'kemet-radios-change', target);
-        }
-    }
-    handleKeyDown(event) {
-        var _a;
-        const radios = Array.from(this.radios);
-        const arrowKeys = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft'];
-        const forwardKeys = ['ArrowRight', 'ArrowDown'];
-        const shift = forwardKeys.includes(event.key) ? 1 : -1;
-        const checkedIndex = (_a = radios.findIndex((radio) => radio.checked)) !== null && _a !== void 0 ? _a : radios[0];
-        let index = checkedIndex + shift;
-        if (arrowKeys.includes(event.key)) {
-            if (index < 0) {
-                index = radios.length - 1;
-            }
-            if (index > radios.length - 1) {
-                index = 0;
-            }
-            this.radios.forEach((radio) => {
-                radio.checked = false;
-                radio.tabIndex = -1;
-            });
-            this.radios[index].focus();
-            this.radios[index].checked = true;
-            this.radios[index].tabIndex = 0;
-        }
-    }
-    handleSlotChange() {
-        const radios = Array.from(this.radios);
-        const checkedRadio = radios.find((radio) => radio.checked);
-        this.radios.forEach((radio) => {
-            radio.tabIndex = -1;
-            radio.input.tabIndex = -1;
-        });
-        if (checkedRadio) {
-            checkedRadio.tabIndex = 0;
-        }
-    }
-    makeMessage() {
-        if (this.status === 'error' || this.status === 'warning') {
-            return html `<span part="message">${this.message}</span>`;
-        }
-        return null;
-    }
-    checkValidity() {
-        if (this.required) {
-            return !!this.value;
-        }
-        return true;
-    }
-};
-KemetRadios.styles = [stylesRadios];
-__decorate([
-    property({ type: String })
-], KemetRadios.prototype, "legend", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], KemetRadios.prototype, "axis", void 0);
-__decorate([
-    property({ type: String })
-], KemetRadios.prototype, "value", void 0);
-__decorate([
-    property({ type: String })
-], KemetRadios.prototype, "name", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], KemetRadios.prototype, "status", void 0);
-__decorate([
-    property({ type: String })
-], KemetRadios.prototype, "message", void 0);
-__decorate([
-    property({ type: String })
-], KemetRadios.prototype, "required", void 0);
-__decorate([
-    state()
-], KemetRadios.prototype, "radios", void 0);
-KemetRadios = __decorate([
-    customElement('kemet-radios')
-], KemetRadios);
-export default KemetRadios;
-//# sourceMappingURL=kemet-radios.js.map

package/dist/src/components/kemet-radio/kemet-radios.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-radios.js","sourceRoot":"","sources":["../../../../src/components/kemet-radio/kemet-radios.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesRadios } from './styles';\nimport { KemetRadioInterface, KemetRadiosInterface, TypeAxis, TypeStatus } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-radios\n * @summary A group of radio buttons.\n *\n * @prop {string} legend - The legend text for the fieldset\n * @prop {string} axis - The direction of the button's layout\n * @prop {string} value - The value of the selected radio button\n * @prop {string} name - The name of the radio button set\n * @prop {string} status - The status of the radio button set\n * @prop {string} message - Validation message for the user\n * @prop {boolean} required - Determines whether or not the radio button set is required\n *\n * @csspart fieldset - The fieldset element.\n * @csspart legend - The legend element.\n *\n * @event kemet-radios-change - Fires when the state of the checkbox changes\n *\n */\n\n@customElement('kemet-radios')\nexport default class KemetRadios extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesRadios];\n\n  @property({ type: String })\n  legend: string = '';\n\n  @property({ type: String, reflect: true })\n  axis: TypeAxis = 'horizontal';\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: String })\n  name: string = 'radios';\n\n  @property({ type: String, reflect: true })\n  status: TypeStatus = 'standard';\n\n  @property({ type: String })\n  message: string;\n\n  @property({ type: String })\n  required: string;\n\n  @state()\n  radios: any;\n\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  firstUpdated() {\n    this.radios = this.querySelectorAll('kemet-radio');\n    this.setAttribute('role', 'radiogroup');\n  }\n\n  render() {\n    return html`\n      <fieldset part=\"fieldset\">\n        ${this.legend !== '' ? html`<legend part=\"legend\">${this.legend}</legend>` : null}\n        <slot @click=${event => this.handleClick(event)} @keydown=${event => this.handleKeyDown(event)} @slotchange=${() => this.handleSlotChange()}></slot>\n      </fieldset>\n      ${this.makeMessage()}\n    `;\n  }\n\n  handleClick(event) {\n    const { target } = event;\n\n    this.radios.forEach((radio) => {\n      radio.checked = false;\n      radio.tabIndex = radio === target ? 0 : -1;\n      radio.setAttribute('aria-checked', 'false');\n    });\n\n    if (!target.disabled) {\n      target.checked = true;\n      target.setAttribute('aria-checked', 'true');\n      this.value = target.value;\n      this.status = 'standard';\n\n      emitEvent(this, 'kemet-radios-change', target);\n    }\n  }\n\n  handleKeyDown(event) {\n    const radios = Array.from(this.radios);\n    const arrowKeys = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft'];\n    const forwardKeys = ['ArrowRight', 'ArrowDown'];\n    const shift: number = forwardKeys.includes(event.key) ? 1 : -1;\n    const checkedIndex: any = radios.findIndex((radio: KemetRadioInterface) => radio.checked) ?? radios[0];\n\n    let index: number = checkedIndex + shift;\n\n    if (arrowKeys.includes(event.key)) {\n      if (index < 0) {\n        index = radios.length - 1;\n      }\n\n      if (index > radios.length - 1) {\n        index = 0;\n      }\n\n      this.radios.forEach((radio) => {\n        radio.checked = false;\n        radio.tabIndex = -1;\n      });\n\n      this.radios[index].focus();\n      this.radios[index].checked = true;\n      this.radios[index].tabIndex = 0;\n    }\n  }\n\n  handleSlotChange() {\n    const radios = Array.from(this.radios);\n    const checkedRadio = radios.find((radio: KemetRadioInterface) => radio.checked) as KemetRadioInterface;\n\n    this.radios.forEach((radio) => {\n      radio.tabIndex = -1;\n      radio.input.tabIndex = -1;\n    });\n\n    if (checkedRadio) {\n      checkedRadio.tabIndex = 0;\n    }\n  }\n\n  makeMessage() {\n    if (this.status === 'error' || this.status === 'warning') {\n      return html`<span part=\"message\">${this.message}</span>`;\n    }\n\n    return null;\n  }\n\n  checkValidity() {\n    if (this.required) {\n      return !!this.value;\n    }\n\n    return true;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-radios': KemetRadios\n  }\n}\n\n"]}

package/dist/src/components/kemet-radio/styles.d.ts

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

package/dist/src/components/kemet-radio/styles.js

@@ -1,102 +0,0 @@
-import { css } from 'lit';
-export const stylesRadio = css `
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    display: inline-block;
-  }
-
-  :host([disabled]) {
-    opacity: 0.5;
-  }
-
-  label {
-    cursor: pointer;
-    display: inline-flex;
-    gap: 0.5rem;
-    align-items: center;
-    margin-right: 0.5rem;
-  }
-
-  input {
-    cursor: pointer;
-    margin: 0;
-    padding: 0;
-    width: var(--kemet-radio-size, 18px);
-    height: var(--kemet-radio-size, 18px);
-    position: absolute;
-    opacity: 0;
-  }
-
-  button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--kemet-radio-size, 18px);
-    height: var(--kemet-radio-size, 18px);
-    padding: 0;
-    border-radius: 50%;
-    background: none;
-    border: var(--kemet-radio-border, 1px solid var(--kemet-color-background));
-  }
-
-  [part='dot'] {
-    display: inline-flex;
-    border-radius: 50%;
-    width: var(--kemet-radio-size, 18px);
-    height: var(--kemet-radio-size, 18px);
-    background: var(--kemet-radio-dot-color, var(--kemet-color-primary));
-    border: var(--kemet-radio-border, 1px solid var(--kemet-color-primary));
-    box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width, 3px) var(--kemet-radio-dot-border-color, var(--kemet-color-white));
-  }
-
-  :host([filled]) [part='dot'] {
-    background: var(--kemet-radio-dot-color-filled, var(--kemet-color-white));
-    box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width, 4px) var(--kemet-radio-dot-border-color, var(--kemet-color-primary));
-  }
-`;
-export const stylesRadios = css `
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    display: block;
-  }
-
-  fieldset {
-    border: 0;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    gap: 0.5rem;
-  }
-
-  legend {
-    margin-bottom: 1rem;
-  }
-
-  :host([axis='vertical']) fieldset {
-    flex-direction: column;
-  }
-
-  [part='message'] {
-    display: block;
-    margin-top: 0.5rem;
-  }
-
-  :host([status='error']) [part='message'] {
-    color: var(--kemet-color-error);
-  }
-
-  :host([status='warning']) [part='message'] {
-    color: var(--kemet-color-error);
-  }
-`;
-//# sourceMappingURL=styles.js.map

package/dist/src/components/kemet-radio/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/kemet-radio/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2D7B,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuC9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesRadio = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    display: inline-block;\n  }\n\n  :host([disabled]) {\n    opacity: 0.5;\n  }\n\n  label {\n    cursor: pointer;\n    display: inline-flex;\n    gap: 0.5rem;\n    align-items: center;\n    margin-right: 0.5rem;\n  }\n\n  input {\n    cursor: pointer;\n    margin: 0;\n    padding: 0;\n    width: var(--kemet-radio-size, 18px);\n    height: var(--kemet-radio-size, 18px);\n    position: absolute;\n    opacity: 0;\n  }\n\n  button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--kemet-radio-size, 18px);\n    height: var(--kemet-radio-size, 18px);\n    padding: 0;\n    border-radius: 50%;\n    background: none;\n    border: var(--kemet-radio-border, 1px solid var(--kemet-color-background));\n  }\n\n  [part='dot'] {\n    display: inline-flex;\n    border-radius: 50%;\n    width: var(--kemet-radio-size, 18px);\n    height: var(--kemet-radio-size, 18px);\n    background: var(--kemet-radio-dot-color, var(--kemet-color-primary));\n    border: var(--kemet-radio-border, 1px solid var(--kemet-color-primary));\n    box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width, 3px) var(--kemet-radio-dot-border-color, var(--kemet-color-white));\n  }\n\n  :host([filled]) [part='dot'] {\n    background: var(--kemet-radio-dot-color-filled, var(--kemet-color-white));\n    box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width, 4px) var(--kemet-radio-dot-border-color, var(--kemet-color-primary));\n  }\n`;\n\nexport const stylesRadios = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    display: block;\n  }\n\n  fieldset {\n    border: 0;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    gap: 0.5rem;\n  }\n\n  legend {\n    margin-bottom: 1rem;\n  }\n\n  :host([axis='vertical']) fieldset {\n    flex-direction: column;\n  }\n\n  [part='message'] {\n    display: block;\n    margin-top: 0.5rem;\n  }\n\n  :host([status='error']) [part='message'] {\n    color: var(--kemet-color-error);\n  }\n\n  :host([status='warning']) [part='message'] {\n    color: var(--kemet-color-error);\n  }\n`;\n"]}

package/dist/src/components/kemet-radio/types.d.ts

@@ -1,20 +0,0 @@
-export declare type TypeStatus = 'standard' | 'error' | 'success' | 'warning';
-export declare type TypeAxis = 'horizontal' | 'vertical';
-export interface KemetRadioInterface extends HTMLElement {
-    label?: string;
-    checked?: boolean;
-    name?: string;
-    value?: string;
-    disabled?: boolean;
-    focused?: boolean;
-    filled?: boolean;
-}
-export interface KemetRadiosInterface extends HTMLElement {
-    legend?: string;
-    axis?: string;
-    value?: string;
-    name?: string;
-    status?: TypeStatus;
-    message?: string;
-    required?: boolean;
-}

package/dist/src/components/kemet-radio/types.js

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

package/dist/src/components/kemet-radio/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kemet-radio/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeStatus = 'standard' | 'error' | 'success' | 'warning';\nexport type TypeAxis = 'horizontal' | 'vertical';\n\nexport interface KemetRadioInterface extends HTMLElement {\n  label?: string,\n  checked?: boolean,\n  name?: string,\n  value?: string,\n  disabled?: boolean,\n  focused?: boolean,\n  filled?: boolean,\n}\n\nexport interface KemetRadiosInterface extends HTMLElement {\n  legend?: string,\n  axis?: string,\n  value?: string,\n  name?: string,\n  status?: TypeStatus,\n  message?: string,\n  required?: boolean,\n}\n"]}

package/dist/src/components/kemet-rotator/docs/stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../../src/components/kemet-rotator/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,kBAAkB,CAAC;AAE1B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,eAAe;CAC3B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,QAAQ,GAAG,0DAA0D,EACrE,QAAQ,GAAG,8BAA8B,EACzC,QAAQ,GAAG,yEAAyE,EACpF,MAAM,GAAG,MAAM,EACf,aAAa,GAAG,CAAC,GAClB,EAAE,EAAE,CAAC,IAAI,CAAA;;cAEI,MAAM;sBACE,aAAa;iBAClB,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC;;CAE9C,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,QAAQ,EAAE,0DAA0D;QACpE,QAAQ,EAAE,8BAA8B;QACxC,QAAQ,EAAE,yEAAyE;QACnF,MAAM,EAAE,MAAM;QACd,aAAa,EAAE,CAAC;KACjB;IACD,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;SAC1B;QACD,aAAa,EAAE;YACb,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-rotator';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Rotator',\n  component: 'kemet-rotator',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  message1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',\n  message2 = 'Praesent ornare porta nulla.',\n  message3 = 'Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa.',\n  effect = 'fade',\n  rotationSpeed = 3,\n}) => html`\n  <kemet-rotator\n    effect=\"${effect}\"\n    .rotation-speed=${rotationSpeed}\n    .messages=\"${[message1, message2, message3]}\">\n  </kemet-rotator>\n`;\n\nexport const Standard: Story = {\n  render: args => Template(args),\n  args: {\n    message1: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',\n    message2: 'Praesent ornare porta nulla.',\n    message3: 'Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa.',\n    effect: 'fade',\n    rotationSpeed: 3,\n  },\n  argTypes: {\n    message1: {\n      control: { type: 'text' },\n    },\n    message2: {\n      control: { type: 'text' },\n    },\n    message3: {\n      control: { type: 'text' },\n    },\n    effect: {\n      control: { type: 'select' },\n      options: ['fade', 'flip'],\n    },\n    rotationSpeed: {\n      control: { type: 'number' },\n    },\n  }\n};\n"]}

package/dist/src/components/kemet-rotator/kemet-rotator.d.ts

@@ -1,40 +0,0 @@
-import { LitElement } from 'lit';
-import { TypeEffect } from './types';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-rotator
- * @summary A component that rotates through an array of text.
- *
- * @prop {number} activeSlide - The index number for the current slide.
- * @prop {string} width - The width of the rotator block.
- * @prop {string} height - The height of the rotator block.
- * @prop {array} messages - Text in the rotator. Supports HTML.
- * @prop {string} effect - The transition effect type.
- * @prop {number} rotationSpeed - How fast, in seconds, each slide lasts. Stop the rotator with 0.
- *
- * @cssproperty --kemet-rotator-transition-speed - How long, in css time units, the transition effect lasts. Default: 500ms.
- *
- */
-export default class KemetRotator extends LitElement {
-    static styles: import("lit").CSSResult[];
-    activeSlide: number;
-    width: string;
-    height: string;
-    messages: any[];
-    effect: TypeEffect;
-    rotationSpeed: number;
-    prevSlide: number | null;
-    firstUpdated(): void;
-    updated(changed: any): void;
-    render(): import("lit-html").TemplateResult<1>;
-    makeMessages(): import("lit-html").TemplateResult<1>[];
-    setDimensions(): void;
-    nextSlide(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-rotator': KemetRotator;
-    }
-}

package/dist/src/components/kemet-rotator/kemet-rotator.js

@@ -1,122 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { stylesRotator } from './styles';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-rotator
- * @summary A component that rotates through an array of text.
- *
- * @prop {number} activeSlide - The index number for the current slide.
- * @prop {string} width - The width of the rotator block.
- * @prop {string} height - The height of the rotator block.
- * @prop {array} messages - Text in the rotator. Supports HTML.
- * @prop {string} effect - The transition effect type.
- * @prop {number} rotationSpeed - How fast, in seconds, each slide lasts. Stop the rotator with 0.
- *
- * @cssproperty --kemet-rotator-transition-speed - How long, in css time units, the transition effect lasts. Default: 500ms.
- *
- */
-let KemetRotator = class KemetRotator extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.activeSlide = 0;
-        this.width = 'auto';
-        this.height = 'auto';
-        this.messages = [];
-        this.effect = 'fade';
-        this.rotationSpeed = 3;
-    }
-    firstUpdated() {
-        // standard properties
-        this.prevSlide = null;
-        window.addEventListener('resize', this.setDimensions.bind(this));
-    }
-    updated(changed) {
-        const widthHasChanged = !!changed.get('width');
-        const heightHasChanged = !!changed.get('height');
-        this.setDimensions();
-        // only trigger slide updates when width and height has not changed
-        if (!widthHasChanged && !heightHasChanged) {
-            setTimeout(() => {
-                if (this.rotationSpeed > 0) {
-                    this.nextSlide();
-                }
-            }, this.rotationSpeed * 1000);
-        }
-    }
-    render() {
-        const setWidth = this.effect === 'flip' ? `width:${this.width};` : '';
-        const setHeight = this.effect === 'flip' ? `height:${this.height};` : '';
-        return html `
-      <span class="rotator" style="${setWidth} ${setHeight}">
-        ${this.makeMessages()}
-      </span>
-    `;
-    }
-    makeMessages() {
-        const messages = this.messages.map((message, index) => {
-            const setActiveClass = this.activeSlide === index ? 'rotator__slide--active' : '';
-            const setPrevClass = this.prevSlide === index ? 'rotator__slide--prev' : '';
-            return html `
-        <span class="rotator__slide ${setActiveClass} ${setPrevClass}">
-          ${unsafeHTML(message)}
-        </span>
-      `;
-        });
-        return messages;
-    }
-    setDimensions() {
-        if (this.effect === 'flip') {
-            this.width = `${this.offsetWidth}px`;
-            const slides = this.shadowRoot.querySelectorAll('.rotator__slide');
-            let tallest = 0;
-            slides.forEach((slide) => {
-                if (slide.offsetHeight > tallest) {
-                    tallest = slide.offsetHeight;
-                }
-            });
-            this.height = `${tallest}px`;
-        }
-    }
-    nextSlide() {
-        if (this.activeSlide < this.messages.length - 1) {
-            this.activeSlide += 1;
-            this.prevSlide = this.activeSlide - 1;
-        }
-        else {
-            this.activeSlide = 0;
-            this.prevSlide = this.messages.length - 1;
-        }
-    }
-};
-KemetRotator.styles = [stylesRotator];
-__decorate([
-    property({ type: Number })
-], KemetRotator.prototype, "activeSlide", void 0);
-__decorate([
-    property({ type: String })
-], KemetRotator.prototype, "width", void 0);
-__decorate([
-    property({ type: String })
-], KemetRotator.prototype, "height", void 0);
-__decorate([
-    property({ type: Array })
-], KemetRotator.prototype, "messages", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], KemetRotator.prototype, "effect", void 0);
-__decorate([
-    property({ type: Number, attribute: 'rotation-speed' })
-], KemetRotator.prototype, "rotationSpeed", void 0);
-__decorate([
-    state()
-], KemetRotator.prototype, "prevSlide", void 0);
-KemetRotator = __decorate([
-    customElement('kemet-rotator')
-], KemetRotator);
-export default KemetRotator;
-//# sourceMappingURL=kemet-rotator.js.map

package/dist/src/components/kemet-rotator/kemet-rotator.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-rotator.js","sourceRoot":"","sources":["../../../../src/components/kemet-rotator/kemet-rotator.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAGzC;;;;;;;;;;;;;;;;GAgBG;AAGH,IAAqB,YAAY,GAAjC,MAAqB,YAAa,SAAQ,UAAU;IAApD;;QAIE,gBAAW,GAAW,CAAC,CAAC;QAGxB,UAAK,GAAW,MAAM,CAAC;QAGvB,WAAM,GAAW,MAAM,CAAC;QAGxB,aAAQ,GAAU,EAAE,CAAC;QAGrB,WAAM,GAAe,MAAM,CAAC;QAG5B,kBAAa,GAAW,CAAC,CAAC;IAiF5B,CAAC;IA3EC,YAAY;QACV,sBAAsB;QACtB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QAEtB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACnE,CAAC;IAED,OAAO,CAAC,OAAO;QACb,MAAM,eAAe,GAAG,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAC/C,MAAM,gBAAgB,GAAG,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAEjD,IAAI,CAAC,aAAa,EAAE,CAAC;QAErB,mEAAmE;QACnE,IAAI,CAAC,eAAe,IAAI,CAAC,gBAAgB,EAAE;YACzC,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,IAAI,CAAC,aAAa,GAAG,CAAC,EAAE;oBAC1B,IAAI,CAAC,SAAS,EAAE,CAAC;iBAClB;YACH,CAAC,EAAE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;SAC/B;IACH,CAAC;IAED,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;QACtE,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;QAEzE,OAAO,IAAI,CAAA;qCACsB,QAAQ,IAAI,SAAS;UAChD,IAAI,CAAC,YAAY,EAAE;;KAExB,CAAC;IACJ,CAAC;IAED,YAAY;QACV,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;YACpD,MAAM,cAAc,GAAG,IAAI,CAAC,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,CAAC;YAClF,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC;YAE5E,OAAO,IAAI,CAAA;sCACqB,cAAc,IAAI,YAAY;YACxD,UAAU,CAAC,OAAO,CAAC;;OAExB,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,EAAE;YAC1B,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC;YAErC,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;YACnE,IAAI,OAAO,GAAG,CAAC,CAAC;YAEhB,MAAM,CAAC,OAAO,CAAC,CAAC,KAAkB,EAAE,EAAE;gBACpC,IAAI,KAAK,CAAC,YAAY,GAAG,OAAO,EAAE;oBAChC,OAAO,GAAG,KAAK,CAAC,YAAY,CAAC;iBAC9B;YACH,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,MAAM,GAAG,GAAG,OAAO,IAAI,CAAC;SAC9B;IACH,CAAC;IAED,SAAS;QACP,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;YAC/C,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC;YACtB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;SACvC;aAAM;YACL,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;YACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;SAC3C;IACH,CAAC;CACF,CAAA;AAnGQ,mBAAM,GAAG,CAAC,aAAa,CAAC,CAAC;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACH;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACJ;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACH;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;8CACL;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACd;AAG5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;mDAC9B;AAG1B;IADC,KAAK,EAAE;+CACiB;AAtBN,YAAY;IADhC,aAAa,CAAC,eAAe,CAAC;GACV,YAAY,CAoGhC;eApGoB,YAAY","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { stylesRotator } from './styles';\nimport { TypeEffect } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-rotator\n * @summary A component that rotates through an array of text.\n *\n * @prop {number} activeSlide - The index number for the current slide.\n * @prop {string} width - The width of the rotator block.\n * @prop {string} height - The height of the rotator block.\n * @prop {array} messages - Text in the rotator. Supports HTML.\n * @prop {string} effect - The transition effect type.\n * @prop {number} rotationSpeed - How fast, in seconds, each slide lasts. Stop the rotator with 0.\n *\n * @cssproperty --kemet-rotator-transition-speed - How long, in css time units, the transition effect lasts. Default: 500ms.\n *\n */\n\n@customElement('kemet-rotator')\nexport default class KemetRotator extends LitElement {\n  static styles = [stylesRotator];\n\n  @property({ type: Number })\n  activeSlide: number = 0;\n\n  @property({ type: String })\n  width: string = 'auto';\n\n  @property({ type: String })\n  height: string = 'auto';\n\n  @property({ type: Array })\n  messages: any[] = [];\n\n  @property({ type: String, reflect: true })\n  effect: TypeEffect = 'fade';\n\n  @property({ type: Number, attribute: 'rotation-speed' })\n  rotationSpeed: number = 3;\n\n  @state()\n  prevSlide: number | null;\n\n\n  firstUpdated() {\n    // standard properties\n    this.prevSlide = null;\n\n    window.addEventListener('resize', this.setDimensions.bind(this));\n  }\n\n  updated(changed) {\n    const widthHasChanged = !!changed.get('width');\n    const heightHasChanged = !!changed.get('height');\n\n    this.setDimensions();\n\n    // only trigger slide updates when width and height has not changed\n    if (!widthHasChanged && !heightHasChanged) {\n      setTimeout(() => {\n        if (this.rotationSpeed > 0) {\n          this.nextSlide();\n        }\n      }, this.rotationSpeed * 1000);\n    }\n  }\n\n  render() {\n    const setWidth = this.effect === 'flip' ? `width:${this.width};` : '';\n    const setHeight = this.effect === 'flip' ? `height:${this.height};` : '';\n\n    return html`\n      <span class=\"rotator\" style=\"${setWidth} ${setHeight}\">\n        ${this.makeMessages()}\n      </span>\n    `;\n  }\n\n  makeMessages() {\n    const messages = this.messages.map((message, index) => {\n      const setActiveClass = this.activeSlide === index ? 'rotator__slide--active' : '';\n      const setPrevClass = this.prevSlide === index ? 'rotator__slide--prev' : '';\n\n      return html`\n        <span class=\"rotator__slide ${setActiveClass} ${setPrevClass}\">\n          ${unsafeHTML(message)}\n        </span>\n      `;\n    });\n\n    return messages;\n  }\n\n  setDimensions() {\n    if (this.effect === 'flip') {\n      this.width = `${this.offsetWidth}px`;\n\n      const slides = this.shadowRoot.querySelectorAll('.rotator__slide');\n      let tallest = 0;\n\n      slides.forEach((slide: HTMLElement) => {\n        if (slide.offsetHeight > tallest) {\n          tallest = slide.offsetHeight;\n        }\n      });\n\n      this.height = `${tallest}px`;\n    }\n  }\n\n  nextSlide() {\n    if (this.activeSlide < this.messages.length - 1) {\n      this.activeSlide += 1;\n      this.prevSlide = this.activeSlide - 1;\n    } else {\n      this.activeSlide = 0;\n      this.prevSlide = this.messages.length - 1;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-rotator': KemetRotator\n  }\n}\n"]}

package/dist/src/components/kemet-rotator/styles.d.ts

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

package/dist/src/components/kemet-rotator/styles.js

@@ -1,72 +0,0 @@
-import { css } from 'lit';
-export const stylesRotator = css `
-  :host {
-    display: flex;
-  }
-
-  .rotator__slide {
-    pointer-events: none;
-  }
-
-  .rotator__slide--active {
-    pointer-events: auto;
-  }
-
-  /* fade effect */
-  :host([effect="fade"]) .rotator {
-    display: inline-flex;
-    flex-wrap: nowrap;
-    flex-direction: row;
-  }
-
-  :host([effect="fade"]) .rotator__slide {
-    width: 100%;
-    flex: none;
-    opacity: 0;
-    box-sizing: border-box;
-    transition: all var(--kemet-rotator-transition-speed, 500ms) ease;
-  }
-
-  :host([effect="fade"]) .rotator__slide:not(:first-child) {
-    margin-left: -100%; /* this is the bulk of the overlay trick */
-  }
-
-  :host([effect="fade"]) .rotator__slide--active {
-    opacity: 1;
-  }
-
-  /* flip effect */
-  :host([effect="flip"]) .rotator {
-    display: flex;
-    position: relative;
-
-    perspective: 500;
-  }
-
-  :host([effect="flip"]) .rotator__slide {
-    display: block;
-    width: auto;
-    position: absolute;
-    top: -20px;
-    left: 0;
-
-    opacity: 0;
-
-    transform: rotateX(90deg);
-    transform-origin: 0% 0%;
-    transition: all var(--kemet-rotator-transition-speed, 500ms) ease;
-  }
-
-  :host([effect="flip"]) .rotator__slide--active {
-    top: 0;
-    opacity: 1;
-
-    transform: rotateX(0deg);
-  }
-
-  :host([effect="flip"]) .rotator__slide--prev {
-    top: 40px;;
-    transform: rotateX(-90deg);
-  }
-`;
-//# sourceMappingURL=styles.js.map

package/dist/src/components/kemet-rotator/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/kemet-rotator/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqE/B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesRotator = css`\n  :host {\n    display: flex;\n  }\n\n  .rotator__slide {\n    pointer-events: none;\n  }\n\n  .rotator__slide--active {\n    pointer-events: auto;\n  }\n\n  /* fade effect */\n  :host([effect=\"fade\"]) .rotator {\n    display: inline-flex;\n    flex-wrap: nowrap;\n    flex-direction: row;\n  }\n\n  :host([effect=\"fade\"]) .rotator__slide {\n    width: 100%;\n    flex: none;\n    opacity: 0;\n    box-sizing: border-box;\n    transition: all var(--kemet-rotator-transition-speed, 500ms) ease;\n  }\n\n  :host([effect=\"fade\"]) .rotator__slide:not(:first-child) {\n    margin-left: -100%; /* this is the bulk of the overlay trick */\n  }\n\n  :host([effect=\"fade\"]) .rotator__slide--active {\n    opacity: 1;\n  }\n\n  /* flip effect */\n  :host([effect=\"flip\"]) .rotator {\n    display: flex;\n    position: relative;\n\n    perspective: 500;\n  }\n\n  :host([effect=\"flip\"]) .rotator__slide {\n    display: block;\n    width: auto;\n    position: absolute;\n    top: -20px;\n    left: 0;\n\n    opacity: 0;\n\n    transform: rotateX(90deg);\n    transform-origin: 0% 0%;\n    transition: all var(--kemet-rotator-transition-speed, 500ms) ease;\n  }\n\n  :host([effect=\"flip\"]) .rotator__slide--active {\n    top: 0;\n    opacity: 1;\n\n    transform: rotateX(0deg);\n  }\n\n  :host([effect=\"flip\"]) .rotator__slide--prev {\n    top: 40px;;\n    transform: rotateX(-90deg);\n  }\n`;\n"]}

package/dist/src/components/kemet-rotator/types.d.ts

@@ -1,9 +0,0 @@
-export declare type TypeEffect = 'fade' | 'flip';
-export interface KemetRotator extends HTMLElement {
-    activeSlide?: number;
-    width?: string;
-    height?: string;
-    messages?: any[];
-    effect?: TypeEffect;
-    rotationSpeed?: number;
-}

package/dist/src/components/kemet-rotator/types.js

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

package/dist/src/components/kemet-rotator/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kemet-rotator/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeEffect = 'fade' | 'flip';\n\nexport interface KemetRotator extends HTMLElement {\n  activeSlide?: number,\n  width?: string,\n  height?: string,\n  messages?: any[],\n  effect?: TypeEffect,\n  rotationSpeed?: number,\n}\n"]}