kemet-ui 1.4.0 → 2.0.0

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

@@ -1,6 +1,7 @@
+import { __decorate } from "tslib";
 import { html, css, LitElement } from 'lit';
-import { emitEvent } from '../../utilities/misc/events.js';
-
+import { customElement, property, state } from 'lit/decorators.js';
+import { emitEvent } from '../../utilities/misc/events';
 /**
  * @since 1.0.0
  * @status stable
@@ -18,84 +19,80 @@ import { emitEvent } from '../../utilities/misc/events.js';
  * @event kemet-count-status - Fires when there's a change in status.
  *
  */
-
-export default class KemetCount extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: block;
-          font-size: var(--kemet-count-font-size, 90%);
-          margin-top: 0.8rem;
-        }
-      `,
-    ];
-  }
-
-  static get properties() {
-    return {
-      message: {
-        type: String,
-      },
-      remaining: {
-        type: Number,
-      },
-      limit: {
-        type: Number,
-      },
-      validateImmediately: {
-        type: Boolean,
-        attribute: 'validate-immediately',
-      },
-    };
-  }
-
-  firstUpdated() {
-    this.field = this.closest('kemet-field');
-    this.inputSlot = this.field.querySelector('[slot="input"]');
-
-    this.remaining = this.limit - this.field.length;
-
-    this.field.addEventListener('kemet-field-input', (event) => {
-      this.remaining = this.limit - event.detail;
-
-      const nativeElement = this.input || this.textarea;
-
-      if (nativeElement) {
-        if (this.remaining < 0) {
-          nativeElement.validity.passedLimit = true;
-
-          if (this.validateImmediately) {
-            this.inputSlot.status = 'error';
-            this.inputSlot.invalid = true;
-
-            emitEvent(this, 'kemet-count-status', {
-              status: 'error',
-              validity: nativeElement.validity,
-              element: this.inputSlot,
-            });
-          }
-        } else {
-          this.inputSlot.status = 'standard';
-          nativeElement.checkValidity();
-
-          emitEvent(this, 'kemet-count-status', {
-            status: 'standard',
-            validity: nativeElement.validity,
-            element: this.inputSlot,
-          });
-        }
+let KemetCount = class KemetCount extends LitElement {
+    firstUpdated() {
+        this.field = this.closest('kemet-field');
+        this.inputSlot = this.field.querySelector('[slot="input"]');
+        this.remaining = this.limit - this.field.length;
+        this.field.addEventListener('kemet-field-input', (event) => {
+            this.remaining = this.limit - event.detail;
+            const nativeElement = this.input || this.textarea;
+            if (nativeElement) {
+                if (this.remaining < 0) {
+                    // nativeElement.validity.passedLimit = true;
+                    if (this.validateImmediately) {
+                        this.inputSlot.status = 'error';
+                        this.inputSlot.invalid = true;
+                        emitEvent(this, 'kemet-count-status', {
+                            status: 'error',
+                            validity: nativeElement.validity,
+                            element: this.inputSlot,
+                        });
+                    }
+                }
+                else {
+                    this.inputSlot.status = 'standard';
+                    nativeElement.checkValidity();
+                    emitEvent(this, 'kemet-count-status', {
+                        status: 'standard',
+                        validity: nativeElement.validity,
+                        element: this.inputSlot,
+                    });
+                }
+            }
+        });
+        this.input = this.inputSlot.shadowRoot.querySelector('input');
+        this.textarea = this.inputSlot.shadowRoot.querySelector('textarea');
+    }
+    render() {
+        return html `${this.remaining} ${this.message}`;
+    }
+};
+KemetCount.styles = [
+    css `
+      :host {
+        display: block;
+        font-size: var(--kemet-count-font-size, 90%);
+        margin-top: 0.8rem;
       }
