@skf-design-system/ui-components 1.0.2-beta.0 → 1.0.2-beta.10

package/dist/components/datepicker/datepicker.component.js

@@ -0,0 +1,455 @@
+var S = (o) => {
+  throw TypeError(o);
+};
+var P = (o, l, e) => l.has(o) || S("Cannot " + e);
+var D = (o, l, e) => (P(o, l, "read from private field"), e ? e.call(o) : l.get(o)), E = (o, l, e) => l.has(o) ? S("Cannot add the same private member more than once") : l instanceof WeakSet ? l.add(o) : l.set(o, e), C = (o, l, e, t) => (P(o, l, "write to private field"), t ? t.call(o, e) : l.set(o, e), e);
+import "../icon/icon.js";
+import { computePosition as T, flip as B, offset as x } from "@floating-ui/dom";
+import { FormBase as R } from "../../internal/components/formBase.js";
+import "../../internal/components/hint/hint.js";
+import { PopoverController as A } from "../../internal/controllers/popover.controller.js";
+import { hintSeverity as L } from "../../internal/helpers/hintSeverity.js";
+import { watch as j } from "../../internal/helpers/watch.js";
+import { Asterisk as V } from "../../internal/templates/asterisk.js";
+import { Temporal as I } from "@js-temporal/polyfill";
+import { componentStyles as q } from "../../styles/component.styles.js";
+import { LocalizeController as U } from "../../utilities/localize.js";
+import { nothing as f, html as b } from "lit";
+import { property as d, state as k, query as $, queryAssignedNodes as N } from "lit/decorators.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
+import { live as O } from "lit/directives/live.js";
+import "./datepicker-popup.js";
+import { dateFormatter as v, is as m, isPopoverOpen as Y, debounce as z } from "./datepicker.helpers.js";
+import { styles as W } from "./datepicker.styles.js";
+var H = Object.defineProperty, K = Object.getOwnPropertyDescriptor, r = (o, l, e, t) => {
+  for (var i = t > 1 ? void 0 : t ? K(l, e) : l, h = o.length - 1, p; h >= 0; h--)
+    (p = o[h]) && (i = (t ? p(l, e, i) : p(i)) || i);
+  return t && i && H(l, e, i), i;
+}, g;
+const w = class w extends R {
+  constructor() {
+    super();
+    E(this, g);
+    C(this, g, new U(this)), this.popoverController = new A(this), this.id = "skf-datepicker-input", this.lang = "en", this.placeholder = "YYYY-MM-DD", this.range = !1, this.size = "md", this.validateOn = "change", this.invalid = !1, this.selectedRangeDates = { start: null, end: null }, this.showClearbutton = !1, this.abortController = new AbortController(), this.abortSignal = this.abortController.signal, this._handleSelectedDate = () => {
+      this.pristine = !1, this._internals.setFormValue(this.value ?? ""), this.validateInput();
+    }, this._handleDateSelected = (e) => {
+      if (this.range && "start" in e.detail.date && "end" in e.detail.date) {
+        const t = e.detail.date.start, i = e.detail.date.end;
+        this.value = `${v(t)},${v(i)}`, this.selectedRangeDates = { start: t, end: i };
+      } else !this.range && e.detail.date instanceof Date && (this.value = v(e.detail.date), this._animatePopover({ el: this.$popover, show: !1 }).then(() => {
+        this.$popover.hidePopover();
+      }));
+    }, this._handleKeyboardEvents = (e) => {
+      const t = e.target.closest("input");
+      if (t) {
+        if ((t.selectionStart ?? 0) < t.value.length && /[[0-9-]/.test(e.key)) {
+          const i = t.selectionStart ?? 0, p = t.value.split("").slice(0, i);
+          t.value = p.join("");
+        }
+        if (t.name.endsWith("-end") && (e.key === "Backspace" && t.value.length === 0 || t.selectionStart === 0 && e.key === "ArrowLeft") && (e.preventDefault(), this.$input.focus()), e.key === "Tab" && !e.shiftKey && t.name.endsWith("-end") && (e.preventDefault(), this.$popover.childNodes[1].shadowRoot?.querySelector("skf-datepicker-calendar")?.shadowRoot?.querySelector("button")?.focus()), (t.value.length === 4 || t.value.length === 7) && /[[0-9]/.test(e.key) && (t.value = `${t.value}-${e.key}`, e.preventDefault()), e.key === "Escape")
+          if (t.blur(), this.$popover.hidePopover(), this.range) {
+            const i = this.$input.value, h = this.$input_range_end.value;
+            if (!m(i, h).date()) return;
+            this.$datepickerPopup.selectedDateRange = {
+              start: new Date(i),
+              end: new Date(h)
+            }, this.$datepickerPopup.emit("selected-date-changed", {
+              detail: { date: new Date(i) }
+            });
+          } else {
+            if (!t.value || !m(t.value).date()) return;
+            this.$datepickerPopup.emit("selected-date-changed", {
+              detail: { date: new Date(t.value) }
+            });
+          }
+        e.key === "Enter" && (t.blur(), this.$popover.hidePopover());
+      }
+    }, this._handleFocus = () => {
+      this.showPopover();
+    }, this._handleBlur = (e) => {
+      !e.target.name.endsWith("-end") && this.range;
+    }, this._handleClose = () => {
+      this.$anchor.blur();
+    }, this.clearInput = () => {
+      this.value = "", this.$datepickerPopup.clearSelection();
+    }, this._handleInput = (e) => {
+      const t = e.target, i = String(t.value).replace(/[^0-9-]/g, "");
+      if (t.value = i, t.setCustomValidity(this.customError ?? ""), !!m(t.value).ISO()) {
+        if (this.focusTimeoutId && clearTimeout(this.focusTimeoutId), this.$datepickerPopup.date = t.value, this.range) {
+          this.$datepickerPopup.selectedDateRange = {
+            start: m(this.$input.value).ISO() ? new Date(this.$input.value) : null,
+            end: m(this.$input_range_end.value).ISO() ? new Date(this.$input_range_end.value) : null
+          };
+          const h = Object.values(this.$datepickerPopup.selectedDateRange).filter(Boolean).map((p) => new Date(p).toLocaleDateString("en-CA")).join();
+          this.value = h, m(this.$input.value).ISO() && (this.focusTimeoutId = setTimeout(() => {
+            this.$input_range_end.focus();
+          }, 200));
+        } else
+          this.$datepickerPopup.selectedDate = new Date(t.value), this.$datepickerPopup.emit("selected-date-changed", {
+            detail: { date: new Date(t.value) }
+          });
+        this.validateOn === "input" && (this._pristine = !1, this.validateInput());
+      }
+    }, this._toggleClearButton = (e = !1) => {
+      this.showClearbutton = e;
+    }, this.reposition = async () => {
+      const { x: e, y: t } = await T(this.$anchor, this.$popover, {
+        placement: "bottom-start",
+        middleware: [B(), x(0)],
+        strategy: "fixed"
+      });
+      Object.assign(this.$popover.style, {
+        left: `${String(e)}px`,
+        top: `${String(t)}px`
+      });
+    }, this.addEventListener("skf-datepicker-selected", this._handleDateSelected), this.addEventListener("reset", () => {
+      this.clearInput(), this.validateInput();
+    });
+  }
+  set customInvalid(e) {
+    this.customError = e ?? "";
+  }
+  get customInvalid() {
+    return this.customError;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._init_date = this.value?.split(",")[0], this.addEventListener("selected-date-changed", this._handleSelectedDate);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.abortController.abort();
+  }
+  firstUpdated() {
+    this.$datepickerPopup.date = this._init_date ? I.PlainDate.from(this._init_date).toString() : I.Now.plainDateISO().toString(), this.range ? this.$datepickerPopup.selectedDateRange = {
+      start: this._init_date ? new Date(this._init_date) : null,
+      end: this.value?.split(",")[1] ? new Date(this.value.split(",")[1]) : null
+    } : this.$datepickerPopup.selectedDate = this._init_date ? new Date(this._init_date) : void 0, this.hint && !this.hasAttribute("hint") && this.setAttribute("hint", this.hint), this.validateInput();
+  }
+  attributeChangedCallback(e, t, i) {
+    if (super.attributeChangedCallback(e, t, i), e === "custom-invalid")
+      if (typeof i == "string") {
+        const p = this.withFallback(i);
+        this._pristine = !1, this._internals.setValidity({ customError: !0 }, p), this.invalid = !0, this.hint = p, this.checkValidity();
+      } else
+        this._internals.setValidity({}), this.validateInput();
+  }
+  _handleValueChange() {
+    this.value?.trim() || this.$datepickerPopup.clearSelection(), this._internals.setFormValue(this.value ?? ""), this.validateInput(), this._pristine = !1, this.$input.value = v(this.value?.split(",")[0]), this.range ? (this.$datepickerPopup.selectedDateRange = {
+      start: this.value?.split(",")[0] ? new Date(this.value.split(",")[0]) : null,
+      end: this.value?.split(",")[1] ? new Date(this.value.split(",")[1]) : null
+    }, this.$input_range_end.value = v(this.value?.split(",")[1]), this.$datepickerPopup.date = this.value?.split(",")[0] ?? "") : (this.$datepickerPopup.selectedDate = this.value?.split(",")[0] ? new Date(this.value.split(",")[0]) : void 0, this.$datepickerPopup.date = this.value?.split(",")[0] ?? ""), this.validateInput();
+  }
+  showPopover() {
+    if (Y(this.$popover)) return;
+    z(() => {
+      this.$popover.showPopover(), this._animatePopover({ show: !0 });
+    }, 200)(), this.addEventListener("focusout", this.hidePopover.bind(this), {
+      once: !0,
+      signal: this.abortSignal
+    });
+  }
+  hidePopover() {
+    this.removeEventListener("focusout", this.hidePopover.bind(this)), document.activeElement?.closest("skf-datepicker-input") !== this && this.$popover.hidePopover();
+  }
+  /**
+   * Clears the input field
+   */
+  clear() {
+    this.clearInput(), this._toggleClearButton(!1);
+  }
+  /** @internal */
+  async _animatePopover({ el: e = this.$popover, show: t }) {
+    return t && (e.style.opacity = "0", e.style.transform = "scaleY(0.5)"), new Promise((i) => {
+      const h = [
+        { opacity: 0, transform: "scaleY(0.5)" },
+        { opacity: 1, transform: "scaleY(1)" }
+      ], p = t ? h : h.reverse();
+      setTimeout(
+        () => {
+          e.style.transformOrigin = "top";
+          const _ = this.$popover.animate(p, {
+            duration: 100,
+            easing: "linear",
+            fill: "both"
+          });
+          _.onfinish = () => {
+            i();
+          };
+        },
+        t ? 0 : 50
+      );
+    });
+  }
+  /** @internal consider sharing this functionality with input */
+  validateInput() {
+    if (this._internals.validity.customError) return;
+    let t = JSON.parse(JSON.stringify(this._internals.validity)), i = {};
+    if (this.selectableFrom) {
+      const { validityFragment: a, errorMessageFragment: n } = h(this);
+      t = { ...t, ...a }, i = { ...i, ...n };
+    }
+    if (this.selectableTo) {
+      const { validityFragment: a, errorMessageFragment: n } = p(this);
+      t = { ...t, ...a }, i = { ...i, ...n };
+    }
+    if (this.range) {
+      const { validityFragment: a, errorMessageFragment: n } = _(this);
+      t = { ...t, ...a }, i = { ...i, ...n };
+    }
+    if (this.required) {
+      const { validityFragment: a, errorMessageFragment: n } = M(this);
+      t = { ...t, ...a }, i = { ...i, ...n };
+    }
+    if (t.valid = !Object.values(t).some((a) => a), this.invalid = !1, t.valid)
+      this._internals.setValidity({ customError: this._internals.validity.customError }), this.hint = this.getAttribute("hint") ?? "";
+    else {
+      this.invalid = !this._pristine && !t.valid;
+      let a;
+      for (a in t) {
+        const n = `data-${a.toString()}`;
+        if (t[a]) {
+          this.validationError = a.toString();
+          const c = this.hasAttribute(n) ? this.getAttribute(n) : i[a];
+          this._internals.setValidity(
+            { [this.validationError]: !0, customError: this._internals.validity.customError },
+            this.withFallback(c)
+          ), c && !this._pristine && (this.hint = c), this.invalid && this.customErrorDisplay && this.checkValidity();
+        }
+      }
+    }
+    function h(a) {
+      const n = { validityFragment: {}, errorMessageFragment: {} };
+      if (!a.selectableFrom) return n;
+      const c = new Date(a.selectableFrom);
+      if (new Date(a.$input.value) < c) {
+        const y = a.getAttribute("data-rangeunderflow") ?? `Date is out of range. Earliest selectable date is ${a.selectableFrom}.`;
+        return {
+          validityFragment: { rangeUnderflow: !0, valid: !1 },
+          errorMessageFragment: { rangeUnderflow: y }
+        };
+      }
+      return n;
+    }
+    function p(a) {
+      const n = { validityFragment: {}, errorMessageFragment: {} };
+      if (!a.selectableTo) return n;
+      const c = new Date(a.selectableTo);
+      if (new Date(a.$input.value) > c) {
+        const y = a.getAttribute("data-rangeoverflow") ?? `Date is out of range. Latest selectable date is ${a.selectableTo}.`;
+        return {
+          validityFragment: { rangeOverflow: !0, valid: !1 },
+          errorMessageFragment: { rangeOverflow: y }
+        };
+      }
+      return n;
+    }
+    function _(a) {
+      const n = { validityFragment: {}, errorMessageFragment: {} }, c = new Date(a.$input.value);
+      if (new Date(a.$input_range_end.value) < c) {
+        const y = a.getAttribute("data-rangeunderflow") ?? "End date cannot be before start date";
+        return {
+          validityFragment: { rangeUnderflow: !0, valid: !1 },
+          errorMessageFragment: { rangeUnderflow: y }
+        };
+      }
+      return n;
+    }
+    function M(a) {
+      const n = { validityFragment: {}, errorMessageFragment: {} };
+      return !a.$input.value || a.range && !a.$input_range_end.value ? {
+        validityFragment: { valueMissing: !0, valid: !1 },
+        errorMessageFragment: { valueMissing: "This field is required" }
+      } : n;
+    }
+  }
+  render() {
+    const e = (this._defaultSlot.length === 0 || !this._defaultSlot[0]?.textContent?.trim()) && !this.label;
+    return b`
+			<div
+				id="root"
+				@mouseenter=${() => {
+      this.value && this._toggleClearButton(!0);
+    }}
+				@mouseleave=${() => {
+      this._toggleClearButton(!1);
+    }}
+			>
+				<label>
+					<div class=${this.hideLabel ? "visually-hidden" : ""} ?hidden=${e} id="label">
+						<slot>${this.label}</slot>
+						${this.required ? V(D(this, g).term("required")) : f}
+					</div>
+					<div id="input">
+						<input
+							?disabled=${this.disabled}
+							?readonly=${this.readonly}
+							.value=${O(
+      this.range ? v(this.value?.split(",")[0]) : v(this.value)
+    )}
+							@blur=${this._handleBlur}
+							@click=${this._handleFocus}
+							@focus=${this._handleFocus}
+							@input=${this._handleInput}
+							@keydown=${this._handleKeyboardEvents}
+							aria-describedby=${u(this.hint?.trim() ? "hint" : f)}
+							aria-errormessage=${u(this.hint?.trim() ? "hint" : f)}
+							aria-invalid=${!!this.invalid}
+							autocomplete="off"
+							data-testid="field-input"
+							inputmode=${u(this.inputMode)}
+							maxlength="10"
+							name=${this.name ?? "calendar"}
+							placeholder=${u(this.placeholder)}
+							type="text"
+						/>
+						${this.range ? b`
+									<skf-icon name="arrowRight"></skf-icon>
+									<input
+										?disabled=${this.disabled}
+										?readonly=${this.readonly}
+										.value=${O(v(this.value?.split(",")[1]))}
+										@blur=${this._handleBlur}
+										@click=${this._handleFocus}
+										@focus=${this._handleFocus}
+										@input=${this._handleInput}
+										@keydown=${this._handleKeyboardEvents}
+										aria-describedby=${u(this.hint?.trim() ? "hint" : f)}
+										aria-errormessage=${u(this.hint?.trim() ? "hint" : f)}
+										aria-invalid=${!!this.invalid}
+										autocomplete="off"
+										data-testid="field-input-range-end"
+										inputmode=${u(this.inputMode)}
+										maxlength="10"
+										name=${(this.name ?? "calendar") + "-end"}
+										placeholder=${u(this.placeholder)}
+										type="text"
+									/>
+								` : f}
+						${this.showClearbutton ? b`
+									<button
+										aria-label=${D(this, g).term("close")}
+										class="password skf-icon-host"
+										type="button"
+										@click=${this.clear.bind(this)}
+									>
+										<skf-icon name="close" size="sm"></skf-icon>
+									</button>
+								` : b`
+									<button class="password skf-icon-host" type="button">
+										<skf-icon name="calendarMonth" size="sm"></skf-icon>
+									</button>
+								`}
+					</div>
+				</label>
+				${this.hint && b`
+					<skf-hint
+						?disabled=${this.disabled}
+						aria-live=${this.invalid ? "assertive" : "polite"}
+						id="hint"
+						severity=${u(L(this.invalid, this.severity))}
+						>${this.customInvalid ?? this.hint}
+					</skf-hint>
+				`}
+			</div>
+
+			<div id="popover" popover @close=${this._handleClose}>
+				<skf-datepicker-popup
+					?range=${this.range}
+					id=${this.id}
+					invalid-dates=${u(this.invalidDates)}
+					lang=${this.lang}
+					selectable-from=${u(this.selectableFrom)}
+					selectable-to=${u(this.selectableTo)}
+				></skf-datepicker-popup>
+			</div>
+		`;
+  }
+};
+g = new WeakMap(), w.styles = [q, W];
+let s = w;
+r([
+  d({ attribute: "custom-invalid", reflect: !0 })
+], s.prototype, "customInvalid", 1);
+r([
+  d({ type: String })
+], s.prototype, "id", 2);
+r([
+  d()
+], s.prototype, "label", 2);
+r([
+  d({ type: String })
+], s.prototype, "lang", 2);
+r([
+  d({ type: Boolean, attribute: "hide-label" })
+], s.prototype, "hideLabel", 2);
+r([
+  d()
+], s.prototype, "hint", 2);
+r([
+  d({ attribute: "invalid-dates" })
+], s.prototype, "invalidDates", 2);
+r([
+  d({ reflect: !0 })
+], s.prototype, "name", 2);
+r([
+  d()
+], s.prototype, "placeholder", 2);
+r([
+  d({ type: Boolean })
+], s.prototype, "range", 2);
+r([
+  d({ type: Boolean })
+], s.prototype, "readonly", 2);
+r([
+  d({ attribute: "selectable-from" })
+], s.prototype, "selectableFrom", 2);
+r([
+  d({ attribute: "selectable-to" })
+], s.prototype, "selectableTo", 2);
+r([
+  d({ reflect: !0 })
+], s.prototype, "severity", 2);
+r([
+  d({ reflect: !0 })
+], s.prototype, "size", 2);
+r([
+  d({ type: String, attribute: "validate-on" })
+], s.prototype, "validateOn", 2);
+r([
+  d()
+], s.prototype, "value", 2);
+r([
+  k()
+], s.prototype, "_init_date", 2);
+r([
+  d({ type: Boolean, reflect: !0 })
+], s.prototype, "invalid", 2);
+r([
+  k()
+], s.prototype, "selectedRangeDates", 2);
+r([
+  k()
+], s.prototype, "showClearbutton", 2);
+r([
+  $("#popover")
+], s.prototype, "$popover", 2);
+r([
+  $("#input")
+], s.prototype, "$anchor", 2);
+r([
+  $('input[data-testid="field-input"]')
+], s.prototype, "$input", 2);
+r([
+  $('input[data-testid="field-input-range-end"]')
+], s.prototype, "$input_range_end", 2);
+r([
+  $("skf-datepicker-popup")
+], s.prototype, "$datepickerPopup", 2);
+r([
+  N({ flatten: !0 })
+], s.prototype, "_defaultSlot", 2);
+r([
+  j("value", { waitUntilFirstUpdate: !0, afterUpdate: !0 })
+], s.prototype, "_handleValueChange", 1);
+export {
+  s as SkfDatepicker
+};

package/dist/components/datepicker/datepicker.d.ts

@@ -0,0 +1,8 @@
+import { SkfDatepicker } from './datepicker.component.js';
+export * from './datepicker.component.js';
+export default SkfDatepicker;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-datepicker': SkfDatepicker;
+    }
+}

