kemet-ui 2.0.0 → 2.0.2

package/dist/src/components/kemet-modal/kemet-modal-close.js

@@ -1,40 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { emitEvent } from '../../utilities/misc/events';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-modal-close
- * @summary A close button for a modal.
- *
- * @event kemet-modal-close-pressed - Fires when the close button is pressed
- *
- */
-let KemetModalClose = class KemetModalClose extends LitElement {
-    render() {
-        return html `
-      <slot @keyup=${() => this.close()} @click=${() => this.close()}></slot>
-    `;
-    }
-    close() {
-        emitEvent(this, 'kemet-modal-close-pressed', this);
-    }
-};
-KemetModalClose.styles = [
-    css `
-      :host {
-        position: absolute;
-        top: 0.5rem;
-        right: 0.5rem;
-        border-radius: 50%;
-        cursor: pointer;
-      }
-    `,
-];
-KemetModalClose = __decorate([
-    customElement('kemet-modal-close')
-], KemetModalClose);
-export default KemetModalClose;
-//# sourceMappingURL=kemet-modal-close.js.map

package/dist/src/components/kemet-modal/kemet-modal-close.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-modal-close.js","sourceRoot":"","sources":["../../../../src/components/kemet-modal/kemet-modal-close.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD;;;;;;;;;GASG;AAGH,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,UAAU;IAarD,MAAM;QACJ,OAAO,IAAI,CAAA;qBACM,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;KAC/D,CAAC;IACJ,CAAC;IAED,KAAK;QACH,SAAS,CAAC,IAAI,EAAE,2BAA2B,EAAE,IAAI,CAAC,CAAC;IACrD,CAAC;CACF,CAAA;AArBQ,sBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;KAQF;CACF,CAAC;AAXiB,eAAe;IADnC,aAAa,CAAC,mBAAmB,CAAC;GACd,eAAe,CAsBnC;eAtBoB,eAAe","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-modal-close\n * @summary A close button for a modal.\n *\n * @event kemet-modal-close-pressed - Fires when the close button is pressed\n *\n */\n\n@customElement('kemet-modal-close')\nexport default class KemetModalClose extends LitElement {\n  static styles = [\n    css`\n      :host {\n        position: absolute;\n        top: 0.5rem;\n        right: 0.5rem;\n        border-radius: 50%;\n        cursor: pointer;\n      }\n    `,\n  ];\n\n  render() {\n    return html`\n      <slot @keyup=${() => this.close()} @click=${() => this.close()}></slot>\n    `;\n  }\n\n  close() {\n    emitEvent(this, 'kemet-modal-close-pressed', this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-modal-close': KemetModalClose\n  }\n}\n"]}

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

@@ -1,49 +0,0 @@
-import { LitElement } from 'lit';
-import { TypeEffect } from './types';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-modal
- * @summary A dialog that has many built in effects and flexible styles.
- *
- * @prop {boolean} opened
- * @prop {string} effect
- * @prop {boolean} closeOnClick
- * @prop {string} breakpoint
- * @prop {boolean} mobile
- *
- * @csspart content - The main contents of the modal.
- * @csspart overlay - The surrounding scrim of the modal.
- *
- * @cssproperty --kemet-modal-content-min-width - The minimum width of the content. Default: 0.
- * @cssproperty --kemet-modal-content-max-width - The maximum width of the content. Default: none.
- * @cssproperty --kemet-modal-content-background-color - The background color of the content. Default: --kemet-color-white.
- * @cssproperty --kemet-modal-content-mobile-min-width - The min with of the mobile content. Default: 100%.
- * @cssproperty --kemet-modal-content-mobile-min-height - The min height of the mobile content. Default: 80vh.
- *
- * @event kemet-modal-opened - Fires when the modal opens
- * @event kemet-modal-closed - Fires when the modal closes
- *
- */
-export default class KemetModal extends LitElement {
-    static styles: import("lit").CSSResult[];
-    opened: boolean;
-    effect: TypeEffect;
-    closeOnClick: boolean;
-    breakpoint: string;
-    mobile: boolean;
-    focusableSelector: string;
-    focusableElements: any;
-    constructor();
-    firstUpdated(): void;
-    updated(prevProps: any): void;
-    render(): import("lit-html").TemplateResult<1>;
-    isMobile(): void;
-    handleFocusableDown(event: any): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-modal': KemetModal;
-    }
-}

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

@@ -1,131 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { stylesBase, stylesEffects } from './styles';
-import { emitEvent } from '../../utilities/misc/events';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-modal
- * @summary A dialog that has many built in effects and flexible styles.
- *
- * @prop {boolean} opened
- * @prop {string} effect
- * @prop {boolean} closeOnClick
- * @prop {string} breakpoint
- * @prop {boolean} mobile
- *
- * @csspart content - The main contents of the modal.
- * @csspart overlay - The surrounding scrim of the modal.
- *
- * @cssproperty --kemet-modal-content-min-width - The minimum width of the content. Default: 0.
- * @cssproperty --kemet-modal-content-max-width - The maximum width of the content. Default: none.
- * @cssproperty --kemet-modal-content-background-color - The background color of the content. Default: --kemet-color-white.
- * @cssproperty --kemet-modal-content-mobile-min-width - The min with of the mobile content. Default: 100%.
- * @cssproperty --kemet-modal-content-mobile-min-height - The min height of the mobile content. Default: 80vh.
- *
- * @event kemet-modal-opened - Fires when the modal opens
- * @event kemet-modal-closed - Fires when the modal closes
- *
- */
-let KemetModal = class KemetModal extends LitElement {
-    constructor() {
-        super();
-        this.opened = false;
-        this.closeOnClick = false;
-        this.breakpoint = '600px';
-        // bindings
-        this.addEventListener('kemet-modal-close-pressed', () => { this.opened = false; });
-    }
-    firstUpdated() {
-        // standard properties
-        /** @internal */
-        this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';
-        this.focusableElements = this.querySelectorAll(this.focusableSelector);
-        // events
-        this.addEventListener('keyup', (event) => {
-            if (event.key === 'Escape') {
-                this.opened = false;
-            }
-        });
-        this.addEventListener('click', (event) => {
-            const targetElement = event.target;
-            if (this.opened && this.closeOnClick && targetElement.tagName.toLowerCase() === 'kemet-modal') {
-                this.opened = false;
-            }
-        });
-        window.addEventListener('resize', () => {
-            this.isMobile();
-        });
-        this.focusableElements.forEach((element) => {
-            element.addEventListener('keydown', event => this.handleFocusableDown(event));
-        });
-    }
-    updated(prevProps) {
-        if (!prevProps.get('opened') && this.opened === true) {
-            setTimeout(() => {
-                var _a;
-                (_a = this.focusableElements[0]) === null || _a === void 0 ? void 0 : _a.focus();
-            }, 100);
-            emitEvent(this, 'kemet-modal-opened', this);
-        }
-        if (prevProps.get('opened') && this.opened === false) {
-            emitEvent(this, 'kemet-modal-closed', this);
-        }
-        this.isMobile();
-    }
-    render() {
-        return html `
-      <div class="content" part="content">
-        <slot></slot>
-      </div>
-      <div class="overlay" part="overlay"></div>
-    `;
-    }
-    isMobile() {
-        const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);
-        this.mobile = mediaQuery.matches;
-    }
-    handleFocusableDown(event) {
-        const firstFocusable = this.focusableElements[0];
-        const lastFocusable = this.focusableElements[this.focusableElements.length - 1];
-        if (event.key === 'Tab') {
-            if (event.shiftKey && document.activeElement === firstFocusable) {
-                event.preventDefault();
-                lastFocusable.focus();
-            }
-            else if (!event.shiftKey && document.activeElement === lastFocusable) {
-                event.preventDefault();
-                firstFocusable.focus();
-            }
-        }
-    }
-};
-KemetModal.styles = [stylesBase, stylesEffects];
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetModal.prototype, "opened", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], KemetModal.prototype, "effect", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'close-on-click' })
-], KemetModal.prototype, "closeOnClick", void 0);
-__decorate([
-    property({ type: String })
-], KemetModal.prototype, "breakpoint", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetModal.prototype, "mobile", void 0);
-__decorate([
-    state()
-], KemetModal.prototype, "focusableSelector", void 0);
-__decorate([
-    state()
-], KemetModal.prototype, "focusableElements", void 0);
-KemetModal = __decorate([
-    customElement('kemet-modal')
-], KemetModal);
-export default KemetModal;
-//# sourceMappingURL=kemet-modal.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-modal.js","sourceRoot":"","sources":["../../../../src/components/kemet-modal/kemet-modal.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesBase, stylesEffects } from './styles';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { TypeEffect } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-modal\n * @summary A dialog that has many built in effects and flexible styles.\n *\n * @prop {boolean} opened\n * @prop {string} effect\n * @prop {boolean} closeOnClick\n * @prop {string} breakpoint\n * @prop {boolean} mobile\n *\n * @csspart content - The main contents of the modal.\n * @csspart overlay - The surrounding scrim of the modal.\n *\n * @cssproperty --kemet-modal-content-min-width - The minimum width of the content. Default: 0.\n * @cssproperty --kemet-modal-content-max-width - The maximum width of the content. Default: none.\n * @cssproperty --kemet-modal-content-background-color - The background color of the content. Default: --kemet-color-white.\n * @cssproperty --kemet-modal-content-mobile-min-width - The min with of the mobile content. Default: 100%.\n * @cssproperty --kemet-modal-content-mobile-min-height - The min height of the mobile content. Default: 80vh.\n *\n * @event kemet-modal-opened - Fires when the modal opens\n * @event kemet-modal-closed - Fires when the modal closes\n *\n */\n\n@customElement('kemet-modal')\nexport default class KemetModal extends LitElement {\n  static styles = [stylesBase, stylesEffects];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean = false;\n\n  @property({ type: String, reflect: true })\n  effect: TypeEffect;\n\n  @property({ type: Boolean, attribute: 'close-on-click' })\n  closeOnClick: boolean = false;\n\n  @property({ type: String })\n  breakpoint: string = '600px';\n\n  @property({ type: Boolean, reflect: true })\n  mobile: boolean;\n\n  @state()\n  focusableSelector: string;\n\n  @state()\n  focusableElements: any;\n\n  constructor() {\n    super();\n\n    // bindings\n    this.addEventListener('kemet-modal-close-pressed', () => { this.opened = false; });\n  }\n\n  firstUpdated() {\n    // standard properties\n    /** @internal */\n    this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';\n    this.focusableElements = this.querySelectorAll(this.focusableSelector);\n\n    // events\n    this.addEventListener('keyup', (event) => {\n      if (event.key === 'Escape') {\n        this.opened = false;\n      }\n    });\n\n    this.addEventListener('click', (event) => {\n      const targetElement = event.target as HTMLElement;\n      if (this.opened && this.closeOnClick && targetElement.tagName.toLowerCase() === 'kemet-modal') {\n        this.opened = false;\n      }\n    });\n\n    window.addEventListener('resize', () => {\n      this.isMobile();\n    });\n\n    this.focusableElements.forEach((element) => {\n      element.addEventListener('keydown', event => this.handleFocusableDown(event));\n    });\n  }\n\n  updated(prevProps) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      setTimeout(() => {\n        this.focusableElements[0]?.focus();\n      }, 100);\n\n      emitEvent(this, 'kemet-modal-opened', this);\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      emitEvent(this, 'kemet-modal-closed', this);\n    }\n\n    this.isMobile();\n  }\n\n  render() {\n    return html`\n      <div class=\"content\" part=\"content\">\n        <slot></slot>\n      </div>\n      <div class=\"overlay\" part=\"overlay\"></div>\n    `;\n  }\n\n  isMobile() {\n    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);\n    this.mobile = mediaQuery.matches;\n  }\n\n  handleFocusableDown(event) {\n    const firstFocusable = this.focusableElements[0];\n    const lastFocusable = this.focusableElements[this.focusableElements.length - 1];\n\n    if (event.key === 'Tab') {\n      if (event.shiftKey && document.activeElement === firstFocusable) {\n        event.preventDefault();\n        lastFocusable.focus();\n      } else if (!event.shiftKey && document.activeElement === lastFocusable) {\n        event.preventDefault();\n        firstFocusable.focus();\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-modal': KemetModal\n  }\n}\n"]}

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

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

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

