kemet-ui 1.3.1 → 2.0.0

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

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

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

package/dist/components/kemet-modal/{kemet-modal.styles.js → styles.js}

@@ -1,6 +1,5 @@
 import { css } from 'lit';
-
-export const stylesBase = css`
+export const stylesBase = css `
   *,
   *::before,
   *::after {
@@ -29,6 +28,7 @@ export const stylesBase = css`
     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 {
@@ -55,8 +55,7 @@ export const stylesBase = css`
     visibility: visible;
   }
 `;
-
-export const stylesEffects = css`
+export const stylesEffects = css `
   /* fadein-scaleup */
   :host([effect="fadein-scaleup"]) .content {
     transform: scale(0.7);
@@ -265,3 +264,4 @@ export const stylesEffects = css`
     opacity: 1;
   }
 `;
+//# sourceMappingURL=styles.js.map

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

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

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

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

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

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

@@ -0,0 +1,77 @@
+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;
+    }
+}

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

@@ -1,159 +1,52 @@
-import { html, css, LitElement } from 'lit';
-
-export default class KemetPassword extends LitElement {
-  static get styles() {
-    return [
-      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;
-          background-color: var(--fds-color--gray2);
-        }
-
-        .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-primary);
-          list-style: none;
-          font-size: 90%;
-          padding-left: 2rem;
-        }
-
-        .rules li {
-          position: relative;
-        }
-
-        .rules kemet-icon {
-          color: var(--kemet-color-success);
-          position: absolute;
-          left: -2.4rem;
-        }
-      `,
-    ];
-  }
-
-  static get properties() {
-    return {
-      /**
-       * An array of objects containing the rules the password must meet
-       */
-      rules: {
-        type: Array,
-      },
-      /**
-       * Controls the display of the component
-       */
-      show: {
-        type: Boolean,
-        reflect: true,
-      },
-      /**
-       * The value of the input component
-       */
-      value: {
-        type: String,
-      },
-      /**
-       * A message that is above the rules
-       */
-      message: {
-        type: String,
-      },
-      /**
-       * The strength of the password. Weak | Better | Strong
-       */
-      strength: {
-        type: String,
-      },
-      icon: {
-        type: String,
-      },
-      iconSize: {
-        type: Number,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    // managed properties
-    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() {
-    // standard properties
-    this.field = this.closest('kemet-field');
-    this.input = this.field.querySelector('[slot="input"]');
-
-    // managed properties
-    this.slug = this.field.slug;
-
-    // events listeners
-    this.input.addEventListener('kemet-input-input', this.handleInput.bind(this));
-  }
-
-  render() {
-    return html`
+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>
@@ -169,110 +62,123 @@ export default class KemetPassword extends LitElement {
         </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>`;
+    /**
+     * 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();
     }
-
-    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';
-      }
-
-      /**
-       * Fires when there's a change in status.
-       */
-      this.dispatchEvent(
-        new CustomEvent('kemet-password-status', {
-          bubbles: true,
-          composed: true,
-          detail: {
-            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;
+    /**
+     * 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;
+        }
     }
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-password') || customElements.define('kemet-password', KemetPassword);
+};
+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/components/kemet-password/kemet-password.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-password.js","sourceRoot":"","sources":["../../../src/components/kemet-password/kemet-password.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAIxD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAGH,IAAqB,aAAa,GAAlC,MAAqB,aAAc,SAAQ,UAAU;IAArD;;QAIE,UAAK,GAAU;YACb,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,CAAC;QASF,YAAO,GAAW,iDAAiD,CAAC;QAMpE,SAAI,GAAW,QAAQ,CAAC;QAGxB,aAAQ,GAAW,EAAE,CAAC;IAmIxB,CAAC;IAxHC,YAAY;QACV,WAAW;QACX,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QACzC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAExD,mBAAmB;QACnB,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAChF,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;qCAEsB,IAAI,CAAC,QAAQ;kBAChC,IAAI,CAAC,QAAQ;;;;;;;4CAOa,IAAI,CAAC,OAAO;;YAE5C,IAAI,CAAC,SAAS,EAAE;;;KAGvB,CAAC;IACJ,CAAC;IAED;;;;OAIG;IACH,SAAS;QACP,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBAC3C,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBACxC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;gBACpD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,aAAa,GAAG,aAAa,CAAC;gBAChD,OAAO,IAAI,CAAA,OAAO,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,OAAO,OAAO,CAAC;YAC7E,CAAC,CAAC,CAAC;YAEH,OAAO,KAAK,CAAC;SACd;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;;;;OAKG;IACH,aAAa,CAAC,aAAa;QACzB,IAAI,aAAa,EAAE;YACjB,OAAO,IAAI,CAAA,oBAAoB,IAAI,CAAC,IAAI,SAAS,IAAI,CAAC,QAAQ,gBAAgB,CAAC;SAChF;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;;;OAIG;IACH,WAAW,CAAC,KAAK;QACf,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;QAC1B,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAED;;;OAGG;IACH,WAAW;QACT,oEAAoE;QACpE,mEAAmE;QACnE,kEAAkE;QAClE,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;YACrC,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC;YACtE,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,UAAU,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;YAE3E,IAAI,kBAAkB,IAAI,IAAI,EAAE;gBAC9B,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;gBACvB,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;aACvB;YAED,IAAI,kBAAkB,GAAG,IAAI,IAAI,kBAAkB,IAAI,IAAI,EAAE;gBAC3D,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;gBACzB,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;aACvB;YAED,IAAI,kBAAkB,GAAG,IAAI,EAAE;gBAC7B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;gBACzB,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;aACzB;YAED,SAAS,CAAC,IAAI,EAAE,uBAAuB,EAAE;gBACvC,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,QAAQ,EAAE,EAAE,qBAAqB,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE;gBAC9D,OAAO,EAAE,IAAI;aACd,CAAC,CAAC;QACL,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC;IAED;;;OAGG;IACH,UAAU;QACR,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACzB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;SAClB;aAAM;YACL,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACnB;IACH,CAAC;CACF,CAAA;AA5JQ,oBAAM,GAAG,CAAC,UAAU,CAAC,CAAC;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CAKxB;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC7B;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACyC;AAGpE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACH;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACL;AAGtB;IADC,KAAK,EAAE;6CACW;AAGnB;IADC,KAAK,EAAE;4CACmB;AAG3B;IADC,KAAK,EAAE;4CAC4C;AAnCjC,aAAa;IADjC,aAAa,CAAC,gBAAgB,CAAC;GACX,aAAa,CA6JjC;eA7JoB,aAAa","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/components/kemet-password/styles.d.ts

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