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

package/dist/index.d.ts

@@ -4,6 +4,8 @@ export { default as SkfButton } from './components/button/button.js';
 export { default as SkfCard } from './components/card/card.js';
 export { default as SkfCheckbox } from './components/checkbox/checkbox.js';
 export { default as SkfCollapse } from './components/collapse/collapse.js';
+export { default as SkfDatePickerInput } from './components/date-picker-input/datepicker-input.js';
+export { default as SkfDatePicker } from './components/date-picker/datepicker.js';
 export { default as SkfDialog } from './components/dialog/dialog.js';
 export { default as SkfDivider } from './components/divider/divider.js';
 export { default as SkfHeading } from './components/heading/heading.js';

package/dist/index.js

@@ -4,6 +4,8 @@ import "./components/button/button.js";
 import "./components/card/card.js";
 import "./components/checkbox/checkbox.js";
 import "./components/collapse/collapse.js";
+import "./components/date-picker-input/datepicker-input.js";
+import "./components/date-picker/datepicker.js";
 import "./components/dialog/dialog.js";
 import "./components/divider/divider.js";
 import "./components/heading/heading.js";
@@ -30,71 +32,75 @@ import "./components/tag/tag.js";
 import "./components/textarea/textarea.js";
 import "./components/toast/toast.js";
 import "./components/tooltip/tooltip.js";
