scb-wc-test 0.1.106 → 0.1.108

package/scb-segmented-button/scb-segmented-button.js

@@ -1,16 +1,16 @@
-import { css as p, LitElement as f, html as v } from "lit";
-import { property as o, customElement as b } from "lit/decorators.js";
+import { css as p, LitElement as f, html as b } from "lit";
+import { property as l, customElement as v } from "lit/decorators.js";
 import "./scb-segmented-item.js";
-var g = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, m = (t) => {
+var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, m = (t) => {
   throw TypeError(t);
-}, l = (t, e, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? _(e, s) : e, a = t.length - 1, d; a >= 0; a--)
-    (d = t[a]) && (r = (i ? d(e, s, r) : d(r)) || r);
+}, o = (t, e, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? y(e, s) : e, n = t.length - 1, d; n >= 0; n--)
+    (d = t[n]) && (r = (i ? d(e, s, r) : d(r)) || r);
   return i && r && g(e, s, r), r;
-}, y = (t, e, s) => e.has(t) || m("Cannot " + s), S = (t, e, s) => e.has(t) ? m("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), c = (t, e, s) => (y(t, e, "access private method"), s), u, h;
-let n = class extends f {
+}, _ = (t, e, s) => e.has(t) || m("Cannot " + s), S = (t, e, s) => e.has(t) ? m("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), h = (t, e, s) => (_(t, e, "access private method"), s), u, c;
+let a = class extends f {
   constructor() {
-    super(), S(this, u), this._internals = null, this.variant = "single-select", this.value = "", this.values = [], this.disabled = !1, this.name = "", this.spacing = "", this._form = null, this._formResetHandler = null, this._initialValue = "", this._initialValues = [], "attachInternals" in this && (this._internals = this.attachInternals());
+    super(), S(this, u), this._internals = null, this.variant = "single-select", this.value = "", this.values = [], this.disabled = !1, this.name = "", this.spacing = "", this.spacingTop = "", this.spacingBottom = "", this._form = null, this._formResetHandler = null, this._initialValue = "", this._initialValues = [], "attachInternals" in this && (this._internals = this.attachInternals());
   }
   connectedCallback() {
     super.connectedCallback(), this._form = this.closest("form"), this._form && (this._formResetHandler = () => {
@@ -48,10 +48,10 @@ let n = class extends f {
           r && !r.hasAttribute("disabled") && !this.disabled && (this.onSlotClick(s), s.preventDefault());
         }
       }
-    })), this._syncFormValue(), c(this, u, h).call(this);
+    })), this._syncFormValue(), h(this, u, c).call(this);
   }
   updated(t) {
-    super.updated(t), this.updateSegments(), (t.has("value") || t.has("values") || t.has("disabled") || t.has("variant") || t.has("name")) && this._syncFormValue(), t.has("spacing") && c(this, u, h).call(this);
+    super.updated(t), this.updateSegments(), (t.has("value") || t.has("values") || t.has("disabled") || t.has("variant") || t.has("name")) && this._syncFormValue(), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && h(this, u, c).call(this);
   }
   onSlotClick(t) {
     let e = t.target;
@@ -59,7 +59,7 @@ let n = class extends f {
     const s = e.closest("scb-segmented-item");
     if (!s || this.disabled || s.hasAttribute("disabled")) return;
     const i = s.getAttribute("value") || "";
-    i && (this.variant === "multi-select" ? (this.values.indexOf(i) === -1 ? this.values = [...this.values, i] : this.values = this.values.filter((a) => a !== i), this.dispatchEvent(
+    i && (this.variant === "multi-select" ? (this.values.indexOf(i) === -1 ? this.values = [...this.values, i] : this.values = this.values.filter((n) => n !== i), this.dispatchEvent(
       new CustomEvent("change", {
         detail: { values: this.values },
         bubbles: !0,
@@ -77,8 +77,8 @@ let n = class extends f {
       if (i.tagName === "SCB-SEGMENTED-ITEM") {
         const r = i.getAttribute("value") || "";
         if (r) {
-          let a = !1;
-          this.variant === "multi-select" ? a = !!this.values && this.values.includes(r) : a = r === this.value, i.setAttribute("aria-pressed", a ? "true" : "false"), a ? i.setAttribute("selected", "true") : i.removeAttribute("selected");
+          let n = !1;
+          this.variant === "multi-select" ? n = !!this.values && this.values.includes(r) : n = r === this.value, i.setAttribute("aria-pressed", n ? "true" : "false"), n ? i.setAttribute("selected", "true") : i.removeAttribute("selected");
         }
         this.disabled && i.setAttribute("disabled", "true");
       }
@@ -126,65 +126,72 @@ let n = class extends f {
       return /^\d+$/.test(e) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(e, 10)))})` : e;
   }
   render() {
-    return v`<slot></slot>`;
+    return b`<slot></slot>`;
   }
 };
 u = /* @__PURE__ */ new WeakSet();
-h = function() {
-  const t = this.mapSpacingToken(this.spacing);
-  t ? this.style.setProperty("--scb-segmented-button-spacing-block", t) : this.style.removeProperty("--scb-segmented-button-spacing-block");
+c = function() {
+  const t = this.mapSpacingToken(this.spacing), e = this.mapSpacingToken(this.spacingTop) ?? t, s = this.mapSpacingToken(this.spacingBottom) ?? t;
+  e ? this.style.setProperty("--scb-segmented-button-spacing-block-start", e) : this.style.removeProperty("--scb-segmented-button-spacing-block-start"), s ? this.style.setProperty("--scb-segmented-button-spacing-block-end", s) : this.style.removeProperty("--scb-segmented-button-spacing-block-end");
 };
-n.formAssociated = !0;
-n.styles = p`
+a.formAssociated = !0;
+a.styles = p`
     :host {
-        --scb-segmented-button-width: 100%;
-        --scb-segmented-button-height: 48px;
-        max-width: var(--scb-segmented-button-width);
-        height: var(--scb-segmented-button-height);
-        display: grid;
-        grid-auto-flow: column;
-        grid-auto-columns: 1fr;
-        font-family: var(--brand, Inter);
-        margin-block: var(--scb-segmented-button-spacing-block, 0);
+      --scb-segmented-button-width: 100%;
+      --scb-segmented-button-height: 48px;
+      max-width: var(--scb-segmented-button-width);
+      height: var(--scb-segmented-button-height);
+      display: grid;
+      grid-auto-flow: column;
+      grid-auto-columns: 1fr;
+      font-family: var(--brand, Inter);
+      margin-block-start: var(--scb-segmented-button-spacing-block-start, 0);
+      margin-block-end: var(--scb-segmented-button-spacing-block-end, 0);
     }
     /* Border radius only on first and last button */
     ::slotted(scb-segmented-item:first-child .segmented-item),
-    ::slotted([role="button"]:first-child .segmented-item) {
+    ::slotted([role='button']:first-child .segmented-item) {
       border-top-left-radius: var(--md-sys-shape-corner-full);
       border-bottom-left-radius: var(--md-sys-shape-corner-full);
     }
     ::slotted(scb-segmented-item:last-child .segmented-item),
-    ::slotted([role="button"]:last-child .segmented-item) {
+    ::slotted([role='button']:last-child .segmented-item) {
       border-top-right-radius: var(--md-sys-shape-corner-full);
       border-bottom-right-radius: var(--md-sys-shape-corner-full);
     }
     /* First button gets left border */
     ::slotted(scb-segmented-item:first-child .segmented-item),
-    ::slotted([role="button"]:first-child .segmented-item) {
+    ::slotted([role='button']:first-child .segmented-item) {
       border-left: 1px solid var(--md-sys-color-outline);
     }
   `;
-l([
-  o({ type: String, reflect: !0 })
-], n.prototype, "variant", 2);
-l([
-  o({ type: String, reflect: !0 })
-], n.prototype, "value", 2);
-l([
-  o({ type: Array })
-], n.prototype, "values", 2);
-l([
-  o({ type: Boolean, reflect: !0 })
-], n.prototype, "disabled", 2);
-l([
-  o({ type: String, reflect: !0 })
-], n.prototype, "name", 2);
-l([
-  o({ type: String, reflect: !0 })
-], n.prototype, "spacing", 2);
-n = l([
-  b("scb-segmented-button")
-], n);
+o([
+  l({ type: String, reflect: !0 })
+], a.prototype, "variant", 2);
+o([
+  l({ type: String, reflect: !0 })
+], a.prototype, "value", 2);
+o([
+  l({ type: Array })
+], a.prototype, "values", 2);
+o([
+  l({ type: Boolean, reflect: !0 })
+], a.prototype, "disabled", 2);
+o([
+  l({ type: String, reflect: !0 })
+], a.prototype, "name", 2);
+o([
+  l({ type: String, reflect: !0 })
+], a.prototype, "spacing", 2);
+o([
+  l({ type: String, attribute: "spacing-top", reflect: !0 })
+], a.prototype, "spacingTop", 2);
+o([
+  l({ type: String, attribute: "spacing-bottom", reflect: !0 })
+], a.prototype, "spacingBottom", 2);
+a = o([
+  v("scb-segmented-button")
+], a);
 export {
-  n as ScbSegmentedButton
+  a as ScbSegmentedButton
 };

package/scb-textfield/scb-textfield.d.ts

@@ -27,8 +27,11 @@ export declare class ScbTextField extends LitElement {
     private _formResetHandler;
     private _initialValue;
     private _inputId;
+    private _showDatepicker;
     static styles: import('lit').CSSResult[];
     render(): TemplateResult;
+    private _toggleDatepicker;
+    private _onDateSelected;
     /**
      * Vi re-dispatchar inbyggda "input", "change" och "select"-events med { bubbles: true, composed: true }.
      * Vi kör också ett customevent onValueChanged.

package/scb-textfield/scb-textfield.js

@@ -1,16 +1,27 @@
 import { css as m, LitElement as x, html as d } from "lit";
 import { property as a, customElement as v } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
+import "../scb-datepicker/scb-datepicker.js";
 var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, f = (t) => {
   throw TypeError(t);
 }, r = (t, e, i, l) => {
-  for (var o = l > 1 ? void 0 : l ? g(e, i) : e, p = t.length - 1, u; p >= 0; p--)
-    (u = t[p]) && (o = (l ? u(e, i, o) : u(o)) || o);
+  for (var o = l > 1 ? void 0 : l ? g(e, i) : e, h = t.length - 1, u; h >= 0; h--)
+    (u = t[h]) && (o = (l ? u(e, i, o) : u(o)) || o);
   return l && o && y(e, i, o), o;
-}, _ = (t, e, i) => e.has(t) || f("Cannot " + i), w = (t, e, i) => e.has(t) ? f("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), c = (t, e, i) => (_(t, e, "access private method"), i), n, b, h;
+}, _ = (t, e, i) => e.has(t) || f("Cannot " + i), w = (t, e, i) => e.has(t) ? f("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), c = (t, e, i) => (_(t, e, "access private method"), i), n, b, p;
 let s = class extends x {
   constructor() {
-    super(), w(this, n), this._internals = null, this.type = "text", this.label = "", this.supportingText = "", this.errorText = "", this.leadingIcon = "", this.name = "", this.pattern = "", this.value = "", this.underLabel = "", this.error = !1, this.disabled = !1, this.required = !1, this.spacing = "", this.spacingTop = "", this.spacingBottom = "", this._form = null, this._formSubmitHandler = null, this._formResetHandler = null, this._initialValue = "", this._inputId = "", "attachInternals" in this && (this._internals = this.attachInternals());
+    super(), w(this, n), this._internals = null, this.type = "text", this.label = "", this.supportingText = "", this.errorText = "", this.leadingIcon = "", this.name = "", this.pattern = "", this.value = "", this.underLabel = "", this.error = !1, this.disabled = !1, this.required = !1, this.spacing = "", this.spacingTop = "", this.spacingBottom = "", this._form = null, this._formSubmitHandler = null, this._formResetHandler = null, this._initialValue = "", this._inputId = "", this._showDatepicker = !1, this._toggleDatepicker = () => {
+      this._showDatepicker = !this._showDatepicker;
+    }, this._onDateSelected = (t) => {
+      this.value = t.detail.value, this._showDatepicker = !1, this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 })), this.dispatchEvent(
+        new CustomEvent("onValueChanged", {
+          detail: { value: this.value },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, "attachInternals" in this && (this._internals = this.attachInternals());
   }
   render() {
     const t = this.leadingIcon ? d`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>` : null, e = this.error ? d`<md-icon class="scb-textfield-error-icon" aria-hidden="true">error</md-icon>` : null;
@@ -70,6 +81,36 @@ let s = class extends x {
 ${this.value}</textarea
           >
         </div>
+      ` : this.type === "date" ? d`
+        <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
+        <span
+          class="scb-textfield-supporting-text"
+          id="${this.underLabel ? `${this._inputId}-supporting-text` : ""}"
+          >${this.underLabel}</span
+        >
+        <div class="scb-textfield-wrapper" style="position:relative;">
+          ${t}
+          <input
+            class="scb-textfield${this.error ? " has-error-icon" : ""}"
+            .value=${this.value}
+            type="text"
+            name="${this.name}"
+            id="${this._inputId}"
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            aria-invalid=${this.error ? "true" : "false"}
+            aria-describedby=${i}
+            readonly
+          />
+          <scb-icon-button icon="calendar_today" @click=${this._toggleDatepicker} aria-label="Välj datum" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);"></scb-icon-button>
+          <scb-datepicker
+            variant="popup"
+            .selectedValue=${this.value}
+            .open=${this._showDatepicker}
+            @date-selected=${this._onDateSelected}
+          ></scb-datepicker>
+          ${e}
+        </div>
       ` : d`
       <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
       <span
@@ -190,10 +231,10 @@ ${this.value}</textarea
 };
 n = /* @__PURE__ */ new WeakSet();
 b = function() {
-  const t = c(this, n, h).call(this, this.spacing), e = c(this, n, h).call(this, this.spacingTop) ?? t, i = c(this, n, h).call(this, this.spacingBottom) ?? t;
+  const t = c(this, n, p).call(this, this.spacing), e = c(this, n, p).call(this, this.spacingTop) ?? t, i = c(this, n, p).call(this, this.spacingBottom) ?? t;
   e ? this.style.setProperty("--scb-textfield-spacing-block-start", e) : this.style.removeProperty("--scb-textfield-spacing-block-start"), i ? this.style.setProperty("--scb-textfield-spacing-block-end", i) : this.style.removeProperty("--scb-textfield-spacing-block-end");
 };
-h = function(t) {
+p = function(t) {
   if (!t) return;
   const e = String(t).trim();
   if (e)
@@ -225,6 +266,9 @@ s.styles = [
       :host([type='text']) {
         --scb-textfield-max-width: var(--scb-textfield-text-max-width);
       }
+      :host([type='date']) {
+        --scb-textfield-max-width: var(--scb-textfield-text-max-width);
+      }
       :host([type='search']) {
         --scb-textfield-max-width: var(--scb-textfield-search-max-width);
       }
@@ -425,6 +469,9 @@ r([
 r([
   a({ type: String, attribute: "spacing-bottom", reflect: !0 })
 ], s.prototype, "spacingBottom", 2);
+r([
+  a({ type: Boolean })
+], s.prototype, "_showDatepicker", 2);
 s = r([
   v("scb-textfield")
 ], s);