-    });
-
-    this.input = this.inputSlot.shadowRoot.querySelector('input');
-    this.textarea = this.inputSlot.shadowRoot.querySelector('textarea');
-  }
-
-  render() {
-    return html`${this.remaining} ${this.message}`;
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-count') || customElements.define('kemet-count', KemetCount);
+    `,
+];
+__decorate([
+    property({ type: String })
+], KemetCount.prototype, "message", void 0);
+__decorate([
+    property({ type: Number })
+], KemetCount.prototype, "remaining", void 0);
+__decorate([
+    property({ type: Number })
+], KemetCount.prototype, "limit", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'validate-immediately' })
+], KemetCount.prototype, "validateImmediately", void 0);
+__decorate([
+    state()
+], KemetCount.prototype, "field", void 0);
+__decorate([
+    state()
+], KemetCount.prototype, "inputSlot", void 0);
+__decorate([
+    state()
+], KemetCount.prototype, "input", void 0);
+__decorate([
+    state()
+], KemetCount.prototype, "textarea", void 0);
+KemetCount = __decorate([
+    customElement('kemet-count')
+], KemetCount);
+export default KemetCount;
+//# sourceMappingURL=kemet-count.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-count.js","sourceRoot":"","sources":["../../../src/components/kemet-count/kemet-count.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, 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';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-count\n * @summary Maintains a character count for a input field. Is to be used only in the component slot of a Field component.\n *\n * @prop {string} message - The text label shown to users\n * @prop {number} remaining - The number of characters remaining\n * @prop {number} limit - The maximum number of characters allowed\n * @prop {boolean} validateImmediately - Set to true if the field should validate as soon as the character limit is reached\n *\n * @cssproperty --kemet-count-font-size - The font size. Default: 90%.\n *\n * @event kemet-count-status - Fires when there's a change in status.\n *\n */\n\n@customElement('kemet-count')\nexport default class KemetCount extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        font-size: var(--kemet-count-font-size, 90%);\n        margin-top: 0.8rem;\n      }\n    `,\n  ];\n\n  @property({ type: String })\n  message: string;\n\n  @property({ type: Number })\n  remaining: number;\n\n  @property({ type: Number })\n  limit: number;\n\n  @property({ type: Boolean, attribute: 'validate-immediately' })\n  validateImmediately: boolean;\n\n  @state()\n  field: KemetFieldInterface;\n\n  @state()\n  inputSlot: KemetInputInterface | KemetTextareaInterface;\n\n  @state()\n  input: HTMLInputElement;\n\n  @state()\n  textarea: HTMLTextAreaElement;\n\n  firstUpdated() {\n    this.field = this.closest('kemet-field');\n    this.inputSlot = this.field.querySelector('[slot=\"input\"]');\n\n    this.remaining = this.limit - this.field.length;\n\n    this.field.addEventListener('kemet-field-input', (event: CustomEvent) => {\n      this.remaining = this.limit - event.detail;\n\n      const nativeElement = this.input || this.textarea;\n\n      if (nativeElement) {\n        if (this.remaining < 0) {\n          // nativeElement.validity.passedLimit = true;\n\n          if (this.validateImmediately) {\n            this.inputSlot.status = 'error';\n            this.inputSlot.invalid = true;\n\n            emitEvent(this, 'kemet-count-status', {\n              status: 'error',\n              validity: nativeElement.validity,\n              element: this.inputSlot,\n            });\n          }\n        } else {\n          this.inputSlot.status = 'standard';\n          nativeElement.checkValidity();\n\n          emitEvent(this, 'kemet-count-status', {\n            status: 'standard',\n            validity: nativeElement.validity,\n            element: this.inputSlot,\n          });\n        }\n      }\n    });\n\n    this.input = this.inputSlot.shadowRoot.querySelector('input');\n    this.textarea = this.inputSlot.shadowRoot.querySelector('textarea');\n  }\n\n  render() {\n    return html`${this.remaining} ${this.message}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-count': KemetCount\n  }\n}\n\n"]}

package/dist/components/kemet-draggable/kemet-draggable.d.ts

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-draggable
+ * @summary A draggable element with the ability to remember its position.
+ *
+ * @prop {string} memory - A unique identifier used to store the element's position in local storage.
+ * @prop {string} top - The elements top position in pixels.
+ * @prop {string} left - The element's left position in pixels.
+ * @prop {boolean} measure - If set to true, will measure the width and height of the element's content and apply it to the host element.
+ *
+ * @event kemet-draggable-start
+ * @event kemet-draggable-stop
+ *
+ */
+export default class KemetDraggable extends LitElement {
+    static styles: import("lit").CSSResult[];
+    memory: string;
+    top: string;
+    left: string;
+    measure: boolean;
+    position1: number;
+    position2: number;
+    position3: number;
+    position4: number;
+    mouseMove: (event: any) => void;
+    mouseUp: () => void;
+    draggableElement: HTMLElement;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    startDrag(event: any): void;
+    drag(event: any): void;
+    stopDrag(): void;
+    measureContent(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-draggable': KemetDraggable;
+    }
+}

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

@@ -1,6 +1,7 @@
+import { __decorate } from "tslib";
 import { html, css, LitElement } from 'lit';
-import { emitEvent } from '../../utilities/misc/events.js';
-
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { emitEvent } from '../../utilities/misc/events';
 /**
  * @since 1.0.0
  * @status stable
@@ -17,124 +18,120 @@ import { emitEvent } from '../../utilities/misc/events.js';
  * @event kemet-draggable-stop
  *
  */
-
-export default class KemetDraggable extends LitElement {
-  static get styles() {
-    return css`
-      :host {
-        display: inline-block;
-      }
-
-      #draggable {
-        position: absolute;
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      memory: {
-        type: String,
-      },
-      top: {
-        type: String,
-      },
-      left: {
-        type: String,
-      },
-      measure: {
-        type: Boolean,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    // managed properties defaults
-    this.top = 'auto';
-    this.left = 'auto';
-    this.measure = false;
-  }
-
-  firstUpdated() {
-    // standard properties
-    /** @internal */
-    this.position1 = 0;
-    this.position2 = 0;
-    this.position3 = 0;
-    this.position4 = 0;
-    this.mouseMove = event => this.drag(event);
-    this.mouseUp = () => this.stopDrag();
-    this.draggableElement = this.shadowRoot.getElementById('draggable');
-
-    const savedPosition = JSON.parse(localStorage.getItem(this.memory));
-
-    if (savedPosition) {
-      this.top = savedPosition.top;
-      this.left = savedPosition.left;
+let KemetDraggable = class KemetDraggable extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.top = 'auto';
+        this.left = 'auto';
+        this.measure = false;
     }
-
-    if (this.measure) {
-      this.measureContent();
+    firstUpdated() {
+        // standard properties
+        /** @internal */
+        this.position1 = 0;
+        this.position2 = 0;
+        this.position3 = 0;
+        this.position4 = 0;
+        this.mouseMove = event => this.drag(event);
+        this.mouseUp = () => this.stopDrag();
+        const savedPosition = JSON.parse(localStorage.getItem(this.memory));
+        if (savedPosition) {
+            this.top = savedPosition.top;
+            this.left = savedPosition.left;
+        }
+        if (this.measure) {
+            this.measureContent();
+        }
     }
-  }
-
-  render() {
-    return html`
+    render() {
+        return html `
       <div id="draggable" @mousedown=${event => this.startDrag(event)} style="top:${this.top}; left:${this.left}">
         <slot></slot>
       </div>
     `;
-  }
-
-  startDrag(event) {
-    if (event) {
-      event.preventDefault();
-
-      this.position3 = event.clientX;
-      this.position4 = event.clientY;
     }
-
-    document.addEventListener('mouseup', this.mouseUp);
-    document.addEventListener('mousemove', this.mouseMove);
-
-    emitEvent(this, 'kemet-draggable-start', this);
-  }
-
-  drag(event) {
-    event.preventDefault();
-
-    this.position1 = this.position3 - event.clientX;
-    this.position2 = this.position4 - event.clientY;
-    this.position3 = event.clientX;
-    this.position4 = event.clientY;
-
-    this.top = `${this.draggableElement.offsetTop - this.position2}px`;
-    this.left = `${this.draggableElement.offsetLeft - this.position1}px`;
-  }
-
-  stopDrag() {
-    document.removeEventListener('mouseup', this.mouseUp);
-    document.removeEventListener('mousemove', this.mouseMove);
-
-    if (this.memory) {
-      const savedPosition = {
-        top: this.top,
-        left: this.left,
-      };
-
-      localStorage.setItem(this.memory, JSON.stringify(savedPosition));
+    startDrag(event) {
+        if (event) {
+            event.preventDefault();
+            this.position3 = event.clientX;
+            this.position4 = event.clientY;
+        }
+        document.addEventListener('mouseup', this.mouseUp);
+        document.addEventListener('mousemove', this.mouseMove);
+        emitEvent(this, 'kemet-draggable-start', this);
+    }
+    drag(event) {
+        var _a, _b;
+        event.preventDefault();
+        this.position1 = this.position3 - event.clientX;
+        this.position2 = this.position4 - event.clientY;
+        this.position3 = event.clientX;
+        this.position4 = event.clientY;
+        this.top = `${((_a = this.draggableElement) === null || _a === void 0 ? void 0 : _a.offsetTop) - this.position2}px`;
+        this.left = `${((_b = this.draggableElement) === null || _b === void 0 ? void 0 : _b.offsetLeft) - this.position1}px`;
+    }
+    stopDrag() {
+        document.removeEventListener('mouseup', this.mouseUp);
+        document.removeEventListener('mousemove', this.mouseMove);
+        if (this.memory) {
+            const savedPosition = {
+                top: this.top,
+                left: this.left,
+            };
+            localStorage.setItem(this.memory, JSON.stringify(savedPosition));
+        }
+        emitEvent(this, 'kemet-draggable-stop', this);
+    }
+    measureContent() {
+        var _a, _b;
+        this.style.width = `${(_a = this.draggableElement) === null || _a === void 0 ? void 0 : _a.offsetWidth}px`;
+        this.style.height = `${(_b = this.draggableElement) === null || _b === void 0 ? void 0 : _b.offsetHeight}px`;
+    }
+};
+KemetDraggable.styles = [css `
+    :host {
+      display: inline-block;
     }
 
-    emitEvent(this, 'kemet-draggable-stop', this);
-  }
-
-  measureContent() {
-    this.style.width = `${this.draggableElement.offsetWidth}px`;
-    this.style.height = `${this.draggableElement.offsetHeight}px`;
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-draggable') || customElements.define('kemet-draggable', KemetDraggable);
+    #draggable {
+      position: absolute;
+    }
+  `];
+__decorate([
+    property({ type: String })
+], KemetDraggable.prototype, "memory", void 0);
+__decorate([
+    property({ type: String })
+], KemetDraggable.prototype, "top", void 0);
+__decorate([
+    property({ type: String })
+], KemetDraggable.prototype, "left", void 0);
+__decorate([
+    property({ type: Boolean })
+], KemetDraggable.prototype, "measure", void 0);
+__decorate([
+    state()
+], KemetDraggable.prototype, "position1", void 0);
+__decorate([
+    state()
+], KemetDraggable.prototype, "position2", void 0);
+__decorate([
+    state()
+], KemetDraggable.prototype, "position3", void 0);
+__decorate([
+    state()
+], KemetDraggable.prototype, "position4", void 0);
+__decorate([
+    state()
+], KemetDraggable.prototype, "mouseMove", void 0);
+__decorate([
+    state()
+], KemetDraggable.prototype, "mouseUp", void 0);
+__decorate([
+    query('#draggable')
+], KemetDraggable.prototype, "draggableElement", void 0);
+KemetDraggable = __decorate([
+    customElement('kemet-draggable')
+], KemetDraggable);
+export default KemetDraggable;
+//# sourceMappingURL=kemet-draggable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-draggable.js","sourceRoot":"","sources":["../../../src/components/kemet-draggable/kemet-draggable.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-draggable\n * @summary A draggable element with the ability to remember its position.\n *\n * @prop {string} memory - A unique identifier used to store the element's position in local storage.\n * @prop {string} top - The elements top position in pixels.\n * @prop {string} left - The element's left position in pixels.\n * @prop {boolean} measure - If set to true, will measure the width and height of the element's content and apply it to the host element.\n *\n * @event kemet-draggable-start\n * @event kemet-draggable-stop\n *\n */\n\n@customElement('kemet-draggable')\nexport default class KemetDraggable extends LitElement {\n  static styles = [css`\n    :host {\n      display: inline-block;\n    }\n\n    #draggable {\n      position: absolute;\n    }\n  `];\n\n  @property({ type: String })\n  memory: string;\n\n  @property({ type: String })\n  top: string = 'auto';\n\n  @property({ type: String })\n  left: string = 'auto';\n\n  @property({ type: Boolean })\n  measure: boolean = false;\n\n  @state()\n  position1: number;\n\n  @state()\n  position2: number;\n\n  @state()\n  position3: number;\n\n  @state()\n  position4: number;\n\n  @state()\n  mouseMove: (event) => void;\n\n  @state()\n  mouseUp: () => void;\n\n  @query('#draggable')\n  draggableElement: HTMLElement;\n\n\n  firstUpdated() {\n    // standard properties\n    /** @internal */\n    this.position1 = 0;\n    this.position2 = 0;\n    this.position3 = 0;\n    this.position4 = 0;\n    this.mouseMove = event => this.drag(event);\n    this.mouseUp = () => this.stopDrag();\n\n    const savedPosition = JSON.parse(localStorage.getItem(this.memory));\n\n    if (savedPosition) {\n      this.top = savedPosition.top;\n      this.left = savedPosition.left;\n    }\n\n    if (this.measure) {\n      this.measureContent();\n    }\n  }\n\n  render() {\n    return html`\n      <div id=\"draggable\" @mousedown=${event => this.startDrag(event)} style=\"top:${this.top}; left:${this.left}\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  startDrag(event) {\n    if (event) {\n      event.preventDefault();\n\n      this.position3 = event.clientX;\n      this.position4 = event.clientY;\n    }\n\n    document.addEventListener('mouseup', this.mouseUp);\n    document.addEventListener('mousemove', this.mouseMove);\n\n    emitEvent(this, 'kemet-draggable-start', this);\n  }\n\n  drag(event) {\n    event.preventDefault();\n\n    this.position1 = this.position3 - event.clientX;\n    this.position2 = this.position4 - event.clientY;\n    this.position3 = event.clientX;\n    this.position4 = event.clientY;\n\n    this.top = `${this.draggableElement?.offsetTop - this.position2}px`;\n    this.left = `${this.draggableElement?.offsetLeft - this.position1}px`;\n  }\n\n  stopDrag() {\n    document.removeEventListener('mouseup', this.mouseUp);\n    document.removeEventListener('mousemove', this.mouseMove);\n\n    if (this.memory) {\n      const savedPosition = {\n        top: this.top,\n        left: this.left,\n      };\n\n      localStorage.setItem(this.memory, JSON.stringify(savedPosition));\n    }\n\n    emitEvent(this, 'kemet-draggable-stop', this);\n  }\n\n  measureContent() {\n    this.style.width = `${this.draggableElement?.offsetWidth}px`;\n    this.style.height = `${this.draggableElement?.offsetHeight}px`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-draggable': KemetDraggable\n  }\n}\n"]}

package/dist/components/kemet-draggable/types.d.ts

@@ -0,0 +1,6 @@
+export interface KemetDraggableInterface extends HTMLElement {
+    memory?: string;
+    top?: string;
+    left?: string;
+    measure?: boolean;
+}

package/dist/components/kemet-draggable/types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-draggable/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface KemetDraggableInterface extends HTMLElement {\n  memory?: string,\n  top?: string,\n  left?: string,\n  measure?: boolean,\n}\n"]}

package/dist/components/kemet-drawer/kemet-drawer.d.ts

@@ -0,0 +1,48 @@
+import { LitElement } from 'lit';
+import { TypeEffect, TypeSide } from './types';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-drawer
+ * @summary A component that adds an off-canvas menu with different effects.
+ *
+ * @prop {boolean} opened - Determines if the drawer is opened or not.
+ * @prop {string} effect - The animation effect for opening and closing the drawer. Values include: (slide | reveal | push | scale)
+ * @prop {string} side - Allows you to control which side the drawer opens from. Values include: (left | right | top | bottom)
+ * @prop {boolean} overlay - Adds a overlay over the content section of the Drawer when opened
+ *
+ * @slot navigation - The off-screen nav area of your app or site
+ * @slot content - The main content area of your app or site.
+ *
+ * @csspart container
+ * @csspart drawer
+ * @csspart pusher
+ * @csspart content
+ * @csspart wrapper
+ *
+ * @cssproperty --kemet-drawer-width - The width of the drawer. Default: 300px.
+ * @cssproperty --kemet-drawer-height - The height of the drawer. Default:  100%.
+ * @cssproperty --kemet-drawer-color - The text color of the drawer. Default:  #fafafa.
+ * @cssproperty --kemet-drawer-background-color - The background color of the drawer. Default: #202020.
+ * @cssproperty --kemet-drawer-overlay-color - The color of the overlay. Default: rgba(0, 0, 0, 0.2).
+ *
+ * @event kemet-drawer-opened - Fires when the drawer opens.
+ * @event kemet-drawer-closed - Fires when the drawer closes.
+ *
+ */
+export default class KemetDrawer extends LitElement {
+    static styles: import("lit").CSSResult[];
+    opened: boolean;
+    effect: TypeEffect;
+    side: TypeSide;
+    overlay: boolean;
+    firstUpdated(): void;
+    updated(prevProps: any): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-drawer': KemetDrawer;
+    }
+}