-import { SkfAccordion as H } from "./components/accordion/accordion.component.js";
-import { SkfAlert as j } from "./components/alert/alert.component.js";
-import { SkfButton as y } from "./components/button/button.component.js";
-import { SkfCard as E } from "./components/card/card.component.js";
-import { SkfCheckbox as J } from "./components/checkbox/checkbox.component.js";
-import { SkfCollapse as N } from "./components/collapse/collapse.component.js";
-import { SkfDialog as U } from "./components/dialog/dialog.component.js";
-import { SkfDivider as W } from "./components/divider/divider.component.js";
-import { SkfHeading as Y } from "./components/heading/heading.component.js";
-import { SkfIcon as _ } from "./components/icon/icon.component.js";
-import { SkfInput as oo } from "./components/input/input.component.js";
-import { SkfLink as to } from "./components/link/link.component.js";
-import { SkfLoader as fo } from "./components/loader/loader.component.js";
-import { SkfLogo as eo } from "./components/logo/logo.component.js";
-import { SkfMenuItem as So } from "./components/menu-item/menu-item.component.js";
-import { SkfMenu as xo } from "./components/menu/menu.component.js";
-import { SkfPopover as no } from "./components/popover/popover.component.js";
-import { SkfProgress as lo } from "./components/progress/progress.component.js";
-import { SkfRadio as To } from "./components/radio/radio.component.js";
-import { SkfSelectOptionGroup as bo } from "./components/select-option-group/select-option-group.component.js";
-import { SkfSelectOption as Io } from "./components/select-option/select-option.component.js";
-import { SkfSelect as Go } from "./components/select/select.component.js";
-import { SkfStepperItem as Co } from "./components/stepper-item/stepper-item.component.js";
-import { SkfStepper as Po } from "./components/stepper/stepper.component.js";
-import { SkfSwitch as vo } from "./components/switch/switch.component.js";
-import { SkfTabGroup as Mo } from "./components/tab-group/tab-group.component.js";
-import { SkfTabPanel as Bo } from "./components/tab-panel/tab-panel.component.js";
-import { SkfTab as Ro } from "./components/tab/tab.component.js";
-import { SkfTag as qo } from "./components/tag/tag.component.js";
-import { SkfTextArea as zo } from "./components/textarea/textarea.component.js";
-import { SkfToast as Fo } from "./components/toast/toast.component.js";
-import { SkfTooltip as Ko } from "./components/tooltip/tooltip.component.js";
-import { SkfAccordionItem as Qo } from "./components/accordion/accordion-item.js";
+import { SkfAccordion as j } from "./components/accordion/accordion.component.js";
+import { SkfAlert as y } from "./components/alert/alert.component.js";
+import { SkfButton as E } from "./components/button/button.component.js";
+import { SkfCard as J } from "./components/card/card.component.js";
+import { SkfCheckbox as N } from "./components/checkbox/checkbox.component.js";
+import { SkfCollapse as U } from "./components/collapse/collapse.component.js";
+import { SkfDatePickerInput as W } from "./components/date-picker-input/datepicker-input.component.js";
+import { SkfDatePicker as Y } from "./components/date-picker/datepicker.component.js";
+import { SkfDialog as _ } from "./components/dialog/dialog.component.js";
+import { SkfDivider as oo } from "./components/divider/divider.component.js";
+import { SkfHeading as to } from "./components/heading/heading.component.js";
+import { SkfIcon as fo } from "./components/icon/icon.component.js";
+import { SkfInput as eo } from "./components/input/input.component.js";
+import { SkfLink as So } from "./components/link/link.component.js";
+import { SkfLoader as xo } from "./components/loader/loader.component.js";
+import { SkfLogo as no } from "./components/logo/logo.component.js";
+import { SkfMenuItem as lo } from "./components/menu-item/menu-item.component.js";
+import { SkfMenu as To } from "./components/menu/menu.component.js";
+import { SkfPopover as Io } from "./components/popover/popover.component.js";
+import { SkfProgress as go } from "./components/progress/progress.component.js";
+import { SkfRadio as Ao } from "./components/radio/radio.component.js";
+import { SkfSelectOptionGroup as Go } from "./components/select-option-group/select-option-group.component.js";
+import { SkfSelectOption as Co } from "./components/select-option/select-option.component.js";
+import { SkfSelect as ho } from "./components/select/select.component.js";
+import { SkfStepperItem as Mo } from "./components/stepper-item/stepper-item.component.js";
+import { SkfStepper as Bo } from "./components/stepper/stepper.component.js";
+import { SkfSwitch as Ro } from "./components/switch/switch.component.js";
+import { SkfTabGroup as qo } from "./components/tab-group/tab-group.component.js";
+import { SkfTabPanel as zo } from "./components/tab-panel/tab-panel.component.js";
+import { SkfTab as Fo } from "./components/tab/tab.component.js";
+import { SkfTag as Ko } from "./components/tag/tag.component.js";
+import { SkfTextArea as Qo } from "./components/textarea/textarea.component.js";
+import { SkfToast as Vo } from "./components/toast/toast.component.js";
+import { SkfTooltip as Xo } from "./components/tooltip/tooltip.component.js";
+import { SkfAccordionItem as Zo } from "./components/accordion/accordion-item.js";
 export {
-  H as SkfAccordion,
-  Qo as SkfAccordionItem,
-  j as SkfAlert,
-  y as SkfButton,
-  E as SkfCard,
-  J as SkfCheckbox,
-  N as SkfCollapse,
-  U as SkfDialog,
-  W as SkfDivider,
-  Y as SkfHeading,
-  _ as SkfIcon,
-  oo as SkfInput,
-  to as SkfLink,
-  fo as SkfLoader,
-  eo as SkfLogo,
-  xo as SkfMenu,
-  So as SkfMenuItem,
-  Io as SkfOption,
-  bo as SkfOptionGroup,
-  no as SkfPopover,
-  lo as SkfProgress,
-  To as SkfRadio,
-  Go as SkfSelect,
-  Po as SkfStepper,
-  Co as SkfStepperItem,
-  vo as SkfSwitch,
-  Ro as SkfTab,
-  Mo as SkfTabGoup,
-  Bo as SkfTabPanel,
-  qo as SkfTag,
-  zo as SkfTextArea,
-  Fo as SkfToast,
-  Ko as SkfTooltip
+  j as SkfAccordion,
+  Zo as SkfAccordionItem,
+  y as SkfAlert,
+  E as SkfButton,
+  J as SkfCard,
+  N as SkfCheckbox,
+  U as SkfCollapse,
+  Y as SkfDatePicker,
+  W as SkfDatePickerInput,
+  _ as SkfDialog,
+  oo as SkfDivider,
+  to as SkfHeading,
+  fo as SkfIcon,
+  eo as SkfInput,
+  So as SkfLink,
+  xo as SkfLoader,
+  no as SkfLogo,
+  To as SkfMenu,
+  lo as SkfMenuItem,
+  Co as SkfOption,
+  Go as SkfOptionGroup,
+  Io as SkfPopover,
+  go as SkfProgress,
+  Ao as SkfRadio,
+  ho as SkfSelect,
+  Bo as SkfStepper,
+  Mo as SkfStepperItem,
+  Ro as SkfSwitch,
+  Fo as SkfTab,
+  qo as SkfTabGoup,
+  zo as SkfTabPanel,
+  Ko as SkfTag,
+  Qo as SkfTextArea,
+  Vo as SkfToast,
+  Xo as SkfTooltip
 };

