@uh-design-system/component-library 1.4.0-rc.0 → 1.4.0-rc.2

package/dist/components/p-DojNivUE.js

@@ -0,0 +1,125 @@
+import { p as proxyCustomElement, H, h } from './p-GalXVdFP.js';
+import { g as getLanguage } from './p-B71giUZh.js';
+import { t as tryADifferentSearchTerm, n as noResultsFound, l as loadingOptions, b as tryAgainOrIfTheProblemPersists, w as weCouldNotLoadOptions } from './p-BGV-ubOj.js';
+import { t as transformTagName, d as declareComponentDependencies } from './p-J5Ghj1_T.js';
+import { c as cx } from './p-C34PGDVY.js';
+import { d as defineCustomElement$3 } from './p-DIxFOW85.js';
+import { d as defineCustomElement$2 } from './p-Dq55XDgV.js';
+import { d as defineCustomElement$1 } from './p-Cq_RwLX7.js';
+
+const dsOptionsMessageCss = ".ds-options-message__oSBnIJ.sc-ds-options-message{display:flex;flex-direction:column;padding:var(--ds-spacing-2xSmall);height:18.5rem;overflow:hidden;box-sizing:border-box;align-items:center;justify-content:center;font-family:var(--ds-fontFamily-body)}.ds-options-message__oSBnIJ__error.sc-ds-options-message{color:var(--ds-textColor-danger);text-align:center}.ds-options-message__oSBnIJ__error__icon.sc-ds-options-message{display:inline-block}.ds-options-message__oSBnIJ__error__title.sc-ds-options-message,.ds-options-message__oSBnIJ__no-results__title.sc-ds-options-message{text-align:center;color:var(--ds-textColor-default);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-2xSmall)}.ds-options-message__oSBnIJ__no-results__title.sc-ds-options-message{hyphens:auto}.ds-options-message__oSBnIJ__error__text.sc-ds-options-message,.ds-options-message__oSBnIJ__no-results__text.sc-ds-options-message{color:var(--ds-textColor-default);text-align:center;font-size:var(--ds-fontSize-16)}";
+
+const defaultTextFns = {
+    dsErrorTitle: weCouldNotLoadOptions,
+    dsErrorText: tryAgainOrIfTheProblemPersists,
+    dsLoadingText: loadingOptions,
+    dsNoResultsTitle: noResultsFound,
+    dsNoResultsText: tryADifferentSearchTerm,
+};
+const getTextValue = (key, value) => value || defaultTextFns[key]();
+const DsOptionsMessage = proxyCustomElement(class DsOptionsMessage extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+    }
+    get el() { return this; }
+    dsLoading = false;
+    dsError = false;
+    dsNoResults = false;
+    dsErrorTitle;
+    dsErrorText;
+    dsLoadingText;
+    dsNoResultsTitle;
+    dsNoResultsText;
+    texts = Object.fromEntries(Object.entries(defaultTextFns).map(([key, fn]) => [key, fn()]));
+    setTexts() {
+        this.texts = {
+            dsErrorTitle: getTextValue('dsErrorTitle', this.dsErrorTitle),
+            dsErrorText: getTextValue('dsErrorText', this.dsErrorText),
+            dsLoadingText: getTextValue('dsLoadingText', this.dsLoadingText),
+            dsNoResultsTitle: getTextValue('dsNoResultsTitle', this.dsNoResultsTitle),
+            dsNoResultsText: getTextValue('dsNoResultsText', this.dsNoResultsText),
+        };
+    }
+    textPropObserver(newValue, _oldValue, propName) {
+        this.texts = {
+            ...this.texts,
+            [propName]: getTextValue(propName, newValue),
+        };
+    }
+    componentWillLoad() {
+        this.setTexts();
+    }
+    handleLanguageChange() {
+        this.setTexts();
+    }
+    render() {
+        const DsIcon = transformTagName('ds-icon', 'ds-options-message', this.el);
+        const DsSpinner = transformTagName('ds-spinner', 'ds-options-message', this.el);
+        const baseClass = cx('ds-options-message');
+        const errorClass = `${baseClass}__error`;
+        const loadingClass = `${baseClass}__loading`;
+        const noResultsClass = `${baseClass}__no-results`;
+        if (!this.dsLoading && !this.dsError && !this.dsNoResults) {
+            return null;
+        }
+        return (h("div", null, h("div", { class: baseClass }, this.dsError ? (h("div", { class: errorClass }, h(DsIcon, { dsName: "warning", dsSize: '2rem', class: `${errorClass}__icon` }), h("div", { class: `${errorClass}__title` }, this.texts.dsErrorTitle), h("div", { class: `${errorClass}__text` }, this.texts.dsErrorText))) : this.dsLoading ? (h("div", { class: loadingClass }, h(DsSpinner, { dsSize: "large", dsText: this.texts.dsLoadingText }))) : (h("div", { class: noResultsClass }, h("div", { class: `${noResultsClass}__title`, lang: getLanguage() }, this.texts.dsNoResultsTitle), h("div", { class: `${noResultsClass}__text` }, this.texts.dsNoResultsText))))));
+    }
+    static get watchers() { return {
+        "dsErrorTitle": ["textPropObserver"],
+        "dsErrorText": ["textPropObserver"],
+        "dsLoadingText": ["textPropObserver"],
+        "dsNoResultsTitle": ["textPropObserver"],
+        "dsNoResultsText": ["textPropObserver"]
+    }; }
+    static get style() { return dsOptionsMessageCss; }
+}, [258, "ds-options-message", {
+        "dsLoading": [4, "ds-loading"],
+        "dsError": [4, "ds-error"],
+        "dsNoResults": [4, "ds-no-results"],
+        "dsErrorTitle": [1, "ds-error-title"],
+        "dsErrorText": [1, "ds-error-text"],
+        "dsLoadingText": [1, "ds-loading-text"],
+        "dsNoResultsTitle": [1, "ds-no-results-title"],
+        "dsNoResultsText": [1, "ds-no-results-text"],
+        "texts": [32]
+    }, [[16, "dsLanguageChange", "handleLanguageChange"]], {
+        "dsErrorTitle": ["textPropObserver"],
+        "dsErrorText": ["textPropObserver"],
+        "dsLoadingText": ["textPropObserver"],
+        "dsNoResultsTitle": ["textPropObserver"],
+        "dsNoResultsText": ["textPropObserver"]
+    }]);
+declareComponentDependencies([h("ds-icon", { dsName: "" }), h("ds-spinner", null)]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-options-message", "ds-icon", "ds-spinner", "ds-visually-hidden"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-options-message":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsOptionsMessage);
+            }
+            break;
+        case "ds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ds-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ds-visually-hidden":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { DsOptionsMessage as D, defineCustomElement as d };

