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

package/dist/components/accordion/accordion.component.js

@@ -5,9 +5,9 @@ import { html as f } from "lit";
 import { property as a, queryAssignedNodes as d } from "lit/decorators.js";
 import { classMap as c } from "lit/directives/class-map.js";
 import { styles as g } from "./accordion.styles.js";
-var y = Object.defineProperty, s = (u, t, i, o) => {
-  for (var r = void 0, l = u.length - 1, p; l >= 0; l--)
-    (p = u[l]) && (r = p(t, i, r) || r);
+var y = Object.defineProperty, s = (p, t, i, o) => {
+  for (var r = void 0, l = p.length - 1, u; l >= 0; l--)
+    (u = p[l]) && (r = u(t, i, r) || r);
   return r && y(t, i, r), r;
 };
 const n = class n extends h {

package/dist/components/alert/alert.component.js

@@ -1,15 +1,15 @@
 import "../icon/icon.js";
 import { SkfElement as y } from "../../internal/components/skf-element.js";
 import f from "../../styles/component.styles.js";
-import { html as m, nothing as u } from "lit";
+import { html as m, nothing as h } from "lit";
 import { property as s } from "lit/decorators.js";
-import { classMap as h } from "lit/directives/class-map.js";
+import { classMap as u } from "lit/directives/class-map.js";
 import { ifDefined as p } from "lit/directives/if-defined.js";
 import { styles as v } from "./alert.styles.js";
-var b = Object.defineProperty, r = (n, l, a, d) => {
-  for (var t = void 0, i = n.length - 1, c; i >= 0; i--)
-    (c = n[i]) && (t = c(l, a, t) || t);
-  return t && b(l, a, t), t;
+var b = Object.defineProperty, r = (l, a, n, d) => {
+  for (var t = void 0, i = l.length - 1, c; i >= 0; i--)
+    (c = l[i]) && (t = c(a, n, t) || t);
+  return t && b(a, n, t), t;
 };
 const o = class o extends y {
   constructor() {
@@ -21,7 +21,7 @@ const o = class o extends y {
     return m`
 			<div
 				aria-describedby="main"
-				class=${h({
+				class=${u({
       alert: !0,
       "alert--severity-alert": this.severity === "alert",
       "alert--severity-error": this.severity === "error",
@@ -50,7 +50,7 @@ const o = class o extends y {
 							>
 								<skf-icon name="close" size="sm"></skf-icon>
 							</button>
-						` : u}
+						` : h}
 			</div>
 		`;
   }

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

@@ -33,8 +33,8 @@ export declare class SkfButton extends SkfElement {
     icon?: SkfIcon['name'];
     /** If true, removes border */
     iconOnly: boolean;
-    /** If provided, determines the positioning of the icon in relation to the text  */
-    iconPosition?: 'left' | 'right';
+    /** Determines the positioning of the icon in relation to the text  */
+    iconPosition: 'left' | 'right';
     /** If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`. */
     loading: boolean;
     noValidate: boolean;
@@ -55,7 +55,7 @@ export declare class SkfButton extends SkfElement {
     private $button?;
     constructor();
     protected firstUpdated(_changedProperties: PropertyValues): void;
-    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    _handleLoadingChange(): void;
     /** @internal */
     _handleClick: (e: MouseEvent) => void;
     /** @internal */

package/dist/components/button/button.component.js

@@ -1,18 +1,19 @@
 import "../icon/icon.js";
 import "../loader/loader.js";
-import { SkfElement as b } from "../../internal/components/skf-element.js";
-import f from "../../styles/component.styles.js";
-import { html as h, LitElement as m, nothing as u } from "lit";
-import { property as e, state as _, query as p } from "lit/decorators.js";
-import { classMap as v } from "lit/directives/class-map.js";
-import { ifDefined as y } from "lit/directives/if-defined.js";
-import $ from "./button.styles.js";
-var g = Object.defineProperty, s = (c, t, a, n) => {
-  for (var o = void 0, r = c.length - 1, l; r >= 0; r--)
-    (l = c[r]) && (o = l(t, a, o) || o);
-  return o && g(t, a, o), o;
+import { SkfElement as m } from "../../internal/components/skf-element.js";
+import { watch as f } from "../../internal/helpers/watch.js";
+import u from "../../styles/component.styles.js";
+import { html as d, LitElement as _, nothing as p } from "lit";
+import { property as o, state as v, query as c } from "lit/decorators.js";
+import { classMap as $ } from "lit/directives/class-map.js";
+import { ifDefined as b } from "lit/directives/if-defined.js";
+import g from "./button.styles.js";
+var O = Object.defineProperty, V = Object.getOwnPropertyDescriptor, s = (y, t, l, r) => {
+  for (var e = r > 1 ? void 0 : r ? V(t, l) : t, a = y.length - 1, n; a >= 0; a--)
+    (n = y[a]) && (e = (r ? n(t, l, e) : n(e)) || e);
+  return r && e && O(t, l, e), e;
 };
-const d = class d extends b {
+const h = class h extends m {
   constructor() {
     super(), this._transitionOptions = {
       duration: 200,
@@ -20,13 +21,13 @@ const d = class d extends b {
     }, this.destructive = !1, this.disabled = !1, this.iconOnly = !1, this.iconPosition = "left", this.loading = !1, this.noValidate = !1, this.size = "md", this.type = "button", this.variant = "primary", this._loaderVisible = !1, this._handleClick = (t) => {
       t.preventDefault(), t.stopPropagation(), !(this.disabled || this.loading) && (this.dispatchEvent(new CustomEvent("click", { bubbles: !0, composed: !0, detail: t })), this.type === "submit" && this._submitForm(), this.type === "reset" && this._resetForm());
     }, this._submitForm = () => {
-      var o, r, l;
-      const t = !((o = this._internals.form) != null && o.reportValidity()), a = !this.noValidate, n = !((r = this._internals.form) != null && r.hasAttribute("no-validate"));
-      (a || n) && t || (l = this._internals.form) == null || l.submit();
+      var e, a, n;
+      const t = !((e = this._internals.form) != null && e.reportValidity()), l = !this.noValidate, r = !((a = this._internals.form) != null && a.hasAttribute("no-validate"));
+      (l || r) && t || (n = this._internals.form) == null || n.requestSubmit();
     }, this._resetForm = () => {
       var t;
       (t = this._internals.form) == null || t.reset();
-    }, this._renderIcon = () => h`<skf-icon class="skf-icon-host" name=${y(this.icon)}></skf-icon>`, this._internals = this.attachInternals();
+    }, this._renderIcon = () => d`<skf-icon class="skf-icon-host" name=${b(this.icon)}></skf-icon>`, this._internals = this.attachInternals();
   }
   firstUpdated(t) {
     if (t.has("loading") && this.loading) {
@@ -34,8 +35,8 @@ const d = class d extends b {
       this._loaderVisible = !0, this.$body.style.opacity = "0", this.$loader.style.opacity = "1";
     }
   }
-  attributeChangedCallback(t, a, n) {
-    super.attributeChangedCallback(t, a, n), t === "loading" && (n !== null ? this._showLoader() : this._hideLoader());
+  _handleLoadingChange() {
+    this.loading ? this._showLoader() : this._hideLoader();
   }
   /** Simulates a click on the button. */
   click() {
@@ -52,11 +53,11 @@ const d = class d extends b {
     !this.$body || !this.$loader || (await this.$loader.animate({ opacity: 0 }, this._transitionOptions).finished, this._loaderVisible = !1, this.$body.animate({ opacity: 1 }, this._transitionOptions));
   }
   render() {
-    return h`
+    return d`
 			<button
 				?disabled=${this.disabled || this.loading}
 				aria-busy=${this.loading}
-				class=${v({
+				class=${$({
       btn: !0,
       "btn--destructive": this.destructive,
       "btn--icon-only": this.iconOnly,
@@ -67,65 +68,68 @@ const d = class d extends b {
       "btn--variant-secondary": this.variant === "secondary",
       "btn--variant-tertiary": this.variant === "tertiary"
     })}
-				type=${y(this.type)}
+				type=${b(this.type)}
 				@click=${this._handleClick}
 				title=${/* An empty title prevents browser validation tooltips from appearing on hover */
     this.title}
 			>
-				${this.variant === "primary" && this._loaderVisible ? h`<skf-loader class="btn__loader" invert size="sm"></skf-loader>` : ""}
+				${this.variant === "primary" && this._loaderVisible ? d`<skf-loader class="btn__loader" invert size="sm"></skf-loader>` : ""}
 				<div class="btn__body" id="body">
-					${this.icon && this.iconPosition === "left" ? this._renderIcon() : ""}
-					${this.iconOnly ? u : h`<slot class="btn__label"></slot>`}
-					${this.icon && this.iconPosition === "right" ? this._renderIcon() : ""}
+					${this.icon && this.iconPosition === "left" ? this._renderIcon() : p}
+					${this.iconOnly ? p : d`<slot class="btn__label"></slot>`}
+					${this.icon && this.iconPosition === "right" ? this._renderIcon() : p}
 				</div>
 			</button>
 		`;
   }
 };
-d.formAssociated = !0, d.shadowRootOptions = { ...m.shadowRootOptions, delegatesFocus: !0 }, d.styles = [f, $];
-let i = d;
+h.formAssociated = !0, h.shadowRootOptions = { ..._.shadowRootOptions, delegatesFocus: !0 }, h.styles = [u, g];
+let i = h;
 s([
-  e({ type: Boolean })
-], i.prototype, "destructive");
+  o({ type: Boolean })
+], i.prototype, "destructive", 2);
 s([
-  e({ type: Boolean })
-], i.prototype, "disabled");
+  o({ type: Boolean })
+], i.prototype, "disabled", 2);
 s([
-  e()
-], i.prototype, "icon");
+  o()
+], i.prototype, "icon", 2);
 s([
-  e({ type: Boolean })
-], i.prototype, "iconOnly");
+  o({ type: Boolean })
+], i.prototype, "iconOnly", 2);
 s([
-  e({ attribute: "icon-position" })
-], i.prototype, "iconPosition");
+  o({ attribute: "icon-position" })
+], i.prototype, "iconPosition", 2);
 s([
-  e({ type: Boolean })
-], i.prototype, "loading");
+  o({ type: Boolean, reflect: !0 })
+], i.prototype, "loading", 2);
 s([
-  e({ type: Boolean, attribute: "no-validate" })
-], i.prototype, "noValidate");
+  o({ type: Boolean, attribute: "no-validate" })
+], i.prototype, "noValidate", 2);
 s([
-  e({ reflect: !0 })
-], i.prototype, "size");
+  o({ reflect: !0 })
+], i.prototype, "size", 2);
 s([
-  e()
-], i.prototype, "type");
+  o()
+], i.prototype, "type", 2);
 s([
-  e({ reflect: !0 })
-], i.prototype, "variant");
+  o({ reflect: !0 })
+], i.prototype, "variant", 2);
 s([
-  _()
-], i.prototype, "_loaderVisible");
+  v()
+], i.prototype, "_loaderVisible", 2);
 s([
-  p("skf-loader")
-], i.prototype, "$loader");
+  c("skf-loader")
+], i.prototype, "$loader", 2);
 s([
-  p("#body")
-], i.prototype, "$body");
+  c("#body")
+], i.prototype, "$body", 2);
 s([
-  p("button")
-], i.prototype, "$button");
+  c("button")
+], i.prototype, "$button", 2);
+s([
+  f("loading", { afterUpdate: !0 })
+], i.prototype, "_handleLoadingChange", 1);
 export {
   i as SkfButton
 };

package/dist/components/card/card.component.js

@@ -4,10 +4,10 @@ import { html as m } from "lit";
 import { property as o } from "lit/decorators.js";
 import { classMap as f } from "lit/directives/class-map.js";
 import { styles as h } from "./card.styles.js";
-var u = Object.defineProperty, s = (i, d, p, y) => {
-  for (var t = void 0, e = i.length - 1, a; e >= 0; e--)
-    (a = i[e]) && (t = a(d, p, t) || t);
-  return t && u(d, p, t), t;
+var u = Object.defineProperty, s = (i, p, a, y) => {
+  for (var t = void 0, e = i.length - 1, d; e >= 0; e--)
+    (d = i[e]) && (t = d(p, a, t) || t);
+  return t && u(p, a, t), t;
 };
 const n = class n extends l {
   constructor() {

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

@@ -26,7 +26,8 @@ export declare class SkfCheckbox extends FormBase implements FormFieldBaseProps
     /** If defined, outputs helping hints in console */
     debug?: boolean;
     /** If true, outputs helping hints in console */
-    checked?: boolean;
+    get checked(): boolean | undefined;
+    set checked(value: boolean | undefined);
     /** If true, forces component to invalid state until removed */
     customInvalid?: boolean;
     /** If true and the checkbox is unchecked, the checkbox will appear indeterminate */
@@ -53,6 +54,7 @@ export declare class SkfCheckbox extends FormBase implements FormFieldBaseProps
     private _invalid;
     /** @internal */
     private $input?;
+    handleCheckedChange(): void;
     handleInvalidChange(): void;
     handleDebugInvalid(): void;
     handleCustomInvalidChange(): void;

package/dist/components/checkbox/checkbox.component.js

@@ -1,25 +1,35 @@
 import "../icon/icon.js";
-import { FormBase as c } from "../../internal/components/formBase.js";
+import { FormBase as p } from "../../internal/components/formBase.js";
 import { watch as h } from "../../internal/helpers/watch.js";
 import { Asterisk as v } from "../../internal/templates/asterisk.js";
 import m from "../../styles/component.styles.js";
-import { html as p, nothing as f } from "lit";
-import { property as r, state as y, query as _ } from "lit/decorators.js";
-import { ifDefined as b } from "lit/directives/if-defined.js";
-import g from "./checkbox.styles.js";
-var $ = Object.defineProperty, I = Object.getOwnPropertyDescriptor, e = (u, i, s, a) => {
-  for (var l = a > 1 ? void 0 : a ? I(i, s) : i, o = u.length - 1, n; o >= 0; o--)
-    (n = u[o]) && (l = (a ? n(i, s, l) : n(l)) || l);
-  return a && l && $(i, s, l), l;
+import { html as c, nothing as f } from "lit";
+import { property as r, state as y, query as g } from "lit/decorators.js";
+import { ifDefined as _ } from "lit/directives/if-defined.js";
+import b from "./checkbox.styles.js";
+var k = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (u, t, s, a) => {
+  for (var l = a > 1 ? void 0 : a ? $(t, s) : t, n = u.length - 1, o; n >= 0; n--)
+    (o = u[n]) && (l = (a ? o(t, s, l) : o(l)) || l);
+  return a && l && k(t, s, l), l;
 };
-const d = class d extends c {
+const d = class d extends p {
   constructor() {
-    super(...arguments), this._initiallyChecked = !1, this.size = "md", this.value = "", this._invalid = !1, this._resetValue = (i) => {
-      i.stopPropagation(), this.checked = this._initiallyChecked, this.$input && (this.$input.checked = !!this._initiallyChecked), this.setFormValue(this.checked ? this.value : null);
-    }, this._renderIcon = (i) => p`
-		<skf-icon color="inverse" name=${i} size=${this.size === "sm" ? "sm" : "md"}></skf-icon>
+    super(...arguments), this._initiallyChecked = !1, this.size = "md", this.value = "", this._invalid = !1, this._resetValue = (t) => {
+      t.stopPropagation(), this.checked = this._initiallyChecked, this.$input && (this.$input.checked = !!this._initiallyChecked), this.setFormValue(this.checked ? this.value : null);
+    }, this._renderIcon = (t) => c`
+		<skf-icon color="inverse" name=${t} size=${this.size === "sm" ? "sm" : "md"}></skf-icon>
 	`;
   }
+  get checked() {
+    var t;
+    return ((t = this.$input) == null ? void 0 : t.checked) ?? !1;
+  }
+  set checked(t) {
+    this.setAttribute("checked", String(!!t)), this.$input && (this.$input.checked = !!t);
+  }
+  handleCheckedChange() {
+    this.setFormValue(this.checked ? this.value : null), this._validateInput();
+  }
   handleInvalidChange() {
     this._invalid ? (this.setAttribute("invalid", ""), this.showValid && this.removeAttribute("valid"), this.checkValidity()) : (this.removeAttribute("invalid"), !this.pristine && this.showValid && this.setAttribute("valid", "true"));
   }
@@ -37,8 +47,8 @@ const d = class d extends c {
       this.setValidity({}), this._validateInput();
   }
   firstUpdated() {
-    var i;
-    (i = this.$input) == null || i.addEventListener("change", (s) => {
+    var t;
+    (t = this.$input) == null || t.addEventListener("change", (s) => {
       var a;
       s.stopPropagation(), this.pristine = !1, this.checked = (a = this.$input) == null ? void 0 : a.checked, this._validateInput(), this.checked ? (this.indeterminate = !1, this.setFormValue(this.value)) : this.setFormValue(null), this.emitEvent("change");
     }), this.addEventListener("invalid", (s) => {
@@ -47,21 +57,21 @@ const d = class d extends c {
   }
   /** @internal */
   _validateInput() {
-    var i;
+    var t;
     if (this._invalid = !1, this.customInvalid)
       this.setValidity({ customError: !0 }, "Custom error"), this._invalid = !0;
     else if (this.required && !this.checked) {
       this.pristine || (this._invalid = !0);
       const s = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : (
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        ((i = this.$input) == null ? void 0 : i.validationMessage) || "Please check this box if you want to proceed"
+        ((t = this.$input) == null ? void 0 : t.validationMessage) || "Please check this box if you want to proceed"
       );
       this.setValidity({ valueMissing: !0 }, String(s));
     } else
       this.setValidity({});
   }
   render() {
-    return p`
+    return c`
 			<label id="root">
 				<input
 					?checked=${this.checked}
@@ -69,7 +79,7 @@ const d = class d extends c {
 					?required=${this.required}
 					.indeterminate=${this.indeterminate ?? !1}
 					aria-invalid=${!!this._invalid}
-					name=${b(this.name)}
+					name=${_(this.name)}
 					type="checkbox"
 					value=${this.value}
 				/>
@@ -82,56 +92,59 @@ const d = class d extends c {
 		`;
   }
 };
-d.styles = [m, g];
-let t = d;
-e([
+d.styles = [m, b];
+let e = d;
+i([
   r({ type: Boolean })
-], t.prototype, "debug", 2);
-e([
+], e.prototype, "debug", 2);
+i([
   r({ type: Boolean, reflect: !0 })
-], t.prototype, "checked", 2);
-e([
+], e.prototype, "checked", 1);
+i([
   r({ type: Boolean, attribute: "custom-invalid", reflect: !0 })
-], t.prototype, "customInvalid", 2);
-e([
+], e.prototype, "customInvalid", 2);
+i([
   r({ type: Boolean, reflect: !0 })
-], t.prototype, "indeterminate", 2);
-e([
+], e.prototype, "indeterminate", 2);
+i([
   r()
-], t.prototype, "label", 2);
-e([
+], e.prototype, "label", 2);
+i([
   r()
-], t.prototype, "name", 2);
-e([
+], e.prototype, "name", 2);
+i([
   r({ attribute: "required-label" })
-], t.prototype, "requiredLabel", 2);
-e([
+], e.prototype, "requiredLabel", 2);
+i([
   r({ reflect: !0 })
-], t.prototype, "severity", 2);
-e([
+], e.prototype, "severity", 2);
+i([
   r({ type: Boolean, attribute: "show-valid" })
-], t.prototype, "showValid", 2);
-e([
+], e.prototype, "showValid", 2);
+i([
   r({ reflect: !0 })
-], t.prototype, "size", 2);
-e([
+], e.prototype, "size", 2);
+i([
   r()
-], t.prototype, "value", 2);
-e([
+], e.prototype, "value", 2);
+i([
   y()
-], t.prototype, "_invalid", 2);
-e([
-  _("input")
-], t.prototype, "$input", 2);
-e([
+], e.prototype, "_invalid", 2);
+i([
+  g("input")
+], e.prototype, "$input", 2);
+i([
+  h("checked", { afterUpdate: !0 })
+], e.prototype, "handleCheckedChange", 1);
+i([
   h("_invalid")
-], t.prototype, "handleInvalidChange", 1);
-e([
+], e.prototype, "handleInvalidChange", 1);
+i([
   h("_invalid", { afterUpdate: !0 })
-], t.prototype, "handleDebugInvalid", 1);
-e([
+], e.prototype, "handleDebugInvalid", 1);
+i([
   h("customInvalid")
-], t.prototype, "handleCustomInvalidChange", 1);
+], e.prototype, "handleCustomInvalidChange", 1);
 export {
-  t as SkfCheckbox
+  e as SkfCheckbox
 };

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

@@ -0,0 +1,72 @@
+import { SkfElement } from '../../internal/components/skf-element.js';
+import { Temporal } from '@js-temporal/polyfill';
+import { type CSSResultGroup } from 'lit';
+interface DateParts {
+    year?: number;
+    month?: number;
+    day?: number;
+}
+export declare class SkfDatePickerCalendar extends SkfElement {
+    static styles: CSSResultGroup;
+    /** @internal */
+    _secondCalendarOffset: number;
+    /** @internal calendar month to display */
+    date: Date;
+    eventid: string;
+    firstDayOfWeek: number;
+    /**
+     * A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.
+     */
+    invalidDates?: string;
+    locale: string;
+    range: boolean;
+    /**
+     * Earliest selectable date. (yyyy-mm-dd format)
+     */
+    selectableFrom?: string;
+    /**
+     * Latest selectable date. (yyyy-mm-dd format)
+     */
+    selectableTo?: string;
+    selectedDate?: Date;
+    selectedDateRange: {
+        start: Date | null;
+        end: Date | null;
+    };
+    /** @internal */
+    _numberOfDays: number;
+    /** @internal */
+    _numberOfDaysLastMonth: number;
+    firstUpdated(): void;
+    /** For single select, the selected date */
+    attributeChangedCallback(name: string, oldVal: unknown, newVal: unknown): void;
+    /** @internal */
+    handleDateChange(): void;
+    /** @internal */
+    _createDate({ year, month, day }: DateParts, useTemporalApi: true): Temporal.PlainDate;
+    _createDate({ year, month, day }: DateParts, useTemporalApi?: false): Date;
+    /** @internal Converts a new Date object to PlainDate type. If no argument sent, uses 'this.date' */
+    _plainDate(date?: Date | null): Temporal.PlainDate | null;
+    /** @internal Check if a day is between two dates */
+    _isDateBetween(dateToCheck: Temporal.PlainDate, startDate?: Temporal.PlainDate, endDate?: Temporal.PlainDate): boolean;
+    render(): import("lit").TemplateResult<1>;
+    /** @internal */
+    private returnDayClasses;
+    /** @internal */
+    private handleSelectDay;
+    /** @internal */
+    private getCalendarPreMonthDays;
+    /** @internal */
+    private getCalendarRemaningDays;
+    /** @internal */
+    private calendarMonthStartsOn;
+    /** @internal */
+    private getCalendarStartDay;
+    dateSelectable: (dateString: string) => {
+        matchesInvalidDates: boolean | undefined;
+        dateWithinRange: boolean;
+    };
+    /** @internal */
+    private getCalendarHead;
+}
+export {};