@golemui/gui-lit 0.12.2 → 0.13.0

package/button.element-ATNRRDN3.js

@@ -0,0 +1,121 @@
+import { ActionWidgetAdapter as f, formContext as g, actionContext as v } from "@golemui/lit";
+import { consume as $, provide as y } from "@lit/context";
+import { LitElement as b, html as u, nothing as c } from "lit";
+import { property as p, customElement as m } from "lit/decorators.js";
+import "rxjs";
+import "@golemui/gui-shared";
+import { classMap as P } from "lit/directives/class-map.js";
+var C = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (i, t, s, o) => {
+  for (var e = o > 1 ? void 0 : o ? x(t, s) : t, a = i.length - 1, r; a >= 0; a--)
+    (r = i[a]) && (e = (o ? r(t, s, e) : r(e)) || e);
+  return o && e && C(t, s, e), e;
+};
+let n = class extends b {
+  constructor() {
+    super(...arguments), this.uid = void 0, this.label = void 0, this.disabled = !1, this.icon = void 0, this.variant = "filled", this.iconPosition = "left";
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-field");
+  }
+  render() {
+    const i = this.icon, t = this.iconPosition || "left", s = {
+      "gui-button-with-icon": !!i,
+      [`gui-button-icon-${t}`]: !0,
+      "gui-button--outlined": this.variant === "outlined",
+      "gui-button--link": this.variant === "link"
+    }, o = i ? u`<span class="gui-widget-icon gui-button-icon ${i}" data-icon=${i}></span>` : c;
+    return u`
+      <div class="gui-widget">
+        <button
+          type="button"
+          tabindex="0"
+          id=${this.uid}
+          class=${P(s)}
+          data-cy=${`${this.uid}_button`}
+          ?disabled=${this.disabled}
+        >
+          ${t === "left" ? o : c}
+          ${this.label ? u`<span>${this.label}</span>` : c}
+          ${t === "right" ? o : c}
+        </button>
+      </div>
+    `;
+  }
+};
+l([
+  p({ type: String })
+], n.prototype, "uid", 2);
+l([
+  p({ type: String })
+], n.prototype, "label", 2);
+l([
+  p({ type: Boolean })
+], n.prototype, "disabled", 2);
+l([
+  p({ type: String })
+], n.prototype, "icon", 2);
+l([
+  p({ type: String })
+], n.prototype, "variant", 2);
+l([
+  p({ type: String })
+], n.prototype, "iconPosition", 2);
+n = l([
+  m("gui-button")
+], n);
+typeof customElements < "u" && !customElements.get("gui-button") && customElements.define("gui-button", n);
+var _ = Object.defineProperty, D = Object.getOwnPropertyDescriptor, h = (i, t, s, o) => {
+  for (var e = o > 1 ? void 0 : o ? D(t, s) : t, a = i.length - 1, r; a >= 0; a--)
+    (r = i[a]) && (e = (o ? r(t, s, e) : r(e)) || e);
+  return o && e && _(t, s, e), e;
+};
+let d = class extends b {
+  constructor() {
+    super(...arguments), this.adapter = new f(), this.subscriptions = [];
+  }
+  createRenderRoot() {
+    return this;
+  }
+  updated(i) {
+    super.updated(i);
+    const t = this.adapter.templateData.size;
+    t ? this.style.flex = String(t) : this.style.removeProperty("flex");
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-button", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
+      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
+    );
+  }
+  render() {
+    return u`
+      <gui-button
+        .uid=${this.widget.uid}
+        .label=${this.adapter.templateData.label}
+        ?disabled=${this.adapter.templateData.disabled === !0}
+        .variant=${this.adapter.templateData.variant}
+        .icon=${this.adapter.templateData.icon}
+        .iconPosition=${this.adapter.templateData.iconPosition}
+        @click=${() => this.adapter.click()}
+      ></gui-button>
+    `;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((i) => i.unsubscribe());
+  }
+};
+h([
+  $({ context: g }),
+  p({ attribute: !1 })
+], d.prototype, "formContext", 2);
+h([
+  y({ context: v })
+], d.prototype, "adapter", 2);
+d = h([
+  m("gui-button-interactive")
+], d);
+export {
+  d as ButtonElement
+};

