@skf-design-system/ui-components 1.0.0-beta.7 → 1.0.1-beta.1

package/dist/components/date-picker/datepicker.styles.js

@@ -0,0 +1,99 @@
+import { css as o } from "lit";
+const e = o`
+	@layer components {
+		:host {
+			--black: #323232;
+			--call-to-action-color: #007bff;
+			--selected-bg: var(--call-to-action-color); /* hsl(218deg 87% 45%); */
+			--selected-fg: #fff;
+			--in-range-bg: #def;
+			--today: #eee;
+			--today-fg: var(--black);
+			--title-fg: var(--black);
+			--other-month-fg: #999;
+			--hover-bg: #def;
+			--border-color: #ddd;
+			--button-control-fg: #333;
+			--button-control-fg-hover: var(--call-to-action-color);
+			--weekday-fg: var(--black);
+			--calendar-padding: 16px;
+			--max-width: 21em;
+			--day-outline: transparent;
+
+			background-color: #fff;
+			border: solid 1px gray;
+			border-radius: 3px;
+			box-shadow: 0 0 10px rgba(0 0 0 / 30%);
+			box-sizing: border-box;
+			display: block;
+			font-family: Helvetica, sans-serif;
+			font-size: 0.7rem;
+			max-width: var(--max-width);
+			position: relative;
+		}
+
+		.triangle {
+			border: 10px solid transparent;
+			border-bottom-color: #fff;
+			border-top: 0;
+			display: block;
+			height: 0;
+			left: 50%;
+			margin-left: -10px;
+			position: absolute;
+			top: -10px;
+			width: 0;
+		}
+
+		:host([hidden]) {
+			display: none !important;
+		}
+
+		.calendar-container {
+			display: flex;
+			flex-direction: row;
+			gap: var(--calendar-padding);
+			justify-content: space-between;
+			overflow: hidden;
+			padding: var(--calendar-padding);
+		}
+
+		.today {
+			border-top: 1px solid var(--border-color);
+			margin-bottom: 0.5rem;
+			margin-top: -1rem;
+			padding-top: 0.5rem;
+			text-align: center;
+
+			button {
+				background-color: #333;
+				border-radius: 4px;
+				color: white;
+				padding-inline: 0.7em;
+				transition: background-color 0.2s;
+
+				&[disabled] {
+					opacity: 0.5;
+					pointer-events: none;
+				}
+
+				&:hover {
+					background-color: var(--call-to-action-color);
+				}
+
+				&:active {
+					background-color: lch(from var(--call-to-action-color) calc(l - 5) c h);
+				}
+
+				&:focus-visible {
+					border-radius: 0.2em;
+					outline: 2px solid #469;
+					outline-offset: 2px;
+				}
+			}
+		}
+	}
+`;
+export {
+  e as styles
+};

package/dist/components/date-picker-input/datepicker-input.component.d.ts

