kemet-ui 4.0.0 → 4.0.2

package/dist/chunk-F74NYUH5.mjs

@@ -0,0 +1,90 @@
+import {
+  stylesSortable
+} from "./chunk-5WUBMMWS.mjs";
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/sortable.ts
+import { html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { polyfill } from "mobile-drag-drop";
+var getMouseOffset = (event) => {
+  const target = event.target;
+  const targetRect = target.getBoundingClientRect();
+  return {
+    x: event.pageX - targetRect.left,
+    y: event.pageY - targetRect.top
+  };
+};
+var getElementVerticalCenter = (element) => {
+  const rect = element.getBoundingClientRect();
+  return (rect.bottom - rect.top) / 2;
+};
+var KemetSortable = class extends LitElement {
+  firstUpdated() {
+    polyfill();
+    this.addEventListener("dragstart", (event) => this.handleDragStart(event), false);
+    this.addEventListener("dragenter", (event) => {
+      event.preventDefault();
+    });
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+  handleDragStart(event) {
+    this.sortableItem = event.target;
+    this.addEventListener("dragover", (dragOverEvent) => this.handleDragOver(dragOverEvent), false);
+    this.addEventListener("dragend", (dragEndEvent) => this.handleDragEnd(dragEndEvent), false);
+    setTimeout(() => {
+      this.sortableItem.ghost = true;
+      emitEvent(this, "kemet-drag-start", {
+        event,
+        current: this.sortableItem,
+        all: this.querySelectorAll("kemet-sortable-item")
+      });
+    }, 0);
+  }
+  handleDragOver(event) {
+    event.preventDefault();
+    const target = event.target;
+    emitEvent(this, "kemet-drag-over", {
+      event,
+      current: this.sortableItem,
+      all: this.querySelectorAll("kemet-sortable-item")
+    });
+    if (target && target.tagName === "KEMET-SORTABLE-ITEM") {
+      const offset = getMouseOffset(event);
+      const middleY = getElementVerticalCenter(target);
+      if (offset.y > middleY) {
+        this.insertBefore(this.sortableItem, target.nextSibling);
+      } else {
+        this.insertBefore(this.sortableItem, target);
+      }
+    }
+  }
+  handleDragEnd(event) {
+    event.preventDefault();
+    this.sortableItem.ghost = false;
+    emitEvent(this, "kemet-drag-end", {
+      event,
+      current: this.sortableItem,
+      all: this.querySelectorAll("kemet-sortable-item")
+    });
+  }
+};
+KemetSortable.styles = [stylesSortable];
+__decorateClass([
+  state()
+], KemetSortable.prototype, "sortableItem", 2);
+KemetSortable = __decorateClass([
+  customElement("kemet-sortable")
+], KemetSortable);
+
+export {
+  KemetSortable
+};
+//# sourceMappingURL=chunk-F74NYUH5.mjs.map

package/dist/chunk-F74NYUH5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/sortable.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\nimport { polyfill } from 'mobile-drag-drop';\nimport { emitEvent } from '../utilities/events';\nimport { stylesSortable } from '../styles/elements/sortable';\nimport type KemetSortableItem from './sortable-item';\n\nexport interface InterfaceSortableDragDetails {\n  event: DragEvent,\n  current: KemetSortableItem,\n  all: NodeListOf<KemetSortableItem>,\n}\n\nconst getMouseOffset = (event: DragEvent) => {\n  const target = event.target as HTMLElement;\n  const targetRect = target.getBoundingClientRect();\n  return {\n    x: event.pageX - targetRect.left,\n    y: event.pageY - targetRect.top,\n  };\n};\n\nconst getElementVerticalCenter = (element: HTMLElement) => {\n  const rect = element.getBoundingClientRect();\n  return (rect.bottom - rect.top) / 2;\n};\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-sortable\n * @summary A list that can be sorted by drag and drop.\n *\n * @event kemet-drag-start - Fires when an item starts to be moved.\n * @event kemet-drag-over - Fires when an item is moving to a new spot.\n * @event kemet-drag-end - Fires when an item has been moved to a new spot.\n */\n\n@customElement('kemet-sortable')\nexport default class KemetSortable extends LitElement {\n  static styles = [stylesSortable];\n\n  @state()\n  sortableItem: KemetSortableItem;\n\n  firstUpdated() {\n    polyfill();\n\n    this.addEventListener('dragstart', event => this.handleDragStart(event), false);\n    this.addEventListener('dragenter', (event) => { event.preventDefault(); });\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  handleDragStart(event: DragEvent) {\n    this.sortableItem = event.target as KemetSortableItem;\n\n    this.addEventListener('dragover', dragOverEvent => this.handleDragOver(dragOverEvent), false);\n    this.addEventListener('dragend', dragEndEvent => this.handleDragEnd(dragEndEvent), false);\n\n    setTimeout(() => {\n      this.sortableItem.ghost = true;\n\n      emitEvent(this, 'kemet-drag-start', {\n        event,\n        current: this.sortableItem,\n        all: this.querySelectorAll('kemet-sortable-item'),\n      });\n    }, 0);\n  }\n\n  handleDragOver(event: DragEvent) {\n    event.preventDefault();\n\n    const target = event.target as KemetSortableItem;\n\n    emitEvent(this, 'kemet-drag-over', {\n      event,\n      current: this.sortableItem,\n      all: this.querySelectorAll('kemet-sortable-item'),\n    });\n\n    if (target && target.tagName === 'KEMET-SORTABLE-ITEM') {\n      const offset = getMouseOffset(event);\n      const middleY = getElementVerticalCenter(target);\n\n      if (offset.y > middleY) {\n        this.insertBefore(this.sortableItem, target.nextSibling);\n      } else {\n        this.insertBefore(this.sortableItem, target);\n      }\n    }\n  }\n\n  handleDragEnd(event: DragEvent) {\n    event.preventDefault();\n    this.sortableItem.ghost = false;\n\n    emitEvent(this, 'kemet-drag-end', {\n      event,\n      current: this.sortableItem,\n      all: this.querySelectorAll('kemet-sortable-item'),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-sortable': KemetSortable\n  }\n}\n"],"mappings":";;;;;;;;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC,SAAS,eAAe,aAAa;AACrC,SAAS,gBAAgB;AAWzB,IAAM,iBAAiB,CAAC,UAAqB;AAC3C,QAAM,SAAS,MAAM;AACrB,QAAM,aAAa,OAAO,sBAAsB;AAChD,SAAO;AAAA,IACL,GAAG,MAAM,QAAQ,WAAW;AAAA,IAC5B,GAAG,MAAM,QAAQ,WAAW;AAAA,EAC9B;AACF;AAEA,IAAM,2BAA2B,CAAC,YAAyB;AACzD,QAAM,OAAO,QAAQ,sBAAsB;AAC3C,UAAQ,KAAK,SAAS,KAAK,OAAO;AACpC;AAeA,IAAqB,gBAArB,cAA2C,WAAW;AAAA,EAMpD,eAAe;AACb,aAAS;AAET,SAAK,iBAAiB,aAAa,WAAS,KAAK,gBAAgB,KAAK,GAAG,KAAK;AAC9E,SAAK,iBAAiB,aAAa,CAAC,UAAU;AAAE,YAAM,eAAe;AAAA,IAAG,CAAC;AAAA,EAC3E;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;AAAA,EAEA,gBAAgB,OAAkB;AAChC,SAAK,eAAe,MAAM;AAE1B,SAAK,iBAAiB,YAAY,mBAAiB,KAAK,eAAe,aAAa,GAAG,KAAK;AAC5F,SAAK,iBAAiB,WAAW,kBAAgB,KAAK,cAAc,YAAY,GAAG,KAAK;AAExF,eAAW,MAAM;AACf,WAAK,aAAa,QAAQ;AAE1B,gBAAU,MAAM,oBAAoB;AAAA,QAClC;AAAA,QACA,SAAS,KAAK;AAAA,QACd,KAAK,KAAK,iBAAiB,qBAAqB;AAAA,MAClD,CAAC;AAAA,IACH,GAAG,CAAC;AAAA,EACN;AAAA,EAEA,eAAe,OAAkB;AAC/B,UAAM,eAAe;AAErB,UAAM,SAAS,MAAM;AAErB,cAAU,MAAM,mBAAmB;AAAA,MACjC;AAAA,MACA,SAAS,KAAK;AAAA,MACd,KAAK,KAAK,iBAAiB,qBAAqB;AAAA,IAClD,CAAC;AAED,QAAI,UAAU,OAAO,YAAY,uBAAuB;AACtD,YAAM,SAAS,eAAe,KAAK;AACnC,YAAM,UAAU,yBAAyB,MAAM;AAE/C,UAAI,OAAO,IAAI,SAAS;AACtB,aAAK,aAAa,KAAK,cAAc,OAAO,WAAW;AAAA,MACzD,OAAO;AACL,aAAK,aAAa,KAAK,cAAc,MAAM;AAAA,MAC7C;AAAA,IACF;AAAA,EACF;AAAA,EAEA,cAAc,OAAkB;AAC9B,UAAM,eAAe;AACrB,SAAK,aAAa,QAAQ;AAE1B,cAAU,MAAM,kBAAkB;AAAA,MAChC;AAAA,MACA,SAAS,KAAK;AAAA,MACd,KAAK,KAAK,iBAAiB,qBAAqB;AAAA,IAClD,CAAC;AAAA,EACH;AACF;AAnEqB,cACZ,SAAS,CAAC,cAAc;AAG/B;AAAA,EADC,MAAM;AAAA,GAHY,cAInB;AAJmB,gBAArB;AAAA,EADC,cAAc,gBAAgB;AAAA,GACV;","names":[]}

package/dist/chunk-FIFFC63Y.mjs

@@ -0,0 +1,346 @@
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/multi-input.ts
+import { html, LitElement } from "lit";
+import {
+  customElement,
+  property,
+  query,
+  state
+} from "lit/decorators.js";
+import { live } from "lit/directives/live.js";
+
+// src/styles/elements/multi-input.ts
+import { css } from "lit";
+var stylesBase = css`
+  :host {
+    --kemet-input-height: 50px;
+    --kemet-input-padding: 0.5rem 1rem;
+    --kemet-input-border: 1px solid rgb(var(--kemet-color-foreground));
+    --kemet-input-border-radius-rounded: var(--kemet-border-radius-lg);
+    --kemet-input-border-filled: none;
+    --kemet-input-color-filled: rgb(var(--kemet-color-white));
+    --kemet-input-background-color-filled: rgb(var(--kemet-color-primary));
+    --kemet-input-color-filled: rgb(var(--kemet-color-white));
+    --kemet-input-background-color-error: rgb(var(--kemet-color-error));
+    --kemet-input-background-color-success: rgb(var(--kemet-color-success));
+    --kemet-input-background-color-warning: rgb(var(--kemet-color-warning));
+    --kemet-input-border-radius-rounded: 0;
+
+    --kemet-multi-input-chip-color: rgb(var(--kemet-color-background));
+    --kemet-multi-input-chip-background: rgb(var(--kemet-color-foreground));
+
+    position: relative;
+    display: block;
+  }
+
+  input {
+    color: rgb(var(--kemet-color-text));
+    display: block;
+    font-size: 1rem;
+    width: 100%;
+    height: var(--kemet-input-height);
+    padding: var(--kemet-input-padding);
+    border: var(--kemet-input-border);
+    appearance: none;
+    box-sizing: border-box;
+    background-color: transparent;
+    border-radius: var(--kemet-input-border-radius-rounded);
+  }
+
+  :host([status=error]) input {
+    --kemet-input-border: 1px solid rgb(var(--kemet-color-error));
+  }
+
+  :host([status=success]) input {
+    --kemet-input-border: 1px solid rgb(var(--kemet-color-success));
+  }
+
+  :host([status=warning]) input {
+    --kemet-input-border: 1px solid rgb(var(--kemet-color-warning));
+  }
+
+  :host([disabled]) input {
+    opacity: 0.5;
+  }
+
+  :host([rounded]) input {
+    --kemet-input-border-radius-rounded: var(--kemet-border-radius-md);
+  }
+
+  :host([rounded=sm]) input {
+    --kemet-input-border-radius-rounded: var(--kemet-border-radius-sm);
+  }
+
+  :host([rounded=lg]) input {
+    --kemet-input-border-radius-rounded: var(--kemet-border-radius-lg);
+  }
+
+  :host([rounded=xl]) input {
+    --kemet-input-border-radius-rounded: var(--kemet-border-radius-xl);
+  }
+
+  :host([rounded=circle]) input {
+    --kemet-input-border-radius-rounded: var(--kemet-border-radius-circle);
+  }
+
+  :host([rounded=pill]) input {
+    --kemet-input-border-radius-rounded: var(--kemet-border-radius-pill);
+  }
+
+  :host([rounded=circle]) input {
+    --kemet-input-border-radius-rounded: var(--kemet-border-radius-circle);
+  }
+
+  :host([filled]) input {
+    border: var(--kemet-input-border-filled);
+    color: var(--kemet-input-color-filled);
+    background-color: var(--kemet-input-background-color-filled);
+  }
+
+  div {
+    display: flex;
+    gap: 1rem;
+    flex-direction: column;
+  }
+
+  ul {
+    display: flex;
+    gap: 0.5rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    flex-wrap: wrap;
+  }
+
+  li {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    padding: 0.25rem 0.5rem;
+    color: var(--kemet-multi-input-chip-color);
+    background-color: var(--kemet-multi-input-chip-background);
+  }
+
+  :host([rounded]) li {
+    border-radius: var(--kemet-input-border-radius-rounded);
+  }
+
+  button {
+    color: inherit;
+    cursor: pointer;
+    font-size: 1.25rem;
+    padding: 0;
+    border: 0;
+    background-color: transparent
+  }
+`;
+
+// src/elements/multi-input.ts
+var KemetMultiInput = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.slug = "input";
+    this.placeholder = "";
+    this.disabled = false;
+    this.filled = false;
+    this.name = "input";
+    this.status = "standard" /* Standard */;
+    this.required = false;
+    this.validateOnBlur = false;
+    this.value = "";
+    this.selections = [];
+  }
+  firstUpdated() {
+    this.field = this.closest("kemet-field");
+    this.combo = this.field.querySelector("kemet-combo");
+    document.addEventListener("click", this.handleComboClose.bind(this));
+    if (this.combo) {
+      this.combo.addEventListener("kemet-selection", (event) => this.addComboItem(event));
+    }
+  }
+  updated() {
+    if (this.chips) this.calculatePadding();
+  }
+  render() {
+    return html`
+      <div>
+        <input
+          part="input"
+          id=${this.slug}
+          name=${this.name}
+          placeholder=${this.placeholder}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          @input=${this.handleInput}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+          @change=${this.handleChange}
+          @invalid=${this.handleInvalid}
+          @keydown=${this.handleKeydown}
+          .value=${live(this.value)}
+        />
+         ${this.makeSelections()}
+      </div>
+    `;
+  }
+  /**
+   * Handles when a selection is made from a combo
+   * @private
+   * @param event
+   */
+  addComboItem(event) {
+    this.value = "";
+    this.status = "standard" /* Standard */;
+    const isPresent = this.selections.find((selection) => selection.id === event.detail.id);
+    if (!isPresent) this.selections = [...this.selections, event.detail];
+  }
+  /**
+   * Handles when the input receives input
+   * @private
+   */
+  handleInput(event) {
+    this.value = event.target.value;
+    emitEvent(this, "kemet-input", {
+      element: this,
+      validity: this.input.validity,
+      status: this.status,
+      value: event.target.value
+    });
+  }
+  /**
+   * Handles when the input is focused
+   */
+  handleFocus() {
+    emitEvent(this, "kemet-focus", this);
+  }
+  handleBlur() {
+    emitEvent(this, "kemet-blur", this);
+    if (this.validateOnBlur) {
+      this.input.checkValidity();
+    }
+  }
+  handleChange(event) {
+    emitEvent(this, "kemet-change", {
+      element: this,
+      validity: this.input.validity,
+      status: this.status,
+      value: event.target.value
+    });
+  }
+  handleInvalid(event) {
+    this.status = "error" /* Error */;
+    emitEvent(this, "kemet-invalid", {
+      element: this,
+      validity: this.input.validity,
+      status: this.status,
+      value: event.target.value
+    });
+  }
+  /**
+   * Renders the chips from the selections of the combo
+   * @private
+   */
+  makeSelections() {
+    const selections = this.selections.map((selection) => html`
+      <li part="chip">
+        <span>${selection.text}</span>
+        <button @click=${this.handleRemoveChip}>&times;</button>
+      </li>
+    `);
+    if (this.selections) {
+      return html`<ul part="chips">${selections}</ul>`;
+    }
+    return null;
+  }
+  /**
+   * calculates padding to properly place the cursor of the input
+   * @private
+   */
+  calculatePadding() {
+    this.paddingLeft = this.chips.offsetWidth + 16;
+  }
+  /**
+   * handle removing a chip from the selections
+   * @private
+   */
+  handleRemoveChip(event) {
+    const text = event.target.closest("[part=chip]").querySelector("span").innerText;
+    this.selections = this.selections.filter((selection) => selection.text !== text);
+  }
+  handleComboClose(event) {
+    if (event.target !== this && this.combo) {
+      this.combo.show = false;
+    }
+  }
+  handleKeydown(event) {
+    if (event.key === "Escape" /* ESCAPE */) {
+      this.combo.show = false;
+    }
+  }
+};
+KemetMultiInput.styles = [stylesBase];
+__decorateClass([
+  property({ type: String })
+], KemetMultiInput.prototype, "slug", 2);
+__decorateClass([
+  property({ type: String })
+], KemetMultiInput.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Boolean })
+], KemetMultiInput.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean })
+], KemetMultiInput.prototype, "filled", 2);
+__decorateClass([
+  property({ reflect: true })
+], KemetMultiInput.prototype, "rounded", 2);
+__decorateClass([
+  property({ type: String })
+], KemetMultiInput.prototype, "name", 2);
+__decorateClass([
+  property({ reflect: true })
+], KemetMultiInput.prototype, "status", 2);
+__decorateClass([
+  property({ type: Boolean })
+], KemetMultiInput.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean })
+], KemetMultiInput.prototype, "invalid", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "validate-on-blur" })
+], KemetMultiInput.prototype, "validateOnBlur", 2);
+__decorateClass([
+  state()
+], KemetMultiInput.prototype, "value", 2);
+__decorateClass([
+  state()
+], KemetMultiInput.prototype, "selections", 2);
+__decorateClass([
+  state()
+], KemetMultiInput.prototype, "paddingLeft", 2);
+__decorateClass([
+  state()
+], KemetMultiInput.prototype, "field", 2);
+__decorateClass([
+  state()
+], KemetMultiInput.prototype, "combo", 2);
+__decorateClass([
+  query("[part=chips]")
+], KemetMultiInput.prototype, "chips", 2);
+__decorateClass([
+  query("input")
+], KemetMultiInput.prototype, "input", 2);
+KemetMultiInput = __decorateClass([
+  customElement("kemet-multi-input")
+], KemetMultiInput);
+
+export {
+  KemetMultiInput
+};
+//# sourceMappingURL=chunk-FIFFC63Y.mjs.map

