kemet-ui 2.0.0 → 2.0.2

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

@@ -1,184 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { emitEvent } from '../../utilities/misc/events';
-import { stylesBase } from './styles';
-/**
- * @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.
- *
- */
-let KemetPassword = class KemetPassword extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.rules = [
-            { pattern: '(?=.{8,}$)', message: 'At least 8 characters long' },
-            { pattern: '(?=.*[a-z])(?=.*[A-Z])', message: 'Uppercase and lowercase' },
-            { pattern: '(?=.*[0-9])', message: 'At least one number (0-9)' },
-        ];
-        this.message = 'Please make sure you meet all the requirements.';
-        this.icon = 'check2';
-        this.iconSize = 16;
-    }
-    firstUpdated() {
-        // elements
-        this.field = this.closest('kemet-field');
-        this.input = this.field.querySelector('[slot="input"]');
-        // events listeners
-        this.input.addEventListener('kemet-input-input', this.handleInput.bind(this));
-    }
-    render() {
-        return html `
-      <div role="alert" aria-live="assertive">
-        <div class="status status--${this.strength}" part="status">
-          <span>${this.strength}</span>
-          <ul class="indicator" part="indicator">
-            <li></li>
-            <li></li>
-            <li></li>
-          </ul>
-        </div>
-        <p class="message" part="message">${this.message}</p>
-        <ul class="rules" part="rules">
-          ${this.makeRules()}
-        </ul>
-      </div>
-    `;
-    }
-    /**
-     * Makes the list of rules
-     * @private
-     * @returns {templateResults} the criteria rules
-     */
-    makeRules() {
-        if (this.input) {
-            const rules = this.rules.map((rule, index) => {
-                const regExp = new RegExp(rule.pattern);
-                const meetsCriteria = regExp.test(this.input.value);
-                this.rules[index].meetsCriteria = meetsCriteria;
-                return html `<li>${this.makeCheckIcon(meetsCriteria)} ${rule.message}</li>`;
-            });
-            return rules;
-        }
-        return null;
-    }
-    /**
-     * Makes the check icon if the criteria has been met
-     * @param {boolean} meetsCriteria
-     * @private
-     * @returns {templateResults} an icon component
-     */
-    makeCheckIcon(meetsCriteria) {
-        if (meetsCriteria) {
-            return html `<kemet-icon icon=${this.icon} size=${this.iconSize}></kemet-icon>`;
-        }
-        return null;
-    }
-    /**
-     * Handles the kemet-input-input event
-     * @param {*} event
-     * @private
-     */
-    handleInput(event) {
-        this.value = event.detail;
-        this.setStrength();
-        this.visibility();
-    }
-    /**
-     * Determines the strength of the password
-     * @private
-     */
-    setStrength() {
-        // We use a setTimeout here because makeRules adds the meetsCriteria
-        // property to the rules. We need that to be set by render() before
-        // setting the Strength because the percentage calc is based on it
-        setTimeout(() => {
-            const totalRules = this.rules.length;
-            const metRules = this.rules.filter(rule => rule.meetsCriteria).length;
-            const metRulesPercentage = Math.round((metRules / totalRules) * 100) / 100;
-            if (metRulesPercentage <= 0.33) {
-                this.strength = 'weak';
-                this.status = 'error';
-            }
-            if (metRulesPercentage > 0.33 && metRulesPercentage <= 0.67) {
-                this.strength = 'better';
-                this.status = 'error';
-            }
-            if (metRulesPercentage > 0.67) {
-                this.strength = 'strong';
-                this.status = 'success';
-            }
-            emitEvent(this, 'kemet-password-status', {
-                status: this.status,
-                validity: { meetsPasswordCriteria: this.status === 'success' },
-                element: this,
-            });
-        }, 1);
-    }
-    /**
-     * Determines whether to show or hide the component
-     * @private
-     */
-    visibility() {
-        if (this.value.length > 0) {
-            this.show = true;
-        }
-        else {
-            this.show = false;
-        }
-    }
-};
-KemetPassword.styles = [stylesBase];
-__decorate([
-    property({ type: Array })
-], KemetPassword.prototype, "rules", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetPassword.prototype, "show", void 0);
-__decorate([
-    property({ type: String })
-], KemetPassword.prototype, "value", void 0);
-__decorate([
-    property({ type: String })
-], KemetPassword.prototype, "message", void 0);
-__decorate([
-    property({ type: String })
-], KemetPassword.prototype, "strength", void 0);
-__decorate([
-    property({ type: String })
-], KemetPassword.prototype, "icon", void 0);
-__decorate([
-    property({ type: Number })
-], KemetPassword.prototype, "iconSize", void 0);
-__decorate([
-    state()
-], KemetPassword.prototype, "status", void 0);
-__decorate([
-    state()
-], KemetPassword.prototype, "field", void 0);
-__decorate([
-    state()
-], KemetPassword.prototype, "input", void 0);
-KemetPassword = __decorate([
-    customElement('kemet-password')
-], KemetPassword);
-export default KemetPassword;
-//# sourceMappingURL=kemet-password.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-password.js","sourceRoot":"","sources":["../../../../src/components/kemet-password/kemet-password.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { KemetFieldInterface } from '../kemet-field/types';\nimport { KemetInputInterface } from '../kemet-input/types';\nimport { KemetTextareaInterface } from '../kemet-textarea/types';\nimport { stylesBase } from './styles';\nimport { TypeStatus } from './types';\n\n/**\n * @since 1.2.0\n * @status stable\n *\n * @tagname kemet-password\n * @summary Gauges the strength of a password entered by the user.\n *\n * @prop {array} rules - An array of objects containing the rules the password must meet.\n * @prop {boolean} show - Controls the display of the component.\n * @prop {string} value - The value of the input component.\n * @prop {string} message - A message that is above the rules.\n * @prop {string} strength - The strength of the password. Weak | Better | Strong.\n * @prop {string} icon\n * @prop {number} iconSize\n *\n * @event kemet-password-status - Fires when there's a change in status.\n *\n * @csspart status - The status message.\n * @csspart indicator - The strength indicator bars.\n * @csspart message - A message to display to the user.\n * @csspart rules - A description of rules to follow.\n *\n */\n\n@customElement('kemet-password')\nexport default class KemetPassword extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: Array })\n  rules: any[] = [\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\n  @property({ type: Boolean, reflect: true })\n  show: boolean;\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: String })\n  message: string = 'Please make sure you meet all the requirements.';\n\n  @property({ type: String })\n  strength: string;\n\n  @property({ type: String })\n  icon: string = 'check2';\n\n  @property({ type: Number })\n  iconSize: number = 16;\n\n  @state()\n  status: TypeStatus;\n\n  @state()\n  field: KemetFieldInterface;\n\n  @state()\n  input: KemetInputInterface | KemetTextareaInterface;\n\n  firstUpdated() {\n    // elements\n    this.field = this.closest('kemet-field');\n    this.input = this.field.querySelector('[slot=\"input\"]');\n\n    // events listeners\n    this.input.addEventListener('kemet-input-input', this.handleInput.bind(this));\n  }\n\n  render() {\n    return html`\n      <div role=\"alert\" aria-live=\"assertive\">\n        <div class=\"status status--${this.strength}\" part=\"status\">\n          <span>${this.strength}</span>\n          <ul class=\"indicator\" part=\"indicator\">\n            <li></li>\n            <li></li>\n            <li></li>\n          </ul>\n        </div>\n        <p class=\"message\" part=\"message\">${this.message}</p>\n        <ul class=\"rules\" part=\"rules\">\n          ${this.makeRules()}\n        </ul>\n      </div>\n    `;\n  }\n\n  /**\n   * Makes the list of rules\n   * @private\n   * @returns {templateResults} the criteria rules\n   */\n  makeRules() {\n    if (this.input) {\n      const rules = this.rules.map((rule, index) => {\n        const regExp = new RegExp(rule.pattern);\n        const meetsCriteria = regExp.test(this.input.value);\n        this.rules[index].meetsCriteria = meetsCriteria;\n        return html`<li>${this.makeCheckIcon(meetsCriteria)} ${rule.message}</li>`;\n      });\n\n      return rules;\n    }\n\n    return null;\n  }\n\n  /**\n   * Makes the check icon if the criteria has been met\n   * @param {boolean} meetsCriteria\n   * @private\n   * @returns {templateResults} an icon component\n   */\n  makeCheckIcon(meetsCriteria) {\n    if (meetsCriteria) {\n      return html`<kemet-icon icon=${this.icon} size=${this.iconSize}></kemet-icon>`;\n    }\n\n    return null;\n  }\n\n  /**\n   * Handles the kemet-input-input event\n   * @param {*} event\n   * @private\n   */\n  handleInput(event) {\n    this.value = event.detail;\n    this.setStrength();\n    this.visibility();\n  }\n\n  /**\n   * Determines the strength of the password\n   * @private\n   */\n  setStrength() {\n    // We use a setTimeout here because makeRules adds the meetsCriteria\n    // property to the rules. We need that to be set by render() before\n    // setting the Strength because the percentage calc is based on it\n    setTimeout(() => {\n      const totalRules = this.rules.length;\n      const metRules = this.rules.filter(rule => rule.meetsCriteria).length;\n      const metRulesPercentage = Math.round((metRules / totalRules) * 100) / 100;\n\n      if (metRulesPercentage <= 0.33) {\n        this.strength = 'weak';\n        this.status = 'error';\n      }\n\n      if (metRulesPercentage > 0.33 && metRulesPercentage <= 0.67) {\n        this.strength = 'better';\n        this.status = 'error';\n      }\n\n      if (metRulesPercentage > 0.67) {\n        this.strength = 'strong';\n        this.status = 'success';\n      }\n\n      emitEvent(this, 'kemet-password-status', {\n        status: this.status,\n        validity: { meetsPasswordCriteria: this.status === 'success' },\n        element: this,\n      });\n    }, 1);\n  }\n\n  /**\n   * Determines whether to show or hide the component\n   * @private\n   */\n  visibility() {\n    if (this.value.length > 0) {\n      this.show = true;\n    } else {\n      this.show = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-password': KemetPassword\n  }\n}\n"]}

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

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

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

