@skf-design-system/ui-components 1.0.0-alpha.34 → 1.0.0-alpha.36

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

@@ -1,44 +1,54 @@
-import { SkfElement as l } from "../../internal/components/skf-element.js";
-import c from "../../styles/component.styles.js";
-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, 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;
+var g = (t) => {
+  throw TypeError(t);
 };
-const n = class n extends l {
+var u = (t, e, o) => e.has(t) || g("Cannot " + o);
+var m = (t, e, o) => (u(t, e, "read from private field"), o ? o.call(t) : e.get(t)), d = (t, e, o) => e.has(t) ? g("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, o), c = (t, e, o, s) => (u(t, e, "write to private field"), s ? s.call(t, o) : e.set(t, o), o);
+import { SkfElement as b } from "../../internal/components/skf-element.js";
+import { stateMap as v } from "../../internal/helpers/stateMap.js";
+import { watch as P } from "../../internal/helpers/watch.js";
+import { componentStyles as B } from "../../styles/component.styles.js";
+import { html as O } from "lit";
+import { property as f } from "lit/decorators.js";
+import { styles as j } from "./card.styles.js";
+var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (t, e, o, s) => {
+  for (var r = s > 1 ? void 0 : s ? x(e, o) : e, h = t.length - 1, l; h >= 0; h--)
+    (l = t[h]) && (r = (s ? l(e, o, r) : l(r)) || r);
+  return s && r && w(e, o, r), r;
+};
+const _ = {
+  noBorder: "no-border",
+  noPadding: "no-padding",
+  stretch: "stretch"
+};
+var p, a;
+const y = class y extends b {
   constructor() {
-    super(...arguments), this.noBorder = !1, this.noPadding = !1, this.stretch = !1;
+    super(...arguments);
+    d(this, p);
+    d(this, a);
+    c(this, p, this.attachInternals()), c(this, a, m(this, p).states), this.noBorder = !1, this.noPadding = !1, this.stretch = !1;
+  }
+  _handleStateChange(o, s, r) {
+    v(m(this, a), _[o]).set(r);
   }
   render() {
-    return m`
-			<div
-				class=${f({
-      card: !0,
-      "card--no-border": this.noBorder,
-      "card--no-padding": this.noPadding,
-      "card--stretch": this.stretch
-    })}
-			>
-				<slot></slot>
-			</div>
-		`;
+    return O`<slot id="root"></slot>`;
   }
 };
-n.styles = [c, h];
-let r = n;
-s([
-  o({ type: Boolean, attribute: "no-border" })
-], r.prototype, "noBorder");
-s([
-  o({ type: Boolean, attribute: "no-padding" })
-], r.prototype, "noPadding");
-s([
-  o({ type: Boolean, reflect: !0 })
-], r.prototype, "stretch");
+p = new WeakMap(), a = new WeakMap(), y.styles = [B, j];
+let n = y;
+i([
+  f({ type: Boolean, attribute: "no-border" })
+], n.prototype, "noBorder", 2);
+i([
+  f({ type: Boolean, attribute: "no-padding" })
+], n.prototype, "noPadding", 2);
+i([
+  f({ type: Boolean })
+], n.prototype, "stretch", 2);
+i([
+  P(Object.keys(_))
+], n.prototype, "_handleStateChange", 1);
 export {
-  r as SkfCard
+  n as SkfCard
 };

package/dist/components/card/card.styles.js

@@ -1,34 +1,48 @@
 import { css as r } from "lit";
 const a = r`
-	/* stylelint-disable selector-class-pattern */
+	@layer components {
+		@layer base {
+			:host {
+				contain: layout;
+			}
 
-	:host {
-		contain: layout;
-	}
+			#root {
+				--_skf-card-bg-color: var(--mod-card-bg-color, var(--skf-bg-color-neutral-1));
+				--_skf-card-border-color: var(--skf-border-color-tertiary);
+				--_skf-card-padding: var(--skf-spacing-100);
+				--_skf-card-shadow: var(--skf-shadow-md);
 
-	:host([stretch]) {
-		block-size: 100%;
-	}
+				background-color: var(--_skf-card-bg-color);
+				border: var(--skf-border-width-sm) solid var(--_skf-card-border-color);
+				border-radius: var(--skf-border-radius-sm);
+				box-shadow: var(--_skf-card-shadow);
+				display: block;
+				padding: var(--_skf-card-padding);
+			}
+		}
 
-	.card {
-		background-color: var(--skf-bg-color-neutral-1);
-		border: var(--skf-border-width-sm) solid
-			var(--_skf-card-border-color, var(--skf-border-color-tertiary));
-		border-radius: var(--skf-border-radius-sm);
-		box-shadow: var(--skf-shadow-md);
-		padding: var(--_skf-card-padding, var(--skf-spacing-100));
-	}
+		@layer mods {
+			:host(:state(no-border)) {
+				#root {
+					--_skf-card-border-color: transparent;
+					--_skf-card-shadow: none;
+				}
+			}
 
-	.card--no-border {
-		--_skf-card-border-color: transparent;
-	}
+			:host(:state(no-padding)) {
+				#root {
+					--_skf-card-padding: 0;
+				}
+			}
 
-	.card--no-padding {
-		--_skf-card-padding: 0;
-	}
+			:host(:state(stretch)) {
+				block-size: 100%;
 
-	.card--stretch {
-		block-size: inherit;
+				#root {
+					block-size: inherit;
+				}
+			}
+		}
 	}
 `;
 export {

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

@@ -1,5 +1,6 @@
 import '../icon/icon.js';
 import { FormBase } from '../../internal/components/formBase.js';
+import type { FormFieldSeverity } from '../../internal/types.js';
 import type { FormFieldBaseProps } from '../../internal/types/formField.js';
 import { type CSSResultGroup } from 'lit';
 /**
@@ -7,10 +8,10 @@ import { type CSSResultGroup } from 'lit';
  *
  * @documentation See [zeroheight](https://zeroheight.com/853e936c9/p/94464f-checkbox) for design principles
  *
- * @attribute {boolean} disabled - If true, sets disabled state
- * @attribute {boolean} required - If true, value is required or must be checked for the form to be submittable
+ * @attribute {boolean} [disabled=false] - If true, sets disabled state
+ * @attribute {boolean} [required=false] - If true, value is required or must be checked for the form to be submittable
  *
- * @event change {object} - When the value of the input changes
+ * @event {Event} change - When the value of the input changes
  *
  * @slot - The Radios label. Alternatively, you can use the `label` attribute.
  *
@@ -24,26 +25,24 @@ export declare class SkfCheckbox extends FormBase implements FormFieldBaseProps
      */
     private _initiallyChecked;
     /** If defined, outputs helping hints in console */
-    debug?: boolean;
+    debug: boolean;
     /** If true, outputs helping hints in console */
-    checked?: boolean;
+    get checked(): boolean;
+    set checked(value: boolean);
     /** If true, forces component to invalid state until removed */
-    customInvalid?: boolean;
+    customInvalid: boolean;
     /** If true and the checkbox is unchecked, the checkbox will appear indeterminate */
-    indeterminate?: boolean;
+    indeterminate: boolean;
     /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
     label?: string;
     /** If defined, adds name to the input-element */
     name?: string;
     /** If defined, renders an alternative A11y text for the asterisk */
     requiredLabel?: string;
-    /**
-     * If defined, styles checkbox using provided severity
-     * @type { "alert" | "success" | "info" | "warning" }
-     */
-    severity?: FormFieldBaseProps['severity'];
+    /** If defined, styles checkbox using provided severity */
+    severity?: FormFieldSeverity;
     /** If true, displays valid state after interaction */
-    showValid?: boolean;
+    showValid: boolean;
     /** Size of the checkbox */
     size: 'sm' | 'md';
     /** The current value of the input field  */
@@ -53,8 +52,13 @@ export declare class SkfCheckbox extends FormBase implements FormFieldBaseProps
     private _invalid;
     /** @internal */
     private $input?;
+    /** @internal */
+    handleCheckedChange(): void;
+    /** @internal */
     handleInvalidChange(): void;
+    /** @internal */
     handleDebugInvalid(): void;
+    /** @internal */
     handleCustomInvalidChange(): void;
     protected firstUpdated(): void;
     /** @internal */

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 y } from "lit";
-import { property as r, state as f, 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 { componentStyles as m } from "../../styles/component.styles.js";
+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 { styles as 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.debug = !1, this.customInvalid = !1, this.indeterminate = !1, this.showValid = !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,101 +47,104 @@ 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");
+      s.stopPropagation(), this.pristine = !1, this.checked = ((a = this.$input) == null ? void 0 : a.checked) ?? !1, this._validateInput(), this.checked ? (this.indeterminate = !1, this.setFormValue(this.value)) : this.setFormValue(null), this.emitEvent("change");
     }), this.addEventListener("invalid", (s) => {
       this.pristine = !1, this._invalid = !0, this.customErrorDisplay && s.preventDefault();
     }), this._initiallyChecked = this.checked, this.addEventListener("reset", this._resetValue), this._validateInput();
   }
   /** @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}
 					?disabled=${this.disabled}
 					?required=${this.required}
-					.indeterminate=${this.indeterminate ?? !1}
+					.indeterminate=${this.indeterminate}
 					aria-invalid=${!!this._invalid}
-					name=${b(this.name)}
+					name=${_(this.name)}
 					type="checkbox"
 					value=${this.value}
 				/>
 				${this._renderIcon("check")} ${this._renderIcon("removeMinus")}
 				<div id="label">
 					<slot>${this.label}</slot>
-					${this.required ? v(this.requiredLabel) : y}
+					${this.required ? v(this.requiredLabel) : f}
 				</div>
 			</label>
 		`;
   }
 };
-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([
-  f()
-], t.prototype, "_invalid", 2);
-e([
-  _("input")
-], t.prototype, "$input", 2);
-e([
+], e.prototype, "value", 2);
+i([
+  y()
+], 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/checkbox/checkbox.styles.d.ts

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

package/dist/components/checkbox/checkbox.styles.js

@@ -65,10 +65,6 @@ const i = [
 					--_skf-checkbox-border-color: var(--skf-severity-fg-color-success);
 				}
 
-				:host([severity='alert']:not([invalid], [valid])) & {
-					--_skf-checkbox-border-color: var(--skf-severity-fg-color-alert);
-				}
-
 				:host([severity='info']:not([invalid], [valid])) & {
 					--_skf-checkbox-border-color: var(--skf-severity-fg-color-info);
 				}
@@ -110,5 +106,5 @@ const i = [
 	`
 ];
 export {
-  i as default
+  i as styles
 };

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

@@ -0,0 +1,80 @@
+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;
+}
+/**
+ * @tagname skf-datepicker-calendar
+ */
+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;
+    _listenToKeyboard: () => {
+        start: () => void;
+        stop: () => void;
+    };
+    _handleKeyDown: (e: KeyboardEvent) => 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 {};