@uh-design-system/component-library 0.4.2 → 0.5.1

package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.js

@@ -1,7 +1,8 @@
 import { Fragment, h } from "@stencil/core";
 import classNames from "classnames";
-import { idGenerator } from "../../../utils/utils";
 import { getOptionalText, getRequiredText } from "../../../utils/controls/controlUtils";
+import { isValidation } from "../../../store";
+import { idGenerator, getAriaLabel } from "../../../utils/utils";
 const INPUT_TYPE_ICONS_MAP = {
     search: 'search',
 };
@@ -10,23 +11,21 @@ const INPUT_TYPE_ACTION_BUTTON_ICON_MAP = {
     password: ({ passwordInputVisible }) => (passwordInputVisible ? 'visibility_off_fill' : 'visibility_fill'),
 };
 const inputIdGenerator = idGenerator('ds-input');
-const assistiveTextIdGenerator = idGenerator('ds-assistive-text');
-const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
-const successTextIdGenerator = idGenerator('success-text');
-const errorTextIdGenerator = idGenerator('error-text');
 export class DsTextInput {
     suffixButtonElement;
     inputElement;
-    assistiveTextId = assistiveTextIdGenerator.next().value;
-    visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
-    successTextId = successTextIdGenerator.next().value;
-    errorTextId = errorTextIdGenerator.next().value;
+    assistiveTextId;
+    visuallyHiddenAssistiveTextId;
+    errorTextId;
+    successTextId;
     hasPrefixSlot = false;
     hasSuffixSlot = false;
     el;
+    internals;
+    clear;
     label;
     placeholder;
-    dsId = inputIdGenerator.next().value;
+    identifier = inputIdGenerator.next().value;
     name;
     disabled;
     optional;
@@ -55,6 +54,14 @@ export class DsTextInput {
     clearButtonVisible = false;
     passwordInputVisible = false;
     inputActive = false;
+    validationMessage;
+    setIds = () => {
+        this.assistiveTextId = `${this.identifier}-assistive-text`;
+        this.visuallyHiddenAssistiveTextId = `${this.identifier}-visually-hidden-assistive-text`;
+        this.errorTextId = `${this.identifier}-error-text`;
+        this.successTextId = `${this.identifier}-success-text`;
+    };
+    getValidationMessage = () => this.errorText || this.internals?.validationMessage || this.inputElement?.validationMessage;
     async togglePasswordVisibility() {
         return (this.passwordInputVisible = !this.passwordInputVisible);
     }
@@ -62,6 +69,7 @@ export class DsTextInput {
         this.inputElement.value = '';
         this.inputElement.focus();
         this.clearButtonVisible = false;
+        this.clear.emit({ id: this.identifier });
     }
     getLabelText = () => {
         if (this.required) {
@@ -73,9 +81,27 @@ export class DsTextInput {
         return this.label;
     };
     componentWillLoad() {
+        this.setIds();
         this.hasPrefixSlot = !!this.el.querySelector('[slot="prefix"]');
         this.hasSuffixSlot = !!this.el.querySelector('[slot="suffix"]');
+        if (isValidation('server') || this.errorText) {
+            this.validationMessage = this.getValidationMessage();
+        }
     }
+    handleInput = (e) => {
+        const target = e.target;
+        this.clearButtonVisible = !!target.value;
+        this.internals?.setFormValue(target.value);
+        if (isValidation('client') && this.validationMessage) {
+            this.validationMessage = this.getValidationMessage();
+        }
+    };
+    handleBlur = () => {
+        this.hasFocus = false;
+        if (isValidation('client')) {
+            this.validationMessage = this.getValidationMessage();
+        }
+    };
     onActionButtonClicked = (e) => {
         e.stopPropagation();
         switch (this.type) {
@@ -87,13 +113,6 @@ export class DsTextInput {
                 return;
         }
     };
-    renderValidityMessage(type) {
-        const textId = type === 'success' ? this.successTextId : this.errorTextId;
-        const text = type === 'success' ? this.successText : this.errorText;
-        const icon = type === 'success' ? 'check_circle_fill' : 'warning_fill';
-        const className = type + '-text';
-        return (h("slot", { name: className }, text && (h("div", { class: `${className}--container` }, h("ds-icon", { name: icon }), h("small", { id: textId, class: className }, text)))));
-    }
     renderPrefixContent() {
         if (this.hasPrefixSlot) {
             return h("slot", { name: "prefix" });
@@ -128,21 +147,22 @@ export class DsTextInput {
     }
     render() {
         const inputType = this.type === 'password' && this.passwordInputVisible ? 'text' : this.type;
-        return (h(Fragment, { key: '4d3ad7cc3f0d7c6aba4bcb8e5b05d0794b614f32' }, h("div", { key: '1cad6e50d1a9c0f4214824d1ff46a8418a095790', class: "ds-input--label-container" }, h("slot", { key: '67d096bb1eecd6ac492a5dcd14bd6f9bda21eb2c', name: "label" }, h("label", { key: 'cfffb9b06f2122dd80e4ad94831ca69b71e5a0de', htmlFor: this.dsId }, this.getLabelText())), h("slot", { key: '2256dfda0cf19eae50307b9badc2a2a97d9e190b', name: "help-text" }, h("small", { key: 'b9496a9afec60a4a64a0ff66505a7572362387ac', id: this.assistiveTextId }, this.assistiveText), h("ds-visually-hidden", { key: '23026b2453728e607802aabb7760f07229edeb7c', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), h("div", { key: '161a4d4eed706c5fd6ba2af90029e68b1c6b95c9', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('ds-input--container', {
+        return (h(Fragment, { key: 'efb783f742bb82b01fd6807a628eb693666a819b' }, h("div", { key: 'dde260b136af4b68de1fa15928529f5e57f54c3a', class: "ds-input--label-container" }, h("slot", { key: 'e7ba428a8b8202c9b3e4d9a9c6d4257b0b48d83a', name: "label" }, h("label", { key: '1f28c5fd53249068de50c6d0ea0aa88ccf65a1ec', htmlFor: this.identifier }, this.getLabelText())), h("slot", { key: 'e3c1ea925cfc7f9599ee651da0aeaab98fa806bb', name: "help-text" }, h("small", { key: '671ab99029e2775d964feb012beb8a20912be5e3', id: this.assistiveTextId }, this.assistiveText), h("ds-visually-hidden", { key: '8eb744be9b95ddceb1dd5bed0274d29a26e7ec1d', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), h("div", { key: 'b7fa7067a52d176b810eb88777423adf50dfd8b9', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('ds-input--container', {
                 disabled: this.disabled,
                 readonly: this.readonly,
                 valid: !!this.successText,
                 invalid: !!this.errorText,
                 focus: this.hasFocus,
                 active: !!this.inputActive,
-            }) }, this.renderPrefixContent(), h("input", { key: 'a04e9ed4de86a65290206ca62efde1c27d76aa80', ref: e => (this.inputElement = e), id: this.dsId, name: this.name, "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedby ||
+            }) }, this.renderPrefixContent(), h("input", { key: 'f619722a0c088fbd99d851b4cc49a220538da0ae', ref: e => (this.inputElement = e), id: this.identifier, name: this.name, "aria-label": getAriaLabel(this.label, this.ariaLabel), "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedby ||
                 classNames(this.assistiveTextId, this.visuallyHiddenAssistiveTextId, {
-                    [this.successTextId]: this.successText,
-                    [this.errorTextId]: this.errorText,
-                }), disabled: this.disabled, required: this.required, readonly: this.readonly, value: this.value, type: inputType, min: this.min, max: this.max, maxlength: this.maxlength, pattern: this.pattern, placeholder: this.placeholder, autocomplete: this.autocomplete, onInput: e => (this.clearButtonVisible = !!e.target.value), onFocus: () => (this.hasFocus = true), onBlur: () => (this.hasFocus = false) }), this.renderSuffixContent()), this.renderValidityMessage('error'), this.renderValidityMessage('success')));
+                    [this.errorTextId]: Boolean(this.validationMessage),
+                    [this.successTextId]: Boolean(this.successText),
+                }), "aria-invalid": Boolean(this.validationMessage) ? 'true' : 'false', disabled: this.disabled, required: this.required, readonly: this.readonly, value: this.value, type: inputType, min: this.min, max: this.max, maxlength: this.maxlength, pattern: this.pattern, placeholder: this.placeholder, autocomplete: this.autocomplete, onInput: this.handleInput, onFocus: () => (this.hasFocus = true), onBlur: this.handleBlur }), this.renderSuffixContent()), h("slot", { key: 'b70c638ad0de13e0bfa1c2f0ec366e748ab8e4e2', name: "input-validity" }, h("ds-input-validity", { key: '7c1da6ba8d42add8de43f4926c24c8a64bbe32e2', id: this.errorTextId, text: this.validationMessage, type: "error", role: "alert" }), h("ds-input-validity", { key: '46258021c17e3461ea4a0c2ae720fb44305550c5', id: this.successTextId, text: this.successText, type: "success", role: "status" }))));
     }
     static get is() { return "ds-text-input"; }
     static get encapsulation() { return "scoped"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["ds-text-input.scss"]
@@ -193,7 +213,7 @@ export class DsTextInput {
                 "attribute": "placeholder",
                 "reflect": false
             },
-            "dsId": {
+            "identifier": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -598,13 +618,13 @@ export class DsTextInput {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "TextInputType",
+                    "original": "DsTextInputType",
                     "resolved": "\"email\" | \"loading\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
                     "references": {
-                        "TextInputType": {
+                        "DsTextInputType": {
                             "location": "import",
                             "path": "./utils",
-                            "id": "src/components/01-base-components/ds-text-input/utils.ts::TextInputType"
+                            "id": "src/components/01-base-components/ds-text-input/utils.ts::DsTextInputType"
                         }
                     }
                 },
@@ -684,9 +704,34 @@ export class DsTextInput {
             "hasFocus": {},
             "clearButtonVisible": {},
             "passwordInputVisible": {},
-            "inputActive": {}
+            "inputActive": {},
+            "validationMessage": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "clear",
+                "name": "clear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "DsTextInputClearEvent",
+                    "resolved": "DsEvent",
+                    "references": {
+                        "DsTextInputClearEvent": {
+                            "location": "local",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-text-input/ds-text-input.tsx",
+                            "id": "src/components/01-base-components/ds-text-input/ds-text-input.tsx::DsTextInputClearEvent"
+                        }
+                    }
+                }
+            }];
+    }
     static get methods() {
         return {
             "togglePasswordVisibility": {
@@ -726,4 +771,5 @@ export class DsTextInput {
         };
     }
     static get elementRef() { return "el"; }
+    static get attachInternalsMemberName() { return "internals"; }
 }

package/dist/collection/components/01-base-components/ds-text-input/stories/ds-text-input.examples.stories.js

@@ -1,4 +1,6 @@
 import { html } from "lit";
+import { getDsElem } from "../../../../utils/tests/testUtils";
+import { litTemplateResultToString } from "../../../../utils/utils";
 const meta = {
     title: 'Base Components/TextInput/Examples',
     component: 'ds-text-input',
@@ -27,12 +29,31 @@ export const UsingSlots = {
       <p slot='help-text'>Lorem ipsum</p>
       <ds-icon name='archive' slot='prefix'></ds-icon>
       <small slot='suffix'>Suffix</small>
-      <div slot='error-text'>Error text slot</div>
-      <div slot='success-text'>Success text slot</div>
+      <div slot='input-validity'>Validity slot</div>
     </ds-text-input>
   `,
 };
+const formValidationDOM = html `
+  <form class="ds-sb-form-validation">
+    <ds-text-input type="number" label="Minimum value" id="min" name="min" min="5" required></ds-text-input>
+    <ds-text-input type="number" label="Maximum value" id="max" name="max" min="100" required></ds-text-input>
+    <ds-text-input type="email" label="Email" id="email" name="email" required></ds-text-input>
+    <ds-text-input type="tel" label="Telephone" id="tel" name="tel" required></ds-text-input>
+    <ds-text-input type="password" label="Password" id="password" name="password" required action-button-aria-label="password toggle"></ds-text-input>
+    <ds-text-input type="url" label="Url" id="url" name="url" required></ds-text-input>
+    <div class="button-group ds-sb-form-validation__buttons">
+      <ds-button type="submit" value="Submit"></ds-button>
+    </div>
+  </form>
+`;
 export const FormValidation = {
+    parameters: {
+        docs: {
+            source: {
+                code: litTemplateResultToString(formValidationDOM),
+            },
+        },
+    },
     render: () => html `
     <style>
       .ds-sb-form-validation {
@@ -44,16 +65,64 @@ export const FormValidation = {
         align-self: flex-end;
       }
     </style>
-    <form class="ds-sb-form-validation">
-      <ds-text-input type="number" label="Minimum value" id="min" name="min" min="5" required></ds-text-input>
-      <ds-text-input type="number" label="Maximum value" id="max" name="max" min="100" required></ds-text-input>
-      <ds-text-input type="email" label="Email" id="email" name="email" required></ds-text-input>
-      <ds-text-input type="tel" label="Telephone" id="tel" name="tel" required></ds-text-input>
-      <ds-text-input type="password" label="Password" id="password" name="password" required action-button-aria-label="password toggle"></ds-text-input>
-      <ds-text-input type="url" label="Url" id="url" name="url" required></ds-text-input>
-      <div class="button-group ds-sb-form-validation__buttons">
-        <ds-button type="submit" value="Submit"></ds-button>
-      </div>
-    </form>
+    ${formValidationDOM}
+  `,
+};
+const clientSideValidationDOM = html `
+  <div class="ds-sb-client-side-validation">
+    <div id="example-error-container">
+      <ds-text-input id="example-error" label="Error message" assistive-text='Type "error" and move to next input to display a validation message.'></ds-text-input>
+    </div>
+    <div id="example-success-container">
+      <ds-text-input id="example-success" label="Success message" assistive-text='Type "success" and move to next input to display a validation message.'></ds-text-input>
+    </div>
+  </div>
+`;
+export const ClientSideValidation = {
+    parameters: {
+        docs: {
+            source: {
+                code: litTemplateResultToString(clientSideValidationDOM),
+            },
+            story: {
+                autoplay: true,
+            },
+        },
+    },
+    render: () => html `
+    <style>
+      .ds-sb-client-side-validation {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+    </style>
+    ${clientSideValidationDOM}
   `,
+    play: async ({ canvasElement }) => {
+        const errorContainerElem = canvasElement.querySelector('#example-error-container');
+        const successContainerElem = canvasElement.querySelector('#example-success-container');
+        const errorElem = await getDsElem(canvasElement, 'ds-text-input#example-error');
+        const successElem = await getDsElem(canvasElement, 'ds-text-input#example-success');
+        errorContainerElem.addEventListener('input', (e) => {
+            const target = e.target;
+            switch (target.value) {
+                case 'error':
+                    return errorElem.errorText = 'Error message';
+                default:
+                    errorElem.errorText = "";
+                    return;
+            }
+        });
+        successContainerElem.addEventListener('input', (e) => {
+            const target = e.target;
+            switch (target.value) {
+                case 'success':
+                    return successElem.successText = 'Success message';
+                default:
+                    successElem.successText = "";
+                    return;
+            }
+        });
+    },
 };

package/dist/collection/components/01-base-components/ds-text-input/stories/ds-text-input.stories.js

@@ -1,5 +1,5 @@
-import { textInputTypes } from "../utils";
 import { icons } from "../../../00-foundations/icons/iconList";
+import { textInputTypes } from "../utils";
 const meta = {
     title: 'Base Components/TextInput',
     component: 'ds-text-input',
@@ -17,7 +17,7 @@ export const Playground = {
     argTypes: {
         label: { control: 'text' },
         placeholder: { control: 'text' },
-        dsId: { control: 'text' },
+        identifier: { control: 'text' },
         name: { control: 'text' },
         disabled: { control: 'boolean' },
         required: { control: 'boolean' },
@@ -40,15 +40,15 @@ export const Playground = {
             control: 'select',
             options: textInputTypes,
         },
-        ariaLabel: { control: 'text' },
-        ariaLabelledBy: { control: 'text' },
-        ariaDescribedby: { control: 'text' },
+        ariaLabel: { name: 'aria-label', control: 'text' },
+        ariaLabelledBy: { name: 'aria-labelledby', control: 'text' },
+        ariaDescribedby: { name: 'aria-describedby', control: 'text' },
         autocomplete: { control: 'text' },
     },
     args: {
         label: 'Label',
         placeholder: '',
-        dsId: 'input',
+        identifier: 'input',
         name: '',
         disabled: false,
         required: false,
@@ -57,7 +57,6 @@ export const Playground = {
         min: -1,
         max: -1,
         maxlength: -1,
-        pattern: '',
         assistiveText: '',
         prefixText: '',
         suffixText: '',

package/dist/collection/components/01-base-components/ds-text-input/utils.js

@@ -1,10 +1 @@
-export const textInputTypes = [
-    'text',
-    'password',
-    'search',
-    'loading',
-    'tel',
-    'email',
-    'url',
-    'number',
-];
+export const textInputTypes = ['text', 'password', 'search', 'loading', 'tel', 'email', 'url', 'number'];

package/dist/collection/components/01-base-components/ds-visually-hidden/ds-visually-hidden.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class DsVisuallyHidden {
     render() {
-        return (h("slot", { key: '4307602964aa15c8d3f4fb0f4b89188cf0a8b55e' }));
+        return (h("slot", { key: '083eaed9210a85360479b367769c8904a6089f64' }));
     }
     static get is() { return "ds-visually-hidden"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/index.js

@@ -1 +1 @@
-export {};
+export { configure } from './store';

package/dist/collection/store.js

@@ -0,0 +1,13 @@
+import { createStore } from "@stencil/store";
+;
+const initialState = {
+    validation: 'client',
+};
+const { state, set } = createStore({
+    ...initialState,
+});
+export const isValidation = (validation) => state.validation === validation;
+export const configure = ({ validation }) => {
+    set('validation', validation || initialState.validation);
+};
+export default state;

package/dist/collection/utils/link/linkUtils.js

@@ -9,12 +9,3 @@ export const visuallyHiddenAssistiveText = (lang) => {
             return 'Opens in a new tab';
     }
 };
-export const getAriaLabel = (text, ariaLabel) => {
-    if (!ariaLabel) {
-        return undefined;
-    }
-    if (ariaLabel.startsWith(text)) {
-        return ariaLabel;
-    }
-    return [text, ariaLabel].join(' ');
-};

package/dist/collection/utils/utils.js

@@ -56,3 +56,12 @@ export function* idGenerator(id) {
         yield `${id}-${currentId++}`;
     }
 }
+export const getAriaLabel = (text, ariaLabel) => {
+    if (!ariaLabel) {
+        return undefined;
+    }
+    if (ariaLabel.startsWith(text)) {
+        return ariaLabel;
+    }
+    return [text, ariaLabel].join(' ');
+};

package/dist/component-library/component-library.esm.js

@@ -1 +1 @@
-import{p as e,b as i}from"./index-50783b0c.js";export{s as setNonce}from"./index-50783b0c.js";import{g as t}from"./app-globals-0f993ce5.js";(()=>{const i=import.meta.url,t={};return""!==i&&(t.resourcesUrl=new URL(".",i).href),e(t)})().then((async e=>(await t(),i([["ds-accordion_3",[[1,"ds-accordion",{variant:[1],borderAligned:[4,"border-aligned"],openByDefault:[4,"open-by-default"],accordionId:[1,"accordion-id"],headingLevel:[2,"heading-level"],useCloseButton:[4,"use-close-button"],closeButtonLabel:[1,"close-button-label"],hideTopBorder:[4,"hide-top-border"],isExpanded:[32]},null,{isExpanded:["watchHandler"]}],[6,"ds-button",{value:[1],variant:[1],colour:[1],size:[1],fontWeight:[1,"font-weight"],icon:[1],iconPosition:[1,"icon-position"],type:[1],disabled:[4],fullWidth:[4,"full-width"],ariaDisabled:[1,"aria-disabled"]}],[1,"ds-icon",{name:[1],colour:[1],size:[1],dsTitle:[1,"title"],role:[1],hidden:[4],message:[32]}]]],["ds-checkbox-group",[[1,"ds-checkbox-group",{legend:[1],assistiveText:[1,"assistive-text"],direction:[1],errorText:[1,"error-text"],text:[1],checked:[1028],checkedChildElementCount:[1026,"checked-child-element-count"],disabled:[4],parentCheckedCount:[2,"parent-checked-count"],childElementsCount:[32],isIndeterminate:[32],indeterminateChildCheckboxCount:[32],setChecked:[64]},[[0,"dsCheckboxGroupIndeterminateChildChange","handleIndeterminateChildChange"],[0,"dsCheckboxChange","handleCheckboxChange"],[0,"dsCheckboxGroupChange","handleCheckboxGroupChange"]],{disabled:["handleCheckboxDisabledChange"],checked:["handleCheckedChange"],isIndeterminate:["handleIndeterminateChange"],checkedChildElementCount:["handleCheckedChildElementCountChange"]}]]],["ds-visually-hidden",[[1,"ds-visually-hidden"]]],["ds-text-input",[[6,"ds-text-input",{label:[1],placeholder:[1],dsId:[1,"id"],name:[1],disabled:[4],optional:[4],required:[4],readonly:[4],value:[1],min:[2],max:[2],maxlength:[2],pattern:[1],autocomplete:[1],optionalText:[1,"optional-text"],errorText:[1,"error-text"],successText:[1,"success-text"],assistiveText:[1,"assistive-text"],actionButtonAriaLabel:[1,"action-button-aria-label"],hiddenAssistiveText:[1,"hidden-assistive-text"],prefixText:[1,"prefix-text"],suffixText:[1,"suffix-text"],icon:[1],type:[1],ariaLabel:[1,"aria-label"],ariaLabelledBy:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],hasFocus:[32],clearButtonVisible:[32],passwordInputVisible:[32],inputActive:[32],togglePasswordVisibility:[64],clearInput:[64]}]]],["ds-link",[[1,"ds-link",{text:[1],size:[1],variant:[1],weight:[1],icon:[1025],iconPosition:[1025,"icon-position"],iconTitle:[1,"icon-title"],iconHidden:[4,"icon-hidden"],href:[1],target:[1],download:[4],language:[1,"lang"],linkAriaLabel:[1,"aria-label"]}]]],["ds-link-with-arrow",[[1,"ds-link-with-arrow",{text:[1],iconPosition:[1,"icon-position"],href:[1],target:[1],language:[1,"lang"],linkAriaLabel:[1,"aria-label"]}]]],["ds-input-validity",[[0,"ds-input-validity",{text:[1],type:[1],validityRole:[1,"role"],identifier:[32]}]]],["ds-checkbox",[[65,"ds-checkbox",{checkboxId:[1025,"id"],checked:[1028],legend:[1],assistiveText:[1,"assistive-text"],text:[1],indeterminate:[4],disabled:[4],errorText:[1,"error-text"],errorsDisabled:[4,"data-errors-disabled"],required:[4],optional:[4],optionalText:[1,"optional-text"],ariaLabel:[32],value:[32],validationMessage:[32]}]]]],e))));
+import{p as e,b as i}from"./index-434995e1.js";export{s as setNonce}from"./index-434995e1.js";import{g as t}from"./app-globals-0f993ce5.js";(()=>{const i=import.meta.url,t={};return""!==i&&(t.resourcesUrl=new URL(".",i).href),e(t)})().then((async e=>(await t(),i([["ds-accordion_3",[[1,"ds-accordion",{variant:[1],borderAligned:[4,"border-aligned"],openByDefault:[4,"open-by-default"],accordionId:[1,"accordion-id"],headingLevel:[2,"heading-level"],useCloseButton:[4,"use-close-button"],closeButtonLabel:[1,"close-button-label"],hideTopBorder:[4,"hide-top-border"],isExpanded:[32]},null,{isExpanded:["watchHandler"]}],[6,"ds-button",{value:[1],variant:[1],colour:[1],size:[1],fontWeight:[1,"font-weight"],icon:[1],iconPosition:[1,"icon-position"],type:[1],disabled:[4],fullWidth:[4,"full-width"],ariaDisabled:[1,"aria-disabled"]}],[1,"ds-icon",{name:[1],colour:[1],size:[1],dsTitle:[1,"title"],role:[1],hidden:[4],message:[32]}]]],["ds-input-validity",[[0,"ds-input-validity",{text:[1],type:[1],validityRole:[1,"role"],identifier:[32]}]]],["ds-text-input",[[70,"ds-text-input",{label:[1],placeholder:[1],identifier:[1,"id"],name:[1],disabled:[4],optional:[4],required:[4],readonly:[4],value:[1],min:[2],max:[2],maxlength:[2],pattern:[1],autocomplete:[1],optionalText:[1,"optional-text"],errorText:[1,"error-text"],successText:[1,"success-text"],assistiveText:[1,"assistive-text"],actionButtonAriaLabel:[1,"action-button-aria-label"],hiddenAssistiveText:[1,"hidden-assistive-text"],prefixText:[1,"prefix-text"],suffixText:[1,"suffix-text"],icon:[1],type:[1],ariaLabel:[1,"aria-label"],ariaLabelledBy:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],hasFocus:[32],clearButtonVisible:[32],passwordInputVisible:[32],inputActive:[32],validationMessage:[32],togglePasswordVisibility:[64],clearInput:[64]}]]],["ds-checkbox",[[65,"ds-checkbox",{identifier:[1,"id"],checked:[1028],legend:[1],assistiveText:[1,"assistive-text"],text:[1],indeterminate:[4],disabled:[4],errorText:[1,"error-text"],errorsDisabled:[4,"data-errors-disabled"],required:[4],optional:[4],optionalText:[1,"optional-text"],ariaLabel:[1,"aria-label"],value:[32],validationMessage:[32]}]]],["ds-checkbox-group",[[1,"ds-checkbox-group",{legend:[1],assistiveText:[1,"assistive-text"],direction:[1],errorText:[1,"error-text"],text:[1],checked:[4],disabled:[4],childElementsCount:[32],checkedChildElementCount:[32],isIndeterminate:[32],indeterminateChildCheckboxCount:[32],setChecked:[64]},[[0,"dsCheckboxGroupIndeterminateChildChange","listenIndeterminateChildChange"],[0,"dsCheckboxInput","listenCheckboxChange"],[0,"dsCheckboxGroupChange","listenCheckboxGroupChange"]],{disabled:["watchCheckboxDisabledChange"],checked:["watchCheckedChange"],isIndeterminate:["watchIndeterminateChange"],checkedChildElementCount:["watchCheckedChildElementCountChange"]}]]],["ds-visually-hidden",[[1,"ds-visually-hidden"]]],["ds-link",[[1,"ds-link",{text:[1],size:[1],variant:[1],weight:[1],icon:[1025],iconPosition:[1025,"icon-position"],iconTitle:[1,"icon-title"],iconHidden:[4,"icon-hidden"],href:[1],target:[1],download:[4],language:[1,"lang"],ariaLabel:[1,"aria-label"]}]]],["ds-link-with-arrow",[[1,"ds-link-with-arrow",{text:[1],iconPosition:[1,"icon-position"],href:[1],target:[1],language:[1,"lang"],ariaLabel:[1,"aria-label"]}]]]],e))));