package/dist/internal/components/hint/hint.component.js

@@ -1,21 +1,21 @@
 import "../../../components/icon/icon.js";
-import { SkfElement as n } from "../skf-element.js";
-import { ICON_SEVERITY as l } from "../../constants/iconSeverity.js";
+import { SkfElement as l } from "../skf-element.js";
+import { ICON_SEVERITY as n } from "../../constants/iconSeverity.js";
 import v from "../../../styles/component.styles.js";
 import { html as f } from "lit";
-import { property as d } from "lit/decorators.js";
-import y from "./hint.styles.js";
+import { property as y } from "lit/decorators.js";
+import d from "./hint.styles.js";
 var a = Object.defineProperty, c = (s, i, m, h) => {
-  for (var r = void 0, e = s.length - 1, p; e >= 0; e--)
-    (p = s[e]) && (r = p(i, m, r) || r);
+  for (var r = void 0, t = s.length - 1, p; t >= 0; t--)
+    (p = s[t]) && (r = p(i, m, r) || r);
   return r && a(i, m, r), r;
 };
-const o = class o extends n {
+const o = class o extends l {
   render() {
     return f`
 			<div id="root">
 				${this.severity && f`
-					<skf-icon color=${this.severity} name="${l[this.severity]}" size="xs">
+					<skf-icon color=${this.severity} name="${n[this.severity]}" size="xs">
 					</skf-icon>
 				`}
 				<slot></slot>
@@ -23,11 +23,11 @@ const o = class o extends n {
 		`;
   }
 };
-o.styles = [v, y];
-let t = o;
+o.styles = [v, d];
+let e = o;
 c([
-  d()
-], t.prototype, "severity");
+  y()
+], e.prototype, "severity");
 export {
-  t as SkfHint
+  e as SkfHint
 };

package/dist/internal/controllers/popover.controller.d.ts

@@ -1,7 +1,8 @@
+import type { SkfDatePickerInput } from '../../components/date-picker-input/datepicker-input.component.js';
 import { SkfSelect } from '../../components/select/select.component.js';
 import type { SkfPopoverBase } from '../base-classes/popover/popover.base.js';
 import type { ReactiveController } from 'lit';