@@ -1,267 +0,0 @@
-import { css } from 'lit';
-export const stylesBase = css `
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    position: fixed;
-    display: flex;
-    top: 0;
-    left: 0;
-    z-index: 99;
-    width: 100%;
-    height: 100vh;
-    visibility: hidden;
-    backface-visibility: hidden;
-  }
-
-  :host([opened]) {
-    visibility: visible;
-  }
-
-  .content {
-    position: relative;
-    z-index: 3;
-    margin: auto;
-    min-width: var(--kemet-modal-content-min-width, 0);
-    max-width: var(--kemet-modal-content-max-width, none);
-    background-color: var(--kemet-modal-content-background-color, var(--kemet-color-white-to-primary));
-  }
-
-  :host([mobile]) .content {
-    min-width: var(--kemet-modal-content-mobile-min-width, 100%);
-    min-height: var(--kemet-modal-content-mobile-min-height, 80vh);
-    padding: var(--kemet-modal-content-mobile-padding, 1rem);
-  }
-
-  .overlay {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    visibility: hidden;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    opacity: 0;
-    background: var(--kemet-modal-overlay-background-color, rgba(0,0,0,0.2));
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
-  }
-
-  :host([opened]) .overlay {
-    opacity: 1;
-    visibility: visible;
-  }
-`;
-export const stylesEffects = css `
-  /* fadein-scaleup */
-  :host([effect="fadein-scaleup"]) .content {
-    transform: scale(0.7);
-    opacity: 0;
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
-  }
-
-  :host([effect="fadein-scaleup"][opened]) .content {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  /* slide-right */
-  :host([effect="slide-right"]) .content {
-    transform: translateX(20%);
-    opacity: 0;
-    transition: all var(--kemet-modal-transition-speed, 0.3s) cubic-bezier(0.25, 0.5, 0.5, 0.9);
-  }
-
-  :host([effect="slide-right"][opened]) .content {
-    transform: translateX(0);
-    opacity: 1;
-  }
-
-  /* slide-bottom */
-  :host([effect="slide-bottom"]) .content {
-    transform: translateY(20%);
-    opacity: 0;
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
-  }
-
-  :host([effect="slide-bottom"][opened]) .content {
-    transform: translateY(0);
-    opacity: 1;
-  }
-
-  /* newspaper */
-  :host([effect="newspaper"]) .content {
-    transform: scale(0) rotate(720deg);
-    opacity: 0;
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
-  }
-
-  :host([effect="newspaper"][opened]) .content {
-    transform: scale(1) rotate(0deg);
-    opacity: 1;
-  }
-
-  /* fall */
-  :host([effect="fall"]) {
-    perspective: 1300px;
-  }
-
-  :host([effect="fall"]) .content {
-    transform-style: preserve-3d;
-    transform: translateZ(600px) rotateX(20deg);
-    opacity: 0;
-  }
-
-  :host([effect="fall"][opened]) .content {
-    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-in;
-    transform: translateZ(0px) rotateX(0deg);
-    opacity: 1;
-  }
-
-  /* side-fall */
-  :host([effect="side-fall"]) {
-    perspective: 1300px;
-  }
-
-  :host([effect="side-fall"]) .content {
-    transform-style: preserve-3d;
-    transform: translate(30%) translateZ(600px) rotate(10deg);
-    opacity: 0;
-  }
-
-  :host([effect="side-fall"][opened]) .content {
-    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-in;
-    transform: translate(0%) translateZ(0) rotate(0deg);
-    opacity: 1;
-  }
-
-  /* flip-horizontal */
-  :host([effect="flip-horizontal"]) {
-    perspective: 1300px;
-  }
-
-  :host([effect="flip-horizontal"]) .content {
-    transform-style: preserve-3d;
-    transform: rotateY(-70deg);
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
-    opacity: 0;
-  }
-
-  :host([effect="flip-horizontal"][opened]) .content {
-    transform: rotateY(0deg);
-    opacity: 1;
-  }
-
-  /* flip-vertical */
-  :host([effect="flip-vertical"]) {
-    perspective: 1300px;
-  }
-
-  :host([effect="flip-vertical"]) .content {
-    transform-style: preserve-3d;
-    transform: rotateX(-70deg);
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
-    opacity: 0;
-  }
-
-  :host([effect="flip-vertical"][opened]) .content {
-    transform: rotateX(0deg);
-    opacity: 1;
-  }
-
-  /* sign-3d */
-  :host([effect="sign-3d"]) {
-    perspective: 1300px;
-  }
-
-  :host([effect="sign-3d"]) .content {
-    transform-style: preserve-3d;
-    transform: rotateX(-60deg);
-    transform-origin: 50% 0;
-    opacity: 0;
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
-  }
-
-  :host([effect="sign-3d"][opened]) .content {
-    transform: rotateX(0deg);
-    opacity: 1;
-  }
-
-  /* super-scaled */
-  :host([effect="super-scaled"]) .content {
-    transform: scale(2);
-    opacity: 0;
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
-  }
-
-  :host([effect="super-scaled"][opened]) .content {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  /* slit */
-  :host([effect="slit"]) {
-    perspective: 1300px;
-  }
-
-  :host([effect="slit"]) .content {
-    transform-style: preserve-3d;
-    transform: translateZ(-3000px) rotateY(90deg);
-    opacity: 0;
-  }
-
-  :host([effect="slit"][opened]) .content {
-    animation: slit .7s forwards ease-out;
-  }
-
-  @keyframes slit {
-    50% {
-      transform: translateZ(-250px) rotateY(89deg);
-      opacity: 1;
-      animation-timing-function: ease-in;}
-    100% {
-      transform: translateZ(0) rotateY(0deg);
-      opacity: 1;
-    }
-  }
-
-  /* rotate-bottom */
-  :host([effect="rotate-bottom"]) {
-    perspective: 1300px;
-  }
-
-  :host([effect="rotate-bottom"]) .content {
-    transform-style: preserve-3d;
-    transform: translateY(100%) rotateX(90deg);
-    transform-origin: 0 100%;
-    opacity: 0;
-    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-out;
-  }
-
-  :host([effect="rotate-bottom"][opened]) .content {
-    transform: translateY(0%) rotateX(0deg);
-    opacity: 1;
-  }
-
-  /* rotate-left */
-  :host([effect="rotate-left"]) {
-    perspective: 1300px;
-  }
-
-  :host([effect="rotate-left"]) .content {
-    transform-style: preserve-3d;
-    transform: translateZ(100px) translateX(-30%) rotateY(90deg);
-    transform-origin: 0 100%;
-    opacity: 0;
-    transition: all var(--kemet-modal-transition-speed, 0.3s);
-  }
-
-  :host([effect="rotate-left"][opened]) .content {
-    transform: translateZ(0px) translateX(0%) rotateY(0deg);
-    opacity: 1;
-  }
-`;
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/kemet-modal/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuD5B,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgN/B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    position: fixed;\n    display: flex;\n    top: 0;\n    left: 0;\n    z-index: 99;\n    width: 100%;\n    height: 100vh;\n    visibility: hidden;\n    backface-visibility: hidden;\n  }\n\n  :host([opened]) {\n    visibility: visible;\n  }\n\n  .content {\n    position: relative;\n    z-index: 3;\n    margin: auto;\n    min-width: var(--kemet-modal-content-min-width, 0);\n    max-width: var(--kemet-modal-content-max-width, none);\n    background-color: var(--kemet-modal-content-background-color, var(--kemet-color-white-to-primary));\n  }\n\n  :host([mobile]) .content {\n    min-width: var(--kemet-modal-content-mobile-min-width, 100%);\n    min-height: var(--kemet-modal-content-mobile-min-height, 80vh);\n    padding: var(--kemet-modal-content-mobile-padding, 1rem);\n  }\n\n  .overlay {\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    visibility: hidden;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    opacity: 0;\n    background: var(--kemet-modal-overlay-background-color, rgba(0,0,0,0.2));\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([opened]) .overlay {\n    opacity: 1;\n    visibility: visible;\n  }\n`;\n\nexport const stylesEffects = css`\n  /* fadein-scaleup */\n  :host([effect=\"fadein-scaleup\"]) .content {\n    transform: scale(0.7);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"fadein-scaleup\"][opened]) .content {\n    transform: scale(1);\n    opacity: 1;\n  }\n\n  /* slide-right */\n  :host([effect=\"slide-right\"]) .content {\n    transform: translateX(20%);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s) cubic-bezier(0.25, 0.5, 0.5, 0.9);\n  }\n\n  :host([effect=\"slide-right\"][opened]) .content {\n    transform: translateX(0);\n    opacity: 1;\n  }\n\n  /* slide-bottom */\n  :host([effect=\"slide-bottom\"]) .content {\n    transform: translateY(20%);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"slide-bottom\"][opened]) .content {\n    transform: translateY(0);\n    opacity: 1;\n  }\n\n  /* newspaper */\n  :host([effect=\"newspaper\"]) .content {\n    transform: scale(0) rotate(720deg);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"newspaper\"][opened]) .content {\n    transform: scale(1) rotate(0deg);\n    opacity: 1;\n  }\n\n  /* fall */\n  :host([effect=\"fall\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"fall\"]) .content {\n    transform-style: preserve-3d;\n    transform: translateZ(600px) rotateX(20deg);\n    opacity: 0;\n  }\n\n  :host([effect=\"fall\"][opened]) .content {\n    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-in;\n    transform: translateZ(0px) rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* side-fall */\n  :host([effect=\"side-fall\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"side-fall\"]) .content {\n    transform-style: preserve-3d;\n    transform: translate(30%) translateZ(600px) rotate(10deg);\n    opacity: 0;\n  }\n\n  :host([effect=\"side-fall\"][opened]) .content {\n    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-in;\n    transform: translate(0%) translateZ(0) rotate(0deg);\n    opacity: 1;\n  }\n\n  /* flip-horizontal */\n  :host([effect=\"flip-horizontal\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"flip-horizontal\"]) .content {\n    transform-style: preserve-3d;\n    transform: rotateY(-70deg);\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n    opacity: 0;\n  }\n\n  :host([effect=\"flip-horizontal\"][opened]) .content {\n    transform: rotateY(0deg);\n    opacity: 1;\n  }\n\n  /* flip-vertical */\n  :host([effect=\"flip-vertical\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"flip-vertical\"]) .content {\n    transform-style: preserve-3d;\n    transform: rotateX(-70deg);\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n    opacity: 0;\n  }\n\n  :host([effect=\"flip-vertical\"][opened]) .content {\n    transform: rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* sign-3d */\n  :host([effect=\"sign-3d\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"sign-3d\"]) .content {\n    transform-style: preserve-3d;\n    transform: rotateX(-60deg);\n    transform-origin: 50% 0;\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"sign-3d\"][opened]) .content {\n    transform: rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* super-scaled */\n  :host([effect=\"super-scaled\"]) .content {\n    transform: scale(2);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"super-scaled\"][opened]) .content {\n    transform: scale(1);\n    opacity: 1;\n  }\n\n  /* slit */\n  :host([effect=\"slit\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"slit\"]) .content {\n    transform-style: preserve-3d;\n    transform: translateZ(-3000px) rotateY(90deg);\n    opacity: 0;\n  }\n\n  :host([effect=\"slit\"][opened]) .content {\n    animation: slit .7s forwards ease-out;\n  }\n\n  @keyframes slit {\n    50% {\n      transform: translateZ(-250px) rotateY(89deg);\n      opacity: 1;\n      animation-timing-function: ease-in;}\n    100% {\n      transform: translateZ(0) rotateY(0deg);\n      opacity: 1;\n    }\n  }\n\n  /* rotate-bottom */\n  :host([effect=\"rotate-bottom\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"rotate-bottom\"]) .content {\n    transform-style: preserve-3d;\n    transform: translateY(100%) rotateX(90deg);\n    transform-origin: 0 100%;\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-out;\n  }\n\n  :host([effect=\"rotate-bottom\"][opened]) .content {\n    transform: translateY(0%) rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* rotate-left */\n  :host([effect=\"rotate-left\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"rotate-left\"]) .content {\n    transform-style: preserve-3d;\n    transform: translateZ(100px) translateX(-30%) rotateY(90deg);\n    transform-origin: 0 100%;\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"rotate-left\"][opened]) .content {\n    transform: translateZ(0px) translateX(0%) rotateY(0deg);\n    opacity: 1;\n  }\n`;\n"]}

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

@@ -1,8 +0,0 @@
-export declare type TypeEffect = 'fadein-scaleup' | 'slide-right' | 'slide-bottom' | 'newspaper' | 'fall' | 'side-fall' | 'flip-horizontal' | 'flip-vertical' | 'sign-3d' | 'super-scaled' | 'slit' | 'rotate-bottom' | 'rotate-left';
-export interface KemetModalInterface extends HTMLElement {
-    opened?: boolean;
-    effect?: TypeEffect;
-    closeOnClick?: boolean;
-    breakpoint?: string;
-    mobile?: boolean;
-}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kemet-modal/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeEffect = 'fadein-scaleup' | 'slide-right' | 'slide-bottom' | 'newspaper' | 'fall' | 'side-fall' | 'flip-horizontal' | 'flip-vertical' | 'sign-3d' | 'super-scaled' | 'slit' | 'rotate-bottom' | 'rotate-left';\n\nexport interface KemetModalInterface extends HTMLElement {\n  opened?: boolean,\n  effect?: TypeEffect,\n  closeOnClick?: boolean,\n  breakpoint?: string,\n  mobile?: boolean,\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../../src/components/kemet-password/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,mBAAmB,CAAC;AAE3B,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,gBAAgB;CAC5B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;;+CAGE,OAAO,WAAW,KAAK;;CAErE,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrC,IAAI,EAAE;QACJ,KAAK,EAAE;YACL,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,4BAA4B,EAAE;YAChE,EAAE,OAAO,EAAE,wBAAwB,EAAE,OAAO,EAAE,yBAAyB,EAAE;YACzE,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,2BAA2B,EAAE;SACjE;QACD,OAAO,EAAE,iDAAiD;KAC3D;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-password';\n\nimport '../../kemet-input/kemet-input';\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Password',\n  component: 'kemet-password',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({ rules, message }) => html`\n  <kemet-field slug=\"new-password\" label=\"New Password\">\n    <kemet-input slot=\"input\" type=\"password\" name=\"new-password\"></kemet-input>\n    <kemet-password slot=\"component\" message=${message} .rules=${rules}></kemet-password>\n  </kemet-field>\n`;\n\nexport const Standard: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    rules: [\n      { pattern: '(?=.{8,}$)', message: 'At least 8 characters long' },\n      { pattern: '(?=.*[a-z])(?=.*[A-Z])', message: 'Uppercase and lowercase' },\n      { pattern: '(?=.*[0-9])', message: 'At least one number (0-9)' },\n    ],\n    message: 'Please make sure you meet all the requirements.',\n  },\n  argTypes: {\n    rules: {\n      control: { type: 'array' },\n    },\n    message: {\n      control: { type: 'text' },\n    },\n  }\n};\n"]}

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