@@ -1,80 +0,0 @@
-import { css } from 'lit';
-export const stylesBase = css `
-  :host {
-    color: inherit;
-    display: none;
-  }
-
-  :host([show]) {
-    display: block;
-  }
-
-  p {
-    margin: 1.6rem 0;
-  }
-
-  .status {
-    display: grid;
-    align-items: center;
-    grid-template-columns: 1fr auto;
-    line-height: 1;
-    margin-top: 0.8rem;
-  }
-
-  .status > span {
-    text-transform: capitalize;
-  }
-
-  .status--weak,
-  .status--better {
-    color: var(--kemet-color-error);
-  }
-
-  .status--strong {
-    color: var(--kemet-color-success);
-  }
-
-  .indicator {
-    display: flex;
-    gap: 0.4rem;
-    margin: 0;
-    list-style: none;
-  }
-
-  .indicator li {
-    width: 1.6rem;
-    height: 0.2rem;
-  }
-
-  .status--weak .indicator li:nth-child(1) {
-    background-color: var(--kemet-color-error);
-  }
-
-  .status--better .indicator li:nth-child(1),
-  .status--better .indicator li:nth-child(2) {
-    background-color: var(--kemet-color-error);
-  }
-
-  .status--strong .indicator li {
-    background-color: var(--kemet-color-success);
-  }
-
-  .rules {
-    color: var(--kemet-color-background);
-    line-height: 1.5;
-    list-style: none;
-    font-size: 90%;
-    padding-left: 2rem;
-  }
-
-  .rules li {
-    position: relative;
-  }
-
-  .rules kemet-icon {
-    color: var(--kemet-color-success);
-    position: absolute;
-    left: -2rem;
-  }
-`;
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/kemet-password/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6E5B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    color: inherit;\n    display: none;\n  }\n\n  :host([show]) {\n    display: block;\n  }\n\n  p {\n    margin: 1.6rem 0;\n  }\n\n  .status {\n    display: grid;\n    align-items: center;\n    grid-template-columns: 1fr auto;\n    line-height: 1;\n    margin-top: 0.8rem;\n  }\n\n  .status > span {\n    text-transform: capitalize;\n  }\n\n  .status--weak,\n  .status--better {\n    color: var(--kemet-color-error);\n  }\n\n  .status--strong {\n    color: var(--kemet-color-success);\n  }\n\n  .indicator {\n    display: flex;\n    gap: 0.4rem;\n    margin: 0;\n    list-style: none;\n  }\n\n  .indicator li {\n    width: 1.6rem;\n    height: 0.2rem;\n  }\n\n  .status--weak .indicator li:nth-child(1) {\n    background-color: var(--kemet-color-error);\n  }\n\n  .status--better .indicator li:nth-child(1),\n  .status--better .indicator li:nth-child(2) {\n    background-color: var(--kemet-color-error);\n  }\n\n  .status--strong .indicator li {\n    background-color: var(--kemet-color-success);\n  }\n\n  .rules {\n    color: var(--kemet-color-background);\n    line-height: 1.5;\n    list-style: none;\n    font-size: 90%;\n    padding-left: 2rem;\n  }\n\n  .rules li {\n    position: relative;\n  }\n\n  .rules kemet-icon {\n    color: var(--kemet-color-success);\n    position: absolute;\n    left: -2rem;\n  }\n`;\n"]}

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

@@ -1,10 +0,0 @@
-export declare type TypeStatus = 'standard' | 'error' | 'success' | 'warning';
-export interface KemetPasswordInterface extends HTMLElement {
-    rules?: any[];
-    show?: boolean;
-    value?: string;
-    message?: string;
-    strength?: string;
-    icon?: string;
-    iconSize?: number;
-}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kemet-password/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeStatus = 'standard' | 'error' | 'success' | 'warning';\n\nexport interface KemetPasswordInterface extends HTMLElement {\n  rules?: any[],\n  show?: boolean,\n  value?: string,\n  message?: string,\n  strength?: string,\n  icon?: string,\n  iconSize?: number,\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../../src/components/kemet-popper/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAG3D,OAAO,iBAAiB,CAAC;AACzB,OAAO,uBAAuB,CAAC;AAE/B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;CAC1B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,WAAW,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GACtG,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACtD,IAAI,MAAM;QAAE,MAAM,CAAC,OAAO,EAAE,CAAC;IAE7B,OAAO,IAAI,CAAA;qCACwB,cAAc;8BACrB,MAAM,cAAc,SAAS,WAAW,MAAM,YAAY,MAAM,aAAa,QAAQ,aAAa,QAAQ,aAAa,QAAQ;mDAC1G,WAAW;8BAChC,UAAU,CAAC,OAAO,CAAC;;;GAG9C,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrC,IAAI,EAAE;QACJ,WAAW,EAAE,UAAU;QACvB,OAAO,EAAE,qVAAqV;QAC9V,cAAc,EAAE,QAAQ;QACxB,SAAS,EAAE,KAAK;QAChB,MAAM,EAAE,KAAK;QACb,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,OAAO;QACf,QAAQ,EAAE,OAAO;QACjB,QAAQ,EAAE,CAAC;QACX,QAAQ,EAAE,CAAC;KACZ;IACD,QAAQ,EAAE;QACR,cAAc,EAAE;YACd,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,CAAC;SAC5E;QACD,SAAS,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,cAAc,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC;SAC1L;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,EAAE,cAAc,CAAC;SAChH;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;SAC5B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC;SAC/B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-popper';\nimport '../kemet-popper-close';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Popper',\n  component: 'kemet-popper',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  triggerText, content, canvasPosition, placement, opened, effect, fireOn, strategy, skidding, distance,\n}) => {\n  const popper = document.querySelector('kemet-popper');\n  if (popper) popper.refresh();\n\n  return html`\n    <div class=\"storybook__canvas--${canvasPosition}\">\n      <kemet-popper ?opened=${opened} placement=${placement} effect=${effect} fire-on=${fireOn} strategy=${strategy} skidding=${skidding} distance=${distance}>\n        <kemet-button type=\"text\" slot=\"trigger\">${triggerText}</kemet-button>\n        <div slot=\"content\">${unsafeHTML(content)}</div>\n      </kemet-popper>\n    </div>\n  `;\n};\n\nexport const Standard: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    triggerText: 'Click Me',\n    content: '<kemet-popper-close style=\"position:absolute; right:1rem;\"><kemet-icon icon=\"x-lg\"></kemet-icon></kemet-popper-close><h2 kemet-margin-top=\"tiny:none\">Heading</h2><img width=\"240\" src=\"https://via.placeholder.com/1920x1080\" alt=\"A placeholder\" /><p><a href=\"https://google.com\">This</a> is some <a href=\"https://google.com\">content</a>.</p>',\n    canvasPosition: 'middle',\n    placement: 'top',\n    opened: false,\n    effect: 'fade',\n    fireOn: 'click',\n    strategy: 'fixed',\n    skidding: 0,\n    distance: 0,\n  },\n  argTypes: {\n    canvasPosition: {\n      control: { type: 'select' },\n      options: ['middle', 'top-right', 'bottom-right', 'bottom-left', 'top-left'],\n    },\n    placement: {\n      control: { type: 'select' },\n      options: ['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'],\n    },\n    opened: {\n      control: { type: 'boolean' },\n    },\n    effect: {\n      control: { type: 'select' },\n      options: ['none', 'fade', 'scale', 'slide', 'fall', 'flip-horizontal', 'flip-vertical', 'sign', 'super-scaled'],\n    },\n    fireOn: {\n      control: { type: 'radio' },\n      options: ['hover', 'click'],\n    },\n    strategy: {\n      control: { type: 'radio' },\n      options: ['fixed', 'absolute'],\n    },\n    skidding: {\n      control: { type: 'number' },\n    },\n    distance: {\n      control: { type: 'number' },\n    },\n  },\n};\n"]}

