@golemui/gui-lit 1.0.2 → 1.1.0

package/{select.element-jcDF1h-g.js → select.element-C0V-Bv3L.js}

@@ -1,20 +1,20 @@
-import { InputWidgetAdapter as g, formContext as b, inputContext as y } from "@golemui/lit";
+import { InputWidgetAdapter as m, formContext as b, inputContext as y } from "@golemui/lit";
 import { LitElement as v, html as n, nothing as u } from "lit";
 import { repeat as f } from "lit-html/directives/repeat.js";
-import { property as s, customElement as m } from "lit/decorators.js";
+import { property as i, customElement as g } from "lit/decorators.js";
 import { classMap as $ } from "lit/directives/class-map.js";
-import { G as C, a as D, b as w, c as E } from "./templates-Dk1jxLwS.js";
-import { u as F, i as S } from "./one-of-C0ur6b_n.js";
-import { consume as x, provide as O } from "@lit/context";
+import { G as C, a as D, b as w, c as O } from "./templates-Dk1jxLwS.js";
+import { u as E, i as S } from "./one-of-C0ur6b_n.js";
+import { consume as F, provide as x } from "@lit/context";
 import "rxjs";
-var _ = Object.defineProperty, q = Object.getOwnPropertyDescriptor, l = (t, e, r, i) => {
-  for (var o = i > 1 ? void 0 : i ? q(e, r) : e, d = t.length - 1, p; d >= 0; d--)
-    (p = t[d]) && (o = (i ? p(e, r, o) : p(o)) || o);
-  return i && o && _(e, r, o), o;
+var _ = Object.defineProperty, M = Object.getOwnPropertyDescriptor, s = (t, a, r, l) => {
+  for (var o = l > 1 ? void 0 : l ? M(a, r) : a, p = t.length - 1, d; p >= 0; p--)
+    (d = t[p]) && (o = (l ? d(a, r, o) : d(o)) || o);
+  return l && o && _(a, r, o), o;
 };
-let a = class extends v {
+let e = class extends v {
   constructor() {
-    super(...arguments), this.uid = void 0, this.label = void 0, this.localeId = "en", this.errors = [], this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.value = void 0, this.hint = void 0, this.icon = void 0, this.autocomplete = void 0, this.options = [], this.placeholder = void 0, this.labelField = void 0, this.valueField = void 0, this.optionsLoading = !1, this.hasMatchingValue = !1, this.ariaController = new C(this, {
+    super(...arguments), this.uid = void 0, this.label = void 0, this.localeId = "en", this.errors = [], this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.value = void 0, this.hint = void 0, this.icon = void 0, this.autocomplete = void 0, this.options = [], this.placeholder = void 0, this.invalidOptionMessage = void 0, this.labelField = void 0, this.valueField = void 0, this.optionsLoading = !1, this.hasMatchingValue = !1, this.ariaController = new C(this, {
       getTargets: () => this.querySelectorAll(`select[id="${this.uid}"]`),
       getState: () => ({
         uid: this.uid,
@@ -52,23 +52,23 @@ let a = class extends v {
       placeholder: this.placeholder,
       labelField: this.labelField,
       valueField: this.valueField
-    }, e = D("select", t);
-    this.options = F(this.options, {
+    }, a = D("select", t);
+    this.options = E(this.options, {
       labelField: this.labelField,
       valueField: this.valueField
-    }), this.hasMatchingValue = this.options?.length ? this.options.find(({ value: i }) => i === this.value) !== void 0 : !1;
+    }), this.hasMatchingValue = this.options?.length ? this.options.find(({ value: l }) => l === this.value) !== void 0 : !1;
     const r = this.optionsLoading ? n`<span>Loading...</span>` : n`
           <option value="" disabled selected=${this.hasMatchingValue ? u : ""}>
             ${this.placeholder ?? "Select an option"}
           </option>
           ${f(
       this.options || [],
-      (i) => i?.value,
-      (i) => n`<option
-                value=${i.value}
-                selected=${this.hasMatchingValue && i.value === this.value ? "" : u}
+      (l) => l?.value,
+      (l) => n`<option
+                value=${l.value}
+                selected=${this.hasMatchingValue && l.value === this.value ? "" : u}
               >
-                ${i.label}
+                ${l.label}
               </option>`
     )}
         `;
@@ -80,7 +80,7 @@ let a = class extends v {
           id=${this.uid}
           tabindex="0"
           data-cy=${`${this.uid}_select`}
-          class=${$({ "gui-widget-input": !0, ...e.widgetClasses })}
+          class=${$({ "gui-widget-input": !0, ...a.widgetClasses })}
           ?required=${t.required}
           ?disabled=${t.disabled || t.readonly}
           autocomplete=${this.autocomplete || u}
@@ -95,17 +95,17 @@ let a = class extends v {
               d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"
             ></path></svg
         ></span>
-        ${e.html}
+        ${a.html}
       </div>
 
-      ${E(this.uid, t)}
+      ${O(this.uid, t)}
     `;
   }
   updated(t) {
     t.has("value") && !this.hasMatchingValue && this.value && this.dispatchEvent(
       new CustomEvent("inputError", {
         detail: {
-          message: `Invalid selection: '${this.value}' is not a valid option.`
+          message: (this.invalidOptionMessage ?? "Invalid selection: '{value}' is not a valid option.").replace("{value}", String(this.value))
         },
         bubbles: !0
       })
@@ -113,10 +113,10 @@ let a = class extends v {
   }
   valueChanged(t) {
     if (t.stopPropagation(), !this.readOnly) {
-      const e = t.target;
+      const a = t.target;
       this.dispatchEvent(
         new CustomEvent("change", {
-          detail: { value: S(e.value, this.options) },
+          detail: { value: S(a.value, this.options) },
           bubbles: !0,
           composed: !0
         })
@@ -132,74 +132,77 @@ let a = class extends v {
     );
   }
 };
-l([
-  s({ type: String })
-], a.prototype, "uid", 2);
-l([
-  s({ type: String })
-], a.prototype, "label", 2);
-l([
-  s({ type: String, attribute: "locale-id" })
-], a.prototype, "localeId", 2);
-l([
-  s({ type: Array })
-], a.prototype, "errors", 2);
-l([
-  s({ type: Boolean })
-], a.prototype, "touched", 2);
-l([
-  s({ type: Boolean })
-], a.prototype, "required", 2);
-l([
-  s({ type: Boolean })
-], a.prototype, "disabled", 2);
-l([
-  s({ type: Boolean, attribute: "readonly" })
-], a.prototype, "readOnly", 2);
-l([
-  s({ type: String })
-], a.prototype, "value", 2);
-l([
-  s({ type: String })
-], a.prototype, "hint", 2);
-l([
-  s({ type: String })
-], a.prototype, "icon", 2);
-l([
-  s({ type: String })
-], a.prototype, "autocomplete", 2);
-l([
-  s({ type: Array })
-], a.prototype, "options", 2);
-l([
-  s({ type: String })
-], a.prototype, "placeholder", 2);
-l([
-  s({ type: String })
-], a.prototype, "labelField", 2);
-l([
-  s({ type: String })
-], a.prototype, "valueField", 2);
-a = l([
-  m("gui-select")
-], a);
-typeof customElements < "u" && !customElements.get("gui-select") && customElements.define("gui-select", a);
-var I = Object.defineProperty, P = Object.getOwnPropertyDescriptor, c = (t, e, r, i) => {
-  for (var o = i > 1 ? void 0 : i ? P(e, r) : e, d = t.length - 1, p; d >= 0; d--)
-    (p = t[d]) && (o = (i ? p(e, r, o) : p(o)) || o);
-  return i && o && I(e, r, o), o;
+s([
+  i({ type: String })
+], e.prototype, "uid", 2);
+s([
+  i({ type: String })
+], e.prototype, "label", 2);
+s([
+  i({ type: String, attribute: "locale-id" })
+], e.prototype, "localeId", 2);
+s([
+  i({ type: Array })
+], e.prototype, "errors", 2);
+s([
+  i({ type: Boolean })
+], e.prototype, "touched", 2);
+s([
+  i({ type: Boolean })
+], e.prototype, "required", 2);
+s([
+  i({ type: Boolean })
+], e.prototype, "disabled", 2);
+s([
+  i({ type: Boolean, attribute: "readonly" })
+], e.prototype, "readOnly", 2);
+s([
+  i({ type: String })
+], e.prototype, "value", 2);
+s([
+  i({ type: String })
+], e.prototype, "hint", 2);
+s([
+  i({ type: String })
+], e.prototype, "icon", 2);
+s([
+  i({ type: String })
+], e.prototype, "autocomplete", 2);
+s([
+  i({ type: Array })
+], e.prototype, "options", 2);
+s([
+  i({ type: String })
+], e.prototype, "placeholder", 2);
+s([
+  i({ type: String, attribute: "invalid-option-message" })
+], e.prototype, "invalidOptionMessage", 2);
+s([
+  i({ type: String })
+], e.prototype, "labelField", 2);
+s([
+  i({ type: String })
+], e.prototype, "valueField", 2);
+e = s([
+  g("gui-select")
+], e);
+typeof customElements < "u" && !customElements.get("gui-select") && customElements.define("gui-select", e);
+var q = Object.defineProperty, I = Object.getOwnPropertyDescriptor, c = (t, a, r, l) => {
+  for (var o = l > 1 ? void 0 : l ? I(a, r) : a, p = t.length - 1, d; p >= 0; p--)
+    (d = t[p]) && (o = (l ? d(a, r, o) : d(o)) || o);
+  return l && o && q(a, r, o), o;
 };
 let h = class extends v {
   constructor() {
-    super(...arguments), this.adapter = new g(), this.subscriptions = [];
+    super(...arguments), this.adapter = new m(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
   }
   updated(t) {
     super.updated(t);
-    const e = this.adapter.templateData.size;
-    e ? this.style.flex = String(e) : this.style.removeProperty("flex");
+    const a = this.adapter.templateData.size;
+    a ? this.style.flex = String(a) : this.style.removeProperty("flex");
   }
   connectedCallback() {
     super.connectedCallback(), this.classList.add("gui-select", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
@@ -224,6 +227,7 @@ let h = class extends v {
         .options=${this.adapter.templateData.options}
         .labelField=${this.adapter.templateData.labelField}
         .valueField=${this.adapter.templateData.valueField}
+        .invalidOptionMessage=${this.adapter.templateData.invalidOptionMessage}
         @change=${this.valueChanged}
         @inputError=${this.onInputError}
         @blur=${() => this.adapter.onBlur()}
@@ -231,8 +235,8 @@ let h = class extends v {
     `;
   }
   valueChanged(t) {
-    const e = t.detail.value;
-    this.adapter.valueChanged(e);
+    const a = t.detail.value;
+    this.adapter.valueChanged(a);
   }
   onInputError(t) {
     this.adapter.injectValidationIssues([t.detail.message]);
@@ -242,14 +246,14 @@ let h = class extends v {
   }
 };
 c([
-  x({ context: b }),
-  s({ attribute: !1 })
+  F({ context: b }),
+  i({ attribute: !1 })
 ], h.prototype, "formContext", 2);
 c([
-  O({ context: y })
+  x({ context: y })
 ], h.prototype, "adapter", 2);
 h = c([
-  m("gui-select-input")
+  g("gui-select-input")
 ], h);
 export {
   h as SelectElement

package/{tags.element-CX3vQL8L.js → tags.element-DvwEpxpK.js}

@@ -3,7 +3,7 @@ import { LitElement as y, nothing as c, html as m } from "lit";
 import { property as o, customElement as v } from "lit/decorators.js";
 import { classMap as f } from "lit/directives/class-map.js";
 import { G as A, b as P, c as S } from "./templates-Dk1jxLwS.js";
-import "./pills-B66qz_KX.js";
+import "./pills-Be1UrLgq.js";
 import { styleMap as _ } from "lit-html/directives/style-map.js";
 import { consume as E, provide as O } from "@lit/context";
 import "rxjs";

package/time-input-BOhlBGJZ.js

@@ -0,0 +1,181 @@
+import { LitElement as d, nothing as h, html as p } from "lit";
+import { property as s, customElement as m } from "lit/decorators.js";
+import { classMap as c } from "lit/directives/class-map.js";
+import { G as g, b as y, c as v } from "./templates-Dk1jxLwS.js";
+import { G as b, g as f, u as E, r as D, v as T, w } from "./part-templates-Db871PS3.js";
+var C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, e = (i, o, l, r) => {
+  for (var a = r > 1 ? void 0 : r ? S(o, l) : o, u = i.length - 1, n; u >= 0; u--)
+    (n = i[u]) && (a = (r ? n(o, l, a) : n(a)) || a);
+  return r && a && C(o, l, a), a;
+};
+let t = class extends d {
+  constructor() {
+    super(...arguments), this.uid = void 0, this.label = void 0, this.localeId = void 0, this.errors = [], this.showErrors = !0, this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.icon = "", this.hint = void 0, this.value = void 0, this.hourFormat = void 0, this.minuteStep = 1, this.minTime = void 0, this.maxTime = void 0, this.minTimeMessage = void 0, this.maxTimeMessage = void 0, this.inputBlockClass = "gui-time-input", this.groups = ["default"], this._parts = new b(this, {
+      blockClass: this.inputBlockClass,
+      groups: this.groups,
+      getDescriptor: (i) => this.getPartDescriptor(i),
+      commitGroup: (i) => this.validateAndEmit(i),
+      isReadonly: () => !!this.readOnly,
+      isDisabled: () => !!this.disabled,
+      onEmptyPartBlur: () => this.dispatchEvent(new CustomEvent("change", { detail: { value: null }, bubbles: !0 })),
+      getHourFormat: () => this.timeLocaleData.effectiveHourFormat,
+      getDayPeriodLabels: () => this.timeLocaleData.dayPeriodLabels
+    }), this.ariaController = new g(this, {
+      getTargets: () => this.querySelectorAll(`.${this.inputBlockClass}`),
+      getState: () => ({
+        uid: this.uid,
+        templateData: {
+          hint: this.hint,
+          errors: this.errors,
+          readonly: this.readOnly,
+          disabled: this.disabled,
+          touched: this.touched
+        }
+      })
+    });
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-field");
+  }
+  get timeLocaleData() {
+    return f(this.localeId, this.hourFormat, this.minuteStep);
+  }
+  getPartDescriptor(i) {
+    return this.timeLocaleData.descriptors[i];
+  }
+  willUpdate(i) {
+    (!this.hasUpdated || i.has("value") || i.has("hourFormat") || i.has("localeId")) && this._parts.setGroupFromISO(
+      "default",
+      this.value ?? "",
+      "time",
+      this.timeLocaleData.effectiveHourFormat
+    );
+  }
+  render() {
+    const i = {
+      uid: this.uid,
+      label: this.label,
+      errors: this.errors,
+      touched: this.touched,
+      required: this.required,
+      disabled: this.disabled,
+      readonly: this.readOnly,
+      value: this.value,
+      icon: this.icon,
+      hint: this.hint
+    }, o = {
+      blockClass: this.inputBlockClass,
+      groups: this.groups,
+      formatParts: E(this.localeId, this.timeLocaleData.effectiveHourFormat),
+      getDescriptor: (r) => this.getPartDescriptor(r),
+      getDisplayValue: this._parts.getPartDisplay,
+      required: this.required,
+      disabled: this.disabled,
+      partsReadonly: !!this.readOnly
+    }, l = {
+      "gui-widget-icon": !0,
+      [this.icon]: !0
+    };
+    return p`
+      ${this.label ? y(this.uid, i) : h}
+
+      <div class="gui-widget">
+        <div
+          class="gui-widget-input gui-parts gui-parts-ring gui-time-input ${this.icon ? "gui-calendar--icon" : ""}"
+          role="group"
+        >
+          ${D("default", o, this._parts)}
+        </div>
+        ${this.icon ? p`<span class=${c(l)} data-icon=${this.icon}></span>` : h}
+      </div>
+
+      ${this.showErrors && this.errors?.length ? v(this.uid, i) : h}
+    `;
+  }
+  validateAndEmit(i) {
+    const { effectiveHourFormat: o, descriptors: l } = this.timeLocaleData, { result: r, writeBacks: a } = T(this._parts.values[i] ?? {}, {
+      hourFormat: o,
+      descriptors: l
+    });
+    if (this._parts.applyWriteBacks(i, a), r.kind !== "valid") {
+      this.requestUpdate();
+      return;
+    }
+    const u = w(r.iso, {
+      minTime: this.minTime,
+      maxTime: this.maxTime,
+      minTimeMessage: this.minTimeMessage,
+      maxTimeMessage: this.maxTimeMessage
+    });
+    if (u) {
+      this.dispatchEvent(
+        new CustomEvent("change", { detail: { value: r.iso }, bubbles: !0 })
+      ), this.dispatchEvent(
+        new CustomEvent("inputError", { detail: { message: u }, bubbles: !0 })
+      ), this.requestUpdate();
+      return;
+    }
+    this.value = r.iso, this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value }, bubbles: !0 })), this.requestUpdate();
+  }
+};
+e([
+  s({ type: String })
+], t.prototype, "uid", 2);
+e([
+  s({ type: String })
+], t.prototype, "label", 2);
+e([
+  s({ type: String, attribute: "locale-id" })
+], t.prototype, "localeId", 2);
+e([
+  s({ type: Array })
+], t.prototype, "errors", 2);
+e([
+  s({ type: Boolean })
+], t.prototype, "showErrors", 2);
+e([
+  s({ type: Boolean })
+], t.prototype, "touched", 2);
+e([
+  s({ type: Boolean })
+], t.prototype, "required", 2);
+e([
+  s({ type: Boolean })
+], t.prototype, "disabled", 2);
+e([
+  s({ type: Boolean, attribute: "readonly" })
+], t.prototype, "readOnly", 2);
+e([
+  s({ type: String })
+], t.prototype, "icon", 2);
+e([
+  s({ type: String })
+], t.prototype, "hint", 2);
+e([
+  s({ type: String })
+], t.prototype, "value", 2);
+e([
+  s({ type: String, attribute: "hour-format" })
+], t.prototype, "hourFormat", 2);
+e([
+  s({ type: Number, attribute: "minute-step" })
+], t.prototype, "minuteStep", 2);
+e([
+  s({ type: String, attribute: "min-time" })
+], t.prototype, "minTime", 2);
+e([
+  s({ type: String, attribute: "max-time" })
+], t.prototype, "maxTime", 2);
+e([
+  s({ type: String, attribute: "min-time-message" })
+], t.prototype, "minTimeMessage", 2);
+e([
+  s({ type: String, attribute: "max-time-message" })
+], t.prototype, "maxTimeMessage", 2);
+t = e([
+  m("gui-time")
+], t);
+typeof customElements < "u" && !customElements.get("gui-time") && customElements.define("gui-time", t);