@designsystem-se/af 38.2.1-beta.dark-mode-css-labb → 39.0.1-beta.1-darkmode
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/components/digi-badge-status.js +1 -1
- package/components/digi-calendar-datepicker.js +1 -1
- package/components/digi-code-example.js +6 -6
- package/components/digi-context-menu.js +4 -4
- package/components/digi-form-checkbox.js +1 -1
- package/components/digi-form-error-list.js +1 -1
- package/components/digi-form-filter.js +1 -1
- package/components/digi-form-select-filter.js +84 -47
- package/components/digi-header-avatar.js +1 -1
- package/components/digi-info-card.js +1 -1
- package/components/digi-link-internal.js +1 -1
- package/components/digi-notification-alert.js +1 -1
- package/components/digi-progress-indicator.js +1 -1
- package/components/digi-progress-list-item.js +1 -1
- package/components/{p-78154d00.js → p-90f7d507.js} +1 -1
- package/components/p-96fcbd39.js +66 -0
- package/components/p-d98e54d8.js +177 -0
- package/custom-elements.json +1 -1
- package/dist/cjs/digi-arbetsformedlingen.cjs.js +1 -1
- package/dist/cjs/digi-badge-status.cjs.entry.js +1 -1
- package/dist/cjs/digi-button_84.cjs.entry.js +94 -57
- package/dist/cjs/digi-code-example.cjs.entry.js +5 -5
- package/dist/cjs/digi-progress-list-item.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/_badge/badge-status/badge-status.css +2 -2
- package/dist/collection/components/_calendar/calendar-datepicker/calendar-datepicker.css +3 -3
- package/dist/collection/components/_code/code-example/code-example.js +4 -5
- package/dist/collection/components/_form/form-checkbox/form-checkbox.css +2 -2
- package/dist/collection/components/_form/form-select-filter/form-select-filter.js +85 -48
- package/dist/collection/components/_header/header-avatar/header-avatar.css +2 -2
- package/dist/collection/components/_link/link-internal/link-internal.css +2 -2
- package/dist/collection/components/_navigation/navigation-context-menu/navigation-context-menu.js +6 -6
- package/dist/collection/components/_notification/notification-alert/notification-alert.css +1 -1
- package/dist/collection/components/_progress/progress-indicator/progress-indicator.css +1 -1
- package/dist/collection/components/_progress/progress-list-item/progress-list-item.css +2 -2
- package/dist/collection/design-tokens/components/_badge-status.variables.scss +1 -1
- package/dist/collection/design-tokens/components/_logo.variables.scss +0 -2
- package/dist/collection/design-tokens/components/_notification-alert.variables.scss +1 -1
- package/dist/collection/design-tokens/components/_progress-indicator.variables.scss +1 -1
- package/dist/collection/styles/src/index.scss +6 -6
- package/dist/collection/styles/src/themes/{_alias-dark.scss → _alias-dark.mixin.scss} +2 -1
- package/dist/{digi-arbetsformedlingen/styles/src/themes/_alias-light.scss → collection/styles/src/themes/_alias-light.mixin.scss} +2 -1
- package/dist/collection/styles/src/themes/_brand-af25.mixin.scss +2 -2
- package/dist/collection/styles/src/tokens-documentation/web-AF25.json +308 -154
- package/dist/digi-arbetsformedlingen/design-tokens/components/_badge-status.variables.scss +1 -1
- package/dist/digi-arbetsformedlingen/design-tokens/components/_logo.variables.scss +17 -15
- package/dist/digi-arbetsformedlingen/design-tokens/components/_notification-alert.variables.scss +1 -1
- package/dist/digi-arbetsformedlingen/design-tokens/components/_progress-indicator.variables.scss +1 -1
- package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.css +1 -1
- package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js +1 -1
- package/dist/digi-arbetsformedlingen/{p-c1fd535b.entry.js → p-03b818fc.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/p-53880b04.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-7911bc7a.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-f4b540e3.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/styles/src/index.scss +6 -6
- package/dist/digi-arbetsformedlingen/styles/src/themes/{_alias-dark.scss → _alias-dark.mixin.scss} +2 -1
- package/dist/{collection/styles/src/themes/_alias-light.scss → digi-arbetsformedlingen/styles/src/themes/_alias-light.mixin.scss} +2 -1
- package/dist/digi-arbetsformedlingen/styles/src/themes/_brand-af25.mixin.scss +2 -2
- package/dist/digi-arbetsformedlingen/styles/src/tokens-documentation/web-AF25.json +308 -154
- package/dist/esm/digi-arbetsformedlingen.js +1 -1
- package/dist/esm/digi-badge-status.entry.js +1 -1
- package/dist/esm/digi-button_84.entry.js +94 -57
- package/dist/esm/digi-code-example.entry.js +5 -5
- package/dist/esm/digi-progress-list-item.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/_form/form-select-filter/form-select-filter.d.ts +22 -3
- package/dist/types/components/_navigation/navigation-context-menu/navigation-context-menu.d.ts +2 -2
- package/dist/types/components.d.ts +6 -6
- package/hydrate/index.js +102 -65
- package/hydrate/index.mjs +102 -65
- package/package.json +1 -1
- package/components/p-a90b746e.js +0 -177
- package/components/p-fdb31c30.js +0 -66
- package/dist/collection/styles/src/_alias.mixin.scss +0 -5
- package/dist/digi-arbetsformedlingen/p-7ed49934.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-ad638968.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-ede12626.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/styles/src/_alias.mixin.scss +0 -5
|
@@ -14,7 +14,7 @@ import { d as defineCustomElement$4 } from './p-db6386c7.js';
|
|
|
14
14
|
import { d as defineCustomElement$3 } from './p-db81738c.js';
|
|
15
15
|
import { d as defineCustomElement$2 } from './p-02ebe13f.js';
|
|
16
16
|
|
|
17
|
-
const codeExampleCss = "
|
|
17
|
+
const codeExampleCss = ":host{--digi--code-example--background:var(--digi--color--background--primary);--digi--code-example--controls--width:16.25rem;display:block}.digi-code-example{background-size:20px 20px;background-position:0 0, 0 10px, 10px -10px, -10px 0px;border:var(--digi--border-width--primary) solid var(--digi--color--divider--primary--light);height:100%;display:flex;flex-direction:row;border-radius:0.3rem;position:relative}@media (max-width: 35.9375rem){.digi-code-example{min-width:360px}}.digi-code-example--light{background-color:#ffffff;background-image:linear-gradient(45deg, #efefef 25%, transparent 25%), linear-gradient(-45deg, #efefef 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #efefef 75%), linear-gradient(-45deg, transparent 75%, #efefef 75%)}@media (prefers-color-scheme: dark){.digi-code-example--light{background-color:#787777;background-image:linear-gradient(45deg, #666666 25%, transparent 25%), linear-gradient(-45deg, #666666 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #666666 75%), linear-gradient(-45deg, transparent 75%, #666666 75%)}}.digi-code-example--dark{background-color:#787777;background-image:linear-gradient(45deg, #666666 25%, transparent 25%), linear-gradient(-45deg, #666666 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #666666 75%), linear-gradient(-45deg, transparent 75%, #666666 75%)}.digi-code-example__container{display:flex;flex-direction:column;justify-content:space-between;flex-grow:1;position:relative}.digi-code-example--no-controls{flex-direction:column}.digi-code-example--no-controls .digi-code-example__copy-button{margin-top:0;align-self:flex-end;margin-bottom:0.2rem;z-index:1;position:absolute;bottom:0;right:0}.digi-code-example--no-controls .digi-code-example__copy-button--dark{--digi--button--color--text--function--default:var(--digi--color--text--secondary);--digi--button--color--text--function--hover:var(--digi--color--text--secondary);--digi--button--color--icon--function--default:var(--digi--color--text--secondary);--digi--button--color--icon--function--hover:var(--digi--color--text--secondary)}.digi-code-example__example{padding:var(--digi--padding--largest-2);overflow-x:auto}@media (max-width: 48rem){.digi-code-example__example{padding:var(--digi--padding--medium)}}@media (max-width: 35.9375rem){.digi-code-example__example{padding:var(--digi--padding--small)}}.digi-code-example__copy-button{align-self:start;margin-top:var(--digi--padding--large);margin-right:var(--digi--padding--small)}.digi-code-example__codeblock digi-code-block{--digi--code-block--border-radius:0;--digi--code-block--border:none}.digi-code-example__controls{padding:var(--digi--padding--medium);background:var(--digi--color--background--secondary);display:flex;flex:0 var(--digi--code-example--controls--width);flex-direction:column;align-self:stretch;flex-shrink:0;justify-content:space-between;gap:var(--digi--gutter--medium)}@media (max-width: 48rem){.digi-code-example__controls{padding:var(--digi--padding--smaller)}}.digi-code-example__controls[hidden]{display:none}.digi-code-example--inactive .digi-code-example__code{display:flex;flex-direction:column;flex-grow:1}.digi-code-example--inactive .digi-code-example__codeblock{flex-grow:1;height:64px;overflow-y:hidden;position:relative}.digi-code-example__code-expand{display:flex;align-items:center;justify-content:center;gap:var(--digi--gutter--icon);width:100%;padding:0.875rem 0;background:#272727;color:var(--digi--color--text--secondary);font-size:var(--digi--typography--body--font-size--desktop);font-family:var(--digi--global--typography--font-family--default);cursor:pointer;border:none}.digi-code-example__code-expand:hover{background:var(--digi--grayscale--900);text-decoration:underline}.digi-code-example__code-expand:focus-visible{outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.digi-code-example--no-controls.digi-code-example--inactive .digi-code-example__codeblock{height:64px}.digi-code-example__copy-button{--digi--button--padding--small:0;--digi--button--padding--medium:0;--digi--button--padding--large:0}.digi-code-example__code-expand-icon{--digi--icon--color:var(--digi--color--text--secondary);transition:ease-in-out var(--digi--animation--duration--base) all}.digi-code-example__code-expand-icon--open{transform:rotate(180deg)}.digi-code-example__fade{position:absolute;width:100%;bottom:0;height:var(--digi--padding--largest-2)}.digi-code-example__fade--light{background-image:linear-gradient(0deg, white, transparent)}.digi-code-example__fade--dark{--digi--color--background--inverted-3:#272727;background-image:linear-gradient(0deg, var(--digi--grayscale--900), transparent)}.slot__controls{margin-bottom:var(--digi--padding--smaller)}::slotted(* .slot__controls){display:flex;flex-direction:column;gap:var(--digi--padding--smaller)}::slotted(* .slot__controls[hidden]){display:none}::slotted(* .slot__controls digi-form-fieldset),::slotted(* .slot__controls digi-form-select),::slotted(* .slot__controls digi-form-fieldset+digi-form-checkbox),::slotted(* .slot__controls .divider){display:block;border-bottom:1px solid var(--digi--color--divider--primary--light);padding-bottom:var(--digi--padding--smaller);margin-bottom:var(--digi--padding--medium)}";
|
|
18
18
|
const DigiCodeExampleStyle0 = codeExampleCss;
|
|
19
19
|
|
|
20
20
|
const CodeExample = /*@__PURE__*/ proxyCustomElement(class CodeExample extends H {
|
|
@@ -143,17 +143,17 @@ const CodeExample = /*@__PURE__*/ proxyCustomElement(class CodeExample extends H
|
|
|
143
143
|
.replace(/\w/, (firstLetter) => firstLetter.toUpperCase());
|
|
144
144
|
}
|
|
145
145
|
render() {
|
|
146
|
-
return (h("div", { key: '
|
|
146
|
+
return (h("div", { key: 'c8beee9d39ad65463eb78fdaf9d61f48dc47ccf3', class: Object.assign({ 'digi-code-example': true }, this.cssModifiers), ref: (el) => (this.containerElement = el) }, h("div", { key: 'f4e8fe5c000bf8c443b025a7b987016b6befce05', class: {
|
|
147
147
|
'digi-code-example__container': true
|
|
148
|
-
} }, h("div", { key: '
|
|
148
|
+
} }, h("div", { key: 'c15bd16acb94723f5484b21852dc1bdd3985cdba', class: "digi-code-example__example" }, h("slot", { key: 'af94801b00454401a1ffaf9f9ff783a9b803583c' })), !this.afHideCode && (h("div", { key: '671d5ec1d0e3109cc5adf52399aff5cde7ed7b5b', class: "digi-code-example__code" }, this.showMoreButton && (h("button", { key: '73449b24bbffae8b664543c1e78a482608affb2f', class: "digi-code-example__code-expand", "aria-label": this.isActive ? _t.code.show_less : _t.code.show_more, "aria-expanded": this.isActive ? `true` : `false`, onClick: () => this.toggleButtonClickHandler() }, this.isActive ? _t.code.show_less : _t.code.show_more, ' ', h("digi-icon-chevron-down", { key: 'd5600ceea54943621159794535612257c9180785', class: {
|
|
149
149
|
'digi-code-example__code-expand-icon': true,
|
|
150
150
|
'digi-code-example__code-expand-icon--open': this.isActive
|
|
151
|
-
}, "aria-hidden": "true" }))), h("div", { key: '
|
|
151
|
+
}, "aria-hidden": "true" }))), h("div", { key: '04ba3cfe8367257b65013a5e00f53dd5dd7eeea3', class: {
|
|
152
152
|
'digi-code-example__codeblock': true,
|
|
153
153
|
'digi-code-example__codeblock--light': this.afCodeBlockVariation === 'light',
|
|
154
154
|
'digi-code-example__codeblock--dark': this.afCodeBlockVariation === 'dark',
|
|
155
155
|
'digi-code-example__codeblock--fade': !this.isActive && this.showMoreButton
|
|
156
|
-
} }, h("digi-code-block", { key: '
|
|
156
|
+
} }, h("digi-code-block", { key: '03fbdc9df45937812d2172b8c310dfb4097cad97', afCode: this.codeExample || '', afLanguage: this.afLanguage.toLowerCase(), afVariation: this.afCodeBlockVariation, "af-hide-toolbar": true }), !this.isActive ? (h("div", { class: {
|
|
157
157
|
'digi-code-example__fade': true,
|
|
158
158
|
'digi-code-example__fade--dark': this.afCodeBlockVariation === 'dark',
|
|
159
159
|
'digi-code-example__fade--light': this.afCodeBlockVariation === 'light'
|
|
@@ -169,7 +169,7 @@ const CodeExample = /*@__PURE__*/ proxyCustomElement(class CodeExample extends H
|
|
|
169
169
|
"afCode": ["codeExampleUpdate"]
|
|
170
170
|
}; }
|
|
171
171
|
static get style() { return DigiCodeExampleStyle0; }
|
|
172
|
-
}, [
|
|
172
|
+
}, [4, "digi-code-example", {
|
|
173
173
|
"afCode": [1, "af-code"],
|
|
174
174
|
"afCodeBlockVariation": [1, "af-code-block-variation"],
|
|
175
175
|
"afExampleVariation": [1, "af-example-variation"],
|
|
@@ -55,7 +55,7 @@ const ContextMenu = /*@__PURE__*/ proxyCustomElement(class ContextMenu extends H
|
|
|
55
55
|
syncActiveItem() {
|
|
56
56
|
if (this.afActiveItem != null) {
|
|
57
57
|
const menuItems = this.afMenuItems;
|
|
58
|
-
this.activeItemIdx = menuItems.findIndex((item) => item.id.toString() === this.afActiveItem);
|
|
58
|
+
this.activeItemIdx = menuItems.findIndex((item) => item.id.toString() === this.afActiveItem.toString());
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
syncItems() {
|
|
@@ -205,13 +205,13 @@ const ContextMenu = /*@__PURE__*/ proxyCustomElement(class ContextMenu extends H
|
|
|
205
205
|
}
|
|
206
206
|
render() {
|
|
207
207
|
const menuItems = this.afMenuItems;
|
|
208
|
-
return (h(Host, { key: '
|
|
208
|
+
return (h(Host, { key: '1e6a37f94799e1cf0d2d6526e1b690e73f59e0a3' }, h("div", { key: '4018c8310a9012a9b4644dbb3175f3e362fd604b', id: `${this.afId}-identifier`, class: {
|
|
209
209
|
'digi-navigation-context-menu': true,
|
|
210
210
|
'digi-navigation-context-menu--active': this.visible
|
|
211
|
-
} }, h("digi-button", { key: '
|
|
211
|
+
} }, h("digi-button", { key: '03a920ff0116de47903ab261dca6201463c1b9fc', id: `${this.afId}-trigger`, ref: (ref) => (this.buttonRef = ref), onClick: () => this.handleToggle(), afVariation: "function", afAriaControls: `${this.afId}-dropdown`, afAriaExpanded: this.visible, afAriaLabel: this.afAriaLabel || null, class: "digi-navigation-context-menu__trigger-button" }, !!this.afIcon && h(this.digiIcon, { key: '7287a3e266e905dbc90312fe6101602d312f3dd7', slot: "icon" }), this.afTitle, h("digi-icon-chevron-down", { key: 'e7d297783ab722447d202df9971ebe6d00fb9fff', class: "digi-navigation-context-menu__toggle-icon", slot: "icon-secondary" })), h("div", { key: 'e7226f3e481a7c8c57acce8948f624546dfded26', class: {
|
|
212
212
|
'digi-navigation-context-menu__list': true,
|
|
213
213
|
'digi-navigation-context-menu__list--active': this.visible
|
|
214
|
-
} }, h("div", { key: '
|
|
214
|
+
} }, h("div", { key: 'bb9f36a53eaff6fc0e76c5024ba817fb898adac8', onKeyDown: (e) => {
|
|
215
215
|
this.handleKey(e);
|
|
216
216
|
}, id: `${this.afId}-dropdown`, style: {
|
|
217
217
|
visibility: this.visible ? 'visible' : 'hidden'
|
|
@@ -56,7 +56,7 @@ import { d as defineCustomElement$7 } from './p-517dba78.js';
|
|
|
56
56
|
import { d as defineCustomElement$6 } from './p-9f757d46.js';
|
|
57
57
|
import { d as defineCustomElement$5 } from './p-210a5fb1.js';
|
|
58
58
|
import { d as defineCustomElement$4 } from './p-4b44f757.js';
|
|
59
|
-
import { d as defineCustomElement$3 } from './p-
|
|
59
|
+
import { d as defineCustomElement$3 } from './p-90f7d507.js';
|
|
60
60
|
import { d as defineCustomElement$2 } from './p-2881b363.js';
|
|
61
61
|
|
|
62
62
|
/**
|
|
@@ -5,7 +5,7 @@ import { d as detectClickOutside } from './p-430607cb.js';
|
|
|
5
5
|
import { d as detectFocusOutside } from './p-ee33960b.js';
|
|
6
6
|
import { _ as _t } from './p-903a27d9.js';
|
|
7
7
|
import { d as defineCustomElement$4 } from './p-24e68936.js';
|
|
8
|
-
import { d as defineCustomElement$3 } from './p-
|
|
8
|
+
import { d as defineCustomElement$3 } from './p-d98e54d8.js';
|
|
9
9
|
import { d as defineCustomElement$2 } from './p-14119afa.js';
|
|
10
10
|
|
|
11
11
|
const formFilterCss = ".sc-digi-form-filter-h{--digi--form-filter--footer--background:var(--digi--color--background--secondary-accent);--digi--form-filter--scroll--max-height:18.75rem;--digi--form-filter--scroll--max-height--large:23.4275rem;--digi--form-filter--scroll--padding:var(--digi--padding--small);--digi--form-filter--reset-button--margin-left:var(--digi--padding--small);--digi--form-filter--legend__border-bottom:var(--digi--border-width--primary) solid var(--digi--color--divider--tertiary-hypotes);--digi--form-filter--list--margin:0;--digi--form-filter--list--padding:var(--digi--gutter--small) 0 0 0;--digi--form-filter--item--margin:var(--digi--gutter--small) 0;--digi--form-filter--toggle-icon--transition:ease-in-out 0.2s all;--digi--form-filter--dropdown--box-shadow:0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.7);--digi--form-filter--dropdown--border-radius:var(--digi--border--radius--primary);--digi--form-filter--dropdown--background:var(--digi--color--background--dropdown);--digi--form-filter--dropdown--min-width:18.75rem;--digi--form-filter--dropdown--margin-top:var(--digi--gutter--small);--digi--form-filter--dropdown--z-index:999;--digi--form-filter--toggle-button-indicator--color--default:transparent;--digi--form-filter--toggle-button-indicator--color--active:var(--digi--color--marking--indication--primary);--digi--form-filter--toggle-button-indicator--width:0.625rem;--digi--form-filter--toggle-button-indicator--height:0.625rem;--digi--form-filter--toggle-button-indicator--margin-right:var(--digi--margin--small);--digi--form-filter--toggle-button-indicator--margin-left:calc(var(--digi--margin--smaller) * -1);--digi--form-filter--toggle-button--text--margin-right:var(--digi--margin--smaller);--digi--form-filter--toggle-icon--width:0.875rem;--digi--form-filter--toggle-icon--height:0.875rem;--digi--form-filter--legend--font-weight:var(--digi--typography--preamble--font-weight--desktop);--digi--form-filter--legend--font-family:var(--digi--global--typography--font-family--default);--digi--form-filter--legend--font-size:var(--digi--typography--preamble--font-size--desktop)}.sc-digi-form-filter-h .digi-form-filter.sc-digi-form-filter{--INDICATOR--BACKGROUND:var(--digi--form-filter--toggle-button-indicator--color--default);--SCROLL--MAX-HEIGHT:var(--digi--form-filter--scroll--max-height);position:relative}.sc-digi-form-filter-h .digi-form-filter--open.sc-digi-form-filter .digi-form-filter__toggle-icon.sc-digi-form-filter{transform:rotate(-180deg)}.sc-digi-form-filter-h .digi-form-filter__toggle-icon.sc-digi-form-filter{transition:var(--digi--form-filter--toggle-icon--transition)}.sc-digi-form-filter-h .digi-form-filter__toggle-icon.sc-digi-form-filter-s>[slot^=icon],.sc-digi-form-filter-h .digi-form-filter__toggle-icon .sc-digi-form-filter-s>[slot^=icon]{--digi--icon--width:var(--digi--form-filter--toggle-icon--width);--digi--icon--height:var(--digi--form-filter--toggle-icon--height)}.sc-digi-form-filter-h .digi-form-filter__legend.sc-digi-form-filter{font-weight:var(--digi--form-filter--legend--font-weight);font-family:var(--digi--form-filter--legend--font-family);font-size:var(--digi--form-filter--legend--font-size)}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter{max-height:var(--SCROLL--MAX-HEIGHT);overflow-y:auto;padding:var(--digi--form-filter--scroll--padding);overflow-x:hidden}@media (min-width: 48rem){.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter{--SCROLL--MAX-HEIGHT:var(--digi--form-filter--scroll--max-height--large)}}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter fieldset.sc-digi-form-filter{border:none}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter legend.sc-digi-form-filter{width:100%;border-bottom:var(--digi--form-filter--legend__border-bottom);padding-bottom:0.25rem}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter .legend-hidden.sc-digi-form-filter{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-form-filter-h .digi-form-filter__footer.sc-digi-form-filter{display:flex;align-items:center;justify-content:center;background:var(--digi--form-filter--footer--background);padding:var(--digi--form-filter--scroll--padding)}.sc-digi-form-filter-h .digi-form-filter__reset-button.sc-digi-form-filter{display:inline-block;margin-left:var(--digi--form-filter--reset-button--margin-left)}.sc-digi-form-filter-h .digi-form-filter__dropdown.sc-digi-form-filter{min-width:var(--digi--form-filter--dropdown--min-width);position:absolute;z-index:var(--digi--form-filter--dropdown--z-index);background:var(--digi--form-filter--dropdown--background);border-radius:var(--digi--form-filter--dropdown--border-radius);box-shadow:var(--digi--form-filter--dropdown--box-shadow);overflow:hidden;margin-top:var(--digi--form-filter--dropdown--margin-top)}@media (min-width: 48rem){.sc-digi-form-filter-h .digi-form-filter__dropdown--right.sc-digi-form-filter{right:0}}.sc-digi-form-filter-h .digi-form-filter__dropdown--hidden.sc-digi-form-filter{display:none}.sc-digi-form-filter-h .digi-form-filter__toggle-button-indicator.sc-digi-form-filter:before{content:\"\";width:var(--digi--form-filter--toggle-button-indicator--width);height:var(--digi--form-filter--toggle-button-indicator--height);background:var(--INDICATOR--BACKGROUND);display:inline-block;margin-right:var(--digi--form-filter--toggle-button-indicator--margin-right);border-radius:50% 50%;overflow:hidden;margin-left:var(--digi--form-filter--toggle-button-indicator--margin-left)}.sc-digi-form-filter-h .digi-form-filter__toggle-button-indicator--active.sc-digi-form-filter{--INDICATOR--BACKGROUND:var(--digi--form-filter--toggle-button-indicator--color--active)}.sc-digi-form-filter-h .digi-form-filter__list.sc-digi-form-filter{margin:var(--digi--form-filter--list--margin);padding:var(--digi--form-filter--list--padding)}.sc-digi-form-filter-h .digi-form-filter__item.sc-digi-form-filter{display:block}.sc-digi-form-filter-h .digi-form-filter__toggle-button-text.sc-digi-form-filter{margin-right:var(--digi--form-filter--toggle-button--text--margin-right)}";
|
|
@@ -79,6 +79,10 @@ const FormSelectFilter = /*@__PURE__*/ proxyCustomElement(class FormSelectFilter
|
|
|
79
79
|
this.afOnSelect = createEvent(this, "afOnSelect", 7);
|
|
80
80
|
this.afOnQueryChanged = createEvent(this, "afOnQueryChanged", 7);
|
|
81
81
|
this._searchQuery = '';
|
|
82
|
+
/** True when `value` was set from outside (e.g. Angular CVA) — then value is selection master. */
|
|
83
|
+
this._valueIsMaster = false;
|
|
84
|
+
/** Guards internal `value` writes so they don't flip `_valueIsMaster`. */
|
|
85
|
+
this._updatingValueInternally = false;
|
|
82
86
|
this.isOpen = false;
|
|
83
87
|
this.focusListItemIndex = 0;
|
|
84
88
|
this.focusInList = false;
|
|
@@ -112,17 +116,19 @@ const FormSelectFilter = /*@__PURE__*/ proxyCustomElement(class FormSelectFilter
|
|
|
112
116
|
this.afFilterButtonAriaDescribedby = undefined;
|
|
113
117
|
this.afErrorMessageIsAlert = true;
|
|
114
118
|
}
|
|
115
|
-
onValueChanged(
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
119
|
+
onValueChanged(newValue) {
|
|
120
|
+
let parsedValue;
|
|
121
|
+
if (typeof newValue === 'string') {
|
|
122
|
+
parsedValue = newValue ? JSON.parse(newValue) : [];
|
|
123
|
+
}
|
|
124
|
+
else {
|
|
125
|
+
parsedValue = newValue || [];
|
|
126
|
+
}
|
|
127
|
+
if (!this._updatingValueInternally) {
|
|
128
|
+
this._valueIsMaster = true;
|
|
125
129
|
}
|
|
130
|
+
this.value = parsedValue;
|
|
131
|
+
this.syncValueAndSelectedListItems('valueChange');
|
|
126
132
|
}
|
|
127
133
|
handleListItems() {
|
|
128
134
|
if (this.afListItems) {
|
|
@@ -138,15 +144,7 @@ const FormSelectFilter = /*@__PURE__*/ proxyCustomElement(class FormSelectFilter
|
|
|
138
144
|
}
|
|
139
145
|
this.giveItemsValueIfNoneExist();
|
|
140
146
|
this.sortListAlphabetically();
|
|
141
|
-
|
|
142
|
-
if (selectedListItems && selectedListItems.length > 0) {
|
|
143
|
-
this._selectedItems = [...selectedListItems];
|
|
144
|
-
this.afOnSelect.emit(this._selectedItems);
|
|
145
|
-
this.value = this._selectedItems;
|
|
146
|
-
}
|
|
147
|
-
else if (this.value && this.value.length > 0) {
|
|
148
|
-
this._selectedItems = [...this.value];
|
|
149
|
-
}
|
|
147
|
+
this.syncValueAndSelectedListItems('afListItemsChange');
|
|
150
148
|
this.filterResults();
|
|
151
149
|
}
|
|
152
150
|
catch (e) {
|
|
@@ -198,14 +196,58 @@ const FormSelectFilter = /*@__PURE__*/ proxyCustomElement(class FormSelectFilter
|
|
|
198
196
|
focusOnElement() {
|
|
199
197
|
this._toggleButton.focus();
|
|
200
198
|
}
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
199
|
+
componentWillLoad() {
|
|
200
|
+
/* Stencil @Watch does not run for the initial prop value.
|
|
201
|
+
* Given that Angular Control Value Accessors writeValue often sets `value` before willLoad —
|
|
202
|
+
* we need to force a value check here with bootstrapInitialValue .*/
|
|
203
|
+
this.bootstrapInitialValue();
|
|
204
|
+
this.handleListItems();
|
|
205
|
+
}
|
|
206
|
+
bootstrapInitialValue() {
|
|
207
|
+
if (typeof this.value === 'string') {
|
|
208
|
+
const parsed = this.value ? JSON.parse(this.value) : [];
|
|
209
|
+
this._updatingValueInternally = true;
|
|
210
|
+
this.value = parsed;
|
|
211
|
+
this._updatingValueInternally = false;
|
|
212
|
+
}
|
|
213
|
+
if (Array.isArray(this.value) && this.value.length > 0) {
|
|
214
|
+
this._valueIsMaster = true;
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
/**
|
|
218
|
+
* Keep `value` and `afListItems[].selected` in sync.
|
|
219
|
+
* - If `value` was set externally (`_valueIsMaster`), value wins on list updates.
|
|
220
|
+
* - Otherwise selection is seeded from `afListItems[].selected` (React/vanilla data-as-master).
|
|
221
|
+
* Does not emit `afOnSelect` — that is reserved for user interaction so Angular Control Value Accessors
|
|
222
|
+
* does not get feedback loops on prop sync.
|
|
223
|
+
*/
|
|
224
|
+
syncValueAndSelectedListItems(whereDidTheChangeComeFrom) {
|
|
225
|
+
if (!this._afListItems) {
|
|
226
|
+
return;
|
|
227
|
+
}
|
|
228
|
+
if (whereDidTheChangeComeFrom === 'afListItemsChange') {
|
|
229
|
+
if (this._valueIsMaster) {
|
|
230
|
+
this.applyValueToListItems(this.value);
|
|
231
|
+
}
|
|
232
|
+
else {
|
|
233
|
+
this._selectedItems = this._afListItems.filter((item) => item.selected);
|
|
234
|
+
this.setValueInternally([...this._selectedItems]);
|
|
235
|
+
}
|
|
236
|
+
return;
|
|
237
|
+
}
|
|
238
|
+
this.applyValueToListItems(this.value);
|
|
239
|
+
}
|
|
240
|
+
applyValueToListItems(value) {
|
|
241
|
+
const selectedValues = new Set((value !== null && value !== void 0 ? value : []).map((item) => item.value));
|
|
242
|
+
this._afListItems.forEach((item) => {
|
|
243
|
+
item.selected = selectedValues.has(item.value);
|
|
244
|
+
});
|
|
245
|
+
this._selectedItems = this._afListItems.filter((item) => selectedValues.has(item.value));
|
|
246
|
+
}
|
|
247
|
+
setValueInternally(nextValue) {
|
|
248
|
+
this._updatingValueInternally = true;
|
|
249
|
+
this.value = nextValue;
|
|
250
|
+
this._updatingValueInternally = false;
|
|
209
251
|
}
|
|
210
252
|
setClosed(focusToggleButton = false) {
|
|
211
253
|
this.isOpen = false;
|
|
@@ -264,9 +306,6 @@ const FormSelectFilter = /*@__PURE__*/ proxyCustomElement(class FormSelectFilter
|
|
|
264
306
|
this.setClosed(true);
|
|
265
307
|
this.afOnFilterClosed.emit();
|
|
266
308
|
}
|
|
267
|
-
componentWillLoad() {
|
|
268
|
-
this.handleListItems();
|
|
269
|
-
}
|
|
270
309
|
setFocusItem() {
|
|
271
310
|
const element = this.inputItem(`${this.afId}-select-filter-list`, this.focusListItemIndex);
|
|
272
311
|
if (element) {
|
|
@@ -371,16 +410,14 @@ const FormSelectFilter = /*@__PURE__*/ proxyCustomElement(class FormSelectFilter
|
|
|
371
410
|
}
|
|
372
411
|
filterResults() {
|
|
373
412
|
if (this._searchQuery && this._searchQuery.length > 0) {
|
|
374
|
-
this._filteredResult =
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
})
|
|
380
|
-
];
|
|
413
|
+
this._filteredResult = this._afListItems.filter((item) => {
|
|
414
|
+
return item.label
|
|
415
|
+
.toLowerCase()
|
|
416
|
+
.includes(this._searchQuery.toLowerCase());
|
|
417
|
+
});
|
|
381
418
|
}
|
|
382
419
|
else {
|
|
383
|
-
this._filteredResult =
|
|
420
|
+
this._filteredResult = this._afListItems;
|
|
384
421
|
}
|
|
385
422
|
}
|
|
386
423
|
inputSearchKeyboardHandler(e) {
|
|
@@ -400,7 +437,7 @@ const FormSelectFilter = /*@__PURE__*/ proxyCustomElement(class FormSelectFilter
|
|
|
400
437
|
}
|
|
401
438
|
resetSelectItems(close = false) {
|
|
402
439
|
this._selectedItems = [];
|
|
403
|
-
this.
|
|
440
|
+
this.setValueInternally([]);
|
|
404
441
|
this.afOnSelect.emit([]);
|
|
405
442
|
this._searchQuery = '';
|
|
406
443
|
this.filterResults();
|
|
@@ -430,7 +467,7 @@ const FormSelectFilter = /*@__PURE__*/ proxyCustomElement(class FormSelectFilter
|
|
|
430
467
|
this._selectedItems = [item];
|
|
431
468
|
this.emitFilterClosedEvent();
|
|
432
469
|
}
|
|
433
|
-
this.
|
|
470
|
+
this.setValueInternally([...this._selectedItems]);
|
|
434
471
|
this.afOnSelect.emit(this._selectedItems);
|
|
435
472
|
this.filterResults();
|
|
436
473
|
}
|
|
@@ -521,15 +558,15 @@ const FormSelectFilter = /*@__PURE__*/ proxyCustomElement(class FormSelectFilter
|
|
|
521
558
|
} }, h("slot", { name: "empty-search-result" })))));
|
|
522
559
|
}
|
|
523
560
|
render() {
|
|
524
|
-
return (h(Host, { key: '
|
|
561
|
+
return (h(Host, { key: '1a07fd41c8f9ccc1fbd0ca768fd3f87fc719dec4', tabindex: -1 }, h("div", { key: '6492705706e717048243892a3f8b269fa26dc6b9', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), role: "application", id: `${this.afId}-identifier` }, h("digi-form-label", { key: '99d0e29f7dad712882c0a3c5fd3f468af7dd5c55', afLabel: this.afFilterButtonTextLabel, afFor: `${this.afId}`, afId: `${this.afId}-label`, class: "digi-form-select-filter__label", afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("digi-util-keydown-handler", { key: 'a53d9d63b71557554da9442511af10870e345263', onAfOnEsc: () => this.escHandler() }, h("button", { key: '260c22654935d7422d5fc30a47fbd0c37ec00f0c', type: "button", id: `${this.afId}`, class: "digi-form-select-filter__toggle-button", onClick: () => this.toggleDropdown(), ref: (el) => (this._toggleButton = el), "aria-haspopup": "true", "aria-label": this.ariaLabel, "aria-describedby": `${this.afFilterButtonAriaDescribedby} ${this.afId}--validation-message`, "aria-controls": `${this.afId}-dropdown-menu`, "aria-expanded": this.isOpen }, h("div", { key: 'b92a13d75d3e320a39ca99128354178c01c1ff0d', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, h("digi-icon-check", { key: '37ab06f299d37c36516a7b809472bb300d244c18', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), h("span", { key: 'ca373143f83ab3da2e6579b3a0e1e145a10d2235', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), h("digi-icon-chevron-down", { key: '1a62747454653ceafa650e329301a8975179d75d', class: "digi-form-select-filter__toggle-icon" })), h("div", { key: 'b0cafd4ce8ad8017f60e8fab88417512a6698f20', id: `${this.afId}-dropdown-menu`, tabindex: this.isOpen ? '-1' : undefined, class: {
|
|
525
562
|
'digi-form-select-filter__dropdown': true,
|
|
526
563
|
'digi-form-select-filter__dropdown--right': this.afAlignRight,
|
|
527
564
|
'digi-form-select-filter__dropdown--hidden': !this.isOpen
|
|
528
|
-
} }, h("fieldset", { key: '
|
|
565
|
+
} }, h("fieldset", { key: 'f98295e8e804f93428489daf5844df9854ed6053' }, h("div", { key: 'c614d142260b6eaa0b6ea643b34f135551aaf1ec', class: "digi-form-select-filter__header" }, h("legend", { key: 'f1c94bf0ea6e3745d8965fbe5bfdf0a298d7b4f0', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), h("digi-form-input", { key: '6def27fd94b52e666c3e8dac4385ddf874f85bd1', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: FormInputVariation.MEDIUM, afType: FormInputType.SEARCH, afValidation: FormInputValidation.NEUTRAL, onAfOnFocus: () => {
|
|
529
566
|
this.focusListItemIndex = 0;
|
|
530
567
|
}, onAfOnKeyup: (e) => {
|
|
531
568
|
this.inputSearchKeyboardHandler(e.detail);
|
|
532
|
-
}, onAfOnInput: (e) => this.inputSearchInputHandler(e.detail), afValue: this._searchQuery, class: "digi-form-select-filter__search-input", afAriaControls: `${this.afId}-select-filter-list`, afAutocomplete: "off", afAriaAutocomplete: "none" }), this.renderEmptyStateBox()), h("div", { key: '
|
|
569
|
+
}, onAfOnInput: (e) => this.inputSearchInputHandler(e.detail), afValue: this._searchQuery, class: "digi-form-select-filter__search-input", afAriaControls: `${this.afId}-select-filter-list`, afAutocomplete: "off", afAriaAutocomplete: "none" }), this.renderEmptyStateBox()), h("div", { key: 'bcfc446573bb4b8f88aabdde1a8b6da1a6ac51f7', class: "digi-form-select-filter__scroll" }, h("digi-util-keydown-handler", { key: '656253e1dba64d2906ae9b195063300fe5cbd900', onAfOnDown: (e) => this.downHandler(e), onAfOnRight: (e) => this.downHandler(e), onAfOnUp: (e) => this.upHandler(e), onAfOnLeft: (e) => this.upHandler(e), onAfOnHome: (e) => this.homeHandler(e), onAfOnEnd: (e) => this.endHandler(e), onAfOnEnter: (e) => this.enterHandler(e), onAfOnSpace: (e) => this.spaceHandler(e), onAfOnTab: () => this.tabHandler(), onAfOnShiftTab: () => this.shiftHandler() }, h("ul", { key: '4a42a8ee02e3921710aa00826b31558ed1f9a485', class: "digi-form-select-filter__list", "aria-labelledby": `${this.afId}`, id: `${this.afId}-select-filter-list`, role: this.afMultipleItems ? '' : 'radiogroup', "aria-invalid": this.afMultipleItems
|
|
533
570
|
? 'false'
|
|
534
571
|
: this.afValidation ===
|
|
535
572
|
FormSelectFilterValidation.ERROR
|
|
@@ -538,11 +575,11 @@ const FormSelectFilter = /*@__PURE__*/ proxyCustomElement(class FormSelectFilter
|
|
|
538
575
|
? false
|
|
539
576
|
: this.afRequired
|
|
540
577
|
? 'true'
|
|
541
|
-
: 'false' }, this.showNeutralValue && (h("li", { key: '
|
|
578
|
+
: 'false' }, this.showNeutralValue && (h("li", { key: '40d30a579a332fec15b5c3f38865eacce0a8c2ee', class: "digi-form-select-filter__item", role: "radio", "aria-required": this.afMultipleItems
|
|
542
579
|
? 'false'
|
|
543
580
|
: this.afRequired
|
|
544
581
|
? 'true'
|
|
545
|
-
: 'false', "aria-checked": this._selectedItems.length === 0 ? 'true' : 'false', onClick: () => this.resetSelectItems(true), tabIndex: 0, "aria-label": this.afFilterButtonText }, this._selectedItems.length === 0 && (h("digi-icon-check", { key: '
|
|
582
|
+
: 'false', "aria-checked": this._selectedItems.length === 0 ? 'true' : 'false', onClick: () => this.resetSelectItems(true), tabIndex: 0, "aria-label": this.afFilterButtonText }, this._selectedItems.length === 0 && (h("digi-icon-check", { key: '43f446e70c707681dd1de50e11af511e8c4d060e', class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), this.afFilterButtonText)), this._filteredResult &&
|
|
546
583
|
this._filteredResult.map((item, index) => {
|
|
547
584
|
return (h("li", { class: "digi-form-select-filter__item", key: index, dir: item.dir, lang: item.lang, "aria-checked": this.isSelected(item.value) ? 'true' : 'false', role: this.afMultipleItems ? 'checkbox' : 'radio', "aria-required": this.afMultipleItems
|
|
548
585
|
? 'false'
|
|
@@ -558,9 +595,9 @@ const FormSelectFilter = /*@__PURE__*/ proxyCustomElement(class FormSelectFilter
|
|
|
558
595
|
: index === 0
|
|
559
596
|
? 0
|
|
560
597
|
: -1 }, this.isSelected(item.value) && (h("digi-icon-check", { class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), item.label));
|
|
561
|
-
}))))), this.afMultipleItems && (h("div", { key: '
|
|
598
|
+
}))))), this.afMultipleItems && (h("div", { key: 'f94a71fb292baf936c9358e33316f1ee93ce37f3', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (h("digi-button", { key: '305beb8e5f817d46d5f7b5364e4125c101cbaed5', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.resetSelectItems(), class: "digi-form-select-filter__reset-button" }, this.afResetButtonText)), h("digi-util-keydown-handler", { key: '3bf7f1f1bcd2a4e07fd900ba4b6377decc617cd7', onAfOnUp: () => this.setFocusItem() }, h("digi-button", { key: 'eaa1389239c8b5e93ecac2ed2f6ed09fcda81863', ref: (el) => (this._submitButton = el), "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => {
|
|
562
599
|
this.setClosed(true);
|
|
563
|
-
}, class: "digi-form-select-filter__submit-button" }, this.afSubmitButtonText)))))), h("div", { key: '
|
|
600
|
+
}, class: "digi-form-select-filter__submit-button" }, this.afSubmitButtonText)))))), h("div", { key: '213a685ba0d080e873721d526c1517e62f1779be', class: "digi-form-select__footer" }, h("div", { key: '81b470b19af8e472e50a789a6116448b8204359e', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: '457f29208d032eb29e7bb94c9db9fb9634866524', "af-variation": this.afValidation }, this.afValidationText)))))));
|
|
564
601
|
}
|
|
565
602
|
get hostElement() { return this; }
|
|
566
603
|
static get watchers() { return {
|