package/dist/chunk-FIFFC63Y.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/multi-input.ts","../src/styles/elements/multi-input.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport {\n customElement, property, query, state,\n} from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\nimport { stylesBase } from '../styles/elements/multi-input';\nimport { emitEvent } from '../utilities/events';\nimport { EnumKeyCodes as EnumKeys, EnumStatuses, TypeRoundedSizes, TypeStatus } from '../utilities/constants';\nimport KemetField from './field';\nimport KemetCombo from './combo';\n\nexport interface InterfaceSelections {\n  element: HTMLUListElement;\n  text: string;\n  id: string;\n}\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-multi-input\n * @summary An input element that accepts multiple items from a combo.\n *\n * @prop {string} slug - Used for the id of the input. Should match the slug used in a control if applicable.\n * @prop {string} name - The name of the input\n * @prop {string} placeholder - The placeholder attribute\n * @prop {boolean} disabled - The disable attribute\n * @prop {boolean} required - The required attribute\n * @prop {string} value - The input's value\n * @prop {boolean} invalid - States whether the input is invalid\n * @prop {string} status - The status of the input\n * @prop {boolean} validateOnBlur - Activates validation on blur\n * @prop {TypeRoundedSizes} rounded - Displays rounded corners\n * @prop {boolean} filled - Displays a filled input box\n * @prop {ValidityState} validity - The HTML5 validity object.\n\n *\n * @csspart input\n *\n * @cssproperty --kemet-input-height - The height of the input.\n * @cssproperty --kemet-input-padding - The padding on the input.\n * @cssproperty --kemet-input-border - The border of the input.\n * @cssproperty --kemet-input-border-color-error -  The border of the error state.\n * @cssproperty --kemet-input-border-color-success - The border of the success state.\n * @cssproperty --kemet-input-border-color-warning - The border of the warning state.\n * @cssproperty --kemet-input-icon-left-padding - The icon-left padding.\n * @cssproperty --kemet-input-icon-right-padding - The icon-right padding.\n * @cssproperty --kemet-input-border-radius-rounded - The border radius on rounded.\n * @cssproperty --kemet-input-border-filled - The border on filled.\n * @cssproperty --kemet-input-color-filled - The color on filled.\n * @cssproperty --kemet-input-background-color-filled - The background-color on filled.\n * @cssproperty --kemet-input-background-color-error - The error state background color.\n * @cssproperty --kemet-input-background-color-success - The success state background color.\n * @cssproperty --kemet-input-background-color-warning - The warning state background color.\n *\n * @event kemet-focus - Fires when the input receives focus\n * @event kemet-blur - Fires when the input loses focus\n * @event kemet-input - Fires when the input receives input\n * @event kemet-change - Fires when the input changes\n * @event kemet-invalid - Fires when the input is invalid\n *\n */\n\n@customElement('kemet-multi-input')\nexport default class KemetMultiInput extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: String })\n  slug: string = 'input';\n\n  @property({ type: String })\n  placeholder: string = '';\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  @property({ type: Boolean })\n  filled: boolean = false;\n\n  @property({ reflect: true })\n  rounded: TypeRoundedSizes;\n\n  @property({ type: String })\n  name: string = 'input';\n\n  @property({ reflect: true })\n  status: TypeStatus = EnumStatuses.Standard;\n\n  @property({ type: Boolean })\n  required: boolean = false;\n\n  @property({ type: Boolean })\n  invalid: boolean;\n\n  @property({ type: Boolean, attribute: 'validate-on-blur' })\n  validateOnBlur: boolean = false;\n\n  @state()\n  value: string = '';\n\n  @state()\n  selections: InterfaceSelections[] = [];\n\n  @state()\n  paddingLeft: number;\n\n  @state()\n  field: KemetField;\n\n  @state()\n  combo: KemetCombo;\n\n  @query('[part=chips]')\n  chips: { offsetWidth: number; };\n\n  @query('input')\n  input: HTMLInputElement;\n\n  firstUpdated() {\n    // elements\n    this.field = this.closest('kemet-field');\n    this.combo = this.field.querySelector('kemet-combo');\n\n    document.addEventListener('click', this.handleComboClose.bind(this));\n\n    if (this.combo) {\n      this.combo.addEventListener('kemet-selection', (event: CustomEvent) => this.addComboItem(event));\n    }\n  }\n\n  updated() {\n    if (this.chips) this.calculatePadding();\n  }\n\n  render() {\n    return html`\n      <div>\n        <input\n          part=\"input\"\n          id=${this.slug}\n          name=${this.name}\n          placeholder=${this.placeholder}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          @input=${this.handleInput}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n          @change=${this.handleChange}\n          @invalid=${this.handleInvalid}\n          @keydown=${this.handleKeydown}\n          .value=${live(this.value)}\n        />\n         ${this.makeSelections()}\n      </div>\n    `;\n  }\n\n  /**\n   * Handles when a selection is made from a combo\n   * @private\n   * @param event\n   */\n\n  addComboItem(event: CustomEvent) {\n    this.value = '';\n    this.status = EnumStatuses.Standard;\n    const isPresent = this.selections.find(selection => selection.id === event.detail.id);\n    if (!isPresent) this.selections = [...this.selections, event.detail];\n  }\n\n  /**\n   * Handles when the input receives input\n   * @private\n   */\n  handleInput(event: Event) {\n    this.value = (event.target as HTMLInputElement).value;\n    emitEvent(this, 'kemet-input', {\n      element: this,\n      validity: this.input.validity,\n      status: this.status,\n      value: (event.target as HTMLInputElement).value\n    });\n  }\n\n  /**\n   * Handles when the input is focused\n   */\n  handleFocus() {\n    emitEvent(this, 'kemet-focus', this);\n  }\n\n  handleBlur() {\n    emitEvent(this, 'kemet-blur', this);\n    if (this.validateOnBlur) {\n      this.input.checkValidity();\n    }\n  }\n\n  handleChange(event: Event) {\n    emitEvent(this, 'kemet-change', {\n      element: this,\n      validity: this.input.validity,\n      status: this.status,\n      value: (event.target as HTMLInputElement).value\n    });\n  }\n\n  handleInvalid(event: Event) {\n    this.status = EnumStatuses.Error;\n    emitEvent(this, 'kemet-invalid', {\n      element: this,\n      validity: this.input.validity,\n      status: this.status,\n      value: (event.target as HTMLInputElement).value\n    });\n  }\n\n  /**\n   * Renders the chips from the selections of the combo\n   * @private\n   */\n  makeSelections() {\n    const selections = this.selections.map(selection => html`\n      <li part=\"chip\">\n        <span>${selection.text}</span>\n        <button @click=${this.handleRemoveChip}>&times;</button>\n      </li>\n    `);\n\n    if (this.selections) {\n      return html`<ul part=\"chips\">${selections}</ul>`;\n    }\n\n    return null;\n  }\n\n  /**\n   * calculates padding to properly place the cursor of the input\n   * @private\n   */\n  calculatePadding() {\n    this.paddingLeft = this.chips.offsetWidth + 16;\n  }\n\n  /**\n   * handle removing a chip from the selections\n   * @private\n   */\n  handleRemoveChip(event) {\n    const text = event.target.closest('[part=chip]').querySelector('span').innerText;\n    this.selections = this.selections.filter(selection => selection.text !== text);\n  }\n\n  handleComboClose(event: MouseEvent) {\n    if (event.target !== this && this.combo) {\n      this.combo.show = false;\n    }\n  }\n\n  handleKeydown(event: KeyboardEvent) {\n    if (event.key === EnumKeys.ESCAPE) {\n      this.combo.show = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-multi-input': KemetMultiInput\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    --kemet-input-height: 50px;\n    --kemet-input-padding: 0.5rem 1rem;\n    --kemet-input-border: 1px solid rgb(var(--kemet-color-foreground));\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-lg);\n    --kemet-input-border-filled: none;\n    --kemet-input-color-filled: rgb(var(--kemet-color-white));\n    --kemet-input-background-color-filled: rgb(var(--kemet-color-primary));\n    --kemet-input-color-filled: rgb(var(--kemet-color-white));\n    --kemet-input-background-color-error: rgb(var(--kemet-color-error));\n    --kemet-input-background-color-success: rgb(var(--kemet-color-success));\n    --kemet-input-background-color-warning: rgb(var(--kemet-color-warning));\n    --kemet-input-border-radius-rounded: 0;\n\n    --kemet-multi-input-chip-color: rgb(var(--kemet-color-background));\n    --kemet-multi-input-chip-background: rgb(var(--kemet-color-foreground));\n\n    position: relative;\n    display: block;\n  }\n\n  input {\n    color: rgb(var(--kemet-color-text));\n    display: block;\n    font-size: 1rem;\n    width: 100%;\n    height: var(--kemet-input-height);\n    padding: var(--kemet-input-padding);\n    border: var(--kemet-input-border);\n    appearance: none;\n    box-sizing: border-box;\n    background-color: transparent;\n    border-radius: var(--kemet-input-border-radius-rounded);\n  }\n\n  :host([status=error]) input {\n    --kemet-input-border: 1px solid rgb(var(--kemet-color-error));\n  }\n\n  :host([status=success]) input {\n    --kemet-input-border: 1px solid rgb(var(--kemet-color-success));\n  }\n\n  :host([status=warning]) input {\n    --kemet-input-border: 1px solid rgb(var(--kemet-color-warning));\n  }\n\n  :host([disabled]) input {\n    opacity: 0.5;\n  }\n\n  :host([rounded]) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=sm]) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-sm);\n  }\n\n  :host([rounded=lg]) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-lg);\n  }\n\n  :host([rounded=xl]) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-xl);\n  }\n\n  :host([rounded=circle]) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded=pill]) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-pill);\n  }\n\n  :host([rounded=circle]) input {\n    --kemet-input-border-radius-rounded: var(--kemet-border-radius-circle);\n  }\n\n  :host([filled]) input {\n    border: var(--kemet-input-border-filled);\n    color: var(--kemet-input-color-filled);\n    background-color: var(--kemet-input-background-color-filled);\n  }\n\n  div {\n    display: flex;\n    gap: 1rem;\n    flex-direction: column;\n  }\n\n  ul {\n    display: flex;\n    gap: 0.5rem;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    flex-wrap: wrap;\n  }\n\n  li {\n    display: flex;\n    gap: 0.5rem;\n    align-items: center;\n    padding: 0.25rem 0.5rem;\n    color: var(--kemet-multi-input-chip-color);\n    background-color: var(--kemet-multi-input-chip-background);\n  }\n\n  :host([rounded]) li {\n    border-radius: var(--kemet-input-border-radius-rounded);\n  }\n\n  button {\n    color: inherit;\n    cursor: pointer;\n    font-size: 1.25rem;\n    padding: 0;\n    border: 0;\n    background-color: transparent\n  }\n`;\n"],"mappings":"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","names":[]}

package/dist/chunk-G5OGR6EP.mjs

@@ -0,0 +1,101 @@
+import {
+  stylesScrollSnap
+} from "./chunk-MZO4Q7DU.mjs";
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/scroll-snap.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+var KemetScrollSnap = class extends LitElement {
+  constructor() {
+    super();
+    this.axis = "horizontal" /* Horizontal */;
+    this.pagination = "bottom" /* Bottom */;
+    this.addEventListener("kemet-focus", (event) => {
+      this.focusSlide(event.detail);
+    });
+  }
+  firstUpdated() {
+    this.isTouchDevice = "ontouchstart" in document.documentElement;
+    this.slides = [];
+    this.setFocusedSlides();
+  }
+  updated() {
+    this.setVerticalAttribute();
+  }
+  render() {
+    return html`
+      <slot name="slides"></slot>
+      <slot name="pagination"></slot>
+    `;
+  }
+  setFocusedSlides() {
+    const slides = this.querySelectorAll("kemet-scroll-snap-slide");
+    const container = this.querySelector('[slot="slides"]');
+    const options = {
+      root: container,
+      rootMargin: "0px",
+      threshold: 0.5
+    };
+    const callback = (entries) => {
+      entries.forEach((entry) => {
+        const target = entry.target;
+        target.focused = entry.intersectionRatio >= 0.5;
+      });
+      this.makeSlides();
+    };
+    const observer = new IntersectionObserver(callback, options);
+    slides.forEach((slide) => {
+      observer.observe(slide);
+    });
+  }
+  makeSlides() {
+    const slides = [];
+    this.querySelectorAll("kemet-scroll-snap-slide").forEach((element, index) => {
+      const slide = element;
+      slide.index = index;
+      slides.push({
+        id: index,
+        focused: slide.focused,
+        label: slide.label
+      });
+    });
+    this.slides = slides;
+    emitEvent(this, "kemet-make-slides", this.slides);
+  }
+  focusSlide(index) {
+    const activeSlide = this.querySelector(`kemet-scroll-snap-slide[index="${index}"]`);
+    activeSlide.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  }
+  setVerticalAttribute() {
+    if (this.axis === "vertical") {
+      document.querySelector("html").setAttribute("kemet-scroll-snap-axis", "vertical");
+    }
+  }
+};
+KemetScrollSnap.styles = [stylesScrollSnap];
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetScrollSnap.prototype, "axis", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetScrollSnap.prototype, "pagination", 2);
+__decorateClass([
+  state()
+], KemetScrollSnap.prototype, "isTouchDevice", 2);
+__decorateClass([
+  state()
+], KemetScrollSnap.prototype, "slides", 2);
+KemetScrollSnap = __decorateClass([
+  customElement("kemet-scroll-snap")
+], KemetScrollSnap);
+
+export {
+  KemetScrollSnap
+};
+//# sourceMappingURL=chunk-G5OGR6EP.mjs.map

package/dist/chunk-G5OGR6EP.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/scroll-snap.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\nimport { stylesScrollSnap } from '../styles/elements/scroll-snap';\nimport KemetScrollSnapSlide from './scroll-snap-slide';\nimport { EnumAxis, EnumDirections, TypeAxis, TypeDirection } from '../utilities/constants';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-scroll-snap\n * @summary A scroll-snap implementation for responsive sliders.\n *\n * @prop {TypeAxis} axis - Determines the direction the component flows. Values include: (horizontal | vertical)\n * @prop {TypeDirection} pagination - Determines where to display the paginator. Values include: (top | right | bottom | left)\n *\n * @slot slides - Place your slides here.\n * @slot pagination - Place the paginator component here if you want one.\n *\n * @csspart slides - The slides container.\n * @csspart pagination - The pagination element.\n *\n * @cssproperty --kemet-scroll-snap-gap - Space between the slides.\n * @cssproperty --kemet-scroll-snap-horizontal-max-width - The horizontal max width of the container.\n * @cssproperty --kemet-scroll-snap-vertical-height - The vertical height of the container.\n * @cssproperty --kemet-scroll-snap-slides-vertical-padding - Padding on the vertical axis.\n *\n * @event kemet-make-slides - Fires when slide data has been created.\n *\n */\n\n@customElement('kemet-scroll-snap')\nexport default class KemetScrollSnap extends LitElement {\n  static styles = [stylesScrollSnap];\n\n  @property({ type: String, reflect: true })\n  axis: TypeAxis = EnumAxis.Horizontal;\n\n  @property({ type: String, reflect: true })\n  pagination: TypeDirection = EnumDirections.Bottom;\n\n  @state()\n  isTouchDevice: boolean;\n\n  @state()\n  slides: KemetScrollSnapSlide[];\n\n  constructor() {\n    super();\n\n    this.addEventListener('kemet-focus', (event: CustomEvent) => {\n      this.focusSlide(event.detail);\n    });\n  }\n\n  firstUpdated() {\n    // standard properties\n    this.isTouchDevice = 'ontouchstart' in document.documentElement;\n    this.slides = [];\n\n    this.setFocusedSlides();\n  }\n\n  updated() {\n    this.setVerticalAttribute();\n  }\n\n  render() {\n    return html`\n      <slot name=\"slides\"></slot>\n      <slot name=\"pagination\"></slot>\n    `;\n  }\n\n  setFocusedSlides() {\n    // reference: https://24ways.org/2019/beautiful-scrolling-experiences-without-libraries/\n    // reference: https://css-tricks.com/an-explanation-of-how-the-intersection-observer-watches/\n    const slides = this.querySelectorAll('kemet-scroll-snap-slide');\n    const container = this.querySelector('[slot=\"slides\"]');\n\n    const options = {\n      root: container,\n      rootMargin: '0px',\n      threshold: 0.5,\n    };\n\n    const callback = (entries: IntersectionObserverEntry[]) => {\n      entries.forEach((entry: IntersectionObserverEntry) => {\n        const target = entry.target as KemetScrollSnapSlide;\n        target.focused = entry.intersectionRatio >= 0.5;\n      });\n\n      this.makeSlides();\n    };\n\n    const observer = new IntersectionObserver(callback, options);\n\n    slides.forEach((slide) => {\n      observer.observe(slide);\n    });\n  }\n\n  makeSlides() {\n    const slides = [];\n\n    this.querySelectorAll('kemet-scroll-snap-slide').forEach((element, index) => {\n      const slide = element as KemetScrollSnapSlide;\n\n      slide.index = index;\n      slides.push({\n        id: index,\n        focused: slide.focused,\n        label: slide.label,\n      });\n    });\n\n    this.slides = slides;\n    emitEvent(this, 'kemet-make-slides', this.slides);\n  }\n\n  focusSlide(index: number) {\n    const activeSlide = this.querySelector(`kemet-scroll-snap-slide[index=\"${index}\"]`);\n    activeSlide.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n  }\n\n  setVerticalAttribute() {\n    if (this.axis === 'vertical') {\n      document.querySelector('html').setAttribute('kemet-scroll-snap-axis', 'vertical');\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-scroll-snap': KemetScrollSnap\n  }\n}\n"],"mappings":";;;;;;;;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC,SAAS,eAAe,UAAU,aAAa;AAgC/C,IAAqB,kBAArB,cAA6C,WAAW;AAAA,EAetD,cAAc;AACZ,UAAM;AAZR;AAGA;AAWE,SAAK,iBAAiB,eAAe,CAAC,UAAuB;AAC3D,WAAK,WAAW,MAAM,MAAM;AAAA,IAC9B,CAAC;AAAA,EACH;AAAA,EAEA,eAAe;AAEb,SAAK,gBAAgB,kBAAkB,SAAS;AAChD,SAAK,SAAS,CAAC;AAEf,SAAK,iBAAiB;AAAA,EACxB;AAAA,EAEA,UAAU;AACR,SAAK,qBAAqB;AAAA,EAC5B;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA,EAIT;AAAA,EAEA,mBAAmB;AAGjB,UAAM,SAAS,KAAK,iBAAiB,yBAAyB;AAC9D,UAAM,YAAY,KAAK,cAAc,iBAAiB;AAEtD,UAAM,UAAU;AAAA,MACd,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,WAAW;AAAA,IACb;AAEA,UAAM,WAAW,CAAC,YAAyC;AACzD,cAAQ,QAAQ,CAAC,UAAqC;AACpD,cAAM,SAAS,MAAM;AACrB,eAAO,UAAU,MAAM,qBAAqB;AAAA,MAC9C,CAAC;AAED,WAAK,WAAW;AAAA,IAClB;AAEA,UAAM,WAAW,IAAI,qBAAqB,UAAU,OAAO;AAE3D,WAAO,QAAQ,CAAC,UAAU;AACxB,eAAS,QAAQ,KAAK;AAAA,IACxB,CAAC;AAAA,EACH;AAAA,EAEA,aAAa;AACX,UAAM,SAAS,CAAC;AAEhB,SAAK,iBAAiB,yBAAyB,EAAE,QAAQ,CAAC,SAAS,UAAU;AAC3E,YAAM,QAAQ;AAEd,YAAM,QAAQ;AACd,aAAO,KAAK;AAAA,QACV,IAAI;AAAA,QACJ,SAAS,MAAM;AAAA,QACf,OAAO,MAAM;AAAA,MACf,CAAC;AAAA,IACH,CAAC;AAED,SAAK,SAAS;AACd,cAAU,MAAM,qBAAqB,KAAK,MAAM;AAAA,EAClD;AAAA,EAEA,WAAW,OAAe;AACxB,UAAM,cAAc,KAAK,cAAc,kCAAkC,KAAK,IAAI;AAClF,gBAAY,eAAe,EAAE,UAAU,UAAU,OAAO,UAAU,CAAC;AAAA,EACrE;AAAA,EAEA,uBAAuB;AACrB,QAAI,KAAK,SAAS,YAAY;AAC5B,eAAS,cAAc,MAAM,EAAE,aAAa,0BAA0B,UAAU;AAAA,IAClF;AAAA,EACF;AACF;AAlGqB,gBACZ,SAAS,CAAC,gBAAgB;AAGjC;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAHtB,gBAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GANtB,gBAOnB;AAGA;AAAA,EADC,MAAM;AAAA,GATY,gBAUnB;AAGA;AAAA,EADC,MAAM;AAAA,GAZY,gBAanB;AAbmB,kBAArB;AAAA,EADC,cAAc,mBAAmB;AAAA,GACb;","names":[]}