@@ -0,0 +1,107 @@
+import { FormBase } from '../../internal/components/formBase.js';
+import { PopoverController } from '../../internal/controllers/popover.controller.js';
+import type { FormFieldBaseProps } from '../../internal/types/formField.js';
+import { type CSSResultGroup } from 'lit';
+import '../date-picker/datepicker.js';
+import type { SkfDatePicker, SkfDatePickerDateRange } from '../date-picker/datepicker.js';
+export declare class SkfDatePickerInput extends FormBase {
+    /** @internal */
+    static styles: CSSResultGroup;
+    /**	@inernal */
+    focusTomeoutId: ReturnType<typeof setTimeout> | undefined;
+    /** @internal */
+    private customError;
+    /** @internal */
+    popoverController: PopoverController;
+    /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
+    set customInvalid(value: string | undefined);
+    get customInvalid(): string | undefined;
+    id: string;
+    /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
+    label?: string;
+    /** If true, hides the label visually */
+    hideLabel?: boolean;
+    /** If defined, displays informational text below the field */
+    hint?: string;
+    /**
+     * A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.
+     */
+    invalidDates?: string;
+    /** If defined, adds name to the input-element */
+    name?: string;
+    placeholder: string;
+    range: boolean;
+    /** If true, makes the element not mutable, meaning the user can not edit the control */
+    readonly?: boolean;
+    /** If defined, renders an alternative A11y text for the asterisk */
+    requiredLabel?: string;
+    /**
+     * Earliest selectable date. (yyyy-mm-dd format)
+     */
+    selectableFrom?: string;
+    /**
+     * Latest selectable date. (yyyy-mm-dd format)
+     */
+    selectableTo?: string;
+    /**
+     * If defined, displays provided severity state
+     * @type { "alert" | "success" | "info" | "warning" }
+     */
+    severity?: FormFieldBaseProps['severity'];
+    /** Sets validation start */
+    validateOn: 'input' | 'change' | 'submit';
+    /** The current value of the input field  */
+    value?: string;
+    private _init_date?;
+    /** @internal */
+    /** true if the internal state is invalid  */
+    invalid: boolean;
+    /** @internal */
+    selectedRangeDates: SkfDatePickerDateRange;
+    /** @internal */
+    private showClearbutton;
+    /** @internal */
+    $popover: HTMLElement;
+    /** @internal */
+    $anchor: HTMLDivElement;
+    /** @internal */
+    $input: HTMLInputElement;
+    /** @internal */
+    $input_range_end: HTMLInputElement;
+    /** @internal */
+    $datepicker: SkfDatePicker;
+    /** @internal */
+    _defaultSlot: Node[];
+    constructor();
+    connectedCallback(): void;
+    _handleSelectedDate: (e: CustomEvent<{
+        date: Date;
+        id: number;
+    }>) => void;
+    protected firstUpdated(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private _handleDateSelected;
+    private _handleFocus;
+    /** @internal */
+    _handleBlur: (event: FocusEvent) => void;
+    /** @internal */
+    private _handleClose;
+    /** @internal */
+    private clearInput;
+    _handleValueChange(): void;
+    /**
+     * Clears the input field
+     */
+    clear: () => void;
+    /** @internal although called on input its only triggered once value is valid date */
+    _handleInput: (event: Event) => void;
+    /** @internal */
+    _toggleClearButton: (show?: boolean) => void;
+    /** @internal */
+    private _animatePopover;
+    /** @internal consider sharing this functionality with input */
+    validateInput(): void;
+    /** @internal */
+    reposition: () => Promise<void>;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/date-picker-input/datepicker-input.component.js

@@ -0,0 +1,397 @@
+import { dateFormatter as v, isPopoverOpen as S, debounce as E, isDate as $ } from "./datepicker-input.helpers.js";
+import { computePosition as C, flip as I, offset as M } from "@floating-ui/dom";
+import { FormBase as O } from "../../internal/components/formBase.js";
+import { PopoverController as T } from "../../internal/controllers/popover.controller.js";
+import { hintSeverity as B } from "../../internal/helpers/hintSeverity.js";
+import { watch as P } from "../../internal/helpers/watch.js";
+import { Asterisk as x } from "../../internal/templates/asterisk.js";
+import { Temporal as F } from "@js-temporal/polyfill";
+import q from "../../styles/component.styles.js";
+import { html as m, nothing as g } from "lit";
+import { property as d, state as b, query as y, queryAssignedNodes as R } from "lit/decorators.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
+import { live as k } from "lit/directives/live.js";
+import "../date-picker/datepicker.js";
+import { styles as j } from "./datepicker-input.styles.js";
+var L = Object.defineProperty, V = Object.getOwnPropertyDescriptor, n = (D, t, e, a) => {
+  for (var l = a > 1 ? void 0 : a ? V(t, e) : t, o = D.length - 1, h; o >= 0; o--)
+    (h = D[o]) && (l = (a ? h(t, e, l) : h(l)) || l);
+  return a && l && L(t, e, l), l;
+};
+const _ = class _ extends O {
+  constructor() {
+    super(), this.popoverController = new T(this), this.id = "skf-datepicker-input", this.placeholder = "Select date", this.range = !1, this.validateOn = "change", this.invalid = !1, this.selectedRangeDates = { start: null, end: null }, this.showClearbutton = !1, this._handleSelectedDate = (t) => {
+      console.log("selected-date-changed event fired", this.value || "no value", t.detail), this.pristine = !1, this._internals.setFormValue(this.value ?? ""), this.validateInput();
+    }, this._handleDateSelected = (t) => {
+      if (this.range && "start" in t.detail.date && "end" in t.detail.date) {
+        const e = t.detail.date.start, a = t.detail.date.end;
+        this.value = `${v(e)},${v(a)}`, this.selectedRangeDates = { start: e, end: a };
+      } else !this.range && t.detail.date instanceof Date && (this.value = v(t.detail.date), this._animatePopover({ el: this.$popover, show: !1 }).then(() => {
+        this.$popover.hidePopover();
+      }));
+    }, this._handleFocus = () => {
+      if (S(this.$popover)) return;
+      E(() => {
+        this.$popover.showPopover(), this._animatePopover({ show: !0 });
+      }, 200)();
+    }, this._handleBlur = (t) => {
+      const e = t.target;
+      if (!e.name.endsWith("-end") && !this.range) return;
+      if ($(e.value) && this.$datepicker.emit("selected-date-changed", {
+        detail: { date: new Date(e.value) }
+      }), e.name.endsWith("-end") || !this.range) {
+        const l = t.relatedTarget;
+        a(this, l);
+      }
+      function a(l, o) {
+        var h, c;
+        if (o && !l.contains(o)) {
+          console.log("Tab out detected");
+          const r = (h = l.$popover.childNodes[1].shadowRoot) == null ? void 0 : h.querySelector("skf-datepicker-calendar"), p = (c = r == null ? void 0 : r.shadowRoot) == null ? void 0 : c.querySelector("button");
+          p == null || p.focus();
+        }
+      }
+    }, this._handleClose = () => {
+      this.$anchor.blur();
+    }, this.clearInput = () => {
+      this.value = "", this.$datepicker.clearSelection();
+    }, this.clear = () => {
+      this.clearInput(), this._toggleClearButton(!1);
+    }, this._handleInput = (t) => {
+      const e = t.target;
+      e.setCustomValidity(this.customError ?? ""), this.focusTomeoutId && clearTimeout(this.focusTomeoutId), this.$datepicker.date = e.value, this.range ? (this.$datepicker.selectedDateRange = {
+        start: $(this.$input.value) ? new Date(this.$input.value) : null,
+        end: $(this.$input_range_end.value) ? new Date(this.$input_range_end.value) : null
+      }, $(this.$input.value) && (this.focusTomeoutId = setTimeout(() => {
+        this.$input_range_end.focus();
+      }, 2e3))) : this.$datepicker.selectedDate = new Date(e.value), this.validateOn === "input" && (this._pristine = !1, this.validateInput());
+    }, this._toggleClearButton = (t = !1) => {
+      this.showClearbutton = t;
+    }, this.reposition = async () => {
+      const { x: t, y: e } = await C(this.$anchor, this.$popover, {
+        placement: "bottom-start",
+        middleware: [I(), M(0)],
+        strategy: "fixed"
+      });
+      Object.assign(this.$popover.style, {
+        left: `${String(t)}px`,
+        top: `${String(e)}px`
+      });
+    }, this.addEventListener("skf-datepicker-selected", this._handleDateSelected), this.addEventListener("reset", () => {
+      this.clearInput(), this.validateInput();
+    });
+  }
+  set customInvalid(t) {
+    this.customError = t || "";
+  }
+  get customInvalid() {
+    return this.customError;
+  }
+  connectedCallback() {
+    var t;
+    super.connectedCallback(), this._init_date = (t = this.value) == null ? void 0 : t.split(",")[0], this.addEventListener("selected-date-changed", this._handleSelectedDate);
+  }
+  firstUpdated() {
+    var t;
+    this.$datepicker.date = this._init_date ? F.PlainDate.from(this._init_date).toString() : F.Now.plainDateISO().toString(), this.range ? this.$datepicker.selectedDateRange = {
+      start: this._init_date ? new Date(this._init_date) : null,
+      end: (t = this.value) != null && t.split(",")[1] ? new Date(this.value.split(",")[1]) : null
+    } : this.$datepicker.selectedDate = this._init_date ? new Date(this._init_date) : void 0, this.validateInput();
+  }
+  attributeChangedCallback(t, e, a) {
+    if (super.attributeChangedCallback(t, e, a), t === "custom-invalid")
+      if (typeof a == "string") {
+        const o = this.withFallback(a);
+        this._pristine = !1, this._internals.setValidity({ customError: !0 }, o), this.invalid = !0, this.hint = o, this.checkValidity();
+      } else
+        this._internals.setValidity({}), this.validateInput();
+  }
+  _handleValueChange() {
+    var t, e, a, l, o, h, c, i;
+    (t = this.value) != null && t.trim() || this.$datepicker.clearSelection(), this._internals.setFormValue(this.value ?? ""), this.validateInput(), this._pristine = !1, this.$input.value = v((e = this.value) == null ? void 0 : e.split(",")[0]), this.range ? (this.$datepicker.selectedDateRange = {
+      start: (o = this.value) != null && o.split(",")[0] ? new Date(this.value.split(",")[0]) : null,
+      end: (h = this.value) != null && h.split(",")[1] ? new Date(this.value.split(",")[1]) : null
+    }, this.$input_range_end.value = v((c = this.value) == null ? void 0 : c.split(",")[1]), this.$datepicker.date = ((i = this.value) == null ? void 0 : i.split(",")[0]) ?? "") : (this.$datepicker.selectedDate = (a = this.value) != null && a.split(",")[0] ? new Date(this.value.split(",")[0]) : void 0, this.$datepicker.date = ((l = this.value) == null ? void 0 : l.split(",")[0]) ?? ""), this.validateInput();
+  }
+  /** @internal */
+  async _animatePopover({ el: t = this.$popover, show: e }) {
+    return e && (t.style.opacity = "0", t.style.transform = "scaleY(0.5)"), new Promise((a) => {
+      const l = [
+        { opacity: 0, transform: "scaleY(0.5)" },
+        { opacity: 1, transform: "scaleY(1)" }
+      ], o = e ? l : l.reverse();
+      setTimeout(
+        () => {
+          t.style.transformOrigin = "top";
+          const h = this.$popover.animate(o, {
+            duration: 100,
+            easing: "linear",
+            fill: "both"
+          });
+          h.onfinish = () => {
+            a();
+          };
+        },
+        e ? 0 : 50
+      );
+    });
+  }
+  /** @internal consider sharing this functionality with input */
+  validateInput() {
+    if (this._internals.validity.customError) return;
+    let e = JSON.parse(JSON.stringify(this._internals.validity)), a = {};
+    if (this.selectableFrom) {
+      const { validityFragment: i, errorMessageFragment: r } = l(this);
+      e = { ...e, ...i }, a = { ...a, ...r };
+    }
+    if (this.selectableTo) {
+      const { validityFragment: i, errorMessageFragment: r } = o(this);
+      e = { ...e, ...i }, a = { ...a, ...r };
+    }
+    if (this.range) {
+      const { validityFragment: i, errorMessageFragment: r } = h(this);
+      e = { ...e, ...i }, a = { ...a, ...r };
+    }
+    if (this.required) {
+      const { validityFragment: i, errorMessageFragment: r } = c(this);
+      e = { ...e, ...i }, a = { ...a, ...r };
+    }
+    if (e.valid = !Object.values(e).some((i) => i), this.invalid = !1, e.valid)
+      this._internals.setValidity({ customError: this._internals.validity.customError });
+    else {
+      this.invalid = !this._pristine && !e.valid;
+      let i;
+      for (i in e) {
+        const r = `data-${i.toString()}`;
+        if (e[i]) {
+          this.validationError = i.toString();
+          const p = this.hasAttribute(r) ? this.getAttribute(r) : a[i];
+          this._internals.setValidity(
+            { [this.validationError]: !0, customError: this._internals.validity.customError },
+            this.withFallback(p)
+          ), this.invalid && this.customErrorDisplay && this.checkValidity();
+        }
+      }
+    }
+    function l(i) {
+      const r = { validityFragment: {}, errorMessageFragment: {} };
+      if (!i.selectableFrom) return r;
+      const p = new Date(i.selectableFrom);
+      if (new Date(i.$input.value) < p) {
+        const f = i.getAttribute("data-rangeunderflow") ?? "Date is out of range";
+        return {
+          validityFragment: { rangeUnderflow: !0, valid: !1 },
+          errorMessageFragment: { rangeUnderflow: f }
+        };
+      }
+      return r;
+    }
+    function o(i) {
+      const r = { validityFragment: {}, errorMessageFragment: {} };
+      if (!i.selectableTo) return r;
+      const p = new Date(i.selectableTo);
+      if (new Date(i.$input.value) > p) {
+        const f = i.getAttribute("data-rangeoverflow") ?? "Date is out of range";
+        return {
+          validityFragment: { rangeOverflow: !0, valid: !1 },
+          errorMessageFragment: { rangeOverflow: f }
+        };
+      }
+      return r;
+    }
+    function h(i) {
+      const r = { validityFragment: {}, errorMessageFragment: {} }, p = new Date(i.$input.value);
+      if (new Date(i.$input_range_end.value) < p) {
+        const f = i.getAttribute("data-rangeunderflow") ?? "Date is out of range";
+        return {
+          validityFragment: { rangeUnderflow: !0, valid: !1 },
+          errorMessageFragment: { rangeUnderflow: f }
+        };
+      }
+      return r;
+    }
+    function c(i) {
+      const r = { validityFragment: {}, errorMessageFragment: {} };
+      return !i.$input.value || i.range && !i.$input_range_end.value ? {
+        validityFragment: { valueMissing: !0, valid: !1 },
+        errorMessageFragment: { valueMissing: "This field is required" }
+      } : r;
+    }
+  }
+  render() {
+    var e, a, l, o, h, c, i, r;
+    const t = (this._defaultSlot.length === 0 || !((a = (e = this._defaultSlot[0]) == null ? void 0 : e.textContent) != null && a.trim())) && !this.label;
+    return m`
+			<div
+				id="root"
+				@mouseenter=${() => {
+      this.value && this._toggleClearButton(!0);
+    }}
+				@mouseleave=${() => {
+      this._toggleClearButton(!1);
+    }}
+			>
+				<label>
+					<div class=${this.hideLabel ? "visually-hidden" : ""} ?hidden=${t} id="label">
+						<slot>${this.label}</slot>
+						${this.required ? x(this.requiredLabel) : null}
+					</div>
+					<div id="input">
+						<div id="affix">
+							<input
+								?disabled=${this.disabled}
+								?readonly=${this.readonly}
+								.value=${k(
+      this.range ? v((l = this.value) == null ? void 0 : l.split(",")[0]) : v(this.value)
+    )}
+								@blur=${this._handleBlur}
+								@click=${this._handleFocus}
+								@focus=${this._handleFocus}
+								@input=${this._handleInput}
+								aria-describedby=${u((o = this.hint) != null && o.trim() ? "hint" : g)}
+								aria-errormessage=${u((h = this.hint) != null && h.trim() ? "hint" : g)}
+								aria-invalid=${!!this.invalid}
+								autocomplete="off"
+								data-testid="field-input"
+								inputmode=${u(this.inputMode)}
+								name=${u(this.name)}
+								placeholder=${u(this.placeholder)}
+								type="date"
+							/>
+						</div>
+						${this.range ? m`<div style="align-content:center">→</div>
+									<input
+										?disabled=${this.disabled}
+										?readonly=${this.readonly}
+										.value=${k(v((c = this.value) == null ? void 0 : c.split(",")[1]))}
+										@blur=${this._handleBlur}
+										@click=${this._handleFocus}
+										@focus=${this._handleFocus}
+										@input=${this._handleInput}
+										aria-describedby=${u((i = this.hint) != null && i.trim() ? "hint" : g)}
+										aria-errormessage=${u((r = this.hint) != null && r.trim() ? "hint" : g)}
+										aria-invalid=${!!this.invalid}
+										autocomplete="off"
+										data-testid="field-input-range-end"
+										inputmode=${u(this.inputMode)}
+										name=${u(String(this.name) + "-end")}
+										placeholder=${u(this.placeholder)}
+										type="date"
+									/>` : g}
+						${this.showClearbutton ? m`<button class="password skf-icon-host" type="button" @click=${this.clear}>
+									<skf-icon name="close" size="sm"></skf-icon>
+								</button>` : m`
+									<button class="password skf-icon-host" type="button">
+										<skf-icon name="calendarMonth" size="sm"></skf-icon>
+									</button>
+								`}
+					</div>
+				</label>
+				${this.hint && m`
+					<skf-hint
+						aria-live=${this.invalid ? "assertive" : "polite"}
+						id="hint"
+						severity=${u(B(this.severity, this.invalid))}
+						>${this.customInvalid ? this.customInvalid : this.hint}
+					</skf-hint>
+				`}
+			</div>
+
+			<div id="popover" popover @close=${this._handleClose}>
+				<skf-datepicker
+					?range=${this.range}
+					id=${this.id}
+					invalid-dates=${u(this.invalidDates)}
+					selectable-from=${u(this.selectableFrom)}
+					selectable-to=${u(this.selectableTo)}
+				></skf-datepicker>
+			</div>
+		`;
+  }
+};
+_.styles = [q, j];
+let s = _;
+n([
+  d({ attribute: "custom-invalid", reflect: !0 })
+], s.prototype, "customInvalid", 1);
+n([
+  d({ type: String })
+], s.prototype, "id", 2);
+n([
+  d()
+], s.prototype, "label", 2);
+n([
+  d({ type: Boolean, attribute: "hide-label" })
+], s.prototype, "hideLabel", 2);
+n([
+  d()
+], s.prototype, "hint", 2);
+n([
+  d({ attribute: "invalid-dates" })
+], s.prototype, "invalidDates", 2);
+n([
+  d({ reflect: !0 })
+], s.prototype, "name", 2);
+n([
+  d()
+], s.prototype, "placeholder", 2);
+n([
+  d({ type: Boolean })
+], s.prototype, "range", 2);
+n([
+  d({ type: Boolean })
+], s.prototype, "readonly", 2);
+n([
+  d({ attribute: "required-label" })
+], s.prototype, "requiredLabel", 2);
+n([
+  d({ attribute: "selectable-from" })
+], s.prototype, "selectableFrom", 2);
+n([
+  d({ attribute: "selectable-to" })
+], s.prototype, "selectableTo", 2);
+n([
+  d({ reflect: !0 })
+], s.prototype, "severity", 2);
+n([
+  d({ type: String, attribute: "validate-on" })
+], s.prototype, "validateOn", 2);
+n([
+  d()
+], s.prototype, "value", 2);
+n([
+  b()
+], s.prototype, "_init_date", 2);
+n([
+  d({ type: Boolean, reflect: !0 })
+], s.prototype, "invalid", 2);
+n([
+  b()
+], s.prototype, "selectedRangeDates", 2);
+n([
+  b()
+], s.prototype, "showClearbutton", 2);
+n([
+  y("#popover")
+], s.prototype, "$popover", 2);
+n([
+  y("#input")
+], s.prototype, "$anchor", 2);
+n([
+  y('input[data-testid="field-input"]')
+], s.prototype, "$input", 2);
+n([
+  y('input[data-testid="field-input-range-end"]')
+], s.prototype, "$input_range_end", 2);
+n([
+  y("skf-datepicker")
+], s.prototype, "$datepicker", 2);
+n([
+  R({ flatten: !0 })
+], s.prototype, "_defaultSlot", 2);
+n([
+  P("value", { waitUntilFirstUpdate: !0, afterUpdate: !0 })
+], s.prototype, "_handleValueChange", 1);
+export {
+  s as SkfDatePickerInput
+};

package/dist/components/date-picker-input/datepicker-input.d.ts

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

package/dist/components/date-picker-input/datepicker-input.helpers.d.ts

@@ -0,0 +1,4 @@
+export declare function dateFormatter(date?: string | Date | null, locale?: string): string;
+export declare function isPopoverOpen(element: HTMLElement): boolean;
+export declare function debounce<T extends (...args: unknown[]) => void>(func: T, delay: number): (...args: Parameters<T>) => void;
+export declare const isDate: (date?: Date | string | null) => boolean;

package/dist/components/date-picker-input/datepicker-input.helpers.js

@@ -0,0 +1,29 @@
+function r(e, n = "en-CA") {
+  return e ? (typeof e == "string" && (e = new Date(e)), e.toLocaleDateString(n)) : "";
+}
+function i(e) {
+  return console.dir("element", e), e.matches(":popover-open");
+}
+let o = null;
+function c(e, n) {
+  return (...t) => {
+    console.log("Debounced function called"), o && (clearTimeout(o), console.log("Existing timer cleared")), o = setTimeout(() => {
+      console.log("Function executed after delay"), e(...t);
+    }, n);
+  };
+}
+const l = (e) => {
+  if (!e) return !1;
+  if (typeof e != "string")
+    return e instanceof Date && !isNaN(e.valueOf());
+  {
+    const n = new Date(e);
+    return !isNaN(n);
+  }
+};
+export {
+  r as dateFormatter,
+  c as debounce,
+  l as isDate,
+  i as isPopoverOpen
+};

package/dist/components/date-picker-input/datepicker-input.js

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

package/dist/components/date-picker-input/datepicker-input.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult[];

package/dist/components/date-picker-input/datepicker-input.styles.js

@@ -0,0 +1,22 @@
+import o from "../../styles/form-field.styles.js";
+import { visuallyHidden as e } from "../../styles/util.styles.js";
+import { css as r } from "lit";
+const l = [
+  e,
+  o,
+  r`
+		@layer components {
+			#popover {
+				border: none;
+				overflow: visible;
+			}
+		}
+
+		input::-webkit-calendar-picker-indicator {
+			display: none;
+		}
+	`
+];
+export {
+  l as styles
+};

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

@@ -16,7 +16,6 @@ import { type CSSResultGroup } from 'lit';
  * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
  *
  * @slot - The dialog component's content
- * @slot heading - The dialog component's heading
  * @slot footer - The dialog component's buttons goes here
  *
  * @event skf-dialog-open - Fires when the dialog is opened (after transitioned in)