kemet-ui 4.0.0 → 4.0.2

package/dist/elements/draggable.js

@@ -0,0 +1,157 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/elements/draggable.ts
+var draggable_exports = {};
+__export(draggable_exports, {
+  default: () => KemetDraggable
+});
+module.exports = __toCommonJS(draggable_exports);
+var import_lit = require("lit");
+var import_decorators = require("lit/decorators.js");
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/elements/draggable.ts
+var KemetDraggable = class extends import_lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.top = "auto";
+    this.left = "auto";
+    this.measure = false;
+  }
+  firstUpdated() {
+    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 import_lit.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-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;
+    if (this.draggableElement) {
+      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));
+    }
+    emitEvent(this, "kemet-stop", this);
+  }
+  measureContent() {
+    this.style.width = `${this.draggableElement?.offsetWidth}px`;
+    this.style.height = `${this.draggableElement?.offsetHeight}px`;
+  }
+};
+KemetDraggable.styles = [import_lit.css`
+    :host {
+      display: inline-block;
+    }
+
+    #draggable {
+      position: absolute;
+    }
+  `];
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetDraggable.prototype, "memory", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetDraggable.prototype, "top", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetDraggable.prototype, "left", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean })
+], KemetDraggable.prototype, "measure", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetDraggable.prototype, "position1", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetDraggable.prototype, "position2", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetDraggable.prototype, "position3", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetDraggable.prototype, "position4", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetDraggable.prototype, "mouseMove", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetDraggable.prototype, "mouseUp", 2);
+__decorateClass([
+  (0, import_decorators.query)("#draggable")
+], KemetDraggable.prototype, "draggableElement", 2);
+KemetDraggable = __decorateClass([
+  (0, import_decorators.customElement)("kemet-draggable")
+], KemetDraggable);
+//# sourceMappingURL=draggable.js.map

package/dist/elements/draggable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/draggable.ts","../../src/utilities/events.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport {\n customElement, property, query, state,\n} from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/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-start\n * @event kemet-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  /** @internal */\n  @state()\n  position1: number;\n\n  /** @internal */\n  @state()\n  position2: number;\n\n  /** @internal */\n  @state()\n  position3: number;\n\n  /** @internal */\n  @state()\n  position4: number;\n\n  /** @internal */\n  @state()\n  mouseMove: (event: MouseEvent) => void;\n\n  /** @internal */\n  @state()\n  mouseUp: () => void;\n\n  /** @internal */\n  @query('#draggable')\n  draggableElement: HTMLElement;\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: MouseEvent) => this.startDrag(event)} style=\"top:${this.top}; left:${this.left}\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  startDrag(event: MouseEvent) {\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-start', this);\n  }\n\n  drag(event: MouseEvent) {\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    if (this.draggableElement) {\n      this.top = `${this.draggableElement.offsetTop - this.position2}px`;\n      this.left = `${this.draggableElement.offsetLeft - this.position1}px`;\n    }\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-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","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/elements/draggable.mjs

@@ -0,0 +1,9 @@
+import {
+  KemetDraggable
+} from "../chunk-6VG2IYDS.mjs";
+import "../chunk-LHEY3UOF.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  KemetDraggable as default
+};
+//# sourceMappingURL=draggable.mjs.map

package/dist/elements/draggable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/elements/drawer.d.mts

@@ -0,0 +1,62 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { b as TypeDirection } from '../constants-BEtO8uLN.mjs';
+import '../form-controller-BR0gZhrG.mjs';
+
+declare const effects: readonly ["slide", "reveal", "push", "scale"];
+declare enum EnumEffects {
+    Slide = "slide",
+    Reveal = "reveal",
+    Push = "push",
+    Scale = "scale"
+}
+type TypeEffect = typeof effects[number];
+/**
+ * @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 {TypeDirection} side - Allows you to control which side the drawer opens from. Values include: (left | right | top | bottom)
+ * @prop {boolean} overlay - Adds an 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.
+ * @cssproperty --kemet-drawer-height - The height of the drawer.
+ * @cssproperty --kemet-drawer-color - The text color of the drawer.
+ * @cssproperty --kemet-drawer-background-color - The background color of the drawer.
+ * @cssproperty --kemet-drawer-overlay-color - The color of the overlay.
+ *
+ * @event kemet-opened - Fires when the drawer opens.
+ * @event kemet-closed - Fires when the drawer closes.
+ *
+ */
+declare class KemetDrawer extends LitElement {
+    static styles: lit.CSSResult[];
+    opened: boolean;
+    effect: TypeEffect;
+    side: TypeDirection;
+    overlay: boolean;
+    firstUpdated(): void;
+    updated(prevProps: Map<string, never>): void;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-drawer': KemetDrawer;
+    }
+}
+
+export { EnumEffects, type TypeEffect, KemetDrawer as default, effects };

package/dist/elements/drawer.d.ts

@@ -0,0 +1,62 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { b as TypeDirection } from '../constants-CcB9aXsT.js';
+import '../form-controller-BR0gZhrG.js';
+
+declare const effects: readonly ["slide", "reveal", "push", "scale"];
+declare enum EnumEffects {
+    Slide = "slide",
+    Reveal = "reveal",
+    Push = "push",
+    Scale = "scale"
+}
+type TypeEffect = typeof effects[number];
+/**
+ * @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 {TypeDirection} side - Allows you to control which side the drawer opens from. Values include: (left | right | top | bottom)
+ * @prop {boolean} overlay - Adds an 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.
+ * @cssproperty --kemet-drawer-height - The height of the drawer.
+ * @cssproperty --kemet-drawer-color - The text color of the drawer.
+ * @cssproperty --kemet-drawer-background-color - The background color of the drawer.
+ * @cssproperty --kemet-drawer-overlay-color - The color of the overlay.
+ *
+ * @event kemet-opened - Fires when the drawer opens.
+ * @event kemet-closed - Fires when the drawer closes.
+ *
+ */
+declare class KemetDrawer extends LitElement {
+    static styles: lit.CSSResult[];
+    opened: boolean;
+    effect: TypeEffect;
+    side: TypeDirection;
+    overlay: boolean;
+    firstUpdated(): void;
+    updated(prevProps: Map<string, never>): void;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-drawer': KemetDrawer;
+    }
+}
+
+export { EnumEffects, type TypeEffect, KemetDrawer as default, effects };