package/dist/components/p-Dq55XDgV.js

@@ -0,0 +1,107 @@
+import { p as proxyCustomElement, H, h } from './p-GalXVdFP.js';
+import { i as inheritAriaAttributes, a as inheritAttributes } from './p-BecId8t2.js';
+import { c as classNames } from './p-BfTCfPZ1.js';
+import { t as transformTagName, d as declareComponentDependencies } from './p-J5Ghj1_T.js';
+import { c as cx } from './p-C34PGDVY.js';
+import { d as defineCustomElement$1 } from './p-Cq_RwLX7.js';
+
+const dsSpinnerCss = ".ds-font{}.ds-font-heading{font-family:var(--ds-fontFamily-heading)}.ds-font-body{font-family:var(--ds-fontFamily-body)}.ds-font{}.ds-font-regular{font-weight:var(--ds-fontWeight-regular)}.ds-font-semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-font-semibold-plus{font-weight:var(--ds-fontWeight-semiboldPlus)}.ds-font-bold{font-weight:var(--ds-fontWeight-bold)}.ds-tracking-xs{letter-spacing:var(--ds-letterSpacing-xTight)}.ds-tracking-sm{letter-spacing:var(--ds-letterSpacing-tight)}.ds-tracking-md{letter-spacing:var(--ds-letterSpacing-normal)}.ds-tracking-lg{letter-spacing:var(--ds-letterSpacing-wide)}.ds-tracking-xl{letter-spacing:var(--ds-letterSpacing-xWide)}.ds-leading-sm{line-height:var(--ds-lineHeight-small)}.ds-leading-md{line-height:var(--ds-lineHeight-medium)}.ds-leading-lg{line-height:var(--ds-lineHeight-large)}.ds-leading-xl{line-height:var(--ds-lineHeight-xLarge)}.ds-width-md{font-stretch:var(--ds-fontWidth-normal)}.ds-width-sm{font-stretch:var(--ds-fontWidth-condense)}.ds-number-proportional{font-variant-numeric:var(--ds-number-style)}.ds-paragraph-16{margin-bottom:var(--ds-marginBottom, 16px)}.ds-paragraph-20{margin-bottom:var(--ds-marginBottom, 20px)}.ds-list-spacing{gap:4px}.ds-text-color-default{color:var(--ds-textColor-default)}.ds-text{}.ds-text-regular-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-regular)}.ds-text{}.ds-text-semibold-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-semibold)}.ds-text{}.ds-text-bold-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-bold)}.ds-spinner__oSBnIJ{display:inline-block}.ds-spinner__oSBnIJ:has(.ds-spinner__oSBnIJ__text){display:inline-flex;align-items:center;gap:calc(var(--spinner-size) / 2)}.ds-spinner__oSBnIJ{}.ds-spinner__oSBnIJ--small{padding:1.5px}.ds-spinner__oSBnIJ--medium{padding:3px}.ds-spinner__oSBnIJ--large{padding:3px}.ds-spinner__oSBnIJ--xLarge{padding:5.5px}.ds-spinner__oSBnIJ--2xLarge{padding:5.5px}.ds-spinner__oSBnIJ--custom{padding:calc(var(--spinner-size) / 8)}.ds-spinner__oSBnIJ{}.ds-spinner__oSBnIJ--below{flex-direction:column;align-items:center}.ds-spinner__oSBnIJ--right{flex-direction:row;align-items:center}.ds-spinner__oSBnIJ__spinner{width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border-radius:50%;border:calc(var(--spinner-size, 24px) / 6) solid var(--ds-borderColor-disabled-onLight);position:relative;display:flex;align-items:center;justify-content:center}.ds-spinner__oSBnIJ__text{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body)}.ds-spinner__oSBnIJ__text--white{color:var(--ds-textColor-white)}.ds-spinner__oSBnIJ__segment{display:block;position:absolute;width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border:calc(var(--spinner-size, 24px) / 6) solid var(--spinner-color, #005a94);border-radius:50%;animation:ds-spinner-rotate 1.1s cubic-bezier(0.7, 0.15, 0.3, 0.8) infinite;border-color:var(--spinner-color, #005a94) var(--spinner-border-color) var(--spinner-border-color) var(--spinner-border-color)}.ds-spinner__oSBnIJ__segment--1{animation-delay:-0.3s}.ds-spinner__oSBnIJ__segment--2{animation-delay:-0.2s}.ds-spinner__oSBnIJ__segment--3{animation-delay:-0.1s}@keyframes ds-spinner-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.ds-spinner__oSBnIJ__segment{animation-duration:2.2s;animation-timing-function:linear;}.ds-spinner__oSBnIJ__segment--1{animation-delay:-0.6s}.ds-spinner__oSBnIJ__segment--2{animation-delay:-0.4s}.ds-spinner__oSBnIJ__segment--3{animation-delay:-0.2s}}";
+
+const SPINNER_SIZES = {
+    'small': 10,
+    'medium': 14,
+    'large': 20,
+    'xLarge': 28,
+    '2xLarge': 40,
+};
+const SPINNER_TEXT_SIZES = {
+    'small': 'ds-text-regular-xs',
+    'medium': 'ds-text-regular-sm',
+    'large': 'ds-text-regular-md',
+    'xLarge': 'ds-text-regular-lg',
+    '2xLarge': 'ds-text-regular-xl',
+};
+const SPINNER_COLORS = {
+    blue: 'var(--ds-palette-mainBlue-70)',
+    black: 'var(--ds-palette-black-95)',
+    white: 'var(--ds-palette-white)',
+    danger: 'var(--ds-palette-red-70)',
+};
+const DsSpinner = proxyCustomElement(class DsSpinner extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    inheritedAttributes = {};
+    get el() { return this; }
+    dsText;
+    dsSize = 'medium';
+    dsCustomSize;
+    dsCustomTextSize;
+    dsTextPosition = 'below';
+    dsColour = 'blue';
+    dsUseRoleAlert = false;
+    dsUseAriaLive = false;
+    dsHiddenAssistiveText;
+    componentWillLoad() {
+        this.inheritedAttributes = {
+            ...inheritAttributes(this, this.el),
+            ...inheritAriaAttributes(this.el, ['role', 'aria-live']),
+        };
+    }
+    render() {
+        const sizeInPixels = SPINNER_SIZES[this.dsSize];
+        const textSizeClass = this.dsCustomSize ? '' : SPINNER_TEXT_SIZES[this.dsSize];
+        const spinnerColorVariable = SPINNER_COLORS[this.dsColour];
+        const baseClass = cx('ds-spinner');
+        const classes = classNames(baseClass, {
+            [`${baseClass}--${this.dsSize}`]: !this.dsCustomSize,
+            [`${baseClass}--custom`]: !!this.dsCustomSize,
+            [`${baseClass}--${this.dsTextPosition}`]: !!this.dsText,
+        });
+        const textClasses = classNames(`${baseClass}__text`, textSizeClass, `${baseClass}__text--${this.dsColour}`);
+        const segmentClasses = (index) => classNames(`${baseClass}__segment`, `${baseClass}__segment--${index}`);
+        const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-spinner', this.el);
+        const spinnerSizeValue = this.dsCustomSize ? `calc(${this.dsCustomSize} / 1.5833333333)` : `${sizeInPixels}px`;
+        return (h("div", { key: 'a60e95698a071c75dd34474808a349640ffc6a72', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
+                '--spinner-size': spinnerSizeValue,
+                '--spinner-color': `${spinnerColorVariable}`,
+                '--spinner-border-color': this.dsColour == 'white' ? 'var(--ds-overlay-white-15)' : 'transparent',
+            }, ...this.inheritedAttributes }, h("div", { key: 'e3e6ad995481b0fb08518572edb50029e92d89a8', class: `${baseClass}__spinner` }, h("div", { key: 'c12e11a8d5601027e74a493fce294da673cdc9af', class: segmentClasses(1) }), h("div", { key: 'dfc8e7860a421cd41356bff73ac1a647709b3eda', class: segmentClasses(2) }), h("div", { key: '2c1207b2bb431baff9048d914ddd111dbf185f57', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: 'f47bd62847a965e05f56da222292467f3cbc3fd6' }, h("span", { key: '2fb3efd756d10f80a1aab99b52bab9b0f95f416a' }, this.dsHiddenAssistiveText))), this.dsText && (h("span", { key: '5c5aa10a7650d9a67d2ed45464162e7467f041a0', class: textClasses, style: { fontSize: this.dsCustomTextSize } }, this.dsText))));
+    }
+    static get style() { return dsSpinnerCss; }
+}, [257, "ds-spinner", {
+        "dsText": [1, "ds-text"],
+        "dsSize": [1, "ds-size"],
+        "dsCustomSize": [1, "ds-custom-size"],
+        "dsCustomTextSize": [1, "ds-custom-text-size"],
+        "dsTextPosition": [1, "ds-text-position"],
+        "dsColour": [1, "ds-colour"],
+        "dsUseRoleAlert": [4, "ds-use-role-alert"],
+        "dsUseAriaLive": [4, "ds-use-aria-live"],
+        "dsHiddenAssistiveText": [1, "ds-hidden-assistive-text"]
+    }]);
+declareComponentDependencies([h("ds-visually-hidden", null)]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-spinner", "ds-visually-hidden"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-spinner":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsSpinner);
+            }
+            break;
+        case "ds-visually-hidden":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { DsSpinner as D, defineCustomElement as d };

