@uh-design-system/component-library 0.5.2 → 0.5.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/component-library.cjs.js +2 -2
- package/dist/cjs/{controlUtils-041de0fd.js → controlUtils-8bf55ef0.js} +1 -1
- package/dist/cjs/{ds-accordion_3.cjs.entry.js → ds-accordion_5.cjs.entry.js} +115 -20
- package/dist/cjs/ds-checkbox-group.cjs.entry.js +37 -27
- package/dist/cjs/ds-checkbox.cjs.entry.js +28 -25
- package/dist/cjs/ds-input-validity.cjs.entry.js +4 -4
- package/dist/cjs/ds-link-with-arrow.cjs.entry.js +3 -3
- package/dist/cjs/ds-link.cjs.entry.js +3 -3
- package/dist/cjs/ds-radio-button-group.cjs.entry.js +111 -0
- package/dist/cjs/ds-radio-button.cjs.entry.js +150 -0
- package/dist/cjs/ds-text-input.cjs.entry.js +8 -7
- package/dist/cjs/{index-bf84b124.js → index-947af833.js} +36 -4
- package/dist/cjs/index.cjs.js +2 -2
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/{store-9bd20f3c.js → store-e8e87298.js} +1 -1
- package/dist/collection/collection-manifest.json +4 -1
- package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.css +12 -12
- package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.js +11 -13
- package/dist/collection/components/01-base-components/ds-button/ds-button.css +98 -87
- package/dist/collection/components/01-base-components/ds-button/ds-button.js +89 -4
- package/dist/collection/components/01-base-components/ds-button/stories/ds-button.examples.stories.js +66 -0
- package/dist/collection/components/01-base-components/ds-button/stories/ds-button.stories.js +3 -0
- package/dist/collection/components/01-base-components/ds-checkbox/ds-checkbox.css +28 -21
- package/dist/collection/components/01-base-components/ds-checkbox/ds-checkbox.js +26 -45
- package/dist/collection/components/01-base-components/ds-checkbox-group/ds-checkbox-group.css +1 -1
- package/dist/collection/components/01-base-components/ds-checkbox-group/ds-checkbox-group.js +52 -26
- package/dist/collection/components/01-base-components/ds-checkbox-group/stories/ds-checkbox-group.features.stories.js +74 -18
- package/dist/collection/components/01-base-components/ds-icon/ds-icon.js +1 -1
- package/dist/collection/components/01-base-components/ds-input-validity/ds-input-validity.css +2 -2
- package/dist/collection/components/01-base-components/ds-input-validity/ds-input-validity.js +1 -1
- package/dist/collection/components/01-base-components/ds-link/ds-link.css +12 -12
- package/dist/collection/components/01-base-components/ds-link/ds-link.js +1 -1
- package/dist/collection/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.css +10 -10
- package/dist/collection/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.js +1 -1
- package/dist/collection/components/01-base-components/ds-radio-button/ds-radio-button.css +116 -0
- package/dist/collection/components/01-base-components/ds-radio-button/ds-radio-button.js +468 -0
- package/dist/collection/components/01-base-components/ds-radio-button/stories/ds-radio-button.features.stories.js +70 -0
- package/dist/collection/components/01-base-components/ds-radio-button/stories/ds-radio-button.stories.js +36 -0
- package/dist/collection/components/01-base-components/ds-radio-button-group/ds-radio-button-group.css +31 -0
- package/dist/collection/components/01-base-components/ds-radio-button-group/ds-radio-button-group.js +287 -0
- package/dist/collection/components/01-base-components/ds-radio-button-group/stories/ds-radio-button-group.examples.stories.js +51 -0
- package/dist/collection/components/01-base-components/ds-radio-button-group/stories/ds-radio-button-group.features.stories.js +58 -0
- package/dist/collection/components/01-base-components/ds-radio-button-group/stories/ds-radio-button-group.stories.js +59 -0
- package/dist/collection/components/01-base-components/ds-spinner/ds-spinner.css +309 -0
- package/dist/collection/components/01-base-components/ds-spinner/ds-spinner.js +221 -0
- package/dist/collection/components/01-base-components/ds-spinner/stories/ds-spinner.examples.stories.js +122 -0
- package/dist/collection/components/01-base-components/ds-spinner/stories/ds-spinner.features.stories.js +107 -0
- package/dist/collection/components/01-base-components/ds-spinner/stories/ds-spinner.stories.js +59 -0
- package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.css +38 -38
- package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.js +4 -3
- package/dist/collection/components/01-base-components/ds-visually-hidden/ds-visually-hidden.js +1 -1
- package/dist/collection/utils/button/buttonUtils.js +14 -0
- package/dist/collection/utils/colours/colourTypes.js +3 -3
- package/dist/collection/utils/colours/colourUtils.js +5 -3
- package/dist/collection/utils/controls/controlUtils.js +1 -1
- package/dist/collection/utils/spinner/spinnerUtils.js +20 -0
- package/dist/collection/utils/tests/testUtils.js +1 -0
- package/dist/collection/utils/typography/typographyUtils.js +3 -3
- package/dist/component-library/component-library.css +1 -1
- package/dist/component-library/component-library.esm.js +1 -1
- package/dist/component-library/controlUtils-c2ba44bd.js +1 -0
- package/dist/component-library/ds-accordion_5.entry.js +1 -0
- package/dist/component-library/ds-checkbox-group.entry.js +1 -1
- package/dist/component-library/ds-checkbox.entry.js +1 -1
- package/dist/component-library/ds-input-validity.entry.js +1 -1
- package/dist/component-library/ds-link-with-arrow.entry.js +1 -1
- package/dist/component-library/ds-link.entry.js +1 -1
- package/dist/component-library/ds-radio-button-group.entry.js +1 -0
- package/dist/component-library/ds-radio-button.entry.js +1 -0
- package/dist/component-library/ds-text-input.entry.js +1 -1
- package/dist/component-library/index-84fd0ee9.js +2 -0
- package/dist/component-library/index.esm.js +1 -1
- package/dist/component-library/{store-b8d17c10.js → store-73a56075.js} +1 -1
- package/dist/components/controlUtils.js +1 -1
- package/dist/components/ds-accordion.js +28 -18
- package/dist/components/ds-button2.js +48 -7
- package/dist/components/ds-checkbox-group.js +38 -27
- package/dist/components/ds-checkbox2.js +28 -24
- package/dist/components/ds-icon2.js +1 -1
- package/dist/components/ds-input-validity2.js +2 -2
- package/dist/components/ds-link-with-arrow.js +2 -2
- package/dist/components/ds-link.js +2 -2
- package/dist/components/ds-radio-button-group.d.ts +11 -0
- package/dist/components/ds-radio-button-group.js +147 -0
- package/dist/components/ds-radio-button.d.ts +11 -0
- package/dist/components/ds-radio-button.js +196 -0
- package/dist/components/ds-spinner.d.ts +11 -0
- package/dist/components/ds-spinner.js +6 -0
- package/dist/components/ds-spinner2.js +90 -0
- package/dist/components/ds-text-input.js +17 -10
- package/dist/components/ds-visually-hidden2.js +1 -1
- package/dist/components/index2.js +36 -5
- package/dist/esm/component-library.js +3 -3
- package/dist/esm/controlUtils-c2ba44bd.js +4 -0
- package/dist/esm/{ds-accordion_3.entry.js → ds-accordion_5.entry.js} +114 -21
- package/dist/esm/ds-checkbox-group.entry.js +37 -27
- package/dist/esm/ds-checkbox.entry.js +28 -25
- package/dist/esm/ds-input-validity.entry.js +4 -4
- package/dist/esm/ds-link-with-arrow.entry.js +3 -3
- package/dist/esm/ds-link.entry.js +3 -3
- package/dist/esm/ds-radio-button-group.entry.js +107 -0
- package/dist/esm/ds-radio-button.entry.js +146 -0
- package/dist/esm/ds-text-input.entry.js +8 -7
- package/dist/esm/{index-434995e1.js → index-84fd0ee9.js} +36 -5
- package/dist/esm/index.js +2 -2
- package/dist/esm/loader.js +3 -3
- package/dist/esm/{store-b8d17c10.js → store-73a56075.js} +1 -1
- package/dist/styles/helpers.css +7 -0
- package/dist/styles/helpers.css.map +1 -0
- package/dist/styles/mixins/_breakpoints.scss +14 -0
- package/dist/styles/mixins/_focus.scss +28 -0
- package/dist/styles/mixins/_wrapper.scss +5 -0
- package/dist/styles/mixins/imports-default/_imports.scss +2 -0
- package/dist/styles/mixins/tokens/_breakpoints.scss +13 -0
- package/dist/styles/mixins/tokens/_semantic-colours.scss +75 -0
- package/dist/styles/mixins.scss +10 -0
- package/dist/styles/variables.css +168 -0
- package/dist/styles/variables.css.map +1 -0
- package/dist/types/components/01-base-components/ds-button/ds-button.d.ts +5 -0
- package/dist/types/components/01-base-components/ds-button/stories/ds-button.examples.stories.d.ts +1 -0
- package/dist/types/components/01-base-components/ds-checkbox/ds-checkbox.d.ts +6 -10
- package/dist/types/components/01-base-components/ds-checkbox-group/ds-checkbox-group.d.ts +5 -4
- package/dist/types/components/01-base-components/ds-radio-button/ds-radio-button.d.ts +44 -0
- package/dist/types/components/01-base-components/ds-radio-button/stories/ds-radio-button.features.stories.d.ts +15 -0
- package/dist/types/components/01-base-components/ds-radio-button/stories/ds-radio-button.stories.d.ts +7 -0
- package/dist/types/components/01-base-components/ds-radio-button-group/ds-radio-button-group.d.ts +24 -0
- package/dist/types/components/01-base-components/ds-radio-button-group/stories/ds-radio-button-group.examples.stories.d.ts +6 -0
- package/dist/types/components/01-base-components/ds-radio-button-group/stories/ds-radio-button-group.features.stories.d.ts +10 -0
- package/dist/types/components/01-base-components/ds-radio-button-group/stories/ds-radio-button-group.stories.d.ts +7 -0
- package/dist/types/components/01-base-components/ds-spinner/ds-spinner.d.ts +17 -0
- package/dist/types/components/01-base-components/ds-spinner/stories/ds-spinner.examples.stories.d.ts +7 -0
- package/dist/types/components/01-base-components/ds-spinner/stories/ds-spinner.features.stories.d.ts +7 -0
- package/dist/types/components/01-base-components/ds-spinner/stories/ds-spinner.stories.d.ts +7 -0
- package/dist/types/components.d.ts +133 -18
- package/dist/types/utils/button/buttonUtils.d.ts +1 -0
- package/dist/types/utils/colours/colourTypes.d.ts +3 -3
- package/dist/types/utils/spinner/spinnerUtils.d.ts +1 -0
- package/dist/types/utils/tests/testUtils.d.ts +1 -0
- package/package.json +15 -15
- package/dist/cjs/ds-visually-hidden.cjs.entry.js +0 -20
- package/dist/component-library/controlUtils-9ca4087b.js +0 -1
- package/dist/component-library/ds-accordion_3.entry.js +0 -1
- package/dist/component-library/ds-visually-hidden.entry.js +0 -1
- package/dist/component-library/index-434995e1.js +0 -2
- package/dist/esm/controlUtils-9ca4087b.js +0 -4
- package/dist/esm/ds-visually-hidden.entry.js +0 -16
|
@@ -2,20 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-947af833.js');
|
|
6
6
|
const index$1 = require('./index-5b0b9d4c.js');
|
|
7
7
|
const utils = require('./utils-3412cbed.js');
|
|
8
|
-
const controlUtils = require('./controlUtils-
|
|
9
|
-
const store = require('./store-
|
|
8
|
+
const controlUtils = require('./controlUtils-8bf55ef0.js');
|
|
9
|
+
const store = require('./store-e8e87298.js');
|
|
10
10
|
|
|
11
|
-
const dsCheckboxCss = ".ds-checkbox-fieldset{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0;gap:var(--ds-spacing-3xSmall)}.ds-checkbox-fieldset__legend{padding-inline:0;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-checkbox-fieldset__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-
|
|
11
|
+
const dsCheckboxCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-checkbox-fieldset{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0;gap:var(--ds-spacing-3xSmall)}.ds-checkbox-fieldset__legend{padding-inline:0;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-checkbox-fieldset__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large)}.ds-checkbox{display:inline-flex;align-self:flex-start;align-items:flex-start;flex-direction:row;flex-wrap:nowrap;text-wrap:wrap;word-wrap:break-word;white-space:normal;position:relative;cursor:pointer;user-select:none;width:auto;padding:var(--ds-spacing-xSmall)}.ds-checkbox--no-margin .ds-checkbox__input{margin-right:0}.ds-checkbox--disabled{color:var(--ds-palette-black-40)}.ds-checkbox__span--optional{color:var(--ds-palette-black-70);font-size:var(--ds-fontSize-14)}.ds-checkbox:has(.ds-checkbox__input:disabled){cursor:not-allowed}.ds-checkbox__input{cursor:pointer;-webkit-appearance:none;appearance:none;background-color:var(--ds-palette-white);margin:0;display:grid;place-content:center;height:24px;width:24px;flex-shrink:0;margin-right:var(--ds-spacing-xSmall);border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-palette-black-50);}.ds-checkbox__input:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-checkbox__input:hover,.ds-checkbox__input:active{border-color:var(--ds-palette-black-50)}.ds-checkbox__input:hover{background-color:var(--ds-palette-black-10)}.ds-checkbox__input:active{background-color:var(--ds-palette-black-20)}.ds-checkbox__input:disabled{background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15)}@media (forced-colors: active){.ds-checkbox__input:disabled{border-color:GrayText}}.ds-checkbox__input:checked,.ds-checkbox__input:indeterminate{background-color:var(--ds-palette-mainBlue-70);border-color:var(--ds-overlay-black-00)}.ds-checkbox__input:checked:hover,.ds-checkbox__input:indeterminate:hover{background-color:var(--ds-palette-mainBlue-80)}.ds-checkbox__input:checked:active,.ds-checkbox__input:indeterminate:active{background-color:var(--ds-palette-mainBlue-90)}.ds-checkbox__input:checked:disabled,.ds-checkbox__input:indeterminate:disabled{background-color:var(--ds-overlay-black-10)}.ds-checkbox__input:user-invalid,.ds-checkbox__input--invalid,.ds-checkbox__input--invalid:checked,.ds-checkbox__input--invalid:indeterminate{border-color:var(--ds-palette-red-50)}.ds-checkbox__input:disabled{cursor:not-allowed;color:var(--ds-palette-black-40)}.ds-checkbox__input::before{content:\"\";display:block;height:1em;width:1em;background-size:contain;background-repeat:no-repeat;background-position:center}.ds-checkbox__input:checked::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:checked:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23999999' /></svg>\")}.ds-checkbox__input:indeterminate::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:indeterminate:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23999999' /></svg>\")}.ds-checkbox-error{display:flex}.ds-checkbox-error--visible{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-xSmall)}";
|
|
12
12
|
const DsCheckboxStyle0 = dsCheckboxCss;
|
|
13
13
|
|
|
14
14
|
const checkboxIdGenerator = utils.idGenerator('ds-checkbox');
|
|
15
15
|
const DsCheckbox = class {
|
|
16
16
|
constructor(hostRef) {
|
|
17
17
|
index.registerInstance(this, hostRef);
|
|
18
|
-
this.dsCheckboxInput = index.createEvent(this, "dsCheckboxInput", 7);
|
|
19
18
|
if (hostRef.$hostElement$["s-ei"]) {
|
|
20
19
|
this.internals = hostRef.$hostElement$["s-ei"];
|
|
21
20
|
}
|
|
@@ -24,16 +23,15 @@ const DsCheckbox = class {
|
|
|
24
23
|
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
25
24
|
}
|
|
26
25
|
}
|
|
26
|
+
checkboxGroup = null;
|
|
27
27
|
inputElem;
|
|
28
28
|
labelId;
|
|
29
29
|
inputValidityId;
|
|
30
30
|
assistiveTextId;
|
|
31
31
|
inheritedAttributes = {};
|
|
32
|
-
initialChecked;
|
|
33
32
|
labelClicked = false;
|
|
34
33
|
get el() { return index.getElement(this); }
|
|
35
34
|
internals;
|
|
36
|
-
dsCheckboxInput;
|
|
37
35
|
identifier = checkboxIdGenerator.next().value;
|
|
38
36
|
checked = false;
|
|
39
37
|
legend;
|
|
@@ -47,7 +45,8 @@ const DsCheckbox = class {
|
|
|
47
45
|
optional = false;
|
|
48
46
|
optionalText;
|
|
49
47
|
ariaLabel;
|
|
50
|
-
|
|
48
|
+
invalid = !!this.errorText;
|
|
49
|
+
initialChecked = this.checked;
|
|
51
50
|
validationMessage;
|
|
52
51
|
setIds = () => {
|
|
53
52
|
this.labelId = `${this.identifier}-label`;
|
|
@@ -77,22 +76,28 @@ const DsCheckbox = class {
|
|
|
77
76
|
return this.text;
|
|
78
77
|
};
|
|
79
78
|
getAriaDescribedBy = () => [Boolean(this.assistiveText) && this.assistiveTextId, Boolean(this.getValidationMessage()) && this.inputValidityId].filter(Boolean).join(' ');
|
|
80
|
-
|
|
79
|
+
formResetCallback() {
|
|
81
80
|
this.checked = this.initialChecked;
|
|
82
|
-
this.value = this.checked.toString();
|
|
83
81
|
this.internals?.setValidity({});
|
|
84
|
-
this.internals?.setFormValue(this.
|
|
85
|
-
};
|
|
86
|
-
setInitialState = () => {
|
|
87
|
-
this.initialChecked = this.checked;
|
|
88
|
-
this.value = this.checked.toString();
|
|
89
|
-
this.internals?.setFormValue(this.value);
|
|
90
|
-
};
|
|
91
|
-
formResetCallback() {
|
|
92
|
-
this.restoreInitialState();
|
|
82
|
+
this.internals?.setFormValue(this.checked.toString());
|
|
93
83
|
}
|
|
84
|
+
connectedCallback() {
|
|
85
|
+
this.checkboxGroup = this.el.closest('ds-checkbox-group');
|
|
86
|
+
if (this.checkboxGroup) {
|
|
87
|
+
this.invalid = !!this.checkboxGroup.errorText;
|
|
88
|
+
this.checkboxGroup.addEventListener('dsCheckboxGroupInvalidStateChange', this.updateInvalidState);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
disconnectedCallback() {
|
|
92
|
+
if (this.checkboxGroup) {
|
|
93
|
+
this.checkboxGroup.removeEventListener('dsCheckboxGroupInvalidStateChange', this.updateInvalidState);
|
|
94
|
+
}
|
|
95
|
+
this.checkboxGroup = null;
|
|
96
|
+
}
|
|
97
|
+
updateInvalidState = (e) => {
|
|
98
|
+
this.invalid = e.detail;
|
|
99
|
+
};
|
|
94
100
|
componentWillLoad() {
|
|
95
|
-
this.setInitialState();
|
|
96
101
|
this.setIds();
|
|
97
102
|
this.inheritedAttributes = {
|
|
98
103
|
...utils.inheritAriaAttributes(this.el, ['aria-label', 'aria-describedby', 'aria-hidden', 'aria-invalid']),
|
|
@@ -105,9 +110,7 @@ const DsCheckbox = class {
|
|
|
105
110
|
handleInput = (e) => {
|
|
106
111
|
const target = e.target;
|
|
107
112
|
this.checked = target.checked;
|
|
108
|
-
this.
|
|
109
|
-
this.internals?.setFormValue(this.value);
|
|
110
|
-
this.dsCheckboxInput.emit({ id: this.identifier, checked: target.checked });
|
|
113
|
+
this.internals?.setFormValue(target.checked.toString());
|
|
111
114
|
if (store.isValidation('client') && this.validationMessage) {
|
|
112
115
|
this.validationMessage = this.getValidationMessage();
|
|
113
116
|
}
|
|
@@ -135,13 +138,13 @@ const DsCheckbox = class {
|
|
|
135
138
|
'ds-checkbox--no-margin': Boolean(!this.text),
|
|
136
139
|
});
|
|
137
140
|
const inputClasses = index$1.classNames('ds-checkbox__input', {
|
|
138
|
-
'ds-checkbox__input--invalid': Boolean(this.errorText),
|
|
141
|
+
'ds-checkbox__input--invalid': Boolean(this.errorText) || this.invalid,
|
|
139
142
|
});
|
|
140
143
|
const errorClasses = index$1.classNames('ds-checkbox-error', {
|
|
141
144
|
'ds-checkbox-error--visible': Boolean(this.validationMessage),
|
|
142
145
|
});
|
|
143
146
|
const ariaDescribedBy = this.getAriaDescribedBy();
|
|
144
|
-
return (index.h(index.Fragment, null, index.h("div", null, index.h("label", { id: this.labelId, class: classes, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp }, index.h("input", { ref: inputElem => (this.inputElem = inputElem), type: "checkbox", class: inputClasses, checked: this.checked, indeterminate: this.indeterminate, onInput: this.handleInput, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, value: this.
|
|
147
|
+
return (index.h(index.Fragment, null, index.h("div", null, index.h("label", { id: this.labelId, class: classes, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp }, index.h("input", { ref: inputElem => (this.inputElem = inputElem), type: "checkbox", class: inputClasses, checked: this.checked, indeterminate: this.indeterminate, onInput: this.handleInput, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, value: this.checked.toString(), disabled: this.disabled, required: this.required, id: this.identifier, "aria-describedby": ariaDescribedBy, "aria-label": utils.getAriaLabel(this.getCheckboxText(), this.ariaLabel), "aria-invalid": this.errorText ? true : undefined, ...this.inheritedAttributes }), this.getCheckboxText())), !this.errorsDisabled && (index.h("div", { class: errorClasses }, index.h("ds-input-validity", { id: this.inputValidityId, text: this.validationMessage, type: "error", role: "alert" })))));
|
|
145
148
|
}
|
|
146
149
|
renderFieldset() {
|
|
147
150
|
const fieldsetClasses = index$1.classNames('ds-checkbox-fieldset');
|
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-947af833.js');
|
|
6
6
|
const index$1 = require('./index-5b0b9d4c.js');
|
|
7
|
-
const store = require('./store-
|
|
7
|
+
const store = require('./store-e8e87298.js');
|
|
8
8
|
|
|
9
|
-
const dsInputValidityCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-input-validity{display:flex;align-items:center;margin-top:var(--ds-spacing-2xSmall);gap:var(--ds-spacing-2xSmall)}.ds-input-validity--error{color:var(--ds-
|
|
9
|
+
const dsInputValidityCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-input-validity{display:flex;align-items:center;margin-top:var(--ds-spacing-2xSmall);gap:var(--ds-spacing-2xSmall)}.ds-input-validity--error{color:var(--ds-palette-red-70)}.ds-input-validity--success{color:var(--ds-palette-green-70)}.ds-input-validity ds-icon{display:block;height:1.5rem}.ds-input-validity small{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}";
|
|
10
10
|
const DsInputValidityStyle0 = dsInputValidityCss;
|
|
11
11
|
|
|
12
12
|
const DsInputValidity = class {
|
|
@@ -28,7 +28,7 @@ const DsInputValidity = class {
|
|
|
28
28
|
'ds-input-validity--success': this.type === 'success',
|
|
29
29
|
});
|
|
30
30
|
const icon = this.type === 'success' ? 'check_circle_fill' : 'warning_fill';
|
|
31
|
-
return (index.h("div", { key: '
|
|
31
|
+
return (index.h("div", { key: 'b76f90369546a44b88ff02ec08182ebf2299c0e9', role: store.isValidation('client') ? this.validityRole : undefined }, this.text && (index.h("div", { key: '575d68fff500bac58612514a3c4efebdb62dffdb', class: classes }, index.h("ds-icon", { key: '707c95678fdf517f83bc5126a1fcea0d9f8eb5cb', name: icon }), index.h("small", { key: '39e098386b1ed37c9d797513d626bb50e2e50034', id: this.identifier }, this.text)))));
|
|
32
32
|
}
|
|
33
33
|
};
|
|
34
34
|
DsInputValidity.style = DsInputValidityStyle0;
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-947af833.js');
|
|
6
6
|
const index$1 = require('./index-5b0b9d4c.js');
|
|
7
7
|
const utils = require('./utils-3412cbed.js');
|
|
8
8
|
const linkUtils = require('./linkUtils-695da37c.js');
|
|
9
9
|
|
|
10
|
-
const dsLinkWithArrowCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:host{display:inline-block}.ds-link-with-arrow{display:inline-flex;align-items:center;color:var(--ds-
|
|
10
|
+
const dsLinkWithArrowCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:host{display:inline-block}.ds-link-with-arrow{display:inline-flex;align-items:center;color:var(--ds-palette-mainBlue-70);letter-spacing:var(--ds-letterSpacing-wide);font-weight:var(--ds-fontWeight-semibold);font-size:var(--ds-fontSize-16);text-decoration-line:none}.ds-link-with-arrow:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}@media (min-width: 30rem){.ds-link-with-arrow{font-size:var(--ds-fontSize-18)}}.ds-link-with-arrow__icon{display:inline-flex;width:2em;height:2em;line-height:0;align-items:center;justify-content:center;color:var(--ds-palette-white);background-color:var(--ds-palette-mainBlue-70)}.ds-link-with-arrow__icon--start{margin-right:var(--ds-spacing-xSmall)}.ds-link-with-arrow__icon--end{margin-left:var(--ds-spacing-xSmall)}:hover slot>.ds-link-with-arrow__icon{outline:10px solid;background-color:var(--ds-palette-mainBlue-80)}:active slot>.ds-link-with-arrow__icon{background-color:var(--ds-palette-mainBlue-90)}.ds-link-with-arrow:hover,.ds-link-with-arrow:active{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-link-with-arrow:hover{color:var(--ds-palette-mainBlue-80)}.ds-link-with-arrow:active,.ds-link-with-arrow:focus-visible{color:var(--ds-palette-mainBlue-90)}";
|
|
11
11
|
const DsLinkWithArrowStyle0 = dsLinkWithArrowCss;
|
|
12
12
|
|
|
13
13
|
const visuallyHiddenAssistiveTextIdGenerator = utils.idGenerator('visually-hidden-assistive-text');
|
|
@@ -39,7 +39,7 @@ const DsLinkWithArrow = class {
|
|
|
39
39
|
'ds-link-with-arrow__icon--start': this.iconPosition === 'start',
|
|
40
40
|
'ds-link-with-arrow__icon--end': this.iconPosition === 'end',
|
|
41
41
|
});
|
|
42
|
-
return (index.h("a", { key: '
|
|
42
|
+
return (index.h("a", { key: '07c30d407ab9399a29f3949bc4f9ea1139f9fa97', href: this.href, class: classes, rel: this.rel, target: this.target, "aria-label": utils.getAriaLabel(this.text, this.ariaLabel), ...this.inheritedAttributes }, index.h("slot", { key: 'bebb1091f27d49871da79235aed5772bd1059f3d', name: "iconStart" }, this.iconPosition === 'start' && index.h("ds-icon", { key: 'c7bfbfdc9953138b510b5e37830cdd1f7837bae6', name: this.icon, class: iconClasses, size: "1.4em" })), this.text, index.h("slot", { key: 'f4a8369cf54fb4d9f8aeea193c7aa52c14a59e2b', name: "iconStart" }, this.iconPosition === 'end' && index.h("ds-icon", { key: '430e7a77fe1bfa7af5f49873f1aff7371437d345', name: this.icon, class: iconClasses, size: "1.4em" })), linkUtils.opensInNewTab(this.target) && (index.h("ds-visually-hidden", { key: '3e0b84c6648fa683320e602df7f83776f9698d74', id: this.visuallyHiddenAssistiveTextId }, linkUtils.visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
|
|
43
43
|
}
|
|
44
44
|
};
|
|
45
45
|
DsLinkWithArrow.style = DsLinkWithArrowStyle0;
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-947af833.js');
|
|
6
6
|
const index$1 = require('./index-5b0b9d4c.js');
|
|
7
7
|
const utils = require('./utils-3412cbed.js');
|
|
8
8
|
const linkUtils = require('./linkUtils-695da37c.js');
|
|
9
9
|
|
|
10
|
-
const dsLinkCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:host{display:inline-block}.ds-link{display:inline-flex;align-items:center;color:var(--ds-
|
|
10
|
+
const dsLinkCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:host{display:inline-block}.ds-link{display:inline-flex;align-items:center;color:var(--ds-palette-mainBlue-70);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);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-link:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-link--semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-link--bold{font-weight:var(--ds-fontWeight-bold)}.ds-link--2xLarge{font-size:var(--ds-fontSize-22)}.ds-link--xLarge{font-size:var(--ds-fontSize-20)}.ds-link--large{font-size:var(--ds-fontSize-18)}.ds-link--medium{font-size:var(--ds-fontSize-16)}.ds-link--small{font-size:var(--ds-fontSize-14)}.ds-link--xSmall{font-size:var(--ds-fontSize-12)}.ds-link__icon{height:1em;width:1em}.ds-link__icon--start-inline{margin-right:var(--ds-spacing-3xSmall)}.ds-link__icon--start-standalone{margin-right:var(--ds-spacing-2xSmall)}.ds-link__icon--end-inline{margin-left:var(--ds-spacing-3xSmall)}.ds-link__icon--end-standalone{margin-left:var(--ds-spacing-2xSmall)}.ds-link:hover,.ds-link:active{text-decoration-thickness:13%;text-underline-offset:12%}.ds-link:hover{color:var(--ds-palette-mainBlue-80)}.ds-link:active{color:var(--ds-palette-mainBlue-90)}.ds-link:visited{color:#551a8b}.ds-link--standalone{color:var(--ds-palette-mainBlue-70);text-decoration-line:none}.ds-link--standalone:hover,.ds-link--standalone:active{text-decoration-line:underline}.ds-link--standalone:hover{color:var(--ds-palette-mainBlue-80)}.ds-link--standalone:active{color:var(--ds-palette-mainBlue-90)}.ds-link--standalone:focus-visible{color:var(--ds-palette-mainBlue-70)}.ds-link--standalone:visited{color:var(--ds-palette-mainBlue-70)}";
|
|
11
11
|
const DsLinkStyle0 = dsLinkCss;
|
|
12
12
|
|
|
13
13
|
const visuallyHiddenAssistiveTextIdGenerator = utils.idGenerator('visually-hidden-assistive-text');
|
|
@@ -48,7 +48,7 @@ const DsLink = class {
|
|
|
48
48
|
[`ds-link__icon--start-${this.variant}`]: this.iconPosition === 'start',
|
|
49
49
|
[`ds-link__icon--end-${this.variant}`]: this.iconPosition === 'end',
|
|
50
50
|
});
|
|
51
|
-
return (index.h("a", { key: '
|
|
51
|
+
return (index.h("a", { key: 'e8db9e6a903263d717a386e2fd61a2f279c4de1d', href: this.href, class: classes, rel: this.rel, target: this.target, download: this.download, "aria-label": utils.getAriaLabel(this.text, this.ariaLabel), ...this.inheritedAttributes }, index.h("slot", { key: '9def43becc24ab8f836ced9eb1f33de903fcfa40', name: "iconStart" }, this.icon && this.iconPosition === 'start' && index.h("ds-icon", { key: '301bbcf7464dca9e0e44cd9b74ccc77e67cbfac9', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), this.text, index.h("slot", { key: 'f6f3b7824f5bb028375f40e2e5743989a56f187d', name: "iconEnd" }, this.icon && this.iconPosition === 'end' && index.h("ds-icon", { key: '3af94f1f8e4f1199e260929001b99ee56f780dff', name: this.icon, class: iconClasses, size: "1em", title: this.iconTitle, hidden: this.iconHidden })), linkUtils.opensInNewTab(this.target) && (index.h("ds-visually-hidden", { key: 'f91801450c834793bf05a40f011b86f500422eee', id: this.visuallyHiddenAssistiveTextId }, linkUtils.visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
|
|
52
52
|
}
|
|
53
53
|
};
|
|
54
54
|
DsLink.style = DsLinkStyle0;
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-947af833.js');
|
|
6
|
+
const index$1 = require('./index-5b0b9d4c.js');
|
|
7
|
+
const utils = require('./utils-3412cbed.js');
|
|
8
|
+
|
|
9
|
+
const dsRadioButtonGroupCss = ".ds-radio-button-group{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-radio-button-group__radio-buttons-slot{display:inline-flex;flex-direction:column}.ds-radio-button-group__radio-buttons-slot--horizontal{flex-direction:row;gap:var(--ds-spacing-small);flex-wrap:wrap}.ds-radio-button-group__legend{padding-inline:0;color:var(--ds-palette-black-95);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-3xSmall)}.ds-radio-button-group__assistive-text{font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-2xSmall)}";
|
|
10
|
+
const DsRadioButtonGroupStyle0 = dsRadioButtonGroupCss;
|
|
11
|
+
|
|
12
|
+
const radioButtonGroupIdGenerator = utils.idGenerator('ds-radio-button-group');
|
|
13
|
+
const DsRadioButtonGroup = class {
|
|
14
|
+
constructor(hostRef) {
|
|
15
|
+
index.registerInstance(this, hostRef);
|
|
16
|
+
this.dsRadioGroupValueChange = index.createEvent(this, "dsRadioGroupValueChange", 7);
|
|
17
|
+
this.dsRadioGroupInvalidStateChange = index.createEvent(this, "dsRadioGroupInvalidStateChange", 7);
|
|
18
|
+
}
|
|
19
|
+
fieldsetId = radioButtonGroupIdGenerator.next().value;
|
|
20
|
+
errorTextId = `${this.fieldsetId}-error`;
|
|
21
|
+
assistiveTextId = `${this.fieldsetId}-assistive-text`;
|
|
22
|
+
inheritedAttributes = {};
|
|
23
|
+
get el() { return index.getElement(this); }
|
|
24
|
+
legend;
|
|
25
|
+
assistiveText;
|
|
26
|
+
initialValue;
|
|
27
|
+
direction = 'vertical';
|
|
28
|
+
errorText = '';
|
|
29
|
+
value;
|
|
30
|
+
dsRadioGroupValueChange;
|
|
31
|
+
dsRadioGroupInvalidStateChange;
|
|
32
|
+
getRadios = () => {
|
|
33
|
+
return Array.from(this.el.querySelectorAll('ds-radio-button')).filter(e => !e.disabled);
|
|
34
|
+
};
|
|
35
|
+
updateFocusableRadioButton = () => {
|
|
36
|
+
const radios = this.getRadios();
|
|
37
|
+
if (!radios.length) {
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
let focusableBtn = null;
|
|
41
|
+
for (const radio of radios) {
|
|
42
|
+
const isFocusable = radio.value === this.value;
|
|
43
|
+
radio.setFocusable(isFocusable);
|
|
44
|
+
if (isFocusable) {
|
|
45
|
+
focusableBtn = radio;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
if (!focusableBtn) {
|
|
49
|
+
radios[0].setFocusable(true);
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
componentWillLoad() {
|
|
53
|
+
this.value = this.initialValue;
|
|
54
|
+
this.inheritedAttributes = utils.inheritAriaAttributes(this.el, ['aria-labelledby']);
|
|
55
|
+
this.updateFocusableRadioButton();
|
|
56
|
+
}
|
|
57
|
+
async getValue() {
|
|
58
|
+
return this.value;
|
|
59
|
+
}
|
|
60
|
+
errorTextObserver(errorText) {
|
|
61
|
+
this.dsRadioGroupInvalidStateChange.emit(!!errorText);
|
|
62
|
+
}
|
|
63
|
+
onInputChange(e) {
|
|
64
|
+
e.stopPropagation();
|
|
65
|
+
const targetElem = e.target;
|
|
66
|
+
this.value = targetElem.value;
|
|
67
|
+
this.dsRadioGroupValueChange.emit(this.value);
|
|
68
|
+
this.updateFocusableRadioButton();
|
|
69
|
+
}
|
|
70
|
+
onKeyDown(e) {
|
|
71
|
+
if (!['ArrowUp', 'ArrowLeft', 'ArrowDown', 'ArrowRight'].includes(e.key)) {
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
if (e.target && !this.el.contains(e.target)) {
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
const radios = this.getRadios();
|
|
78
|
+
if (e.target && !radios.includes(e.target)) {
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
e.preventDefault();
|
|
82
|
+
const currentIndex = radios.findIndex(r => r === e.target);
|
|
83
|
+
let nextIndex;
|
|
84
|
+
if (['ArrowUp', 'ArrowLeft'].includes(e.key)) {
|
|
85
|
+
nextIndex = currentIndex === 0 ? radios.length - 1 : currentIndex - 1;
|
|
86
|
+
}
|
|
87
|
+
if (['ArrowDown', 'ArrowRight'].includes(e.key)) {
|
|
88
|
+
nextIndex = (currentIndex + 1) % radios.length;
|
|
89
|
+
}
|
|
90
|
+
const nextElem = radios[nextIndex];
|
|
91
|
+
nextElem.setFocus();
|
|
92
|
+
nextElem.setChecked();
|
|
93
|
+
}
|
|
94
|
+
render() {
|
|
95
|
+
const classes = index$1.classNames('ds-radio-button-group');
|
|
96
|
+
const legendClasses = index$1.classNames('ds-radio-button-group__legend');
|
|
97
|
+
const assistiveTextClasses = index$1.classNames('ds-radio-button-group__assistive-text');
|
|
98
|
+
const radioButtonsSlotClasses = index$1.classNames('ds-radio-button-group__radio-buttons-slot', {
|
|
99
|
+
'ds-radio-button-group__radio-buttons-slot--horizontal': this.direction === 'horizontal',
|
|
100
|
+
});
|
|
101
|
+
const errorClasses = index$1.classNames('ds-radio-button-group__error');
|
|
102
|
+
const ariaDescribedBy = [!!this.errorText && this.errorTextId, !!this.assistiveText && this.assistiveTextId].filter(Boolean).join(' ');
|
|
103
|
+
return (index.h(index.Host, { key: 'c29b30786a96a50976486eb107c707b973c06633', "data-invalid": !!this.errorText || undefined }, index.h("fieldset", { key: '90692a539c75bb81ae692b7209bd757c5d8b6b59', class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, index.h("legend", { key: '1d4f2819f0fa4ca020297cddccc87f684fc03461', class: legendClasses }, index.h("slot", { key: 'd9edb199de4975dd876bf68fa834f7d1b841bad2', name: "legend" }, this.legend)), index.h("slot", { key: 'e48f2924efd4e0f47fedb8c30df34735aa6bc2df', name: "assistiveText" }, this.assistiveText && (index.h("small", { key: 'ebbb68a63acce035872ce7ef22d2821941ea3ccc', class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText))), index.h("div", { key: 'a146cbf465a9fe97e5380db66d0baecaa46797e1', class: radioButtonsSlotClasses }, index.h("slot", { key: 'd7623edbff9870335ae62451bad2b245e394d4d0', onSlotchange: this.updateFocusableRadioButton })), index.h("div", { key: '85381c3f1b7f28d5508cf866884f0f5df2e2413a', class: errorClasses }, index.h("ds-input-validity", { key: 'ebf9f79454c11f490261959e1bdb5433744f39a3', id: this.errorTextId, text: this.errorText, type: "error" })))));
|
|
104
|
+
}
|
|
105
|
+
static get watchers() { return {
|
|
106
|
+
"errorText": ["errorTextObserver"]
|
|
107
|
+
}; }
|
|
108
|
+
};
|
|
109
|
+
DsRadioButtonGroup.style = DsRadioButtonGroupStyle0;
|
|
110
|
+
|
|
111
|
+
exports.ds_radio_button_group = DsRadioButtonGroup;
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-947af833.js');
|
|
6
|
+
const utils = require('./utils-3412cbed.js');
|
|
7
|
+
const controlUtils = require('./controlUtils-8bf55ef0.js');
|
|
8
|
+
const index$1 = require('./index-5b0b9d4c.js');
|
|
9
|
+
const store = require('./store-e8e87298.js');
|
|
10
|
+
|
|
11
|
+
const dsRadioButtonCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-radio-button{box-sizing:border-box;display:inline-flex;color:var(--ds-palette-black-95)}.ds-radio-button--disabled{color:var(--ds-palette-black-40)}.ds-radio-button__validity{margin-left:10px}.ds-radio-button__fieldset{display:inline-flex;flex-direction:column;border:none;margin:0;padding:0}.ds-radio-button__fieldset__legend{padding-inline:0;color:var(--ds-palette-black-95);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-3xSmall)}.ds-radio-button__fieldset__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large)}.ds-radio-button:focus-within .ds-radio-button__icon{box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 5);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-radio-button__icon{border-radius:50%;height:44px;width:44px}.ds-radio-button__text{margin-top:11px}.ds-radio-button__icon__outer-circle{stroke:var(--ds-palette-black-50);fill:var(--ds-palette-white)}.ds-radio-button__icon__outer-circle--checked{stroke:var(--ds-palette-mainBlue-70);fill:var(--ds-palette-white)}.ds-radio-button__icon__inner-circle{stroke:unset;fill:var(--ds-palette-mainBlue-70)}.ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle{stroke:var(--ds-palette-black-50);fill:var(--ds-palette-black-10)}.ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle--checked{stroke:var(--ds-palette-mainBlue-80);fill:var(--ds-palette-white)}.ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__inner-circle{stroke:unset;fill:var(--ds-palette-mainBlue-80)}.ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle{stroke:var(--ds-palette-black-50);fill:var(--ds-palette-black-20)}.ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle--checked{stroke:var(--ds-palette-mainBlue-90);fill:var(--ds-palette-white)}.ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__inner-circle{stroke:unset;fill:var(--ds-palette-mainBlue-90)}.ds-radio-button--disabled .ds-radio-button__icon__outer-circle{stroke:var(--ds-overlay-black-15);fill:var(--ds-overlay-black-10)}.ds-radio-button--disabled .ds-radio-button__icon__outer-circle--checked{stroke:var(--ds-overlay-black-15);fill:var(--ds-overlay-black-10)}.ds-radio-button--disabled .ds-radio-button__icon__inner-circle{stroke:unset;fill:var(--ds-overlay-black-15)}.ds-radio-button--invalid .ds-radio-button__icon__outer-circle{stroke:var(--ds-palette-red-50);fill:var(--ds-palette-white)}.ds-radio-button--invalid .ds-radio-button__icon__outer-circle--checked{stroke:var(--ds-palette-red-50);fill:var(--ds-palette-white)}.ds-radio-button--invalid .ds-radio-button__icon__inner-circle{stroke:unset;fill:var(--ds-palette-mainBlue-70)}";
|
|
12
|
+
const DsRadioButtonStyle0 = dsRadioButtonCss;
|
|
13
|
+
|
|
14
|
+
const radioButtonIdGenerator = utils.idGenerator('ds-radio-button');
|
|
15
|
+
const DsRadioButton = class {
|
|
16
|
+
constructor(hostRef) {
|
|
17
|
+
index.registerInstance(this, hostRef);
|
|
18
|
+
this.dsRadioButtonChecked = index.createEvent(this, "dsRadioButtonChecked", 7);
|
|
19
|
+
if (hostRef.$hostElement$["s-ei"]) {
|
|
20
|
+
this.internals = hostRef.$hostElement$["s-ei"];
|
|
21
|
+
}
|
|
22
|
+
else {
|
|
23
|
+
this.internals = hostRef.$hostElement$.attachInternals();
|
|
24
|
+
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
radioGroup = null;
|
|
28
|
+
inputElem;
|
|
29
|
+
dsRadioButtonChecked;
|
|
30
|
+
get el() { return index.getElement(this); }
|
|
31
|
+
internals;
|
|
32
|
+
identifier = radioButtonIdGenerator.next().value;
|
|
33
|
+
errorsDisabled = false;
|
|
34
|
+
value = this.identifier;
|
|
35
|
+
legend;
|
|
36
|
+
assistiveText;
|
|
37
|
+
text;
|
|
38
|
+
required = false;
|
|
39
|
+
disabled = false;
|
|
40
|
+
optional = false;
|
|
41
|
+
checked = false;
|
|
42
|
+
optionalText;
|
|
43
|
+
errorText = '';
|
|
44
|
+
focusable = true;
|
|
45
|
+
invalid = !!this.errorText;
|
|
46
|
+
initialChecked = this.checked;
|
|
47
|
+
validationMessage;
|
|
48
|
+
errorTextId = `${this.identifier}-error`;
|
|
49
|
+
assistiveTextId = `${this.identifier}-assistive-text`;
|
|
50
|
+
async setFocus() {
|
|
51
|
+
this.inputElem.focus();
|
|
52
|
+
}
|
|
53
|
+
async setFocusable(flag) {
|
|
54
|
+
this.focusable = flag;
|
|
55
|
+
}
|
|
56
|
+
async setChecked() {
|
|
57
|
+
this.checked = true;
|
|
58
|
+
this.internals?.setFormValue('true');
|
|
59
|
+
this.dsRadioButtonChecked.emit();
|
|
60
|
+
if (store.isValidation('client') && this.validationMessage) {
|
|
61
|
+
this.validationMessage = this.getValidationMessage();
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
inheritedAttributes = {};
|
|
65
|
+
getValidationMessage = () => (!this.errorsDisabled ? this.errorText || this.internals?.validationMessage || this.inputElem?.validationMessage : '');
|
|
66
|
+
componentWillLoad() {
|
|
67
|
+
this.inheritedAttributes = {
|
|
68
|
+
...utils.inheritAttributes(this, this.el),
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
formResetCallback() {
|
|
72
|
+
this.checked = this.initialChecked;
|
|
73
|
+
this.internals.setValidity({});
|
|
74
|
+
this.internals.setFormValue(this.checked.toString());
|
|
75
|
+
}
|
|
76
|
+
connectedCallback() {
|
|
77
|
+
this.radioGroup = this.el.closest('ds-radio-button-group');
|
|
78
|
+
if (this.radioGroup) {
|
|
79
|
+
this.updateCheckedState();
|
|
80
|
+
this.invalid = !!this.radioGroup.errorText;
|
|
81
|
+
this.radioGroup.addEventListener('dsRadioGroupValueChange', this.updateCheckedState);
|
|
82
|
+
this.radioGroup.addEventListener('dsRadioGroupInvalidStateChange', this.updateInvalidState);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
disconnectedCallback() {
|
|
86
|
+
if (this.radioGroup) {
|
|
87
|
+
this.radioGroup.removeEventListener('dsRadioGroupValueChange', this.updateCheckedState);
|
|
88
|
+
this.radioGroup.removeEventListener('dsRadioGroupInvalidStateChange', this.updateInvalidState);
|
|
89
|
+
}
|
|
90
|
+
this.radioGroup = null;
|
|
91
|
+
}
|
|
92
|
+
updateCheckedState = async () => {
|
|
93
|
+
this.checked = this.value === (await this.radioGroup.getValue());
|
|
94
|
+
};
|
|
95
|
+
updateInvalidState = (e) => {
|
|
96
|
+
this.invalid = e.detail;
|
|
97
|
+
};
|
|
98
|
+
handleInput = () => {
|
|
99
|
+
this.setChecked();
|
|
100
|
+
};
|
|
101
|
+
handleBlur = () => {
|
|
102
|
+
if (store.isValidation('client')) {
|
|
103
|
+
this.validationMessage = this.getValidationMessage();
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
getLegendText = () => {
|
|
107
|
+
if (this.required) {
|
|
108
|
+
return controlUtils.getRequiredText(this.legend);
|
|
109
|
+
}
|
|
110
|
+
if (this.optional) {
|
|
111
|
+
return controlUtils.getOptionalText(this.legend, this.optionalText);
|
|
112
|
+
}
|
|
113
|
+
return this.legend;
|
|
114
|
+
};
|
|
115
|
+
renderRadioIcon() {
|
|
116
|
+
const iconClass = 'ds-radio-button__icon';
|
|
117
|
+
const outerCircleClasses = index$1.classNames(`${iconClass}__outer-circle`, {
|
|
118
|
+
[`${iconClass}__outer-circle--checked`]: this.checked,
|
|
119
|
+
});
|
|
120
|
+
const innerCircleClasses = index$1.classNames(`${iconClass}__inner-circle`);
|
|
121
|
+
return (index.h("slot", { name: "icon" }, index.h("div", { class: iconClass, "aria-hidden": "true" }, index.h("svg", { width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("rect", { x: "10", y: "10", width: "24", height: "24", rx: "12", fill: "white" }), index.h("circle", { class: outerCircleClasses, cx: "22", cy: "22", r: "10", fill: "white", stroke: "#005A94", "stroke-width": "2" }), this.checked && index.h("circle", { class: innerCircleClasses, cx: "22", cy: "22", r: "6", fill: "#005A94" })))));
|
|
122
|
+
}
|
|
123
|
+
renderRadioButton() {
|
|
124
|
+
const classes = index$1.classNames('ds-radio-button', {
|
|
125
|
+
'ds-radio-button--disabled': this.disabled,
|
|
126
|
+
'ds-radio-button--invalid': !!this.errorText || this.invalid,
|
|
127
|
+
});
|
|
128
|
+
const inputClasses = index$1.classNames('ds-radio-button__input');
|
|
129
|
+
const textClasses = index$1.classNames('ds-radio-button__text');
|
|
130
|
+
const tabindex = this.focusable ? 0 : -1;
|
|
131
|
+
return (index.h(index.Fragment, null, index.h("div", null, index.h("label", { class: classes }, index.h("ds-visually-hidden", null, index.h("input", { ref: ref => (this.inputElem = ref), type: "radio", class: inputClasses, value: this.value, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur, checked: this.checked, tabindex: tabindex, ...this.inheritedAttributes })), this.renderRadioIcon(), index.h("slot", null, index.h("span", { class: textClasses }, this.text)))), index.h("slot", { name: "validity" }, index.h("div", { class: "ds-radio-button__validity" }, index.h("ds-input-validity", { text: this.errorText, type: "error", role: "alert", id: this.errorTextId })))));
|
|
132
|
+
}
|
|
133
|
+
renderFieldset() {
|
|
134
|
+
const fieldsetClasses = index$1.classNames('ds-radio-button__fieldset');
|
|
135
|
+
const legendClasses = index$1.classNames('ds-radio-button__fieldset__legend');
|
|
136
|
+
const assistiveTextClasses = index$1.classNames('ds-radio-button__fieldset__assistive-text');
|
|
137
|
+
const ariaDescribedBy = [!!this.errorText && this.errorTextId, !!this.assistiveText && this.assistiveTextId].filter(Boolean).join(' ');
|
|
138
|
+
return (index.h("fieldset", { class: fieldsetClasses, "aria-describedby": ariaDescribedBy }, index.h("legend", { class: legendClasses }, index.h("slot", { name: "legend" }, this.getLegendText())), index.h("slot", { name: "assistiveText" }, this.assistiveText && (index.h("small", { class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText))), this.renderRadioButton()));
|
|
139
|
+
}
|
|
140
|
+
render() {
|
|
141
|
+
if (this.legend) {
|
|
142
|
+
return this.renderFieldset();
|
|
143
|
+
}
|
|
144
|
+
return this.renderRadioButton();
|
|
145
|
+
}
|
|
146
|
+
static get formAssociated() { return true; }
|
|
147
|
+
};
|
|
148
|
+
DsRadioButton.style = DsRadioButtonStyle0;
|
|
149
|
+
|
|
150
|
+
exports.ds_radio_button = DsRadioButton;
|
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-947af833.js');
|
|
6
6
|
const index$1 = require('./index-5b0b9d4c.js');
|
|
7
|
-
const controlUtils = require('./controlUtils-
|
|
8
|
-
const store = require('./store-
|
|
7
|
+
const controlUtils = require('./controlUtils-8bf55ef0.js');
|
|
8
|
+
const store = require('./store-e8e87298.js');
|
|
9
9
|
const utils = require('./utils-3412cbed.js');
|
|
10
10
|
|
|
11
|
-
const dsTextInputCss = ".sc-ds-text-input:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.
|
|
11
|
+
const dsTextInputCss = ".sc-ds-text-input:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.dsNoStyleLeak.sc-ds-text-input *.sc-ds-text-input,.sc-ds-text-input-h *.sc-ds-text-input{all:unset;box-sizing:border-box;display:block}.sc-ds-text-input-h{display:block;width:288px}@media (min-width: 75rem){.sc-ds-text-input-h{width:320px}}.ds-input--label-container.sc-ds-text-input{margin-block-end:var(--ds-spacing-2xSmall)}.ds-input--label-container.sc-ds-text-input label.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-palette-black-95)}.ds-input--label-container.sc-ds-text-input small.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);display:block;margin-block-start:var(--ds-spacing-3xSmall);color:var(--ds-palette-black-70)}.ds-input--container.sc-ds-text-input{box-sizing:border-box;width:100%;display:inline-flex;position:relative;align-items:center;border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-palette-black-50);padding-inline:var(--ds-spacing-xSmall)}.ds-input--container.sc-ds-text-input:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-input--container.sc-ds-text-input:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-input--container.invalid.sc-ds-text-input{background-color:var(--ds-palette-red-05);border-color:var(--ds-palette-red-50)}.ds-input--container.invalid.sc-ds-text-input:hover:not(.ds-input--container.invalid:focus-within){background-color:var(--ds-palette-red-10);border-color:var(--ds-palette-red-50)}.ds-input--container.invalid.active.sc-ds-text-input{background-color:var(--ds-palette-red-20);border-color:var(--ds-palette-red-50)}.ds-input--container.valid.sc-ds-text-input{background-color:var(--ds-palette-green-05);border-color:var(--ds-palette-green-50)}.ds-input--container.valid.sc-ds-text-input:hover:not(.ds-input--container.valid:focus-within){background-color:var(--ds-palette-green-10);border-color:var(--ds-palette-green-50)}.ds-input--container.valid.active.sc-ds-text-input{background-color:var(--ds-palette-green-20);border-color:var(--ds-palette-green-50)}.ds-input--container.readonly.sc-ds-text-input,.ds-input--container.disabled.sc-ds-text-input{background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15)}.ds-input--container.sc-ds-text-input:has(input:active){outline:none}.ds-input--container.sc-ds-text-input:has(input:active):not:has(input:disabled,input.sc-ds-text-input:readonly){border-color:var(--ds-palette-black-50)}.ds-input--container.active.sc-ds-text-input:not(.ds-input--container.disabled,.ds-input--container.readonly.sc-ds-text-input,.ds-input--container.invalid.sc-ds-text-input,.ds-input--container.valid).sc-ds-text-input{border-color:var(--ds-palette-black-50);background-color:var(--ds-palette-black-20)}.ds-input--container.sc-ds-text-input:hover:not(.ds-input--container.disabled,.ds-input--container.readonly.sc-ds-text-input,.ds-input--container.active.sc-ds-text-input,.ds-input--container.invalid.sc-ds-text-input,.ds-input--container.valid.sc-ds-text-input,.ds-input--container.sc-ds-text-input:focus-within){border-color:var(--ds-palette-black-50);background-color:var(--ds-palette-black-10)}.ds-input--container.sc-ds-text-input:focus-within:not(.ds-input--container:focus-within.invalid,.ds-input--container.sc-ds-text-input:focus-within.valid,.ds-input--container.sc-ds-text-input:focus-within.readonly){border-color:var(--ds-palette-mainBlue-70)}.ds-input--container.sc-ds-text-input:focus-within *.sc-ds-text-input>ds-button.suffix.sc-ds-text-input>button.sc-ds-text-input:focus-visible{background-clip:padding-box;outline-offset:-5px;box-shadow:none;height:var(--ds-spacing-xLarge);background-color:var(--ds-overlay-black-10)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);width:100%;box-sizing:border-box;background-color:unset;flex-grow:1;height:var(--ds-spacing-xLarge);line-height:var(--ds-fontSize-24);color:var(--ds-palette-black-95);border:none;padding-block:var(--ds-spacing-4xSmall)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input:disabled{color:var(--ds-palette-black-40)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input:disabled::placeholder{color:var(--ds-palette-black-40)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::placeholder{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-palette-black-70)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input:focus{outline:none;border:none}.ds-input--container.sc-ds-text-input>input[type=number].sc-ds-text-input{-moz-appearance:textfield}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-decoration,.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-cancel-button,.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-button,.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-decoration,.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::-webkit-inner-spin-button,.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ds-input--container.sc-ds-text-input:has(span.prefix,ds-icon.prefix).sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-input--container.sc-ds-text-input:has(span.prefix,ds-icon.prefix).sc-ds-text-input>input.sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-input--container.sc-ds-text-input:has(ds-button.suffix){padding-inline-end:unset}.ds-input--container.sc-ds-text-input span.prefix.sc-ds-text-input,.ds-input--container.sc-ds-text-input span.suffix.sc-ds-text-input{color:var(--ds-palette-black-70)}.ds-input--container.sc-ds-text-input ds-icon.prefix.sc-ds-text-input,.ds-input--container.sc-ds-text-input-s>[slot=prefix],.ds-input--container .sc-ds-text-input-s>[slot=prefix]{height:1.5rem;color:var(--ds-palette-black-95)}.ds-input--container.sc-ds-text-input ds-button.suffix.sc-ds-text-input{margin-top:calc(var(--ds-spacing-3xSmall) * -1);margin-right:calc(var(--ds-spacing-4xSmall) * -1);max-height:40px}.error-text--container.sc-ds-text-input,.success-text--container.sc-ds-text-input{display:flex;align-items:center;margin-top:var(--ds-spacing-2xSmall);gap:var(--ds-spacing-2xSmall)}.error-text--container.sc-ds-text-input ds-icon.sc-ds-text-input,.success-text--container.sc-ds-text-input ds-icon.sc-ds-text-input{display:block;height:1.5rem}.error-text--container.sc-ds-text-input small.sc-ds-text-input,.success-text--container.sc-ds-text-input small.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.error-text--container.sc-ds-text-input{color:var(--ds-palette-red-70)}.success-text--container.sc-ds-text-input{color:var(--ds-palette-green-70)}";
|
|
12
12
|
const DsTextInputStyle0 = dsTextInputCss;
|
|
13
13
|
|
|
14
14
|
const INPUT_TYPE_ICONS_MAP = {
|
|
@@ -132,6 +132,7 @@ const DsTextInput = class {
|
|
|
132
132
|
return this.togglePasswordVisibility();
|
|
133
133
|
case 'search':
|
|
134
134
|
this.clearInput();
|
|
135
|
+
return;
|
|
135
136
|
default:
|
|
136
137
|
return;
|
|
137
138
|
}
|
|
@@ -170,18 +171,18 @@ const DsTextInput = class {
|
|
|
170
171
|
}
|
|
171
172
|
render() {
|
|
172
173
|
const inputType = this.type === 'password' && this.passwordInputVisible ? 'text' : this.type;
|
|
173
|
-
return (index.h(index.Fragment, { key: '
|
|
174
|
+
return (index.h(index.Fragment, { key: '9706a2c55f36b1888b7287344d91ddd10f96201d' }, index.h("div", { key: '35eafa8a92261bfdb4e0ed8325d98be85665eca6', class: "ds-input--label-container" }, index.h("slot", { key: '50e67a545686807337bda0c607888f6bf9bf9d58', name: "label" }, index.h("label", { key: '87ce740880e1fb5e966607a05af463a40655410d', htmlFor: this.identifier }, this.getLabelText())), index.h("slot", { key: 'f9c002b843341a3934df96611176fe8178c49c0d', name: "help-text" }, index.h("small", { key: '2e780ce79e6e0720dee0360fe7e11a4742a26fca', id: this.assistiveTextId }, this.assistiveText), index.h("ds-visually-hidden", { key: '63d47cc268aaf3128799f907144048411a0e9be5', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), index.h("div", { key: 'a060e806ef56c1b232ad2eacb5a1b675b01891f7', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: index$1.classNames('ds-input--container', {
|
|
174
175
|
disabled: this.disabled,
|
|
175
176
|
readonly: this.readonly,
|
|
176
177
|
valid: !!this.successText,
|
|
177
178
|
invalid: !!this.validationMessage,
|
|
178
179
|
focus: this.hasFocus,
|
|
179
180
|
active: !!this.inputActive,
|
|
180
|
-
}) }, this.renderPrefixContent(), index.h("input", { key: '
|
|
181
|
+
}) }, this.renderPrefixContent(), index.h("input", { key: 'cb27157fde11dcb0fc305423fbc94fcafdc34b1c', ref: e => (this.inputElement = e), id: this.identifier, name: this.name, "aria-label": utils.getAriaLabel(this.label, this.ariaLabel), "aria-labelledby": this.ariaLabelledby, "aria-describedby": this.ariaDescribedby ||
|
|
181
182
|
index$1.classNames(this.assistiveTextId, this.visuallyHiddenAssistiveTextId, {
|
|
182
183
|
[this.errorTextId]: Boolean(this.validationMessage),
|
|
183
184
|
[this.successTextId]: Boolean(this.successText),
|
|
184
|
-
}), "aria-invalid":
|
|
185
|
+
}), "aria-invalid": 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.inheritedAttributes }), this.renderSuffixContent()), index.h("slot", { key: '8e961d353346bd088e6f5f6d4efa9508598a2596', name: "input-validity" }, index.h("ds-input-validity", { key: 'd784f945dec403f64721a71fba72ecc1f836e844', id: this.errorTextId, text: this.validationMessage, type: "error", role: "alert" }), index.h("ds-input-validity", { key: 'f343fc9fdbc4c4f33d345921a23f89fcb27b8a18', id: this.successTextId, text: this.successText, type: "success", role: "status" }))));
|
|
185
186
|
}
|
|
186
187
|
static get formAssociated() { return true; }
|
|
187
188
|
};
|