package/calendar-P9DzVryu.js

@@ -0,0 +1,96 @@
+import { html as D } from "lit";
+import { property as m, customElement as f } from "lit/decorators.js";
+import { classMap as p } from "lit/directives/class-map.js";
+import { i as h, b as g, a as v, g as M, t as w } from "./date-CG1562vW.js";
+import { A as C } from "./abstract-calendar-YDgwwbqe.js";
+var _ = Object.defineProperty, y = Object.getOwnPropertyDescriptor, d = (e, t, n, r) => {
+  for (var i = r > 1 ? void 0 : r ? y(t, n) : t, s = e.length - 1, a; s >= 0; s--)
+    (a = e[s]) && (i = (r ? a(t, n, i) : a(i)) || i);
+  return r && i && _(t, n, i), i;
+};
+let l = class extends C {
+  constructor() {
+    super(...arguments), this.value = void 0;
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-field");
+  }
+  willUpdate(e) {
+    if (e.has("value") && this.value) {
+      const t = new Date(this.value);
+      !isNaN(t.getTime()) && !h(t, this._currentDate, this.numberOfMonths ?? 1) && (this._currentDate = t);
+    }
+  }
+  renderDay(e) {
+    const t = {
+      "gui-calendar__day-button": !0,
+      today: e.isToday,
+      selected: e.isSelected,
+      disabled: e.isDisabled,
+      "other-month": !e.isCurrentMonth
+    };
+    return D`
+      <button
+        type="button"
+        role="gridcell"
+        class=${p(t)}
+        tabindex=${e.isFocusable ? 0 : -1}
+        ?disabled=${!e.isCurrentMonth || e.isDisabled}
+        data-date=${e.date.toISOString()}
+        @click=${() => this.selectDate(e)}
+        @keydown=${(n) => this.handleKeydown(n, e)}
+        aria-selected=${e.isSelected}
+      >
+        ${e.dayLabel}
+      </button>
+    `;
+  }
+  getDaysInMonth(e) {
+    const t = new Date(this._currentDate);
+    t.setDate(1), t.setMonth(t.getMonth() + e);
+    const n = this.generateDateGrid(e), r = t.getMonth();
+    let i = n.map((s) => {
+      const a = s.getMonth() === r, o = this.isDisabled(s), c = !!this.value && g(s, new Date(this.value)), u = v(s), b = (c || u) && a;
+      return {
+        date: s,
+        dayLabel: M(this.localeId, s),
+        isCurrentMonth: a,
+        isToday: u,
+        isDisabled: o,
+        isSelected: c,
+        isFocusable: b
+      };
+    });
+    for (let s = 0; s < 2; s++)
+      i.slice(-7).every((o) => !o.isCurrentMonth) && (i = i.slice(0, -7));
+    if (e === 0 && !i.some((s) => s.isFocusable)) {
+      const s = this.value ? new Date(this.value) : /* @__PURE__ */ new Date();
+      if (!h(s, this._currentDate, this.numberOfMonths ?? 1)) {
+        const a = i.find((o) => o.isCurrentMonth && !o.isDisabled);
+        a && (a.isFocusable = !0);
+      }
+    }
+    return i;
+  }
+  selectDate(e) {
+    if (!e.isCurrentMonth || e.isDisabled || this.disabled || this.readOnly) return;
+    const t = w(e.date);
+    this.value = t, this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+};
+d([
+  m({ type: String })
+], l.prototype, "value", 2);
+l = d([
+  f("gui-calendar")
+], l);
+typeof customElements < "u" && !customElements.get("gui-calendar") && customElements.define("gui-calendar", l);

package/{calendar.element-C1rLK7aY.js → calendar.element-O2of7VBr.js}

@@ -1,15 +1,18 @@
-import * as d from "@golemui/lit";
-import { consume as o, provide as h } from "@lit/context";
-import { LitElement as m, html as u } from "lit";
-import { property as c, customElement as D } from "lit/decorators.js";
-var b = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, l = (e, t, i, r) => {
-  for (var a = r > 1 ? void 0 : r ? $(t, i) : t, p = e.length - 1, n; p >= 0; p--)
-    (n = e[p]) && (a = (r ? n(t, i, a) : n(a)) || a);
-  return r && a && b(t, i, a), a;
+import { InputWidgetAdapter as o, formContext as l, inputContext as h } from "@golemui/lit";
+import "@golemui/gui-shared";
+import "./calendar-P9DzVryu.js";
+import { consume as m, provide as u } from "@lit/context";
+import { LitElement as c, html as D } from "lit";
+import { property as b, customElement as $ } from "lit/decorators.js";
+import "rxjs";
+var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, d = (e, t, s, r) => {
+  for (var a = r > 1 ? void 0 : r ? g(t, s) : t, p = e.length - 1, n; p >= 0; p--)
+    (n = e[p]) && (a = (r ? n(t, s, a) : n(a)) || a);
+  return r && a && f(t, s, a), a;
 };
-let s = class extends m {
+let i = class extends c {
   constructor() {
-    super(...arguments), this.adapter = new d.InputWidgetAdapter(), this.subscriptions = [];
+    super(...arguments), this.adapter = new o(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
@@ -25,7 +28,7 @@ let s = class extends m {
     );
   }
   render() {
-    return super.render(), u`
+    return super.render(), D`
       <gui-calendar
         .uid=${this.widget.uid}
         .label=${this.adapter.templateData.label}
@@ -61,16 +64,16 @@ let s = class extends m {
     super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
   }
 };
-l([
-  o({ context: d.formContext }),
-  c({ attribute: !1 })
-], s.prototype, "formContext", 2);
-l([
-  h({ context: d.inputContext })
-], s.prototype, "adapter", 2);
-s = l([
-  D("gui-calendar-input")
-], s);
+d([
+  m({ context: l }),
+  b({ attribute: !1 })
+], i.prototype, "formContext", 2);
+d([
+  u({ context: h })
+], i.prototype, "adapter", 2);
+i = d([
+  $("gui-calendar-input")
+], i);
 export {
-  s as CalendarElement
+  i as CalendarElement
 };

package/checkbox.element-DMmer4Jw.js

@@ -0,0 +1,199 @@
+import { InputWidgetAdapter as g, formContext as m, inputContext as y } from "@golemui/lit";
+import "@golemui/gui-shared";
+import { G as v, c as f } from "./templates-Dk1jxLwS.js";
+import { LitElement as u, nothing as $, html as p } from "lit";
+import { property as r, customElement as b } from "lit/decorators.js";
+import { consume as x, provide as C } from "@lit/context";
+import "rxjs";
+var k = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, s = (e, t, l, o) => {
+  for (var i = o > 1 ? void 0 : o ? _(t, l) : t, d = e.length - 1, h; d >= 0; d--)
+    (h = e[d]) && (i = (o ? h(t, l, i) : h(i)) || i);
+  return o && i && k(t, l, i), i;
+};
+let a = class extends u {
+  constructor() {
+    super(...arguments), this.uid = void 0, this.label = void 0, this.localeId = "en", this.errors = [], this.touched = void 0, this.required = void 0, this.disabled = !1, this.readOnly = !1, this.value = void 0, this.hint = void 0, this.checkboxPosition = "left", this.ariaController = new v(this, {
+      getTargets: () => this.querySelectorAll(`input[id="${this.uid}"]`),
+      getState: () => ({
+        uid: this.uid,
+        templateData: {
+          hint: this.hint,
+          errors: this.errors,
+          touched: this.touched,
+          // Checkboxes can't have aria-readonly
+          readonly: !1,
+          disabled: !1
+        }
+      })
+    });
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-field");
+  }
+  render() {
+    super.render();
+    const e = {
+      uid: this.uid,
+      label: this.label,
+      hint: this.hint,
+      errors: this.errors,
+      touched: this.touched,
+      required: this.required,
+      disabled: this.disabled,
+      readonly: this.readOnly,
+      value: this.value,
+      checkboxPosition: this.checkboxPosition
+    };
+    return e.checkboxPosition === "right" ? this.classList.add("gui-checkbox--right") : this.classList.contains("gui-checkbox--right") && this.classList.remove("gui-checkbox--right"), p`
+      <label
+        class="gui-label"
+        for=${this.uid}
+        data-cy=${`${this.uid}_label`}
+        id=${`${this.uid}_label`}
+      >
+        <div class="gui-widget gui-widget--horizontal">
+          <input
+            type="checkbox"
+            tabindex="0"
+            id=${this.uid}
+            data-cy=${`${this.uid}_checkbox`}
+            ?checked=${this.value}
+            ?required=${this.required}
+            ?disabled=${this.disabled || this.readOnly}
+            @change=${this.valueChanged}
+            @blur=${this.onBlur}
+          />
+        </div>
+
+        <span class="gui-label__container">
+          ${e.label + (e.required ? " *" : "")}
+        </span>
+      </label>
+
+      <div class="gui-widget-hint" id=${`${e.uid}_hint`}>
+        ${e.hint ?? $} ${f(this.uid, e)}
+      </div>
+    `;
+  }
+  valueChanged(e) {
+    if (e.stopPropagation(), !this.readOnly) {
+      const t = e.target;
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { value: t.checked },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }
+  }
+  onBlur() {
+    this.dispatchEvent(
+      new CustomEvent("blur", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+};
+s([
+  r({ type: String })
+], a.prototype, "uid", 2);
+s([
+  r({ type: String })
+], a.prototype, "label", 2);
+s([
+  r({ type: String, attribute: "locale-id" })
+], a.prototype, "localeId", 2);
+s([
+  r({ type: Array })
+], a.prototype, "errors", 2);
+s([
+  r({ type: Boolean })
+], a.prototype, "touched", 2);
+s([
+  r({ type: Boolean })
+], a.prototype, "required", 2);
+s([
+  r({ type: Boolean })
+], a.prototype, "disabled", 2);
+s([
+  r({ type: Boolean, attribute: "readonly" })
+], a.prototype, "readOnly", 2);
+s([
+  r({ type: String })
+], a.prototype, "value", 2);
+s([
+  r({ type: String })
+], a.prototype, "hint", 2);
+s([
+  r({ type: String })
+], a.prototype, "checkboxPosition", 2);
+a = s([
+  b("gui-checkbox")
+], a);
+typeof customElements < "u" && !customElements.get("gui-checkbox") && customElements.define("gui-checkbox", a);
+var D = Object.defineProperty, P = Object.getOwnPropertyDescriptor, c = (e, t, l, o) => {
+  for (var i = o > 1 ? void 0 : o ? P(t, l) : t, d = e.length - 1, h; d >= 0; d--)
+    (h = e[d]) && (i = (o ? h(t, l, i) : h(i)) || i);
+  return o && i && D(t, l, i), i;
+};
+let n = class extends u {
+  constructor() {
+    super(...arguments), this.adapter = new g(), this.subscriptions = [];
+  }
+  createRenderRoot() {
+    return this;
+  }
+  updated(e) {
+    super.updated(e);
+    const t = this.adapter.templateData.size;
+    t ? this.style.flex = String(t) : this.style.removeProperty("flex");
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-checkbox", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
+      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
+    );
+  }
+  render() {
+    return super.render(), p`
+      <gui-checkbox
+        .uid=${this.widget.uid}
+        .label=${this.adapter.templateData.label}
+        .errors=${this.adapter.templateData.errors}
+        ?touched=${this.adapter.templateData.touched}
+        ?required=${this.adapter.templateData.validator?.required}
+        ?disabled=${this.adapter.templateData.disabled}
+        ?readonly=${this.adapter.templateData.readonly}
+        .value=${this.adapter.templateData.value}
+        .hint=${this.adapter.templateData.hint}
+        .checkboxPosition=${this.adapter.templateData.checkboxPosition}
+        @change=${this.valueChanged}
+        @blur=${() => this.adapter.onBlur()}
+      ></gui-checkbox>
+    `;
+  }
+  valueChanged(e) {
+    const t = e.detail.value;
+    this.adapter.valueChanged(t);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((e) => e.unsubscribe());
+  }
+};
+c([
+  x({ context: m }),
+  r({ attribute: !1 })
+], n.prototype, "formContext", 2);
+c([
+  C({ context: y })
+], n.prototype, "adapter", 2);
+n = c([
+  b("gui-checkbox-input")
+], n);
+export {
+  n as CheckboxElement
+};