@@ -1,77 +0,0 @@
-import { LitElement } from 'lit';
-import { KemetFieldInterface } from '../kemet-field/types';
-import { KemetInputInterface } from '../kemet-input/types';
-import { KemetTextareaInterface } from '../kemet-textarea/types';
-import { TypeStatus } from './types';
-/**
- * @since 1.2.0
- * @status stable
- *
- * @tagname kemet-password
- * @summary Gauges the strength of a password entered by the user.
- *
- * @prop {array} rules - An array of objects containing the rules the password must meet.
- * @prop {boolean} show - Controls the display of the component.
- * @prop {string} value - The value of the input component.
- * @prop {string} message - A message that is above the rules.
- * @prop {string} strength - The strength of the password. Weak | Better | Strong.
- * @prop {string} icon
- * @prop {number} iconSize
- *
- * @event kemet-password-status - Fires when there's a change in status.
- *
- * @csspart status - The status message.
- * @csspart indicator - The strength indicator bars.
- * @csspart message - A message to display to the user.
- * @csspart rules - A description of rules to follow.
- *
- */
-export default class KemetPassword extends LitElement {
-    static styles: import("lit").CSSResult[];
-    rules: any[];
-    show: boolean;
-    value: string;
-    message: string;
-    strength: string;
-    icon: string;
-    iconSize: number;
-    status: TypeStatus;
-    field: KemetFieldInterface;
-    input: KemetInputInterface | KemetTextareaInterface;
-    firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    /**
-     * Makes the list of rules
-     * @private
-     * @returns {templateResults} the criteria rules
-     */
-    makeRules(): import("lit-html").TemplateResult<1>[];
-    /**
-     * Makes the check icon if the criteria has been met
-     * @param {boolean} meetsCriteria
-     * @private
-     * @returns {templateResults} an icon component
-     */
-    makeCheckIcon(meetsCriteria: any): import("lit-html").TemplateResult<1>;
-    /**
-     * Handles the kemet-input-input event
-     * @param {*} event
-     * @private
-     */
-    handleInput(event: any): void;
-    /**
-     * Determines the strength of the password
-     * @private
-     */
-    setStrength(): void;
-    /**
-     * Determines whether to show or hide the component
-     * @private
-     */
-    visibility(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-password': KemetPassword;
-    }
-}