package/dist/components/p-DwJYx07b.js

@@ -0,0 +1,257 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-GalXVdFP.js';
+import { c as classNames } from './p-BfTCfPZ1.js';
+import { t as transformTagName, d as declareComponentDependencies } from './p-J5Ghj1_T.js';
+import { c as cx } from './p-C34PGDVY.js';
+import { v as validityMessage, o as openDatePicker } from './p-BGV-ubOj.js';
+import { d as defineCustomElement$8 } from './p-BtwuVYMk.js';
+import { d as defineCustomElement$7 } from './p-CBTcmEBq.js';
+import { d as defineCustomElement$6 } from './p-cVo5wigC.js';
+import { d as defineCustomElement$5 } from './p-3TYR8XT2.js';
+import { d as defineCustomElement$4 } from './p-DIxFOW85.js';
+import { d as defineCustomElement$3 } from './p-BVcTj6fF.js';
+import { d as defineCustomElement$2 } from './p-Dq55XDgV.js';
+import { d as defineCustomElement$1 } from './p-Cq_RwLX7.js';
+
+const dsDatepickerNativeCss = ".sc-ds-datepicker-native-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-datepicker-native-h{width:17.875rem}}.sc-ds-datepicker-native-h>div.sc-ds-datepicker-native{display:flex;flex-direction:column;position:relative}.ds-datepicker-native__oSBnIJ.sc-ds-datepicker-native{position:relative;display:flex;align-items:center;border:var(--ds-borderWidth-thin) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white);color:var(--ds-textColor-secondary);box-sizing:border-box;height:2.75rem;width:100%}.ds-datepicker-native__oSBnIJ__input.sc-ds-datepicker-native{flex:1;border:none;outline:none;background-color:transparent;color:inherit;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);padding:0 var(--ds-spacing-xSmall);min-width:0}.ds-datepicker-native__oSBnIJ__input.sc-ds-datepicker-native:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-datepicker-native__oSBnIJ__input.sc-ds-datepicker-native::-webkit-calendar-picker-indicator{display:none}.ds-datepicker-native__oSBnIJ__input.sc-ds-datepicker-native::-webkit-clear-button{display:none}.ds-datepicker-native__oSBnIJ__calendar-icon.sc-ds-datepicker-native{height:100%}@supports (-moz-appearance: none){.ds-datepicker-native__oSBnIJ__calendar-icon.sc-ds-datepicker-native{display:none}}.ds-datepicker-native__oSBnIJ.sc-ds-datepicker-native:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-datepicker-native__oSBnIJ.sc-ds-datepicker-native:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-datepicker-native__oSBnIJ.sc-ds-datepicker-native{justify-content:flex-end}.ds-datepicker-native__oSBnIJ--disabled.sc-ds-datepicker-native{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}.ds-datepicker-native__oSBnIJ--invalid.sc-ds-datepicker-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-datepicker-native__oSBnIJ.sc-ds-datepicker-native:hover:not(.ds-datepicker-native__oSBnIJ--disabled,.ds-datepicker-native__oSBnIJ--invalid.sc-ds-datepicker-native,.ds-datepicker-native__oSBnIJ.sc-ds-datepicker-native:focus-within){border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.ds-datepicker-native__oSBnIJ.sc-ds-datepicker-native:focus-within:not(.ds-datepicker-native__oSBnIJ--invalid,.ds-datepicker-native__oSBnIJ--disabled).sc-ds-datepicker-native{border-color:var(--ds-borderColor-primary)}";
+
+const DsDatepickerNative = proxyCustomElement(class DsDatepickerNative extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.dsChange = createEvent(this, "dsChange");
+        this.dsValidity = createEvent(this, "dsValidity");
+        this.dsSubmitInvalid = createEvent(this, "dsSubmitInvalid");
+        this.dsBlur = createEvent(this, "dsBlur");
+        this.dsFocus = createEvent(this, "dsFocus");
+    }
+    dsAriaDescribedby;
+    dsAriaControls;
+    get el() { return this; }
+    dsChange;
+    dsValidity;
+    dsSubmitInvalid;
+    dsBlur;
+    dsFocus;
+    dsId;
+    dsLabel;
+    dsValue;
+    dsName;
+    dsForm;
+    dsDisabled = false;
+    dsErrorText;
+    dsRequired = false;
+    dsMin;
+    dsMax;
+    dsShowCalendarIcon = true;
+    value = '';
+    hasFocus = false;
+    inputValidityId = `${this.dsId}-input-validity`;
+    nativeDateInputRef;
+    get DsInputValidityTag() {
+        return transformTagName('ds-input-validity', 'ds-datepicker-native', this.el);
+    }
+    get DsIconTag() {
+        return transformTagName('ds-icon', 'ds-datepicker-native', this.el);
+    }
+    get DsButtonTag() {
+        return transformTagName('ds-button', 'ds-datepicker-native', this.el);
+    }
+    get supportsShowPicker() {
+        if (!this.nativeDateInputRef)
+            return false;
+        return typeof this.nativeDateInputRef.showPicker === 'function';
+    }
+    componentWillLoad() {
+        this.value = this.dsValue || '';
+    }
+    componentDidLoad() {
+        if (!this.nativeDateInputRef)
+            return;
+        this.nativeDateInputRef.addEventListener('invalid', (e) => {
+            e.preventDefault();
+            const validityMessage = this.getValidityMessage();
+            this.dsSubmitInvalid.emit({
+                flag: 'customError',
+                message: validityMessage,
+            });
+            this.dsValidity.emit({
+                flag: 'customError',
+                message: validityMessage,
+            });
+        });
+    }
+    onFocusIn() {
+        this.hasFocus = true;
+    }
+    onFocusOut(e) {
+        const nextFocused = e && 'relatedTarget' in e ? e.relatedTarget : null;
+        const lostFocus = !nextFocused || !this.el.contains(nextFocused);
+        if (lostFocus) {
+            this.hasFocus = false;
+            if (this.nativeDateInputRef) {
+                const isValid = this.nativeDateInputRef.validity.valid;
+                this.dsValidity.emit({
+                    flag: isValid ? 'valid' : 'customError',
+                    message: isValid ? '' : this.getValidityMessage(),
+                });
+            }
+        }
+    }
+    hasFocusObserver(newValue) {
+        if (newValue) {
+            this.dsFocus.emit();
+        }
+        else {
+            this.dsBlur.emit();
+        }
+    }
+    dsValueObserver(newValue) {
+        this.value = newValue || '';
+    }
+    valueObserver(newValue) {
+        if (!this.nativeDateInputRef)
+            return;
+        if (this.nativeDateInputRef.value !== newValue) {
+            this.nativeDateInputRef.value = newValue;
+        }
+        if (this.dsRequired) {
+            const isValid = this.nativeDateInputRef.validity.valid;
+            this.dsValidity.emit({
+                flag: isValid ? 'valid' : 'customError',
+                message: isValid ? '' : this.getValidityMessage(),
+            });
+        }
+    }
+    openDatePicker = () => {
+        if (this.dsDisabled || !this.nativeDateInputRef)
+            return;
+        if (this.supportsShowPicker) {
+            try {
+                this.nativeDateInputRef.showPicker();
+                return;
+            }
+            catch {
+            }
+        }
+        this.nativeDateInputRef.focus();
+        this.nativeDateInputRef.click();
+    };
+    handleIconKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.openDatePicker();
+        }
+    };
+    getValidityMessage() {
+        if (!this.nativeDateInputRef)
+            return '';
+        const validity = this.nativeDateInputRef.validity;
+        for (const key in validity) {
+            if (key !== 'valid' && validity[key]) {
+                return validityMessage(key);
+            }
+        }
+        return '';
+    }
+    render() {
+        const nativeDatepickerClass = cx('ds-datepicker-native');
+        const DsControlLabel = transformTagName('ds-control-label', 'ds-datepicker-native', this.el);
+        const ariaDescribedbyValue = [this.dsAriaDescribedby, this.dsErrorText ? this.inputValidityId : null].filter(Boolean).join(' ') || undefined;
+        return (h("div", { key: '385fa642af3eafcfe099263809969b77cb00ae52' }, h(DsControlLabel, { key: '48e3db77e36ce35f1b53c0d8764ad9bb24598ac8', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired }, h("slot", { key: 'ae71f79a5a2c40b355da724aa9713bf39e5c8794', name: "label" })), h("div", { key: '5ee467bb14b33f4296f088a0bc295be1769ac1cd', class: classNames(`${nativeDatepickerClass}`, {
+                [`${nativeDatepickerClass}--disabled`]: this.dsDisabled,
+                [`${nativeDatepickerClass}--invalid`]: !!this.dsErrorText,
+            }) }, h("input", { key: 'd4512d05dacda7d7f032551ae81eca5dcc13a16f', ref: el => {
+                this.nativeDateInputRef = el;
+                if (el)
+                    el.value = this.value;
+            }, id: this.dsId, name: this.dsName, form: this.dsForm, type: "date", class: `${nativeDatepickerClass}__input`, disabled: this.dsDisabled, required: this.dsRequired, min: this.dsMin, max: this.dsMax, value: this.value, onChange: (event) => {
+                const target = event.target;
+                this.value = target.value;
+                this.dsChange.emit(target.value);
+            }, "aria-invalid": this.dsErrorText ? 'true' : 'false', "aria-describedby": ariaDescribedbyValue, "aria-controls": this.dsAriaControls }), this.dsShowCalendarIcon && (h(this.DsButtonTag, { key: '257ba6500ba05d8e4d734fe566866a7665b6e2e1', class: `${nativeDatepickerClass}__calendar-icon`, dsVariant: "supplementary", dsColour: "black", dsSize: "small", onClick: this.openDatePicker, onKeyDown: this.handleIconKeyDown, dsDisabled: this.dsDisabled, dsAriaLabel: openDatePicker(), dsInInput: true }, h(this.DsIconTag, { key: 'ad06297d1ec157ee0471f3e147a28a86178b24ac', slot: "prefix", dsName: "calendar_month", dsAriaHidden: true })))), !!this.dsErrorText && h(this.DsInputValidityTag, { key: '71a26b5aeba7620f1d8a98f589112924dada2b73', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
+    }
+    static get watchers() { return {
+        "hasFocus": ["hasFocusObserver"],
+        "dsValue": ["dsValueObserver"],
+        "value": ["valueObserver"]
+    }; }
+    static get style() { return dsDatepickerNativeCss; }
+}, [262, "ds-datepicker-native", {
+        "dsAriaDescribedby": [1, "ds-aria-describedby"],
+        "dsAriaControls": [1, "ds-aria-controls"],
+        "dsId": [1, "ds-id"],
+        "dsLabel": [1, "ds-label"],
+        "dsValue": [1, "ds-value"],
+        "dsName": [1, "ds-name"],
+        "dsForm": [1, "ds-form"],
+        "dsDisabled": [4, "ds-disabled"],
+        "dsErrorText": [1, "ds-error-text"],
+        "dsRequired": [4, "ds-required"],
+        "dsMin": [1, "ds-min"],
+        "dsMax": [1, "ds-max"],
+        "dsShowCalendarIcon": [4, "ds-show-calendar-icon"],
+        "value": [32],
+        "hasFocus": [32]
+    }, [[0, "focusin", "onFocusIn"], [0, "focusout", "onFocusOut"]], {
+        "hasFocus": ["hasFocusObserver"],
+        "dsValue": ["dsValueObserver"],
+        "value": ["valueObserver"]
+    }]);
+declareComponentDependencies([h("ds-icon", { dsName: "" }), h("ds-control-label", null), h("ds-input-validity", null), h("ds-button", null)]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-datepicker-native", "ds-assistive-text", "ds-button", "ds-control-label", "ds-feedback", "ds-icon", "ds-input-validity", "ds-spinner", "ds-visually-hidden"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-datepicker-native":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsDatepickerNative);
+            }
+            break;
+        case "ds-assistive-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "ds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ds-control-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ds-feedback":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ds-input-validity":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ds-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ds-visually-hidden":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { DsDatepickerNative as D, defineCustomElement as d };

package/dist/components/p-FDsBfBWA.js

@@ -0,0 +1,69 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-GalXVdFP.js';
+import { c as classNames } from './p-BfTCfPZ1.js';
+import { g as getLanguage } from './p-B71giUZh.js';
+import { c as cx } from './p-C34PGDVY.js';
+import { t as transformTagName, d as declareComponentDependencies } from './p-J5Ghj1_T.js';
+import { d as defineCustomElement$1 } from './p-DDSjiqRg.js';
+
+const dsBreadcrumbsExpandButtonCss = ".ds-breadcrumbs-expand-button__oSBnIJ.sc-ds-breadcrumbs-expand-button{display:inline;vertical-align:middle}.ds-breadcrumbs-expand-button__oSBnIJ--hidden.sc-ds-breadcrumbs-expand-button{display:none}.ds-breadcrumbs-expand-button__oSBnIJ__button.sc-ds-breadcrumbs-expand-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-breadcrumbs-expand-button__oSBnIJ__button.sc-ds-breadcrumbs-expand-button{background:none;border:none;padding:0;margin:0;overflow:visible;text-transform:none;display:inline;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:inherit;font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);vertical-align:middle;line-height:1.375;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-breadcrumbs-expand-button__oSBnIJ__button.sc-ds-breadcrumbs-expand-button:hover,.ds-breadcrumbs-expand-button__oSBnIJ__button.sc-ds-breadcrumbs-expand-button:active{text-decoration-thickness:13%;text-underline-offset:12%}";
+
+const DsBreadcrumbsExpandButton = proxyCustomElement(class DsBreadcrumbsExpandButton extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.dsClick = createEvent(this, "dsClick");
+    }
+    get el() { return this; }
+    dsClick;
+    dsIsHidden = false;
+    dsSeparatorIcon;
+    get DsBreadcrumbsSeparator() {
+        return transformTagName('ds-breadcrumbs-separator', 'ds-breadcrumbs-expand-button', this.el);
+    }
+    get showFullBreadcrumbTrail() {
+        switch (getLanguage()) {
+            case 'fi':
+                return 'Näytä koko murupolku.';
+            case 'sv':
+                return 'Visa hela brödsmulestigen.';
+            default:
+                return 'Show full breadcrumb trail.';
+        }
+    }
+    handleExpandButtonClick = () => {
+        this.dsClick.emit();
+    };
+    render() {
+        const baseClass = cx('ds-breadcrumbs-expand-button');
+        return (h("div", { key: '40c49a1bccac13857734865d547c3d724c604c1a', role: "listitem", class: classNames(baseClass, {
+                [`${baseClass}--hidden`]: this.dsIsHidden,
+            }) }, h(this.DsBreadcrumbsSeparator, { key: '36cfc5e91b46c5a32aaa0f32ad6097fb73f50988', dsIcon: this.dsSeparatorIcon }), h("button", { key: 'b3acf675cf0ddaa1cba09db95c5e809d11f6bf55', "aria-label": this.showFullBreadcrumbTrail, class: `${baseClass}__button`, onClick: this.handleExpandButtonClick }, "\u2026")));
+    }
+    static get style() { return dsBreadcrumbsExpandButtonCss; }
+}, [258, "ds-breadcrumbs-expand-button", {
+        "dsIsHidden": [4, "ds-is-hidden"],
+        "dsSeparatorIcon": [1, "ds-separator-icon"]
+    }]);
+declareComponentDependencies([h("ds-breadcrumbs-separator", null)]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-breadcrumbs-expand-button", "ds-breadcrumbs-separator"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-breadcrumbs-expand-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsBreadcrumbsExpandButton);
+            }
+            break;
+        case "ds-breadcrumbs-separator":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { DsBreadcrumbsExpandButton as D, defineCustomElement as d };