kemet-ui 4.0.2 → 5.0.0

package/dist/elements/select/index.js

@@ -0,0 +1,689 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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/select/index.ts
+import { html as html2, LitElement as LitElement2 } from "lit";
+import { customElement as customElement2, property as property2, state as state2 } from "lit/decorators.js";
+
+// src/utilities/form-controller.ts
+var FormSubmitController = class {
+  constructor(host, options = {}) {
+    (this.host = host).addController(this);
+    this.options = {
+      form: (input) => input.closest("form"),
+      name: (input) => input.name,
+      value: (input) => input.value,
+      disabled: (input) => input.disabled,
+      ...options
+    };
+    this.handleFormData = this.handleFormData.bind(this);
+    this.handleFormSubmit = this.handleFormSubmit.bind(this);
+  }
+  hostConnected() {
+    this.form = this.options.form(this.host);
+    if (this.form) {
+      this.form.addEventListener("formdata", this.handleFormData);
+      this.form.addEventListener("submit", this.handleFormSubmit);
+    }
+  }
+  hostDisconnected() {
+    if (this.form) {
+      this.form.removeEventListener("formdata", this.handleFormData);
+      this.form.removeEventListener("submit", this.handleFormSubmit);
+      this.form = void 0;
+    }
+  }
+  handleFormData(event) {
+    const disabled = this.options.disabled(this.host);
+    const name = this.options.name(this.host);
+    const value = this.options.value(this.host);
+    if (!disabled && typeof name === "string" && typeof value !== "undefined") {
+      event.formData?.append(name, value.toString());
+    }
+  }
+  handleFormSubmit(event) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    const disabled = this.options.disabled(this.host);
+    this.form = this.options.form(this.host);
+    if (this.form && !disabled) {
+      const components = this.form.querySelectorAll("kemet-input, kemet-textarea, kemet-select, kemet-checkbox, kemet-radios");
+      components.forEach((component) => {
+        if (component.checkValidity) {
+          component.checkValidity();
+          if (!component.checkValidity()) {
+            component.status = "error";
+            component.invalid = true;
+            component.dispatchEvent(
+              new CustomEvent("kemet-input-status", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  status: "error",
+                  validity: component.validity ? component.validity : {},
+                  element: component
+                }
+              })
+            );
+          }
+          if (component.checkLimitValidity && !component.checkLimitValidity()) {
+            component.status = "error";
+            component.invalid = true;
+            component.dispatchEvent(
+              new CustomEvent("kemet-input-status", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  status: "error",
+                  validity: { passedLimit: true },
+                  element: component
+                }
+              })
+            );
+          }
+        }
+      });
+    }
+  }
+  submit() {
+    const button = document.createElement("button");
+    if (this.form) {
+      button.type = "submit";
+      button.style.position = "absolute";
+      button.style.width = "0";
+      button.style.height = "0";
+      button.style.clip = "rect(0 0 0 0)";
+      button.style.clipPath = "inset(50%)";
+      button.style.overflow = "hidden";
+      button.style.whiteSpace = "nowrap";
+      this.form.append(button);
+      button.click();
+      button.remove();
+    }
+  }
+};
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/elements/icon/index.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { isTemplateResult } from "lit/directive-helpers.js";
+
+// src/elements/icon/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+`;
+
+// src/elements/icon/index.ts
+var CACHEABLE_ERROR = /* @__PURE__ */ Symbol();
+var RETRYABLE_ERROR = /* @__PURE__ */ Symbol();
+var parser;
+var iconCache = /* @__PURE__ */ new Map();
+var MAX_CONCURRENT_REQUESTS = 10;
+var requestQueue = [];
+var activeRequests = 0;
+function queueRequest(callback) {
+  if (activeRequests < MAX_CONCURRENT_REQUESTS) {
+    activeRequests++;
+    callback();
+  } else {
+    requestQueue.push(callback);
+  }
+}
+function requestComplete() {
+  activeRequests--;
+  if (requestQueue.length > 0) {
+    const nextRequest = requestQueue.shift();
+    if (nextRequest) {
+      activeRequests++;
+      nextRequest();
+    }
+  }
+}
+var KemetIcon = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.name = "house";
+    this.library = "bootstrap";
+    this.family = "regular";
+    this.size = 16;
+    this.dom = "initializing";
+    this.svg = null;
+    this.url = "https://unpkg.com/bootstrap-icons@latest/icons";
+    /** @internal */
+    this.isVisible = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateUrl();
+    if (!this.svg) {
+      this.isVisible = true;
+      this.setIcon();
+    }
+  }
+  updated() {
+    this.updateUrl();
+    this.updateSize();
+  }
+  firstUpdated() {
+    emitEvent(this, "kemet-icon-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  render() {
+    if (this.svg) {
+      return this.svg;
+    }
+    if (!this.isVisible) {
+      this.isVisible = true;
+      this.setIcon();
+    }
+    return html`<svg part="svg" width="${this.size}" height="${this.size}" viewBox="0 0 16 16"></svg>`;
+  }
+  /** Public method to force icon loading */
+  loadIcon() {
+    this.isVisible = true;
+    this.setIcon();
+  }
+  async setIcon() {
+    if (!this.isVisible) return;
+    let iconResolver = iconCache.get(`${this.family}/${this.name}`);
+    if (!iconResolver) {
+      iconResolver = this.resolveIcon();
+      iconCache.set(`${this.family}/${this.name}`, iconResolver);
+    }
+    const svg = await iconResolver;
+    if (svg === RETRYABLE_ERROR) {
+      iconCache.delete(`${this.family}/${this.name}`);
+    }
+    if (isTemplateResult(svg)) {
+      this.svg = svg;
+    } else if (svg instanceof SVGSVGElement) {
+      this.svg = svg.cloneNode(true);
+    }
+  }
+  updateUrl() {
+    switch (this.library) {
+      case "fontawesome" /* FONTAWESOME */:
+        this.version = this.version || "7.3.1";
+        this.url = `https://unpkg.com/@fortawesome/fontawesome-free@${this.version}/svgs`;
+        break;
+      case "bootstrap" /* BOOTSTRAP */:
+        this.version = this.version || "1.11.3";
+        this.url = `https://unpkg.com/bootstrap-icons@${this.version}/icons`;
+        break;
+    }
+  }
+  async resolveIcon() {
+    return new Promise((resolve) => {
+      queueRequest(async () => {
+        let fileData;
+        let fetchURL = `${this.url}/${this.family}/${this.name}.svg`;
+        switch (this.library) {
+          case "fontawesome" /* FONTAWESOME */:
+            fetchURL = `${this.url}/${this.family}/${this.name}.svg`;
+            break;
+          case "bootstrap" /* BOOTSTRAP */:
+            fetchURL = `${this.url}/${this.name}.svg`;
+            break;
+        }
+        try {
+          fileData = await fetch(fetchURL);
+          if (!fileData.ok) {
+            requestComplete();
+            resolve(fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR);
+            return;
+          }
+        } catch {
+          requestComplete();
+          resolve(RETRYABLE_ERROR);
+          return;
+        }
+        try {
+          const div = document.createElement("div");
+          div.innerHTML = await fileData.text();
+          const svg = div.firstElementChild;
+          if (svg?.tagName?.toLowerCase() !== "svg") {
+            requestComplete();
+            resolve(CACHEABLE_ERROR);
+            return;
+          }
+          if (!parser) parser = new DOMParser();
+          const doc = parser.parseFromString(svg.outerHTML, "text/html");
+          const svgEl = doc.body.querySelector("svg");
+          if (!svgEl) {
+            requestComplete();
+            resolve(CACHEABLE_ERROR);
+            return;
+          }
+          svgEl.part.add("svg");
+          svgEl.setAttribute("width", `${this.size}px`);
+          svgEl.setAttribute("height", `${this.size}px`);
+          requestComplete();
+          resolve(document.adoptNode(svgEl));
+        } catch {
+          requestComplete();
+          resolve(CACHEABLE_ERROR);
+        }
+      });
+    });
+  }
+  updateSize() {
+    if (this.svg) {
+      const svg = this.svg;
+      svg.setAttribute("width", `${this.size}px`);
+      svg.setAttribute("height", `${this.size}px`);
+    }
+  }
+};
+KemetIcon.styles = [styles_css_default];
+__decorateClass([
+  property({ type: String })
+], KemetIcon.prototype, "name", 2);
+__decorateClass([
+  property({ type: String })
+], KemetIcon.prototype, "library", 2);
+__decorateClass([
+  property({ type: String })
+], KemetIcon.prototype, "family", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetIcon.prototype, "size", 2);
+__decorateClass([
+  property({ type: String })
+], KemetIcon.prototype, "version", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetIcon.prototype, "polarity", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetIcon.prototype, "dom", 2);
+__decorateClass([
+  state()
+], KemetIcon.prototype, "svg", 2);
+__decorateClass([
+  state()
+], KemetIcon.prototype, "url", 2);
+KemetIcon = __decorateClass([
+  customElement("kemet-icon")
+], KemetIcon);
+
+// src/elements/select/styles.css.ts
+import { css as css2 } from "lit";
+var styles_css_default2 = css2`:host {
+  /* public */
+  --kemet-select-padding: 1rem;
+  --kemet-select-color: var(--kemet-color-font-base);
+  --kemet-select-font-color: var(--kemet-color-font-base);
+  --kemet-select-border: 1px solid var(--kemet-select-color);
+  --kemet-select-border-radius: 0;
+  --kemet-select-icon-gap: 1rem;
+
+  /* private */
+  --_kemet-select-background-color: transparent;
+
+
+  position: relative;
+  display: block;
+}
+
+select {
+  color: var(--kemet-select-font-color);
+  display: block;
+  font-size: 1rem;
+  width: 100%;
+  padding: var(--kemet-select-padding);
+  border: var(--kemet-select-border);
+  appearance: none;
+  box-sizing: border-box;
+  background-color: var(--_kemet-select-background-color);
+  border-radius: var(--kemet-select-border-radius);
+}
+
+option {
+  color: var(--kemet-color-font-base);
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+:host([polarity=dark]) {
+  --kemet-select-color: var(--kemet-color-font-inverse-base);
+  --kemet-select-font-color: var(--kemet-color-font-inverse-base);
+}
+
+:host([appearance=brand]) {
+  --kemet-select-color: var(--kemet-color-brand-primary-base);
+}
+
+:host([appearance=error]) {
+  --kemet-select-color: var(--kemet-color-background-error);
+}
+
+:host([appearance=success]) {
+  --kemet-select-color: var(--kemet-color-background-success);
+}
+
+:host([appearance=warning]) {
+  --kemet-select-color: var(--kemet-color-background-warning);
+}
+
+:host([disabled]) {
+  --kemet-select-font-color: var(--kemet-color-font-disabled);
+  --kemet-select-color: var(--kemet-color-font-disabled);
+}
+
+:host([rounded]) {
+  --kemet-select-border-radius: var(--kemet-border-radius-md);
+}
+
+:host([rounded=sm]) {
+  --kemet-select-border-radius: var(--kemet-border-radius-sm);
+}
+
+:host([rounded=md]) {
+  --kemet-select-border-radius: var(--kemet-border-radius-md);
+}
+
+:host([rounded=lg]) {
+  --kemet-select-border-radius: var(--kemet-border-radius-lg);
+}
+
+:host([rounded=xl]) {
+  --kemet-select-border-radius: var(--kemet-border-radius-xl);
+}
+
+:host([rounded=circle]) {
+  --kemet-select-border-radius: var(--kemet-border-radius-circle);
+}
+
+:host([rounded=pill]) {
+  --kemet-select-border-radius: var(--kemet-border-radius-pill);
+}
+
+:host([filled]) {
+  --kemet-select-font-color: var(--kemet-color-font-inverse-base);
+  --_kemet-select-background-color: var(--kemet-color-background-inverse);
+  --kemet-select-border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+
+:host([appearance=brand][filled]) {
+  --_kemet-select-background-color: var(--kemet-color-brand-primary-base);
+}
+
+:host([appearance=error][filled]) {
+  --_kemet-select-background-color: var(--kemet-color-font-error);
+}
+
+:host([appearance=success][fiiled]) {
+  --_kemet-select-background-color: var(--kemet-color-font-success);
+}
+
+:host([appearance=warning][filled]) {
+  --_kemet-select-background-color: var(--kemet-color-font-warning);
+}
+
+:host([appearance=link][filled]) {
+  --_kemet-select-background-color: var(--kemet-color-font-link);
+}
+
+
+kemet-icon {
+  color: var(--kemet-select-font-color);
+  position: absolute;
+  right: var(--kemet-select-icon-gap);
+  top: 50%;
+  transform: translateY(-50%);
+}
+`;
+
+// src/elements/select/index.ts
+var KemetSelect = class extends LitElement2 {
+  constructor() {
+    super();
+    this.slug = "";
+    this.name = "select";
+    this.value = "";
+    this.options = [];
+    this.appearance = "";
+    this.required = false;
+    this.disabled = false;
+    this.multiple = false;
+    this.icon = "chevron-down";
+    this.iconSize = 18;
+    this.filled = false;
+    this.dom = "initializing";
+    this.invalid = false;
+    this.hasFocus = false;
+    this.formSubmitController = new FormSubmitController(this);
+    this.control = this.closest("kemet-field");
+  }
+  firstUpdated() {
+    this.select = this.shadowRoot?.querySelector("select");
+    this.selectedOption = this.querySelector("[selected]");
+    this.value = this.selectedOption ? this.selectedOption.value : "";
+    emitEvent(this, "kemet-select-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  render() {
+    return html2`
+      <select
+        part="select"
+        id=${this.slug}
+        name=${this.name}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        ?multiple=${this.multiple}
+        @change=${this.handleChange}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+        @invalid=${this.handleInvalid}
+      >
+        ${this.makeOptions()}
+      </select>
+      ${this.makeIcon()}
+      <slot @slotchange=${() => this.makeOptions()}></slot>
+    `;
+  }
+  /**
+   * Generates the option elements
+   * @private
+   * @returns {TemplateResult} An option element
+   */
+  makeOptions() {
+    this.options = [];
+    this.optionElements = this.querySelectorAll("kemet-select-option");
+    this.optionElements.forEach((option) => {
+      this.options = this.options.concat({
+        label: option.label,
+        value: option.value,
+        disabled: option.disabled,
+        selected: option.selected
+      });
+    });
+    return this.options.map(
+      (option) => html2`<option part="option" value=${option.value} ?disabled=${option.disabled} ?selected=${option.selected}>
+        ${option.label}
+      </option>`
+    );
+  }
+  /**
+   * Generates a dropdown icon
+   * @private
+   */
+  makeIcon() {
+    if (this.icon || this.icon !== "") {
+      return html2`<kemet-icon name=${this.icon} size=${this.iconSize}></kemet-icon>`;
+    }
+    return null;
+  }
+  /**
+   * Handles when the input receives focus
+   * @private
+   */
+  handleFocus() {
+    this.hasFocus = true;
+    emitEvent(this, "kemet-select-focus", { focused: true, element: this });
+  }
+  /**
+   * Handles when the input loses focus
+   * @private
+   */
+  handleBlur() {
+    this.hasFocus = false;
+    emitEvent(this, "kemet-select-blur", { focused: false, element: this });
+    this.select.checkValidity();
+    if (!this.select.checkValidity()) {
+      this.invalid = true;
+      this.appearance = "error" /* Error */;
+      this.control.appearance = "error" /* Error */;
+      emitEvent(this, "kemet-select-appearance-change", {
+        status: "error" /* Error */,
+        validity: this.select.validity,
+        element: this
+      });
+    }
+  }
+  /**
+   * Handles when the input changes value
+   * @private
+   */
+  handleChange(event) {
+    this.value = this.select.value;
+    emitEvent(this, "kemet-select-change", {
+      appearance: this.appearance,
+      validity: this.select.validity,
+      element: this,
+      value: event.target.value
+    });
+    if (this.select.checkValidity()) {
+      this.invalid = false;
+      emitEvent(this, "kemet-select-appearancce-change", {
+        appearance: "neutral" /* Neutral */,
+        validity: this.select.validity,
+        element: this,
+        value: event.target.value
+      });
+    }
+  }
+  /**
+   * Handles when the input has an error
+   * @private
+   */
+  handleInvalid() {
+    this.invalid = true;
+    this.appearance = "error" /* Error */;
+    emitEvent(this, "kemet-select-appearance-change", {
+      appearance: "error" /* Error */,
+      validity: this.select.validity,
+      element: this
+    });
+  }
+  /**
+   * Checks the validity of the standard select
+   * @public
+   * @returns {boolean}
+   */
+  checkValidity() {
+    return this.select.checkValidity();
+  }
+};
+KemetSelect.styles = [styles_css_default2];
+__decorateClass([
+  property2({ type: String })
+], KemetSelect.prototype, "slug", 2);
+__decorateClass([
+  property2({ type: String })
+], KemetSelect.prototype, "name", 2);
+__decorateClass([
+  property2({ type: String })
+], KemetSelect.prototype, "value", 2);
+__decorateClass([
+  property2({ type: Array })
+], KemetSelect.prototype, "options", 2);
+__decorateClass([
+  property2({ type: String, reflect: true })
+], KemetSelect.prototype, "appearance", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], KemetSelect.prototype, "required", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], KemetSelect.prototype, "disabled", 2);
+__decorateClass([
+  property2({ type: Boolean })
+], KemetSelect.prototype, "multiple", 2);
+__decorateClass([
+  property2({ type: String })
+], KemetSelect.prototype, "icon", 2);
+__decorateClass([
+  property2({ type: Number, attribute: "icon-size" })
+], KemetSelect.prototype, "iconSize", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], KemetSelect.prototype, "filled", 2);
+__decorateClass([
+  property2({ reflect: true })
+], KemetSelect.prototype, "rounded", 2);
+__decorateClass([
+  property2({ type: String, reflect: true })
+], KemetSelect.prototype, "polarity", 2);
+__decorateClass([
+  property2({ type: String, reflect: true })
+], KemetSelect.prototype, "dom", 2);
+__decorateClass([
+  state2()
+], KemetSelect.prototype, "invalid", 2);
+__decorateClass([
+  state2()
+], KemetSelect.prototype, "control", 2);
+__decorateClass([
+  state2()
+], KemetSelect.prototype, "select", 2);
+__decorateClass([
+  state2()
+], KemetSelect.prototype, "selectedOption", 2);
+__decorateClass([
+  state2()
+], KemetSelect.prototype, "optionElements", 2);
+__decorateClass([
+  state2()
+], KemetSelect.prototype, "hasFocus", 2);
+KemetSelect = __decorateClass([
+  customElement2("kemet-select")
+], KemetSelect);
+export {
+  KemetSelect as default
+};
+//# sourceMappingURL=index.js.map