-type ControllerHost = SkfPopoverBase | SkfSelect;
+type ControllerHost = SkfPopoverBase | SkfSelect | SkfDatePickerInput;
 export declare class PopoverController implements ReactiveController {
     host?: ControllerHost;
     private cleanup;

package/dist/internal/controllers/popover.controller.js

@@ -18,8 +18,8 @@ class p {
     });
   }
   start() {
-    var e, r;
-    const t = (e = this.host) == null ? void 0 : e.$anchor, o = (r = this.host) == null ? void 0 : r.$popover;
+    var r, e;
+    const t = (r = this.host) == null ? void 0 : r.$anchor, o = (e = this.host) == null ? void 0 : e.$popover;
     if (!t || !o) {
       console.warn("PopoverController: anchor or popup not found");
       return;

package/dist/internal/helpers/dateFormatter.d.ts

@@ -0,0 +1,2 @@
+/** Formats a date to SKF standard format. Can be localized, defaults to GB English */
+export declare function dateFormatter(date?: Date | null, locale?: string): string;

package/dist/internal/helpers/utilityTypes.d.ts

@@ -0,0 +1,22 @@
+export type Mutable<T> = {
+    -readonly [K in keyof T]: T[K];
+};
+type oneToNine = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+type zeroToNine = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+/**
+ * Years
+ */
+type YYYY = `19${zeroToNine}${zeroToNine}` | `20${zeroToNine}${zeroToNine}`;
+/**
+ * Months
+ */
+type MM = `0${oneToNine}` | `1${0 | 1 | 2}`;
+/**
+ * Days
+ */
+type DD = `${0}${oneToNine}` | `${1 | 2}${zeroToNine}` | `3${0 | 1}`;
+/**
+ * YYYY-MM-DD
+ */
+export type ISODateString = `${YYYY}-${MM}-${DD}`;
+export {};

package/dist/react/index.d.ts

@@ -6,6 +6,7 @@ export { default as SkfButton } from './skf-button/index.js';
 export { default as SkfCard } from './skf-card/index.js';
 export { default as SkfCheckbox } from './skf-checkbox/index.js';
 export { default as SkfCollapse } from './skf-collapse/index.js';
+export { default as SkfDatePicker } from './skf-datepicker/index.js';
 export { default as SkfDialog } from './skf-dialog/index.js';
 export { default as SkfDivider } from './skf-divider/index.js';
 export { default as SkfHeading } from './skf-heading/index.js';

package/dist/react/index.js

@@ -6,6 +6,7 @@ export { default as SkfButton } from './skf-button/index.js';
 export { default as SkfCard } from './skf-card/index.js';
 export { default as SkfCheckbox } from './skf-checkbox/index.js';
 export { default as SkfCollapse } from './skf-collapse/index.js';
+export { default as SkfDatePicker } from './skf-datepicker/index.js';
 export { default as SkfDialog } from './skf-dialog/index.js';
 export { default as SkfDivider } from './skf-divider/index.js';
 export { default as SkfHeading } from './skf-heading/index.js';

package/dist/react/skf-datepicker/index.d.ts

@@ -0,0 +1,12 @@
+import Component from '../../components/date-picker/datepicker.js';
+import { type SkfDatePicker } from '../../components/date-picker/datepicker.js';
+import { type EventName } from '@lit/react';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onSelectedDateChanged: EventName<Event & {
+        target: SkfDatePicker;
+    }>;
+    onSelectedDateRangeChanged: EventName<Event & {
+        target: SkfDatePicker;
+    }>;
+}>;
+export default reactWrapper;

package/dist/react/skf-datepicker/index.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/date-picker/datepicker.js';
+import {} from '../../components/date-picker/datepicker.js';
+import {} from '@lit/react';
+const tagName = 'skf-datepicker';
+Component.define('skf-datepicker');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {
+        onSelectedDateChanged: 'selected-date-changed',
+        onSelectedDateRangeChanged: 'selected-date-range-changed',
+    },
+    displayName: 'SkfDatePicker',
+});
+export default reactWrapper;

package/dist/types/jsx/custom-element-jsx.d.ts

