kemet-ui 1.4.0 → 2.0.1

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

@@ -0,0 +1,102 @@
+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/components/kemet-radio/styles.js.map

@@ -0,0 +1 @@
+{"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/components/kemet-radio/types.d.ts

@@ -0,0 +1,20 @@
+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/components/kemet-radio/types.js

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

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

@@ -0,0 +1 @@
+{"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/components/kemet-rotator/docs/stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import '../kemet-rotator';
+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-rotator/docs/stories.js

@@ -0,0 +1,46 @@
+import { html } from 'lit';
+import '../kemet-rotator';
+import '../../kemet-tabs/kemet-tabs';
+import '../../kemet-tabs/kemet-tab';
+import '../../kemet-tabs/kemet-tab-panel';
+const meta = {
+    title: 'Components / Rotator',
+    component: 'kemet-rotator',
+};
+export default meta;
+const Template = ({ message1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', message2 = 'Praesent ornare porta nulla.', message3 = 'Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa.', effect = 'fade', rotationSpeed = 3, }) => html `
+  <kemet-rotator
+    effect="${effect}"
+    .rotation-speed=${rotationSpeed}
+    .messages="${[message1, message2, message3]}">
+  </kemet-rotator>
+`;
+export const Standard = {
+    render: args => Template(args),
+    args: {
+        message1: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+        message2: 'Praesent ornare porta nulla.',
+        message3: 'Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa.',
+        effect: 'fade',
+        rotationSpeed: 3,
+    },
+    argTypes: {
+        message1: {
+            control: { type: 'text' },
+        },
+        message2: {
+            control: { type: 'text' },
+        },
+        message3: {
+            control: { type: 'text' },
+        },
+        effect: {
+            control: { type: 'select' },
+            options: ['fade', 'flip'],
+        },
+        rotationSpeed: {
+            control: { type: 'number' },
+        },
+    }
+};
+//# sourceMappingURL=stories.js.map

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

@@ -0,0 +1 @@
+{"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/components/kemet-rotator/kemet-rotator.d.ts

@@ -0,0 +1,40 @@
+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/components/kemet-rotator/kemet-rotator.js

@@ -1,6 +1,8 @@
-import { html, css, LitElement } from 'lit';
+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
@@ -18,194 +20,103 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
  * @cssproperty --kemet-rotator-transition-speed - How long, in css time units, the transition effect lasts. Default: 500ms.
  *
  */
-
-export default class KemetRotator extends LitElement {
-  static get styles() {
-    return 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);
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      activeSlide: {
-        type: Number,
-      },
-      width: {
-        type: String,
-      },
-      height: {
-        type: String,
-      },
-      messages: {
-        type: Array,
-      },
-      effect: {
-        type: String,
-        reflect: true,
-      },
-      rotationSpeed: {
-        type: Number,
-        attribute: 'rotation-speed',
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    // managed properties
-    this.activeSlide = 0;
-    this.messages = [];
-    this.effect = 'fade';
-    this.rotationSpeed = 3;
-    this.width = 'auto';
-    this.height = 'auto';
-  }
-
-  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();
+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);
         }
-      }, this.rotationSpeed * 1000);
     }
-  }
-
-  render() {
-    const setWidth = this.effect === 'flip' ? `width:${this.width};` : '';
-    const setHeight = this.effect === 'flip' ? `height:${this.height};` : '';
-
-    return html`
+    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`
+    }
+    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;
+        });
+        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`;
         }
-      });
-
-      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;
+    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;
+        }
     }
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-rotator') || customElements.define('kemet-rotator', KemetRotator);
+};
+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/components/kemet-rotator/kemet-rotator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-rotator.js","sourceRoot":"","sources":["../../../src/components/kemet-rotator/kemet-rotator.ts"],"names":[],"mappings":"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","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/components/kemet-rotator/styles.d.ts

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

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

@@ -0,0 +1,72 @@
+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/components/kemet-rotator/styles.js.map

@@ -0,0 +1 @@
+{"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/components/kemet-rotator/types.d.ts

@@ -0,0 +1,9 @@
+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/components/kemet-rotator/types.js

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

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

@@ -0,0 +1 @@
+{"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"]}

package/dist/components/kemet-scroll-link/docs/stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import '../kemet-scroll-link';
+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;