package/dist/components/datepicker/datepicker.js

@@ -0,0 +1,6 @@
+import { SkfDatepicker as e } from "./datepicker.component.js";
+e.define("skf-datepicker");
+export {
+  e as SkfDatepicker,
+  e as default
+};

package/dist/components/dialog/dialog.component.d.ts

@@ -2,6 +2,7 @@ import '../button/button.js';
 import '../heading/heading.js';
 import '../icon/icon.js';
 import { SkfElement } from '../../internal/components/skf-element';
+import { type Language } from '../../utilities/localize.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-dialog>` is a component that open up a dialog of type modal with the content provided. (MDN refrains from opening the dialog using the `open` attribute, however skf-dialog does not have that limitation)
@@ -11,24 +12,24 @@ import { type CSSResultGroup } from 'lit';
  * @slot - The dialog component's content
  * @slot footer - The dialog component's buttons goes here
  *
- * @event skf-dialog-opened - Fires when the dialog is opened (after transitioned in)
- * @event skf-dialog-closing - Fires when the dialog is closed (before transitioned out)
- * @event skf-dialog-closed - Fires when the dialog is closed (after transitioned out)
- *
  * @cssproperty --skf-dialog-height - A custom height for the Dialog. Pass valid CSS **block-size** values
  * @cssproperty --skf-dialog-width - A custom width for the Dialog Pass valid CSS **inline-size** values
  *
+ * @event {CustomEvent} skf-dialog-opened - Fires when the dialog is opened (after transitioned in)
+ * @event {CustomEvent} skf-dialog-closing - Fires when the dialog is closing (before transitioned out)
+ * @event {CustomEvent} skf-dialog-closed - Fires when the dialog is closed (after transitioned out)
+ *
  * @tagname skf-dialog
  */
 export declare class SkfDialog extends SkfElement {
     #private;
     static styles: CSSResultGroup;
-    /** If defined, sets the aria-label for the close button */
-    closeButtonAriaLabel?: string;
     /** Title for the modal/dialog */
     heading?: string;
     /** If true, makes the dialog stretch edge to edge on screen */
     fullscreen: boolean;
+    /** Sets the internal language of the component */
+    lang: Language;
     /** If true, removes the close button */
     noCloseButton?: boolean | undefined;
     /** If defined, removes the inner padding */
@@ -43,6 +44,7 @@ export declare class SkfDialog extends SkfElement {
     $dialog?: HTMLDialogElement;
     /** @internal */
     footerEls?: HTMLElement[];
+    /** @internal */
     handleOpenChange(): void;
     protected firstUpdated(): void;
     /** @internal */