@@ -266,8 +266,8 @@ export type SkfButtonProps = {
     | "zoomOut";
   /** If true, removes border */
   iconOnly?: boolean;
-  /** If provided, determines the positioning of the icon in relation to the text */
-  "icon-position"?: "left" | "right" | undefined;
+  /** Determines the positioning of the icon in relation to the text */
+  "icon-position"?: "left" | "right";
   /** If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`. */
   loading?: boolean;
   /**  */
@@ -300,7 +300,7 @@ export type SkfCheckboxProps = {
   /** If defined, outputs helping hints in console */
   debug?: boolean | undefined;
   /** If true, outputs helping hints in console */
-  checked?: boolean | undefined;
+  checked?: string;
   /** If true, forces component to invalid state until removed */
   "custom-invalid"?: boolean | undefined;
   /** If true and the checkbox is unchecked, the checkbox will appear indeterminate */
@@ -342,6 +342,31 @@ export type SkfCollapseProps = {
   "onskf-collapse-toggle"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+export type SkfDatePickerProps = {
+  /** The locale to use for formatting the date */
+  locale?: string;
+  /** The date to display in the date picker */
+  date?: string;
+  /**  */
+  id?: string;
+  /** A comma-separated list of dates (yyyy-mm-dd format) that are not selectable. */
+  "invalid-dates"?: string | undefined;
+  /** If true, the date picker will allow the selection of a range of dates */
+  range?: boolean;
+  /** Earliest selectable date. (yyyy-mm-dd format) */
+  "selectable-from"?: string | undefined;
+  /** Latest selectable date. (yyyy-mm-dd format) */
+  "selectable-to"?: string | undefined;
+  /**  */
+  selectedDate?: Date | undefined;
+  /**  */
+  selectedDateRange?: SkfDatePickerDateRange;
+  /** When a date is selected */
+  "onselected-date-changed"?: (e: CustomEvent<never>) => void;
+  /** When a range of dates is selected */
+  "onselected-date-range-changed"?: (e: CustomEvent<never>) => void;
+};
+
 export type SkfDialogProps = {
   /** If defined, sets the aria-label for the close button */
   "close-button-aria-label"?: string | undefined;
@@ -1655,6 +1680,23 @@ export type CustomElements = {
    */
   "skf-collapse": Partial<SkfCollapseProps & BaseProps & BaseEvents>;
 
+  /**
+   * A date picker component that allows users to select a date or a range of dates.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **selected-date-changed** - When a date is selected
+   * - **selected-date-range-changed** - When a range of dates is selected
+   *
+   * ### **Slots:**
+   *  - _default_ - Default hint content placed inside the date picker
+   *
+   * ### **CSS Properties:**
+   *  - **--max-width** - The maximum width of the date picker _(default: undefined)_
+   */
+  "skf-datepicker": Partial<SkfDatePickerProps & BaseProps & BaseEvents>;
+
   /**
    * The `<skf-dialog>` is a component that open up a dialog with the content provided
    * ---

package/dist/types/vue/index.d.ts

@@ -8,6 +8,7 @@ import type { SkfButton } from "../../components/button/button.component.js";
 import type { SkfCard } from "../../components/card/card.component.js";
 import type { SkfCheckbox } from "../../components/checkbox/checkbox.component.js";
 import type { SkfCollapse, CustomEvent } from "../../components/collapse/collapse.component.js";
+import type { SkfDatePicker } from "../../components/datepicker/datepicker.component.js";
 import type { SkfDialog } from "../../components/dialog/dialog.component.js";
 import type { SkfDivider } from "../../components/divider/divider.component.js";
 import type { SkfHeading } from "../../components/heading/heading.component.js";
@@ -91,7 +92,7 @@ type SkfButtonProps = {
   icon?: SkfButton["icon"];
   /** If true, removes border */
   iconOnly?: SkfButton["iconOnly"];
-  /** If provided, determines the positioning of the icon in relation to the text */
+  /** Determines the positioning of the icon in relation to the text */
   "icon-position"?: SkfButton["iconPosition"];
   /** If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`. */
   loading?: SkfButton["loading"];
@@ -167,6 +168,31 @@ type SkfCollapseProps = {
   "onskf-collapse-toggle"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+type SkfDatePickerProps = {
+  /** The locale to use for formatting the date */
+  locale?: SkfDatePicker["locale"];
+  /** The date to display in the date picker */
+  date?: SkfDatePicker["date"];
+  /**  */
+  id?: SkfDatePicker["id"];
+  /** A comma-separated list of dates (yyyy-mm-dd format) that are not selectable. */
+  "invalid-dates"?: SkfDatePicker["invalidDates"];
+  /** If true, the date picker will allow the selection of a range of dates */
+  range?: SkfDatePicker["range"];
+  /** Earliest selectable date. (yyyy-mm-dd format) */
+  "selectable-from"?: SkfDatePicker["selectableFrom"];
+  /** Latest selectable date. (yyyy-mm-dd format) */
+  "selectable-to"?: SkfDatePicker["selectableTo"];
+  /**  */
+  selectedDate?: SkfDatePicker["selectedDate"];
+  /**  */
+  selectedDateRange?: SkfDatePicker["selectedDateRange"];
+  /** When a date is selected */
+  "onselected-date-changed"?: (e: CustomEvent<never>) => void;
+  /** When a range of dates is selected */
+  "onselected-date-range-changed"?: (e: CustomEvent<never>) => void;
+};
+
 type SkfDialogProps = {
   /** If defined, sets the aria-label for the close button */
   "close-button-aria-label"?: SkfDialog["closeButtonAriaLabel"];
@@ -820,6 +846,23 @@ export type CustomElements = {
    */
   "skf-collapse": DefineComponent<SkfCollapseProps>;
 
+  /**
+   * A date picker component that allows users to select a date or a range of dates.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **selected-date-changed** - When a date is selected
+   * - **selected-date-range-changed** - When a range of dates is selected
+   *
+   * ### **Slots:**
+   *  - _default_ - Default hint content placed inside the date picker
+   *
+   * ### **CSS Properties:**
+   *  - **--max-width** - The maximum width of the date picker _(default: undefined)_
+   */
+  "skf-datepicker": DefineComponent<SkfDatePickerProps>;
+
   /**
    * The `<skf-dialog>` is a component that open up a dialog with the content provided
    * ---

package/dist/vscode.html-custom-data.json

@@ -284,7 +284,7 @@
         },
         {
           "name": "icon-position",
-          "description": "If provided, determines the positioning of the icon in relation to the text",
+          "description": "Determines the positioning of the icon in relation to the text",
           "values": [{ "name": "left" }, { "name": "right" }]
         },
         {
@@ -455,6 +455,44 @@
       ],
       "references": []
     },
+    {
+      "name": "skf-datepicker",
+      "description": "A date picker component that allows users to select a date or a range of dates.\n---\n\n\n### **Events:**\n - **selected-date-changed** - When a date is selected\n- **selected-date-range-changed** - When a range of dates is selected\n\n### **Slots:**\n - _default_ - Default hint content placed inside the date picker\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the date picker _(default: undefined)_",
+      "attributes": [
+        {
+          "name": "locale",
+          "description": "The locale to use for formatting the date",
+          "values": []
+        },
+        {
+          "name": "date",
+          "description": "The date to display in the date picker",
+          "values": []
+        },
+        { "name": "id", "values": [] },
+        {
+          "name": "invalid-dates",
+          "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
+          "values": []
+        },
+        {
+          "name": "range",
+          "description": "If true, the date picker will allow the selection of a range of dates",
+          "values": []
+        },
+        {
+          "name": "selectable-from",
+          "description": "Earliest selectable date. (yyyy-mm-dd format)",
+          "values": []
+        },
+        {
+          "name": "selectable-to",
+          "description": "Latest selectable date. (yyyy-mm-dd format)",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "skf-dialog",
       "description": "The `<skf-dialog>` is a component that open up a dialog with the content provided\n---\n\n\n### **Events:**\n - **skf-dialog-open** - Fires when the dialog is opened (after transitioned in)\n- **skf-dialog-close** - Fires when the dialog is closed (before transitioned out)\n- **close** - Fires when the dialog is closed (after transitioned out)\n\n### **Slots:**\n - _default_ - The dialog component's content\n- **footer** - The dialog component's buttons goes here\n\n### **CSS Properties:**\n - **--skf-dialog-height** - A custom height for the Dialog. Pass valid CSS **block-size** values _(default: undefined)_\n- **--skf-dialog-width** - A custom width for the Dialog Pass valid CSS **inline-size** values _(default: undefined)_",