kemet-ui 4.0.2 → 5.0.0

package/dist/elements/draggable.js

@@ -1,157 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,9 +0,0 @@
-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

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

package/dist/elements/drawer.d.mts

@@ -1,62 +0,0 @@
-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

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