package/dist/src/components/kemet-popper/kemet-popper-close.d.ts

@@ -1,22 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * @since 2.0.0
- * @status stable
- *
- * @tagname kemet-popper-close
- * @summary A close button for the popper
- *
- * @event kemet-popper-close-btn
- *
- */
-export default class KemetPopperClose extends LitElement {
-    static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
-    close(): void;
-    handleKeyboard(event: any): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-popper-close': KemetPopperClose;
-    }
-}

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

@@ -1,49 +0,0 @@
-import { __decorate } from "tslib";
-import { html, css, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { emitEvent } from '../../utilities/misc/events';
-import { keyCodes } from '../../utilities/misc/constants';
-/**
- * @since 2.0.0
- * @status stable
- *
- * @tagname kemet-popper-close
- * @summary A close button for the popper
- *
- * @event kemet-popper-close-btn
- *
- */
-let KemetPopperClose = class KemetPopperClose extends LitElement {
-    render() {
-        return html `
-      <button @click=${() => this.close()} @keyup=${event => this.handleKeyboard(event)}>
-        <slot></slot>
-      </button>
-    `;
-    }
-    close() {
-        emitEvent(this, 'kemet-popper-close-btn', this);
-    }
-    handleKeyboard(event) {
-        event.preventDefault();
-        if (event.keyCode === keyCodes.SPACE || event.keyCode === keyCodes.ENTER) {
-            this.close();
-        }
-    }
-};
-KemetPopperClose.styles = [
-    css `
-      button {
-        font: inherit;
-        color: inherit;
-        cursor: pointer;
-        border: 0;
-        background: transparent;
-      }
-    `,
-];
-KemetPopperClose = __decorate([
-    customElement('kemet-popper-close')
-], KemetPopperClose);
-export default KemetPopperClose;
-//# sourceMappingURL=kemet-popper-close.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-popper-close.js","sourceRoot":"","sources":["../../../../src/components/kemet-popper/kemet-popper-close.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D;;;;;;;;;GASG;AAGH,IAAqB,gBAAgB,GAArC,MAAqB,gBAAiB,SAAQ,UAAU;IAatD,MAAM;QACJ,OAAO,IAAI,CAAA;uBACQ,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;;;KAGlF,CAAC;IACJ,CAAC;IAED,KAAK;QACH,SAAS,CAAC,IAAI,EAAE,wBAAwB,EAAE,IAAI,CAAC,CAAC;IAClD,CAAC;IAED,cAAc,CAAC,KAAK;QAClB,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,KAAK,CAAC,OAAO,KAAK,QAAQ,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,KAAK,QAAQ,CAAC,KAAK,EAAE;YACxE,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;IACH,CAAC;CACF,CAAA;AA/BQ,uBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;KAQF;CACF,CAAC;AAXiB,gBAAgB;IADpC,aAAa,CAAC,oBAAoB,CAAC;GACf,gBAAgB,CAgCpC;eAhCoB,gBAAgB","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { keyCodes } from '../../utilities/misc/constants';\n\n/**\n * @since 2.0.0\n * @status stable\n *\n * @tagname kemet-popper-close\n * @summary A close button for the popper\n *\n * @event kemet-popper-close-btn\n *\n */\n\n@customElement('kemet-popper-close')\nexport default class KemetPopperClose extends LitElement {\n  static styles = [\n    css`\n      button {\n        font: inherit;\n        color: inherit;\n        cursor: pointer;\n        border: 0;\n        background: transparent;\n      }\n    `,\n  ];\n\n  render() {\n    return html`\n      <button @click=${() => this.close()} @keyup=${event => this.handleKeyboard(event)}>\n        <slot></slot>\n      </button>\n    `;\n  }\n\n  close() {\n    emitEvent(this, 'kemet-popper-close-btn', this);\n  }\n\n  handleKeyboard(event) {\n    event.preventDefault();\n\n    if (event.keyCode === keyCodes.SPACE || event.keyCode === keyCodes.ENTER) {\n      this.close();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-popper-close': KemetPopperClose\n  }\n}\n"]}

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

@@ -1,63 +0,0 @@
-import { LitElement } from 'lit';
-import { TypeEffect, TypeFireOn, TypePlacement } from './types';
-/**
- * @since 2.0.0
- * @status stable
- *
- * @tagname kemet-popper
- * @summary A wrapper component for the popper.js lib.
- *
- * @event kemet-popper-opened - Fires when the popper opens
- * @event kemet-popper-closed - Fires when the popper closes
- *
- * @slot trigger - Controls opening and closing the popover.
- * @slot content - The contents of the popover.
- *
- * @csspart trigger - Contains the trigger for the popover.
- * @csspart content - Contains the content for the popover.
- *
- * @cssproperty --kemet-popper-padding - The padding in the content slot.
- * @cssproperty --kemet-popper-border-color - The border color of the content.
- * @cssproperty --kemet-popper-background-color - The background color of the content.
- *
- * @prop {TypePlacement} placement - The position of the popper over the trigger.
- * @prop {boolean} opened - Determines if the the Popper is opened or closed
- * @prop {TypeEffect} effect - The open/close animation effect for the Popper
- * @prop {TypeFireOn} fireOn - Activate the Popper on Click or Hover
- * @prop {string} strategy - Sets the strategy option in Popper's api
- * @prop {number} skidding - Sets an offset to the Popper from the trigger
- * @prop {number} distance - Sets spacing between the Popper and the trigger
- *
- */
-export default class KemetPopper extends LitElement {
-    static styles: import("lit").CSSResult[];
-    placement: TypePlacement;
-    opened: boolean;
-    effect: TypeEffect;
-    fireOn: TypeFireOn;
-    strategy: 'fixed' | 'absolute';
-    skidding: number;
-    distance: number;
-    /** @internal */
-    popperInstance: any;
-    /** @internal */
-    triggerElement: HTMLElement;
-    /** @internal */
-    contentElement: HTMLElement;
-    /** @internal */
-    focusableElements: any;
-    constructor();
-    firstUpdated(): void;
-    updated(prevProps: any): void;
-    render(): import("lit-html").TemplateResult<1>;
-    refresh(): void;
-    makePopper(): void;
-    toggle(event: any): void;
-    handleKeyUp(event: any): void;
-    handleFocusableDown(event: any): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-popper': KemetPopper;
-    }
-}

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

@@ -1,182 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property, query, queryAll, state } from 'lit/decorators.js';
-import { createPopper } from '@popperjs/core';
-import { emitEvent } from '../../utilities/misc/events';
-import { keyCodes } from '../../utilities/misc/constants';
-import { stylesPopper } from './styles';
-import { stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled } from './styles.effects';
-/**
- * @since 2.0.0
- * @status stable
- *
- * @tagname kemet-popper
- * @summary A wrapper component for the popper.js lib.
- *
- * @event kemet-popper-opened - Fires when the popper opens
- * @event kemet-popper-closed - Fires when the popper closes
- *
- * @slot trigger - Controls opening and closing the popover.
- * @slot content - The contents of the popover.
- *
- * @csspart trigger - Contains the trigger for the popover.
- * @csspart content - Contains the content for the popover.
- *
- * @cssproperty --kemet-popper-padding - The padding in the content slot.
- * @cssproperty --kemet-popper-border-color - The border color of the content.
- * @cssproperty --kemet-popper-background-color - The background color of the content.
- *
- * @prop {TypePlacement} placement - The position of the popper over the trigger.
- * @prop {boolean} opened - Determines if the the Popper is opened or closed
- * @prop {TypeEffect} effect - The open/close animation effect for the Popper
- * @prop {TypeFireOn} fireOn - Activate the Popper on Click or Hover
- * @prop {string} strategy - Sets the strategy option in Popper's api
- * @prop {number} skidding - Sets an offset to the Popper from the trigger
- * @prop {number} distance - Sets spacing between the Popper and the trigger
- *
- */
-let KemetPopper = class KemetPopper extends LitElement {
-    constructor() {
-        super();
-        this.placement = 'top';
-        this.effect = 'fade';
-        this.fireOn = 'hover';
-        this.strategy = 'fixed';
-        this.skidding = 0;
-        this.distance = 0;
-        this.addEventListener('kemet-popper-close-btn', () => this.opened = false);
-    }
-    firstUpdated() {
-        if (this.fireOn === 'click') {
-            this.focusableElements.forEach((element) => {
-                element.addEventListener('keydown', event => this.handleFocusableDown(event));
-            });
-        }
-    }
-    updated(prevProps) {
-        this.refresh();
-        if (!prevProps.get('opened') && this.opened === true) {
-            emitEvent(this, 'kemet-popper-opened', this);
-        }
-        if (prevProps.get('opened') && this.opened === false) {
-            emitEvent(this, 'kemet-popper-closed', this);
-        }
-    }
-    render() {
-        return html `
-      <div
-        id="trigger"
-        part="trigger"
-        tabIndex="0"
-        @click=${this.fireOn === 'click' ? event => this.toggle(event) : null}
-        @keyup=${this.fireOn === 'click' ? event => this.handleKeyUp(event) : null}
-        @mouseover=${this.fireOn !== 'click' ? () => this.opened = true : null}
-        @focus=${this.fireOn !== 'click' ? () => this.opened = true : null}
-        @mouseout=${this.fireOn !== 'click' ? () => this.opened = false : null}
-        @blur=${this.fireOn !== 'click' ? () => this.opened = false : null}
-      >
-        <slot name="trigger"></slot>
-      </div>
-      <div
-        id="content"
-        @mouseover=${this.fireOn !== 'click' ? () => this.opened = true : null}
-        @mouseout=${this.fireOn !== 'click' ? () => this.opened = false : null}
-      >
-        <slot name="content" @slotchange=${() => this.makePopper()}></slot>
-      </div>
-    `;
-    }
-    refresh() {
-        var _a;
-        (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.setOptions({
-            placement: this.placement,
-            strategy: this.strategy,
-            modifiers: [
-                { name: 'offset', options: { offset: [this.skidding, this.distance] } }
-            ],
-        });
-    }
-    makePopper() {
-        this.popperInstance = createPopper(this.triggerElement, this.contentElement, {
-            placement: this.placement,
-            strategy: this.strategy,
-            modifiers: [
-                { name: 'offset', options: { offset: [this.skidding, this.distance] } }
-            ],
-        });
-    }
-    toggle(event) {
-        const isSlotTrigger = event.target.getAttribute('slot') === 'trigger';
-        const isPartTrigger = event.target.getAttribute('part') === 'trigger';
-        if (isSlotTrigger || isPartTrigger) {
-            if (this.opened) {
-                this.opened = false;
-            }
-            else {
-                this.opened = true;
-            }
-        }
-    }
-    handleKeyUp(event) {
-        event.preventDefault();
-        if (event.keyCode === keyCodes.ESC) {
-            this.opened = false;
-        }
-        if (event.keyCode === keyCodes.ENTER || event.keyCode === keyCodes.SPACE) {
-            this.toggle(event);
-        }
-    }
-    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();
-            }
-        }
-    }
-};
-KemetPopper.styles = [stylesPopper, stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled];
-__decorate([
-    property({ type: String, reflect: true })
-], KemetPopper.prototype, "placement", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetPopper.prototype, "opened", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], KemetPopper.prototype, "effect", void 0);
-__decorate([
-    property({ type: String, attribute: 'fire-on' })
-], KemetPopper.prototype, "fireOn", void 0);
-__decorate([
-    property({ type: String })
-], KemetPopper.prototype, "strategy", void 0);
-__decorate([
-    property({ type: Number })
-], KemetPopper.prototype, "skidding", void 0);
-__decorate([
-    property({ type: Number })
-], KemetPopper.prototype, "distance", void 0);
-__decorate([
-    state()
-], KemetPopper.prototype, "popperInstance", void 0);
-__decorate([
-    query('#trigger')
-], KemetPopper.prototype, "triggerElement", void 0);
-__decorate([
-    query('#content')
-], KemetPopper.prototype, "contentElement", void 0);
-__decorate([
-    queryAll('body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable], kemet-popper-close')
-], KemetPopper.prototype, "focusableElements", void 0);
-KemetPopper = __decorate([
-    customElement('kemet-popper')
-], KemetPopper);
-export default KemetPopper;
-//# sourceMappingURL=kemet-popper.js.map