@designsystem-se/af 35.3.0 → 35.3.1
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-header-navigation.js +1 -1
- package/components/digi-header.js +2 -2
- package/dist/cjs/digi-arbetsformedlingen.cjs.js +1 -1
- package/dist/cjs/{digi-button_31.cjs.entry.js → digi-button_24.cjs.entry.js} +332 -331
- package/dist/cjs/digi-calendar-datepicker.cjs.entry.js +3 -3
- package/dist/cjs/digi-code-block_3.cjs.entry.js +212 -0
- package/dist/cjs/digi-dialog.cjs.entry.js +3 -3
- package/dist/cjs/digi-footer-card.cjs.entry.js +29 -0
- package/dist/cjs/digi-footer.cjs.entry.js +72 -0
- package/dist/cjs/digi-form-error-list.cjs.entry.js +3 -3
- package/dist/cjs/digi-form-receipt.cjs.entry.js +3 -3
- package/dist/cjs/digi-form-select-filter.cjs.entry.js +3 -3
- package/dist/cjs/digi-icon-accessibility-universal.cjs.entry.js +30 -0
- package/dist/cjs/digi-icon-copy.cjs.entry.js +30 -0
- package/dist/cjs/digi-icon-envelope.cjs.entry.js +30 -0
- package/dist/cjs/{digi-link-external.cjs.entry.js → digi-icon-external-link-alt_2.cjs.entry.js} +24 -0
- package/dist/cjs/digi-icon-globe.cjs.entry.js +30 -0
- package/dist/cjs/digi-icon-sign.cjs.entry.js +30 -0
- package/dist/cjs/digi-link.cjs.entry.js +75 -0
- package/dist/cjs/digi-logo.cjs.entry.js +69 -0
- package/dist/cjs/digi-navigation-pagination.cjs.entry.js +3 -3
- package/dist/cjs/digi-notification-alert.cjs.entry.js +3 -3
- package/dist/cjs/digi-notification-error-page.cjs.entry.js +3 -3
- package/dist/cjs/digi-tools-feedback.cjs.entry.js +3 -3
- package/dist/cjs/footer-card-variation.enum-99555edc.js +8 -0
- package/dist/cjs/index-7a477838.js +44 -20
- package/dist/cjs/index.cjs.js +43 -43
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/logo-variation.enum-607fadb4.js +13 -0
- package/dist/cjs/{typography-variation.enum-6a934f5b.js → typography-variation.enum-9f56fd50.js} +28 -18
- package/dist/collection/components/_header/header/header.css +0 -33
- package/dist/collection/components/_header/header/header.js +1 -1
- package/dist/collection/components/_header/header-navigation/header-navigation.css +0 -22
- package/dist/collection/design-tokens/components/_header-navigation.variables.scss +0 -1
- package/dist/digi-arbetsformedlingen/design-tokens/components/_header-navigation.variables.scss +0 -1
- package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js +1 -1
- package/dist/digi-arbetsformedlingen/index.esm.js +1 -1
- package/dist/digi-arbetsformedlingen/p-01f5f243.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/{p-1f652ce3.entry.js → p-092d0e3e.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/{p-06dfdd79.entry.js → p-0d35dc92.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/p-1fcbbf5f.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-290d1746.js +1 -0
- package/dist/digi-arbetsformedlingen/p-2c7d4ecf.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-54a797ed.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/{p-c2c18fb9.entry.js → p-5c7acd45.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/p-61385dc4.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/{p-35fddf68.entry.js → p-6559910e.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/p-815a97f1.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-82a89ca1.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-a5c6e42e.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-b21e9c0a.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-bd6e0b22.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-c1606b8a.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-c30a3366.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-cd770cb4.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-d2d0856f.js +1 -0
- package/dist/digi-arbetsformedlingen/p-db7c2105.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/{p-9e3f861e.entry.js → p-e0db40e9.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/{p-5abcf3e3.entry.js → p-e2330d9c.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/{p-5f6a49c0.entry.js → p-e54f5b28.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/p-ee88e3f1.js +1 -0
- package/dist/esm/digi-arbetsformedlingen.js +1 -1
- package/dist/esm/{digi-button_31.entry.js → digi-button_24.entry.js} +330 -322
- package/dist/esm/digi-calendar-datepicker.entry.js +3 -3
- package/dist/esm/digi-code-block_3.entry.js +206 -0
- package/dist/esm/digi-dialog.entry.js +3 -3
- package/dist/esm/digi-footer-card.entry.js +25 -0
- package/dist/esm/digi-footer.entry.js +68 -0
- package/dist/esm/digi-form-error-list.entry.js +3 -3
- package/dist/esm/digi-form-receipt.entry.js +3 -3
- package/dist/esm/digi-form-select-filter.entry.js +3 -3
- package/dist/esm/digi-icon-accessibility-universal.entry.js +26 -0
- package/dist/esm/digi-icon-copy.entry.js +26 -0
- package/dist/esm/digi-icon-envelope.entry.js +26 -0
- package/dist/esm/{digi-link-external.entry.js → digi-icon-external-link-alt_2.entry.js} +25 -2
- package/dist/esm/digi-icon-globe.entry.js +26 -0
- package/dist/esm/digi-icon-sign.entry.js +26 -0
- package/dist/esm/digi-link.entry.js +71 -0
- package/dist/esm/digi-logo.entry.js +65 -0
- package/dist/esm/digi-navigation-pagination.entry.js +3 -3
- package/dist/esm/digi-notification-alert.entry.js +3 -3
- package/dist/esm/digi-notification-error-page.entry.js +3 -3
- package/dist/esm/digi-tools-feedback.entry.js +3 -3
- package/dist/esm/footer-card-variation.enum-cc732148.js +8 -0
- package/dist/esm/index-148a7577.js +44 -20
- package/dist/esm/index.js +3 -3
- package/dist/esm/loader.js +1 -1
- package/dist/esm/logo-variation.enum-5b68b79f.js +13 -0
- package/dist/esm/{typography-variation.enum-5150a9b3.js → typography-variation.enum-8ba40d15.js} +28 -18
- package/hydrate/index.js +3 -3
- package/hydrate/index.mjs +3 -3
- package/package.json +1 -1
- package/dist/cjs/digi-form-fieldset_2.cjs.entry.js +0 -122
- package/dist/cjs/digi-icon-minus_2.cjs.entry.js +0 -53
- package/dist/cjs/digi-navigation-vertical-menu-item.cjs.entry.js +0 -150
- package/dist/cjs/digi-navigation-vertical-menu.cjs.entry.js +0 -177
- package/dist/cjs/form-radiobutton-variation.enum-d085f2f8.js +0 -18
- package/dist/cjs/navigation-vertical-menu-variation.enum-c237edd3.js +0 -13
- package/dist/digi-arbetsformedlingen/p-01044fca.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-06625463.js +0 -1
- package/dist/digi-arbetsformedlingen/p-183230b4.js +0 -1
- package/dist/digi-arbetsformedlingen/p-31763750.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-3b20ec86.js +0 -1
- package/dist/digi-arbetsformedlingen/p-43662434.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-450f8f55.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-4ee11ca2.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-684d8a71.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-71bd1a56.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-ba185d40.entry.js +0 -1
- package/dist/esm/digi-form-fieldset_2.entry.js +0 -117
- package/dist/esm/digi-icon-minus_2.entry.js +0 -48
- package/dist/esm/digi-navigation-vertical-menu-item.entry.js +0 -146
- package/dist/esm/digi-navigation-vertical-menu.entry.js +0 -173
- package/dist/esm/form-radiobutton-variation.enum-64c6038b.js +0 -18
- package/dist/esm/navigation-vertical-menu-variation.enum-c30b0ea9.js +0 -13
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as i,c as r,h as t,g as s}from"./p-52e3bb32.js";import{r as o}from"./p-ffe5c0e8.js";import{e,r as a,x as p}from"./p-183230b4.js";import{l as d}from"./p-e3d2e899.js";import"./p-717306ef.js";import"./p-a4a001e1.js";import"./p-53d9556b.js";import"./p-4841b4e1.js";import"./p-cf3ce3c5.js";import"./p-7e32c40b.js";import"./p-dcdffb3c.js";import"./p-5d21a361.js";import"./p-ad16c7a1.js";import"./p-f40f4b2a.js";import"./p-1f68d501.js";import"./p-8142cc73.js";import"./p-905ccb30.js";import"./p-88b4d03a.js";import"./p-1f956af8.js";import"./p-06625463.js";import"./p-f447b984.js";import"./p-9c5a93d8.js";import"./p-7933b555.js";import"./p-0f6c0360.js";import"./p-814ca2ad.js";import"./p-a39f86c9.js";import"./p-07303cb5.js";import"./p-2a023831.js";import"./p-5ba6737a.js";import"./p-e4a9f8f0.js";import"./p-f2a6768b.js";import"./p-40657c82.js";import"./p-f600576a.js";import"./p-3b20ec86.js";import"./p-9dd5d6c8.js";import"./p-77a93845.js";import"./p-06f939ab.js";import"./p-8cd2d6dd.js";import"./p-484a1d6d.js";import"./p-0f3fbb1e.js";import"./p-820e795b.js";import"./p-46cbbcb5.js";import"./p-d74742b8.js";import"./p-6e383896.js";import"./p-4bad4fb0.js";import"./p-a6ca40fc.js";import"./p-b0e88537.js";import"./p-cdcaf0eb.js";const m=class{constructor(t){i(this,t),this.afOnClickLink=r(this,"afOnClickLink",7),this.afOnReady=r(this,"afOnReady",3),this.linkItems=[],this.afHeading=void 0,this.afHeadingLevel=e.H2,this.afDescription=void 0,this.afId=o("digi-form-error-list"),this.afOverrideLink=!1,this.afEnableHeadingFocus=!0}async afMSetHeadingFocus(){this.setHeadingFocus()}componentWillLoad(){this.getLinks()}componentWillUpdate(){this.getLinks(!0)}componentDidLoad(){this.setHeadingFocus(),this.afOnReady.emit()}getLinks(i){const r=this.hostElement.children;if(!r||r.length<=0)return void d.warn("The slot contains no link elements",this.hostElement);let t;t=i?this._observer.children:r,this.linkItems=[...t].filter((i=>"a"===i.tagName.toLowerCase())).map((i=>({text:i.textContent,href:i.getAttribute("href")||""})))}setHeadingFocus(){this.afEnableHeadingFocus&&setTimeout((async()=>{const i=await this._notificationAlert.afMGetHeadingElement();i&&i.focus()}),0)}clickResponse(i){this.afOverrideLink&&i.detail.preventDefault(),this.afOnClickLink.emit(i)}render(){return t("div",{key:"c45799357d9c3b50ca44d7a797aea773a041875d",class:"digi-form-error-list",id:this.afId},t("digi-notification-alert",{key:"ac72c13d6b6a0635688a7e5e91a57db431d01670",ref:i=>this._notificationAlert=i,"af-heading":this.afHeading,"af-heading-level":this.afHeadingLevel,"af-variation":a.DANGER},this.afDescription&&t("digi-typography",{key:"25a325ab334c2304a01952d7e70786e53ebbd3cc","af-variation":p.SMALL},t("p",{key:"aacca74ef683f0ce492c0b69283833f5c3a01069",class:"digi-form-error-list__description"},this.afDescription)),t("ul",{key:"77f696f3aa0da40b05f89a3ebdcfeca6c0c5f44f",class:"digi-form-error-list__list"},this.linkItems.map((i=>t("li",{class:"digi-form-error-list__item"},t("digi-link-internal",{class:"digi-form-error-list__link",afHref:i.href},i.text)))))),t("div",{key:"83ac00f6c2291855e8d3b116251068d6a7bd6bdf",hidden:!0,class:"digi-form-error-list__slot"},t("digi-util-mutation-observer",{key:"8e3dcd6e63289fa9b134b4f8e4b5632c25531847",afOptions:{attributes:!1,childList:!0,subtree:!0,characterData:!0},ref:i=>this._observer=i,onAfOnChange:()=>this.getLinks()},t("slot",{key:"74f36b5292a73674be3d0d866a0689c0791f6b6e"}))))}get hostElement(){return s(this)}};m.style=".sc-digi-form-error-list-h{--digi--form-error-list--list--padding:var(--digi--gutter--smaller) 0 0 0;--digi--form-error-list--list--margin:0;--digi--form-error-list--item--padding:var(--digi--padding--smaller) 0 0 0;--digi--form-error-list--item--margin:0}.sc-digi-form-error-list-h .digi-form-error-list__list.sc-digi-form-error-list{list-style:none;padding:var(--digi--form-error-list--list--padding);margin:var(--digi--form-error-list--list--margin)}.sc-digi-form-error-list-h .digi-form-error-list__item.sc-digi-form-error-list{list-style:none;padding:var(--digi--form-error-list--item--padding);margin:var(--digi--form-error-list--item--margin)}";export{m as digi_form_error_list}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as i,c as t,h as a,g as o}from"./p-52e3bb32.js";import{r as n}from"./p-ffe5c0e8.js";import{N as r,q as e,r as c,x as d}from"./p-183230b4.js";import"./p-717306ef.js";import"./p-a4a001e1.js";import"./p-53d9556b.js";import"./p-4841b4e1.js";import{B as s}from"./p-cf3ce3c5.js";import"./p-7e32c40b.js";import"./p-dcdffb3c.js";import"./p-5d21a361.js";import"./p-ad16c7a1.js";import"./p-f40f4b2a.js";import"./p-1f68d501.js";import"./p-8142cc73.js";import"./p-905ccb30.js";import"./p-88b4d03a.js";import"./p-1f956af8.js";import"./p-06625463.js";import"./p-f447b984.js";import"./p-9c5a93d8.js";import"./p-7933b555.js";import"./p-0f6c0360.js";import"./p-814ca2ad.js";import"./p-a39f86c9.js";import"./p-07303cb5.js";import"./p-2a023831.js";import"./p-5ba6737a.js";import"./p-e4a9f8f0.js";import"./p-f2a6768b.js";import"./p-40657c82.js";import"./p-f600576a.js";import"./p-3b20ec86.js";import"./p-9dd5d6c8.js";import"./p-77a93845.js";import"./p-06f939ab.js";import"./p-8cd2d6dd.js";import"./p-484a1d6d.js";import"./p-0f3fbb1e.js";import"./p-820e795b.js";import"./p-46cbbcb5.js";import"./p-d74742b8.js";import"./p-6e383896.js";import"./p-4bad4fb0.js";import"./p-a6ca40fc.js";import"./p-b0e88537.js";import"./p-cdcaf0eb.js";const g=class{constructor(a){i(this,a),this.afOnClose=t(this,"afOnClose",7),this.afOnReady=t(this,"afOnReady",3),this.listItems=[],this.afHeading=void 0,this.afHeadingLevel=r.H2,this.afSize=e.LARGE,this.afVariation=c.INFO,this.afCloseable=!1,this.afCloseAriaLabel="Stäng meddelandet",this.afId=n("digi-notification-alert")}async afMGetHeadingElement(){return this._heading}clickHandler(i){this.afOnClose.emit(i)}componentDidLoad(){this.afOnReady.emit()}get cssModifiers(){return{[`digi-notification-alert--size-${this.afSize}`]:!!this.afSize,[`digi-notification-alert--variation-${this.afVariation}`]:!!this.afVariation,"digi-notification-alert--closeable":this.afCloseable}}get icon(){switch(this.afVariation){case c.SUCCESS:return a("digi-icon-notification-succes",null);case c.WARNING:return a("digi-icon-notification-warning",null);case c.DANGER:return a("digi-icon-notification-error",null);default:return a("digi-icon-notification-info",null)}}render(){return a("div",{key:"e4266774905fbf2b55a74e8a0955671356b98d41",class:Object.assign({"digi-notification-alert":!0},this.cssModifiers)},a("div",{key:"9abdb6437416b3bf27bbfd7f1b24877df49547a3",class:"digi-notification-alert__layout"},a("div",{key:"5d243b8d43b9e1279b688b2bbfe86d74480a0f10",class:"icon-wrapper"},a("div",{key:"157da6ae9d428763051b79f10e6a647ef51beaa8",class:"digi-notification-alert__icon",slot:"media"},this.icon)),a("div",{key:"0f489f9fb220be2b4c0afc96c8c17a902e8110ec",class:"main-wrapper"},a("div",{key:"7354aa28d772f5e79cddfc78d73d8f791eb32c5d",class:"digi-notification-alert__wrapper"},this.afCloseable&&a("digi-button",{key:"24266095733533913ff851a84b3478850a75f8da","af-aria-label":this.afCloseAriaLabel,"af-variation":s.FUNCTION,onAfOnClick:i=>this.clickHandler(i),class:"digi-notification-alert__close-button"},a("span",{key:"d86d0a95802ddd4f1d56e009e6551f4f7c5b9a6d",class:"digi-notification-alert__close-button__text"},"Stäng"),a("digi-icon-x",{key:"30d19c2d35a5deaed77d8921a24447796f2560c2",slot:"icon-secondary","aria-hidden":"true"})),a("div",{key:"fed2a1627e9137a9f233329550138082a0295a14",class:"digi-notification-alert__text"},this.afHeading&&this.afSize===e.LARGE&&a(this.afHeadingLevel,{key:"6931822676b2439e74d27ee5151199360a02f6b5",ref:i=>this._heading=i,tabindex:"-1",class:"digi-notification-alert__heading"},this.afHeading),a("div",{key:"ad16adaad35788c28b3d7df61081e52e26f00016",class:"digi-notification-alert__content"},a("digi-typography",{key:"3b2d41e52020b6ea4ad0580912cdbcb063b2a9db","af-variation":d.SMALL},a("slot",{key:"0484d598f84c53ddb678bb53264fd125b85e3b8f"}))))))))}get hostElement(){return o(this)}};g.style=".sc-digi-notification-alert-h{--digi--notification-alert--heading--font-weight:var(--digi--typography--heading-3--font-weight--desktop);--digi--notification-alert--heading--font-size:var(--digi--typography--heading-3--font-size--desktop);--digi--notification-alert--heading--font-size--large:var(--digi--typography--heading-3--font-size--desktop-large);--digi--notification-alert--icon--padding--large:var(--digi--gutter--largest);--digi--notification-alert--icon--padding--medium:var(--digi--gutter--largest);--digi--notification-alert--icon--padding--small:var(--digi--gutter--large);--digi--notification-alert--icon--width--large:2.25rem;--digi--notification-alert--icon--width--medium:1.4375rem;--digi--notification-alert--icon--width--small:1.4375rem;--digi--notification-alert--max-width--large:100%;--digi--notification-alert--max-width--medium:31.25rem;--digi--notification-alert--max-width--small:18.75rem;--digi--notification-alert--border--informative:var(--digi--border-width--secondary) solid var(--digi--color--border--sentiment--info);--digi--notification-alert--icon--color--informative:var(--digi--color--icon--secondary);--digi--notification-alert--icon--background--informative:var(--digi--color--background--sentiment--info--primary);--digi--notification-alert--border--success:var(--digi--border-width--secondary) solid var(--digi--color--border--sentiment--success);--digi--notification-alert--icon--color--success:var(--digi--color--icon--secondary);--digi--notification-alert--icon--background--success:var(--digi--color--background--sentiment--success--primary);--digi--notification-alert--border--warning:var(--digi--border-width--secondary) solid var(--digi--color--border--sentiment--warning);--digi--notification-alert--icon--color--warning:var(--digi--color--icon--primary);--digi--notification-alert--icon--background--warning:var(--digi--color--background--sentiment--warning--primary);--digi--notification-alert--border--danger:var(--digi--border-width--secondary) solid var(--digi--color--border--sentiment--error);--digi--notification-alert--icon--color--danger:var(--digi--color--icon--secondary);--digi--notification-alert--icon--background--danger:var(--digi--color--background--sentiment--error--primary)}.sc-digi-notification-alert-h .digi-notification-alert.sc-digi-notification-alert{position:relative;max-width:var(--MAX-WIDTH)}.sc-digi-notification-alert-h .digi-notification-alert--variation-info.sc-digi-notification-alert{--BORDER:var(--digi--notification-alert--border--informative);--ICON--COLOR:var(--digi--notification-alert--icon--color--informative);--ICON--BACKGROUND:var(--digi--notification-alert--icon--background--informative)}.sc-digi-notification-alert-h .digi-notification-alert--variation-success.sc-digi-notification-alert{--BORDER:var(--digi--notification-alert--border--success);--ICON--COLOR:var(--digi--notification-alert--icon--color--success);--ICON--BACKGROUND:var(--digi--notification-alert--icon--background--success)}.sc-digi-notification-alert-h .digi-notification-alert--variation-danger.sc-digi-notification-alert{--BORDER:var(--digi--notification-alert--border--danger);--ICON--COLOR:var(--digi--notification-alert--icon--color--danger);--ICON--BACKGROUND:var(--digi--notification-alert--icon--background--danger)}.sc-digi-notification-alert-h .digi-notification-alert--variation-warning.sc-digi-notification-alert{--BORDER:var(--digi--notification-alert--border--warning);--ICON--COLOR:var(--digi--notification-alert--icon--color--warning);--ICON--BACKGROUND:var(--digi--notification-alert--icon--background--warning)}.sc-digi-notification-alert-h .digi-notification-alert--size-large.sc-digi-notification-alert{--MAX-WIDTH:var(--digi--notification-alert--max-width--large);--ICON--PADDING:var(--digi--notification-alert--icon--padding--large);--ICON--WIDTH:var(--digi--notification-alert--icon--width--large)}.sc-digi-notification-alert-h .digi-notification-alert--size-medium.sc-digi-notification-alert{--MAX-WIDTH:var(--digi--notification-alert--max-width--medium);--ICON--PADDING:var(--digi--notification-alert--icon--padding--medium);--ICON--WIDTH:var(--digi--notification-alert--icon--width--medium)}.sc-digi-notification-alert-h .digi-notification-alert--size-small.sc-digi-notification-alert{--MAX-WIDTH:var(--digi--notification-alert--max-width--small);--ICON--PADDING:var(--digi--notification-alert--icon--padding--small);--ICON--WIDTH:var(--digi--notification-alert--icon--width--small)}.sc-digi-notification-alert-h .digi-notification-alert--size-small.sc-digi-notification-alert .digi-notification-alert__close-button__text.sc-digi-notification-alert{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-notification-alert-h .digi-notification-alert--closeable.sc-digi-notification-alert .digi-notification-alert__wrapper.sc-digi-notification-alert{display:flex;justify-content:space-between;flex-direction:row-reverse}.sc-digi-notification-alert-h .digi-notification-alert--closeable.sc-digi-notification-alert .digi-notification-alert__text.sc-digi-notification-alert{padding-right:0}.sc-digi-notification-alert-h .digi-notification-alert__layout.sc-digi-notification-alert{display:flex;align-items:stretch;gap:0}.sc-digi-notification-alert-h .digi-notification-alert__icon.sc-digi-notification-alert{background:var(--ICON--BACKGROUND);padding:var(--ICON--PADDING);display:flex;align-items:center;justify-content:center;height:100%;box-sizing:border-box}.sc-digi-notification-alert-h .digi-notification-alert__icon.sc-digi-notification-alert>*.sc-digi-notification-alert{--digi--icon--width:var(--ICON--WIDTH);--digi--icon--color:var(--ICON--COLOR)}.sc-digi-notification-alert-h .digi-notification-alert__wrapper.sc-digi-notification-alert{display:flex;border:var(--BORDER);background-color:var(--digi--color--background--primary);border-left:none;height:100%;box-sizing:border-box}.sc-digi-notification-alert-h .digi-notification-alert__text.sc-digi-notification-alert{padding:var(--digi--gutter--largest)}.sc-digi-notification-alert-h .digi-notification-alert__close-button.sc-digi-notification-alert{--digi--button--color--function:var(--digi--color--text--primary);--digi--button--color--function--hover:var(--digi--color--text--primary)}@media screen and (max-width: 47.9375rem){.sc-digi-notification-alert-h .digi-notification-alert__close-button__text.sc-digi-notification-alert{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-notification-alert-h .digi-notification-alert__heading.sc-digi-notification-alert{font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--notification-alert--heading--font-size);font-weight:var(--digi--notification-alert--heading--font-weight);color:var(--digi--color--text--primary);margin:0;display:block}@media (min-width: 61.9375rem){.sc-digi-notification-alert-h .digi-notification-alert__heading.sc-digi-notification-alert{font-size:var(--digi--notification-alert--heading--font-size--large)}}.sc-digi-notification-alert-h .digi-notification-alert__heading.sc-digi-notification-alert:focus{outline:none}.sc-digi-notification-alert-h .digi-notification-alert__content.sc-digi-notification-alert>*.sc-digi-notification-alert{--digi--typography--max-width:var(--MAX-WIDTH);--digi--typography--margin-top--text:var(--digi--gutter--small)}.sc-digi-notification-alert-h .icon-wrapper.sc-digi-notification-alert{align-items:stretch}.sc-digi-notification-alert-h .main-wrapper.sc-digi-notification-alert{flex:1}";export{g as digi_notification_alert}
|
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h, c as createEvent, g as getElement } from './index-148a7577.js';
|
|
2
|
-
import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
|
|
3
|
-
import { b as FormRadiobuttonVariation, F as FormRadiobuttonLayout, a as FormRadiobuttonValidation } from './form-radiobutton-variation.enum-64c6038b.js';
|
|
4
|
-
|
|
5
|
-
const formFieldsetCss = ".sc-digi-form-fieldset-h{--digi--form-fieldset--padding:0;--digi--form-fieldset--border:none;--digi--form-fieldset--legend--font-weight:var(--digi--typography--description--font-weight--desktop);--digi--form-fieldset--legend--font-family:var(--digi--global--typography--font-family--default);--digi--form-fieldset--legend--font-size:var(--digi--typography--description--font-size--desktop);--digi--form-fieldset--legend--color:var(--digi--color--text--primary);--digi--form-fieldset--legend--margin:var(--digi--margin--h2-large)}.sc-digi-form-fieldset-h .digi-form-fieldset.sc-digi-form-fieldset{margin:0px;padding:var(--digi--form-fieldset--padding);border:var(--digi--form-fieldset--border)}.sc-digi-form-fieldset-h .digi-form-fieldset__legend.sc-digi-form-fieldset{font-weight:var(--digi--form-fieldset--legend--font-weight);font-family:var(--digi--form-fieldset--legend--font-family);font-size:var(--digi--form-fieldset--legend--font-size);color:var(--digi--form-fieldset--legend--color);margin-block-end:var(--digi--form-fieldset--legend--margin);padding:0px}";
|
|
6
|
-
const DigiFormFieldsetStyle0 = formFieldsetCss;
|
|
7
|
-
|
|
8
|
-
const FormFieldset = class {
|
|
9
|
-
constructor(hostRef) {
|
|
10
|
-
registerInstance(this, hostRef);
|
|
11
|
-
this.afLegend = undefined;
|
|
12
|
-
this.afName = undefined;
|
|
13
|
-
this.afForm = undefined;
|
|
14
|
-
this.afId = randomIdGenerator('digi-form-fieldset');
|
|
15
|
-
}
|
|
16
|
-
render() {
|
|
17
|
-
return (h("fieldset", { key: '9c28717f7316cb72cca157a6042e3cc7c7c9a82d', class: "digi-form-fieldset", name: this.afName, form: this.afForm, id: this.afId }, this.afLegend && (h("legend", { key: '151f99611f8bdeb2431bd834bd2f934ac370824d', class: "digi-form-fieldset__legend" }, this.afLegend)), h("slot", { key: '10b0fe0ee00e839ad7b63375ad7fae5b632d16f8' })));
|
|
18
|
-
}
|
|
19
|
-
};
|
|
20
|
-
FormFieldset.style = DigiFormFieldsetStyle0;
|
|
21
|
-
|
|
22
|
-
const formRadiobuttonCss = ".sc-digi-form-radiobutton-h{--digi--form-radiobutton--border-color:var(--digi--color--border--interactive--default--on-input);--digi--form-radiobutton--border-color--primary:var(--digi--color--border--interactive--selected--primary);--digi--form-radiobutton--border-color--secondary:var(--digi--color--border--interactive--selected--secondary);--digi--form-radiobutton--border-color--error:var(--digi--color--border--interactive--validation--error);--digi--form-radiobutton--box-shadow--error:var(--digi--color--border--interactive--validation--error);--digi--form-radiobutton--background-color:var(--digi--color--background--interactive--default--input-elements);--digi--form-radiobutton--background-color--primary:var(--digi--color--background--interactive--selected--primary);--digi--form-radiobutton--background-color--secondary:var(--digi--color--background--interactive--selected--secondary);--digi--form-radiobutton--background-color--error:var(--digi--color--background--interactive--validation--error);--digi--form-radiobutton--border-width:var(--digi--border-width--primary);--digi--form-radiobutton--color--marker:var(--digi--grayscale--0);--digi--form-radiobutton--size:1.25rem;--digi--form-radiobutton--marker--size:calc(var(--digi--typography--input--font-size--desktop-large) * 0.4);--digi--form-radiobutton--height:var(--digi--input-height--large);--digi--form-radiobutton--border-radius:var(--digi--border-radius--primary);--digi--form-radiobutton--padding:var(--digi--gutter--icon);--digi--form-radiobutton--padding--block:var(--digi--gutter--small);--digi--form-radiobutton--padding--inline:var(--digi--gutter--icon)}.sc-digi-form-radiobutton-h .digi-form-radiobutton.sc-digi-form-radiobutton{--BACKGROUND--DEFAULT:var(--digi--form-radiobutton--background-color);--BORDER-COLOR--DEFAULT:var(--digi--form-radiobutton--border-color);position:relative}.sc-digi-form-radiobutton-h .digi-form-radiobutton--primary.sc-digi-form-radiobutton{--BACKGROUND--CHECKED:var(--digi--form-radiobutton--background-color--primary);--BORDER-COLOR--CHECKED:var(--digi--form-radiobutton--border-color--primary)}.sc-digi-form-radiobutton-h .digi-form-radiobutton--secondary.sc-digi-form-radiobutton{--BACKGROUND--CHECKED:var(--digi--form-radiobutton--background-color--secondary);--BORDER-COLOR--CHECKED:var(--digi--form-radiobutton--border-color--secondary)}.sc-digi-form-radiobutton-h .digi-form-radiobutton--error.sc-digi-form-radiobutton .digi-form-radiobutton__input.sc-digi-form-radiobutton:not(:checked)~.digi-form-radiobutton__label.sc-digi-form-radiobutton .digi-form-radiobutton__circle.sc-digi-form-radiobutton{--BACKGROUND--CHECKED:var(--digi--form-radiobutton--background-color--error);--BORDER-COLOR--CHECKED:var(--digi--form-radiobutton--border-color--error)}.sc-digi-form-radiobutton-h .digi-form-radiobutton--error.sc-digi-form-radiobutton .digi-form-radiobutton__input.sc-digi-form-radiobutton~.digi-form-radiobutton__label.sc-digi-form-radiobutton .digi-form-radiobutton__circle.sc-digi-form-radiobutton{background-color:var(--BACKGROUND--CHECKED);border-color:var(--BORDER-COLOR--CHECKED);box-shadow:0 0 0 var(--digi--border-width--primary) var(--digi--form-radiobutton--box-shadow--error)}.digi-form-radiobutton__input.sc-digi-form-radiobutton{position:absolute;opacity:0;cursor:pointer;height:0;width:0;top:0;left:0}.digi-form-radiobutton__label.sc-digi-form-radiobutton{display:inline-flex;align-items:center;gap:var(--digi--gutter--icon);font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--body--font-size--desktop);color:var(--digi--color--text--primary);font-weight:var(--digi--typography--body--font-weight--desktop);cursor:pointer;margin-bottom:0.75rem}.digi-form-radiobutton__circle.sc-digi-form-radiobutton{flex-shrink:0;align-self:flex-start;cursor:pointer;background-color:var(--BACKGROUND--DEFAULT);border-color:var(--BORDER-COLOR--DEFAULT);border-width:var(--digi--form-radiobutton--border-width);border-style:solid;height:var(--digi--form-radiobutton--size);width:var(--digi--form-radiobutton--size);border-radius:var(--digi--form-radiobutton--size);position:relative;transform:translateY(1px)}.digi-form-radiobutton__input.sc-digi-form-radiobutton:focus-visible~.digi-form-radiobutton__label.sc-digi-form-radiobutton .digi-form-radiobutton__circle.sc-digi-form-radiobutton{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.digi-form-radiobutton__input.sc-digi-form-radiobutton:checked~.digi-form-radiobutton__label.sc-digi-form-radiobutton .digi-form-radiobutton__circle.sc-digi-form-radiobutton{background-color:var(--BACKGROUND--CHECKED);border-color:var(--BORDER-COLOR--CHECKED)}.digi-form-radiobutton__input.sc-digi-form-radiobutton:checked~.digi-form-radiobutton__label.sc-digi-form-radiobutton .digi-form-radiobutton__circle.sc-digi-form-radiobutton::after{content:\"\";width:var(--digi--form-radiobutton--marker--size);height:var(--digi--form-radiobutton--marker--size);border-radius:var(--digi--form-radiobutton--marker--size);background:var(--digi--form-radiobutton--color--marker);position:absolute;left:calc(50% - var(--digi--form-radiobutton--marker--size) / 2);top:calc(50% - var(--digi--form-radiobutton--marker--size) / 2)}";
|
|
23
|
-
const DigiFormRadiobuttonStyle0 = formRadiobuttonCss;
|
|
24
|
-
|
|
25
|
-
const FormRadiobutton = class {
|
|
26
|
-
constructor(hostRef) {
|
|
27
|
-
registerInstance(this, hostRef);
|
|
28
|
-
this.afOnChange = createEvent(this, "afOnChange", 7);
|
|
29
|
-
this.afOnBlur = createEvent(this, "afOnBlur", 7);
|
|
30
|
-
this.afOnFocus = createEvent(this, "afOnFocus", 7);
|
|
31
|
-
this.afOnFocusout = createEvent(this, "afOnFocusout", 7);
|
|
32
|
-
this.afOnInput = createEvent(this, "afOnInput", 7);
|
|
33
|
-
this.afOnDirty = createEvent(this, "afOnDirty", 7);
|
|
34
|
-
this.afOnTouched = createEvent(this, "afOnTouched", 7);
|
|
35
|
-
this.afOnReady = createEvent(this, "afOnReady", 3);
|
|
36
|
-
this.dirty = false;
|
|
37
|
-
this.touched = false;
|
|
38
|
-
this.afLabel = undefined;
|
|
39
|
-
this.afVariation = FormRadiobuttonVariation.PRIMARY;
|
|
40
|
-
this.afLayout = FormRadiobuttonLayout.INLINE;
|
|
41
|
-
this.afName = undefined;
|
|
42
|
-
this.afId = randomIdGenerator('digi-form-radiobutton');
|
|
43
|
-
this.afRequired = undefined;
|
|
44
|
-
this.value = undefined;
|
|
45
|
-
this.afValue = undefined;
|
|
46
|
-
this.checked = undefined;
|
|
47
|
-
this.afChecked = undefined;
|
|
48
|
-
this.afValidation = undefined;
|
|
49
|
-
this.afAriaLabelledby = undefined;
|
|
50
|
-
this.afAriaDescribedby = undefined;
|
|
51
|
-
this.afAutofocus = undefined;
|
|
52
|
-
}
|
|
53
|
-
onValueChanged(newValue) {
|
|
54
|
-
this.afChecked = newValue === this.afValue;
|
|
55
|
-
}
|
|
56
|
-
onCheckedChanged(checked) {
|
|
57
|
-
this.afChecked = checked;
|
|
58
|
-
}
|
|
59
|
-
onAfCheckedChanged(checked) {
|
|
60
|
-
this.checked = checked;
|
|
61
|
-
}
|
|
62
|
-
/**
|
|
63
|
-
* Hämta en referens till inputelementet. Bra för att t.ex. sätta fokus programmatiskt.
|
|
64
|
-
* @en Returns a reference to the input element. Handy for setting focus programmatically.
|
|
65
|
-
*/
|
|
66
|
-
async afMGetFormControlElement() {
|
|
67
|
-
return this._input;
|
|
68
|
-
}
|
|
69
|
-
componentDidLoad() {
|
|
70
|
-
this.afOnReady.emit();
|
|
71
|
-
}
|
|
72
|
-
get cssModifiers() {
|
|
73
|
-
return {
|
|
74
|
-
'digi-form-radiobutton--error': this.afValidation === FormRadiobuttonValidation.ERROR,
|
|
75
|
-
'digi-form-radiobutton--primary': this.afVariation === FormRadiobuttonVariation.PRIMARY,
|
|
76
|
-
'digi-form-radiobutton--secondary': this.afVariation === FormRadiobuttonVariation.SECONDARY,
|
|
77
|
-
[`digi-form-radiobutton--layout-${this.afLayout}`]: !!this.afLayout
|
|
78
|
-
};
|
|
79
|
-
}
|
|
80
|
-
blurHandler(e) {
|
|
81
|
-
if (!this.touched) {
|
|
82
|
-
this.afOnTouched.emit(e);
|
|
83
|
-
this.touched = true;
|
|
84
|
-
}
|
|
85
|
-
this.afOnBlur.emit(e);
|
|
86
|
-
}
|
|
87
|
-
changeHandler(e) {
|
|
88
|
-
this.afOnChange.emit(e);
|
|
89
|
-
}
|
|
90
|
-
focusHandler(e) {
|
|
91
|
-
this.afOnFocus.emit(e);
|
|
92
|
-
}
|
|
93
|
-
focusoutHandler(e) {
|
|
94
|
-
this.afOnFocusout.emit(e);
|
|
95
|
-
}
|
|
96
|
-
inputHandler(e) {
|
|
97
|
-
if (!this.dirty) {
|
|
98
|
-
this.afOnDirty.emit(e);
|
|
99
|
-
this.dirty = true;
|
|
100
|
-
}
|
|
101
|
-
this.afOnInput.emit(e);
|
|
102
|
-
}
|
|
103
|
-
render() {
|
|
104
|
-
return (h("div", { key: 'e5b58328f81f539bcd0f2410480c90d4fe2547d1', class: Object.assign({ 'digi-form-radiobutton': true }, this.cssModifiers) }, h("input", { key: '9f6dd197ee8f16b6dfe4e08f69f412b99e584cef', class: "digi-form-radiobutton__input", ref: (el) => (this._input = el), onInput: (e) => this.inputHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), "aria-describedby": this.afAriaDescribedby, "aria-labelledby": this.afAriaLabelledby, "aria-invalid": this.afValidation === FormRadiobuttonValidation.ERROR
|
|
105
|
-
? 'true'
|
|
106
|
-
: 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "radio", checked: this.afChecked, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null }), h("label", { key: '2d396707508d44fe0996dbe1137e6df0299553c4', htmlFor: this.afId, class: "digi-form-radiobutton__label" }, h("span", { key: '74bb9dd19541639ec225b764a157d0ffbfe4a63c', class: "digi-form-radiobutton__circle" }), this.afLabel)));
|
|
107
|
-
}
|
|
108
|
-
get hostElement() { return getElement(this); }
|
|
109
|
-
static get watchers() { return {
|
|
110
|
-
"value": ["onValueChanged"],
|
|
111
|
-
"checked": ["onCheckedChanged"],
|
|
112
|
-
"afChecked": ["onAfCheckedChanged"]
|
|
113
|
-
}; }
|
|
114
|
-
};
|
|
115
|
-
FormRadiobutton.style = DigiFormRadiobuttonStyle0;
|
|
116
|
-
|
|
117
|
-
export { FormFieldset as digi_form_fieldset, FormRadiobutton as digi_form_radiobutton };
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h } from './index-148a7577.js';
|
|
2
|
-
import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
|
|
3
|
-
|
|
4
|
-
const iconMinusCss = ".sc-digi-icon-minus-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-minus-h svg.sc-digi-icon-minus{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}";
|
|
5
|
-
const DigiIconMinusStyle0 = iconMinusCss;
|
|
6
|
-
|
|
7
|
-
const IconMinus = class {
|
|
8
|
-
constructor(hostRef) {
|
|
9
|
-
registerInstance(this, hostRef);
|
|
10
|
-
this.afTitle = undefined;
|
|
11
|
-
this.afDesc = undefined;
|
|
12
|
-
this.afSvgAriaHidden = true;
|
|
13
|
-
this.afSvgAriaLabelledby = undefined;
|
|
14
|
-
this.titleId = randomIdGenerator('icontitle');
|
|
15
|
-
}
|
|
16
|
-
render() {
|
|
17
|
-
return (h("svg", { key: '16bcc71cfe986f9a11017261c24ec4bd2667fe59', class: "digi-icon-minus", width: "22", height: "26", viewBox: "0 0 22 26", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
|
|
18
|
-
? this.afSvgAriaLabelledby
|
|
19
|
-
: this.afTitle
|
|
20
|
-
? this.titleId
|
|
21
|
-
: undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && h("title", { key: '047e1f072e32a8ff127fd348360896ec40b9ca45', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '2bf5112ca0dc1f6b2277beced4d9e76c484a48e1' }, this.afDesc), h("path", { key: '006ee074160f1513300129da5a8b17ce447835fb', class: "digi-icon-minus__shape", d: "M21.2,13c0,0.7-0.5,1.2-1.2,1.2H2c-0.7,0-1.2-0.5-1.2-1.2c0-0.6,0.5-1.2,1.2-1.2H20C20.7,11.8,21.2,12.4,21.2,13z", fill: "currentColor", "fill-rule": "nonzero" })));
|
|
22
|
-
}
|
|
23
|
-
};
|
|
24
|
-
IconMinus.style = DigiIconMinusStyle0;
|
|
25
|
-
|
|
26
|
-
const iconPlusCss = ".sc-digi-icon-plus-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-plus-h svg.sc-digi-icon-plus{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}";
|
|
27
|
-
const DigiIconPlusStyle0 = iconPlusCss;
|
|
28
|
-
|
|
29
|
-
const IconPlus = class {
|
|
30
|
-
constructor(hostRef) {
|
|
31
|
-
registerInstance(this, hostRef);
|
|
32
|
-
this.afTitle = undefined;
|
|
33
|
-
this.afDesc = undefined;
|
|
34
|
-
this.afSvgAriaHidden = true;
|
|
35
|
-
this.afSvgAriaLabelledby = undefined;
|
|
36
|
-
this.titleId = randomIdGenerator('icontitle');
|
|
37
|
-
}
|
|
38
|
-
render() {
|
|
39
|
-
return (h("svg", { key: '245e229f5cec7671f37f5500cfb7212ebced6d61', class: "digi-icon-plus", width: "22", height: "26", viewBox: "0 0 22 26", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
|
|
40
|
-
? this.afSvgAriaLabelledby
|
|
41
|
-
: this.afTitle
|
|
42
|
-
? this.titleId
|
|
43
|
-
: undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && h("title", { key: '3cb67defae09e9fdf28aa5272237b42e05d1139c', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '7820f81f821aa310abdcc02e5c1eabffa37f933a' }, this.afDesc), h("path", { key: '5596c5b4ca49f77d18d638c65c3f656492d1d15f', class: "digi-icon-plus__shape", d: "M21.6,13c0,0.7-0.5,1.2-1.2,1.2h-7.9V22c0,0.7-0.5,1.2-1.2,1.2s-1.2-0.5-1.2-1.2v-7.9H2.3c-0.7,0-1.2-0.5-1.2-1.2 c0-0.6,0.5-1.2,1.2-1.2h7.9V4c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v7.9h7.9C21.1,11.8,21.6,12.4,21.6,13z", fill: "currentColor", "fill-rule": "nonzero" })));
|
|
44
|
-
}
|
|
45
|
-
};
|
|
46
|
-
IconPlus.style = DigiIconPlusStyle0;
|
|
47
|
-
|
|
48
|
-
export { IconMinus as digi_icon_minus, IconPlus as digi_icon_plus };
|
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-148a7577.js';
|
|
2
|
-
import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
|
|
3
|
-
|
|
4
|
-
const navigationVerticalMenuItemCss = ".sc-digi-navigation-vertical-menu-item-h{--digi--navigation-vertical-menu-item--toggle-icon--character:\"+\";--digi--navigation-vertical-menu-item--toggle-icon--character--active:\"-\";--digi--navigation-vertical-menu-item--toggle-icon--color:var(--digi--color--text--interactive--primary);--digi--navigation-vertical-menu-item--toggle-icon--color--hover:var(--digi--color--text--interactive--secondary);--digi--navigation-vertical-menu-item--toggle-icon--color--active:var(--digi--color--text--interactive--primary);--digi--navigation-vertical-menu-item--toggle-icon--background:var(--digi--color--background--interactive--default--tertiary);--digi--navigation-vertical-menu-item--toggle-icon--background--hover:var(--digi--color--background--interactive--hover--tertiary);--digi--navigation-vertical-menu-item--toggle-icon--background--active:var(--digi--color--background--interactive--selected--on-menu-minus-button);--digi--navigation-vertical-menu-item--toggle-icon--size:var(--digi--typography--tag--font-size--desktop);--digi--navigation-vertical-menu-item--toggle-icon--width:1.5rem;--digi--navigation-vertical-menu-item--toggle-icon--height:1.5rem;--digi--navigation-vertical-menu-item--icon--margin:0 var(--digi--margin--smaller) 0 0;--digi--navigation-vertical-menu-item--icon--wrapper--width:1.5rem;--digi--navigation-vertical-menu-item--icon--color:var(--digi--color--divider--secondary);--digi--navigation-vertical-menu-item--icon--height:1.5rem;--digi--navigation-vertical-menu-item--icon--width:1.5rem;--digi--navigation-vertical-menu-item--active-indicator-background-color:var(--digi--color--marking--navigation--selected);--digi--navigation-vertical-menu-item--active-indicator-width:4px;--digi--navigation-vertical-menu-item--active-indicator-left:0;--digi--navigation-vertical-menu-item--font-family:var(--digi--global--typography--font-family--default);--digi--navigation-vertical-menu-item--font-size:var(--digi--global--typography--font-size--base);--digi--navigation-vertical-menu-item--font-weight:var(--digi--global--typography--font-weight--regular);--digi--navigation-vertical-menu-item--font-weight--active:var(--digi--global--typography--font-weight--bold);--digi--navigation-vertical-menu-item--background:transparent;--digi--navigation-vertical-menu-item--background--hover:transparent;--digi--navigation-vertical-menu-item--background--active:var(--digi--color--background--interactive--default--pop-out);--digi--navigation-vertical-menu-item--color:var(--digi--color--text--primary);--digi--navigation-vertical-menu-item--color--hover:var(--digi--color--text--interactive--primary);--digi--navigation-vertical-menu-item--color--active:var(--digi--color--text--primary);--digi--navigation-vertical-menu-item--border--width:var(--digi--border-width--primary);--digi--navigation-vertical-menu-item--border--color:var(--digi--color--text--interactive--secondary);--digi--navigation-vertical-menu-item--padding:var(--digi--padding--small) var(--digi--padding--medium);--digi--navigation-vertical-menu-item--padding--toggle:var(--digi--padding--small) 0;--digi--navigation-vertical-menu-item--width:100%;--digi--navigation-vertical-menu-item--divider--margin:var(--digi--margin--small) var(--digi--margin--medium);--digi--navigation-vertical-menu-item--divider--border:solid var(--digi--border-width--primary) var(--digi--color--text--interactive--secondary);--digi--navigation-vertical-menu-item--outline:initial;--digi--navigation-vertical-menu-item--outline--focus:solid 2px var(--digi--color--border--interactive--default--primary--light);--digi--navigation-vertical-menu-item--outline--focus--offset:-2px}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item.sc-digi-navigation-vertical-menu-item{display:block}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item[hidden].sc-digi-navigation-vertical-menu-item{display:none}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item--badge.sc-digi-navigation-vertical-menu-item .digi-navigation-vertical-menu-item__text.sc-digi-navigation-vertical-menu-item.sc-digi-navigation-vertical-menu-item{margin-right:unset}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item--badge.sc-digi-navigation-vertical-menu-item .digi-navigation-vertical-menu-item__link.sc-digi-navigation-vertical-menu-item.sc-digi-navigation-vertical-menu-item{justify-content:flex-start;overflow-wrap:normal}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item--badge.sc-digi-navigation-vertical-menu-item .digi-navigation-vertical-menu-item__badge.sc-digi-navigation-vertical-menu-item{margin-left:11px;font-weight:initial}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__inner.sc-digi-navigation-vertical-menu-item{position:relative}@supports (display: grid){.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__inner--combined.sc-digi-navigation-vertical-menu-item{display:grid;grid-auto-flow:column;grid-gap:0;grid-template-columns:1fr auto;align-items:stretch}}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__collapse--hidden.sc-digi-navigation-vertical-menu-item{display:none}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__icon.sc-digi-navigation-vertical-menu-item{width:var(--digi--navigation-vertical-menu-item--icon--wrapper--width);margin:var(--digi--navigation-vertical-menu-item--icon--margin)}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__text.sc-digi-navigation-vertical-menu-item{margin-right:auto}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button.sc-digi-navigation-vertical-menu-item,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link.sc-digi-navigation-vertical-menu-item{font-family:var(--digi--navigation-vertical-menu-item--font-family);font-weight:var(--digi--navigation-vertical-menu-item--font-weight);font-size:var(--digi--navigation-vertical-menu-item--font-size);background:var(--digi--navigation-vertical-menu-item--background);color:var(--digi--navigation-vertical-menu-item--color);border:none;padding:var(--digi--navigation-vertical-menu-item--padding);outline:var(--digi--navigation-vertical-menu-item--outline);width:var(--digi--navigation-vertical-menu-item--width);text-align:left;display:flex;justify-content:space-between;box-sizing:border-box;text-decoration:none;overflow-wrap:anywhere}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button.sc-digi-navigation-vertical-menu-item *.sc-digi-navigation-vertical-menu-item,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link.sc-digi-navigation-vertical-menu-item *.sc-digi-navigation-vertical-menu-item{pointer-events:none}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button.sc-digi-navigation-vertical-menu-item:hover,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link.sc-digi-navigation-vertical-menu-item:hover{cursor:pointer}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button.sc-digi-navigation-vertical-menu-item:focus-visible,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button.sc-digi-navigation-vertical-menu-item:hover,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link.sc-digi-navigation-vertical-menu-item:focus-visible,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link.sc-digi-navigation-vertical-menu-item:hover{text-decoration:underline;--digi--navigation-vertical-menu-item--color:var(--digi--navigation-vertical-menu-item--color--hover);--digi--navigation-vertical-menu-item--background:var(--digi--navigation-vertical-menu-item--background--hover)}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button.sc-digi-navigation-vertical-menu-item:focus-visible,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link.sc-digi-navigation-vertical-menu-item:focus-visible{outline:var(--digi--navigation-vertical-menu-item--outline--focus);outline-offset:var(--digi--navigation-vertical-menu-item--outline--focus--offset)}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button--active.sc-digi-navigation-vertical-menu-item,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link--active.sc-digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--color:var(--digi--navigation-vertical-menu-item--color--active);--digi--navigation-vertical-menu-item--font-weight:var(--digi--navigation-vertical-menu-item--font-weight--active)}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button--active.sc-digi-navigation-vertical-menu-item:focus-visible,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button--active.sc-digi-navigation-vertical-menu-item:hover,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link--active.sc-digi-navigation-vertical-menu-item:focus-visible,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link--active.sc-digi-navigation-vertical-menu-item:hover{--digi--navigation-vertical-menu-item--color:var(--digi--navigation-vertical-menu-item--color--active)}.digi-navigation-vertical-menu--primary .sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button--active.sc-digi-navigation-vertical-menu-item::before,.digi-navigation-vertical-menu--primary .sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link--active.sc-digi-navigation-vertical-menu-item::before{content:\" \";display:block;position:absolute;width:var(--digi--navigation-vertical-menu-item--active-indicator-width);left:var(--digi--navigation-vertical-menu-item--active-indicator-left);top:0;bottom:0;background-color:var(--digi--navigation-vertical-menu-item--active-indicator-background-color);z-index:2}.digi-navigation-vertical-menu--secondary .sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button--active.sc-digi-navigation-vertical-menu-item,.digi-navigation-vertical-menu--secondary .sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link--active.sc-digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--background:var(--digi--navigation-vertical-menu-item--background--active)}.digi-navigation-vertical-menu--secondary .sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button--active.sc-digi-navigation-vertical-menu-item::before,.digi-navigation-vertical-menu--secondary .sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link--active.sc-digi-navigation-vertical-menu-item::before{content:\" \";display:block;position:absolute;width:var(--digi--navigation-vertical-menu-item--active-indicator-width);left:0;top:0;bottom:0;background-color:var(--digi--navigation-vertical-menu-item--active-indicator-background-color);z-index:2}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button--expanded.sc-digi-navigation-vertical-menu-item,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button[aria-expanded=true].sc-digi-navigation-vertical-menu-item,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link--expanded.sc-digi-navigation-vertical-menu-item,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link[aria-expanded=true].sc-digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--font-weight:var(--digi--navigation-vertical-menu-item--font-weight--active)}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button--toggle.sc-digi-navigation-vertical-menu-item,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link--toggle.sc-digi-navigation-vertical-menu-item{width:calc(1.5rem + var(--digi--padding--medium));display:flex;align-items:stretch;justify-content:center;padding:var(--digi--navigation-vertical-menu-item--padding--toggle)}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button--only-toggle.sc-digi-navigation-vertical-menu-item,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link--only-toggle.sc-digi-navigation-vertical-menu-item{padding-right:0}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button--only-toggle.sc-digi-navigation-vertical-menu-item .digi-navigation-vertical-menu-item__toggle-icon.sc-digi-navigation-vertical-menu-item,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link--only-toggle.sc-digi-navigation-vertical-menu-item .digi-navigation-vertical-menu-item__toggle-icon.sc-digi-navigation-vertical-menu-item{width:calc(1.5rem + var(--digi--padding--medium))}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button.sc-digi-navigation-vertical-menu-item:hover,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button.sc-digi-navigation-vertical-menu-item:hover+button.sc-digi-navigation-vertical-menu-item,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link.sc-digi-navigation-vertical-menu-item:hover,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link.sc-digi-navigation-vertical-menu-item:hover+button.sc-digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--toggle-icon--color:var(--digi--navigation-vertical-menu-item--toggle-icon--color--hover);--digi--navigation-vertical-menu-item--toggle-icon--background:var(--digi--navigation-vertical-menu-item--toggle-icon--background--hover)}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button[aria-expanded=true].sc-digi-navigation-vertical-menu-item,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link[aria-expanded=true].sc-digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--toggle-icon--color:var(--digi--navigation-vertical-menu-item--toggle-icon--color--active);--digi--navigation-vertical-menu-item--toggle-icon--background:var(--digi--navigation-vertical-menu-item--toggle-icon--background--active)}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button[aria-expanded=true].sc-digi-navigation-vertical-menu-item:hover,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link[aria-expanded=true].sc-digi-navigation-vertical-menu-item:hover{--digi--navigation-vertical-menu-item--toggle-icon--color:var(--digi--navigation-vertical-menu-item--toggle-icon--color--hover);--digi--navigation-vertical-menu-item--toggle-icon--background:var(--digi--navigation-vertical-menu-item--toggle-icon--background--hover)}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__button.sc-digi-navigation-vertical-menu-item:focus-visible,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__link.sc-digi-navigation-vertical-menu-item:focus-visible{outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__toggle-icon.sc-digi-navigation-vertical-menu-item{position:relative;display:flex;justify-content:center;color:var(--digi--navigation-vertical-menu-item--toggle-icon--color)}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__toggle-icon.sc-digi-navigation-vertical-menu-item digi-icon-plus.sc-digi-navigation-vertical-menu-item,.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__toggle-icon.sc-digi-navigation-vertical-menu-item digi-icon-minus.sc-digi-navigation-vertical-menu-item{--digi--icon--width:var(--digi--navigation-vertical-menu-item--toggle-icon--size);--digi--icon--color:var(--digi--navigation-vertical-menu-item--toggle-icon--color)}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__toggle-icon.sc-digi-navigation-vertical-menu-item::before{content:\"\";display:flex;position:absolute;align-items:center;justify-content:center;width:var(--digi--navigation-vertical-menu-item--toggle-icon--width);height:var(--digi--navigation-vertical-menu-item--toggle-icon--height);border-radius:var(--digi--navigation-vertical-menu-item--toggle-icon--width);background:var(--digi--navigation-vertical-menu-item--toggle-icon--background)}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__toggle-icon.sc-digi-navigation-vertical-menu-item>span.sc-digi-navigation-vertical-menu-item{display:inline-flex;position:absolute;align-items:center;justify-content:center;width:var(--digi--navigation-vertical-menu-item--toggle-icon--width);height:var(--digi--navigation-vertical-menu-item--toggle-icon--height)}.sc-digi-navigation-vertical-menu-item-h .digi-navigation-vertical-menu-item__divider.sc-digi-navigation-vertical-menu-item{margin:var(--digi--navigation-vertical-menu-item--divider--margin);border:none;border-top:var(--digi--navigation-vertical-menu-item--divider--border)}.digi-navigation-vertical-menu-item__icon.sc-digi-navigation-vertical-menu-item-s>[slot^=icon],.digi-navigation-vertical-menu-item__icon .sc-digi-navigation-vertical-menu-item-s>[slot^=icon]{--digi--icon--color:var(--digi--navigation-vertical-menu-item--icon--color);--digi--icon--width:var(--digi--navigation-vertical-menu-item--icon--width);--digi--icon--height:var(--digi--navigation-vertical-menu-item--icon--height)}";
|
|
5
|
-
const DigiNavigationVerticalMenuItemStyle0 = navigationVerticalMenuItemCss;
|
|
6
|
-
|
|
7
|
-
const NavigationVerticalMenuItem = class {
|
|
8
|
-
constructor(hostRef) {
|
|
9
|
-
registerInstance(this, hostRef);
|
|
10
|
-
this.afOnClick = createEvent(this, "afOnClick", 7);
|
|
11
|
-
this.hasSubnav = false;
|
|
12
|
-
this.hasIcon = false;
|
|
13
|
-
this.hasBadge = false;
|
|
14
|
-
this.isActive = undefined;
|
|
15
|
-
this.activeSubnav = undefined;
|
|
16
|
-
this.listItems = [];
|
|
17
|
-
this.afText = undefined;
|
|
18
|
-
this.afHref = undefined;
|
|
19
|
-
this.afAriaCurrent = undefined;
|
|
20
|
-
this.afActiveSubnav = undefined;
|
|
21
|
-
this.afActive = false;
|
|
22
|
-
this.afId = randomIdGenerator('digi-navigation-vertical-menu-item');
|
|
23
|
-
this.afOverrideLink = false;
|
|
24
|
-
this.afHasSubnav = false;
|
|
25
|
-
this.afLang = 'sv';
|
|
26
|
-
}
|
|
27
|
-
componentWillLoad() {
|
|
28
|
-
this.activeSubnav = this.afActiveSubnav;
|
|
29
|
-
}
|
|
30
|
-
componentDidLoad() {
|
|
31
|
-
this.setSubnav();
|
|
32
|
-
this.setHasIcon();
|
|
33
|
-
this.setHasBadge();
|
|
34
|
-
this.setHasSubnav();
|
|
35
|
-
this.setIsActive();
|
|
36
|
-
}
|
|
37
|
-
componentWillUpdate() {
|
|
38
|
-
this.setSubnav();
|
|
39
|
-
this.setHasIcon();
|
|
40
|
-
this.setHasBadge();
|
|
41
|
-
this.setHasSubnav();
|
|
42
|
-
}
|
|
43
|
-
setHasSubnav() {
|
|
44
|
-
var _a, _b;
|
|
45
|
-
this.hasSubnav = this.activeSubnav !== undefined;
|
|
46
|
-
if (this.hasSubnav) {
|
|
47
|
-
if (this.$subnav) {
|
|
48
|
-
this.$subnav.hidden = !this.activeSubnav;
|
|
49
|
-
}
|
|
50
|
-
this.activeSubnav
|
|
51
|
-
? (_a = this.$parent) === null || _a === void 0 ? void 0 : _a.classList.add('digi-navigation-vertical-menu__item--active')
|
|
52
|
-
: (_b = this.$parent) === null || _b === void 0 ? void 0 : _b.classList.remove('digi-navigation-vertical-menu__item--active');
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
onAfActiveSubnavChanged(newValue) {
|
|
56
|
-
this.activeSubnav = newValue;
|
|
57
|
-
this.setHasSubnav();
|
|
58
|
-
}
|
|
59
|
-
setIsActive() {
|
|
60
|
-
this.isActive = this.afActive;
|
|
61
|
-
this.isActive
|
|
62
|
-
? this.hostElement.parentElement.classList.add('active')
|
|
63
|
-
: this.hostElement.parentElement.classList.remove('active');
|
|
64
|
-
}
|
|
65
|
-
setSubnav() {
|
|
66
|
-
if (this.hasSubnav) {
|
|
67
|
-
this.$subnav = this.hostElement.parentElement.querySelector('ul');
|
|
68
|
-
this.$parent = this.hostElement.parentElement;
|
|
69
|
-
// Check if UL-element exist or is rendered later dynamically
|
|
70
|
-
if (this.$subnav) {
|
|
71
|
-
this.$subnav.setAttribute('id', `${this.afId}-collapse-menu`);
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
setHasIcon() {
|
|
76
|
-
const icon = !!this.hostElement.querySelector('[slot="icon"]');
|
|
77
|
-
this.hasIcon = icon;
|
|
78
|
-
}
|
|
79
|
-
setHasBadge() {
|
|
80
|
-
const badge = !!this.hostElement.querySelector('[slot="badge"]');
|
|
81
|
-
this.hasBadge = badge;
|
|
82
|
-
}
|
|
83
|
-
clickHandler(e) {
|
|
84
|
-
const el = e.target;
|
|
85
|
-
if (el.tagName.toLowerCase() === 'a') {
|
|
86
|
-
if (this.afOverrideLink) {
|
|
87
|
-
e.preventDefault();
|
|
88
|
-
}
|
|
89
|
-
if (el.classList.contains('digi-navigation-vertical-menu-item__has-subnav')) {
|
|
90
|
-
this.activeSubnav = true;
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
else {
|
|
94
|
-
this.activeSubnav = !this.activeSubnav;
|
|
95
|
-
}
|
|
96
|
-
this.afOnClick.emit(e);
|
|
97
|
-
}
|
|
98
|
-
get toggleButtonText() {
|
|
99
|
-
return this.activeSubnav ? 'Stäng meny' : 'Öppna meny';
|
|
100
|
-
}
|
|
101
|
-
get cssModifiers() {
|
|
102
|
-
return {
|
|
103
|
-
'digi-navigation-vertical-menu-item': true,
|
|
104
|
-
'digi-navigation-vertical-menu-item--active': this.isActive,
|
|
105
|
-
'digi-navigation-vertical-menu-item--active-subnav': this.activeSubnav,
|
|
106
|
-
'digi-navigation-vertical-menu-item--icon': this.hasIcon,
|
|
107
|
-
'digi-navigation-vertical-menu-item--badge': this.hasBadge
|
|
108
|
-
};
|
|
109
|
-
}
|
|
110
|
-
get toggleIcon() {
|
|
111
|
-
if (this.activeSubnav) {
|
|
112
|
-
return h("digi-icon-minus", null);
|
|
113
|
-
}
|
|
114
|
-
else {
|
|
115
|
-
return h("digi-icon-plus", null);
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
render() {
|
|
119
|
-
return (h("host", { key: 'b466ce9111a5e0dac19daf8903a753c78eb5a0a0', class: {
|
|
120
|
-
'digi-navigation-vertical-menu-item--has-subnav': this.hasSubnav,
|
|
121
|
-
'digi-navigation-vertical-menu-item--active-subnav': this.activeSubnav
|
|
122
|
-
} }, h("div", { key: '55ecf36a90033235cfa8f4394773e868549ae78a', class: Object.assign({ 'digi-navigation-vertical-menu-item': true }, this.cssModifiers) }, this.hasSubnav && this.afHref && (h("div", { key: '788d539b5b090a9af9d6f8667ad1d8d6136af245', class: "digi-navigation-vertical-menu-item__inner digi-navigation-vertical-menu-item__inner--combined" }, h("a", { key: 'd5c04026c5c25445b8cae01c0a0809839bc7b03b', id: `${this.afId}-link`, href: this.afHref, class: {
|
|
123
|
-
'digi-navigation-vertical-menu-item__link': true,
|
|
124
|
-
'digi-navigation-vertical-menu-item__has-subnav': true,
|
|
125
|
-
'digi-navigation-vertical-menu-item__link--active': this.isActive,
|
|
126
|
-
'digi-navigation-vertical-menu-item__link--expanded': this.activeSubnav
|
|
127
|
-
}, onClick: (e) => this.clickHandler(e) }, h("div", { key: '8f5f0e788d6441ed9c945603ae135ba35f95e556', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '63bd8733d523416d8fdea6498d7af8d8ad5c2737', name: "icon" })), h("span", { key: '47a4175a5a6d9ceb79c494f1fb696b5e73b50ff2', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: 'a99a1a1b19bb755809f68b10ed3e3ed57c6990ed', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: '24a3bc5e91bd52454c7d3bac518c95b541748097', name: "badge" }))), h("button", { key: 'e77f10a770377161f2a1eaab942331acf8664c0c', type: "button", id: `${this.afId}-toggle-button`, class: {
|
|
128
|
-
'digi-navigation-vertical-menu-item__button digi-navigation-vertical-menu-item__button--toggle': true,
|
|
129
|
-
'digi-navigation-vertical-menu-item__button--active': this.isActive
|
|
130
|
-
}, onClick: (e) => this.clickHandler(e), "aria-controls": `${this.afId}-collapse-menu`, "aria-expanded": this.activeSubnav ? 'true' : 'false', "aria-label": `${this.toggleButtonText} ${this.afText}` }, h("span", { key: 'ba7281a9f65c7775bb4c80b8c60f41518a6e2506', class: "digi-navigation-vertical-menu-item__toggle-icon" }, h("span", { key: 'd9bffd289a04e26e0f18b03ec337081f754da342', class: "icon" }, this.toggleIcon))))), this.hasSubnav && !this.afHref && (h("div", { key: '4f705d7bf6fcda106628ca60aac33b7a1d6a5c32', class: "digi-navigation-vertical-menu-item__inner" }, h("button", { key: '60951bd35331a6d121ad4dea6c1bbdf1c6fe18aa', id: `${this.afId}-toggle-button`, class: "digi-navigation-vertical-menu-item__button digi-navigation-vertical-menu-item__button--only-toggle", onClick: (e) => this.clickHandler(e), "aria-controls": `${this.afId}-collapse-menu`, "aria-expanded": this.activeSubnav ? 'true' : 'false', type: "button" }, h("span", { key: '7475bc63e5282040083ea78ed6c69b16eed03c48', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '0e8c0ad4839f3386e293ff0b56d6fcf8218ef4ca', name: "icon" })), h("span", { key: '09a30d103f70fcaf1c2d2733371bfd80a3e89cb3', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '2b4df3150e64e6a26abb802e6a3edc40b3925a32', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: 'bbf167346ad3aaa9475be0af73cef02bc1488f4a', name: "badge" })), h("span", { key: 'ee3545bd40e6770dcb0b11b8a4b19b47f6abcc60', class: "digi-navigation-vertical-menu-item__toggle-icon" }, h("span", { key: 'e1b81b7a54def3cc7b69c4461370444cb8a42f1e' }, this.toggleIcon))))), !this.hasSubnav && (h("div", { key: 'f42c85f453bf38d14f21d99f9ef4ccc82cd14c43', class: "digi-navigation-vertical-menu-item__inner" }, !this.isActive && (h("a", { key: 'f3db75b42c7f9c59b97287efdc5a7b9e25bdddb1', id: `${this.afId}-link`, href: this.afHref, class: {
|
|
131
|
-
'digi-navigation-vertical-menu-item__link': true,
|
|
132
|
-
'digi-navigation-vertical-menu-item__link--active': this.isActive
|
|
133
|
-
}, onClick: (e) => this.clickHandler(e) }, h("div", { key: 'a11026077ffb74925488f1e84a00ea35fa2708c5', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '498b31c99a2064a5f5861a776ac4591e9e8fe868', name: "icon" })), h("span", { key: '551fc9b44157817dd60d1a0d65bea2d4f505ff8d', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '98b9083a6c9a5970883771cb111504cfc0adc36a', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: 'f4ecb70745f7102ac6f6d0a1921349a9d7efdfbf', name: "badge" })))), this.isActive && (h("a", { key: '59e0478351aaa62f1b7988d4ba623a295b325f35', id: `${this.afId}-link`, href: this.afHref, "aria-current": this.afAriaCurrent, class: {
|
|
134
|
-
'digi-navigation-vertical-menu-item__link': true,
|
|
135
|
-
'digi-navigation-vertical-menu-item__link--active': this.isActive
|
|
136
|
-
}, onClick: (e) => this.clickHandler(e) }, h("div", { key: 'dfd18536c7e5b0acaf4dcc23e2734841efee94d7', class: "digi-navigation-vertical-menu-item__icon", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '9c478aed7b2b39d04e196d29c74d3ddb39d5feb6', name: "icon" })), h("span", { key: '1e9f35bde837c753b65c85d83e3226e8e61c7bcf', class: "digi-navigation-vertical-menu-item__text", lang: this.afLang }, this.afText), h("div", { key: '663279bcdd5959c795124b015086ea85d2706847', class: "digi-navigation-vertical-menu-item__badge", hidden: !this.hasBadge }, h("slot", { key: '492b55cedb0248ef16b2e41e55bcd41a4e22c600', name: "badge" })))))))));
|
|
137
|
-
}
|
|
138
|
-
get hostElement() { return getElement(this); }
|
|
139
|
-
static get watchers() { return {
|
|
140
|
-
"afActiveSubnav": ["setHasSubnav", "onAfActiveSubnavChanged"],
|
|
141
|
-
"afActive": ["setIsActive"]
|
|
142
|
-
}; }
|
|
143
|
-
};
|
|
144
|
-
NavigationVerticalMenuItem.style = DigiNavigationVerticalMenuItemStyle0;
|
|
145
|
-
|
|
146
|
-
export { NavigationVerticalMenuItem as digi_navigation_vertical_menu_item };
|
|
@@ -1,173 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-148a7577.js';
|
|
2
|
-
import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
|
|
3
|
-
import { l as logger } from './logger.util-ede3c48a.js';
|
|
4
|
-
import { a as NavigationVerticalMenuVariation, N as NavigationVerticalMenuActiveIndicatorSize } from './navigation-vertical-menu-variation.enum-c30b0ea9.js';
|
|
5
|
-
|
|
6
|
-
const navigationVerticalMenuCss = ".sc-digi-navigation-vertical-menu-h{--digi--navigation-vertical-menu--background:transparent;--digi--navigation-vertical-menu--item--border-top:solid var(--digi--border-width--primary) var(--digi--color--divider--secondary)}.sc-digi-navigation-vertical-menu-h .digi-navigation-vertical-menu.sc-digi-navigation-vertical-menu{display:block;background:var(--digi--navigation-vertical-menu--background)}.sc-digi-navigation-vertical-menu-s>.digi-navigation-vertical-menu--indicator--secondary ul.digi-navigation-vertical-menu__list--root.secondary{--subnav-indicator--width:var(--subnav-indicator--width--xl)}.sc-digi-navigation-vertical-menu-s>.digi-navigation-vertical-menu--indicator--secondary ul.digi-navigation-vertical-menu__list--root.secondary .digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--active-indicator-width:var(--subnav-indicator--width--xl)}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root{--subnav-indicator--left:var(--digi--padding--medium);--subnav-indicator--width:1px;--subnav-indicator--width--l:4px;--subnav-indicator--width--xl:6px;--subnav-indicator--background-color:var(--digi--color--divider--secondary);--subnav-indicator--background-color--default:var(--digi--color--divider--secondary);--subnav-indicator--background-color--current:var(--digi--color--marking--navigation--level-active)}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root,.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root ul,.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root li{list-style:none;padding:0;margin:0}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root>li:not(:first-child){border-top:var(--digi--navigation-vertical-menu--item--border-top)}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root>li ul digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--font-size:var(--digi--typography--tag--font-size--desktop)}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.primary>.digi-navigation-vertical-menu__item--active{padding-bottom:var(--digi--padding--small)}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.primary .digi-navigation-vertical-menu__item--current-level{--subnav-indicator--background-color:var(--subnav-indicator--background-color--current)}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.primary .digi-navigation-vertical-menu__item--current-level ul{--subnav-indicator--background-color:var(--subnav-indicator--background-color--default)}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.primary .digi-navigation-vertical-menu__item--current-level digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--active-indicator-width:4px}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.primary .digi-navigation-vertical-menu__item--active{position:relative}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.primary .digi-navigation-vertical-menu__item--active>ul{position:relative}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.primary .digi-navigation-vertical-menu__item--active>ul::before{content:\"\";display:inline-block;position:absolute;top:0;bottom:0;z-index:1;left:var(--subnav-indicator--left);width:var(--subnav-indicator--width);background-color:var(--subnav-indicator--background-color)}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.primary .digi-navigation-vertical-menu__item--active>ul .digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--active-indicator-left:var(--digi--padding--medium)}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.primary .digi-navigation-vertical-menu__item--active>ul ul{--subnav-indicator--left:var(--digi--padding--largest)}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.primary .digi-navigation-vertical-menu__item--active>ul ul .digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--active-indicator-left:var(--digi--padding--largest)}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.primary .digi-navigation-vertical-menu__item--active>ul ul ul{--subnav-indicator--left:calc(var(--digi--padding--largest-2) + var(--digi--padding--smaller))}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.primary .digi-navigation-vertical-menu__item--active>ul ul ul .digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--active-indicator-left:calc(var(--digi--padding--largest-2) + var(--digi--padding--smaller))}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.primary .digi-navigation-vertical-menu__item--active>ul ul ul ul{--subnav-indicator--left:calc(var(--digi--padding--largest-2) + var(--digi--padding--largest))}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.primary .digi-navigation-vertical-menu__item--active>ul ul ul ul .digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--active-indicator-left:calc(var(--digi--padding--largest-2) + var(--digi--padding--largest))}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.primary .digi-navigation-vertical-menu__item--active>ul ul ul ul ul{--subnav-indicator--left:calc(var(--digi--padding--largest-2) + var(--digi--padding--largest-2))}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.primary .digi-navigation-vertical-menu__item--active>ul ul ul ul ul .digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--active-indicator-left:calc(var(--digi--padding--largest-2) + var(--digi--padding--largest-2))}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.primary.digi-navigation-vertical-menu__item--current-level::before,.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.primary .digi-navigation-vertical-menu__item--current-level::before{--subnav-indicator--width:var(--subnav-indicator--width--l)}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.primary ul .digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--padding:var(--digi--padding--small) var(--digi--padding--largest)}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.primary ul ul .digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--padding:var(--digi--padding--small) var(--digi--padding--medium) var(--digi--padding--small) calc(var(--digi--padding--largest-2) + var(--digi--padding--smaller))}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.primary ul ul ul .digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--padding:var(--digi--padding--small) var(--digi--padding--medium) var(--digi--padding--small) calc(var(--digi--padding--largest-2) + var(--digi--padding--largest))}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.primary ul ul ul ul .digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--padding:var(--digi--padding--small) var(--digi--padding--medium) var(--digi--padding--small) calc(var(--digi--padding--largest-2) + var(--digi--padding--largest-2))}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.secondary{--subnav-indicator--width:var(--subnav-indicator--width--l)}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.secondary>.digi-navigation-vertical-menu__item--active{position:relative}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.secondary>.digi-navigation-vertical-menu__item--active::before{content:\"\";display:inline-block;position:absolute;top:0;bottom:0;width:var(--subnav-indicator--width);background-color:var(--digi--color--background--pop-out);z-index:1}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.secondary .digi-navigation-vertical-menu__item--deep-active{background-color:var(--digi--color--background--pop-out)}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.secondary .digi-navigation-vertical-menu__item--deep-active>ul>li>digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--toggle-icon--background:var(--digi--color--background--primary);--digi--navigation-vertical-menu-item--toggle-icon--background--active:var(--digi--color--background--primary)}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.secondary ul .digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--padding:var(--digi--padding--small) var(--digi--padding--largest)}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.secondary ul ul .digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--padding:var(--digi--padding--small) var(--digi--padding--medium) var(--digi--padding--small) calc(var(--digi--padding--largest-2) + var(--digi--padding--smaller))}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.secondary ul ul ul .digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--padding:var(--digi--padding--small) var(--digi--padding--medium) var(--digi--padding--small) calc(var(--digi--padding--largest-2) + var(--digi--padding--largest))}.sc-digi-navigation-vertical-menu-s ul.digi-navigation-vertical-menu__list--root.secondary ul ul ul ul .digi-navigation-vertical-menu-item{--digi--navigation-vertical-menu-item--padding:var(--digi--padding--small) var(--digi--padding--medium) var(--digi--padding--small) calc(var(--digi--padding--largest-2) + var(--digi--padding--largest-2))}.sc-digi-navigation-vertical-menu-s li.digi-navigation-vertical-menu__item--highlight>digi-navigation-vertical-menu-item .digi-navigation-vertical-menu-item__button:first-child .digi-navigation-vertical-menu-item__text::after,.sc-digi-navigation-vertical-menu-s li.digi-navigation-vertical-menu__item--highlight>digi-navigation-vertical-menu-item .digi-navigation-vertical-menu-item__link:first-child .digi-navigation-vertical-menu-item__text::after{display:inline-flex;position:relative;align-items:center;justify-content:center;overflow:hidden;content:\"\";width:0.625rem;height:0.625rem;border-radius:0.625rem;line-height:1;transform:translateY(-5px);margin-left:var(--digi--padding--smaller);background:var(--digi--color--background--pop-out)}";
|
|
7
|
-
const DigiNavigationVerticalMenuStyle0 = navigationVerticalMenuCss;
|
|
8
|
-
|
|
9
|
-
const NavigationVerticalMenu = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
registerInstance(this, hostRef);
|
|
12
|
-
this.afOnReady = createEvent(this, "afOnReady", 3);
|
|
13
|
-
this.listItems = [];
|
|
14
|
-
this.afId = randomIdGenerator('digi-navigation-vertical-menu');
|
|
15
|
-
this.afVariation = NavigationVerticalMenuVariation.PRIMARY;
|
|
16
|
-
this.afActiveIndicatorSize = NavigationVerticalMenuActiveIndicatorSize.PRIMARY;
|
|
17
|
-
this.afAriaLabel = undefined;
|
|
18
|
-
}
|
|
19
|
-
linkClickHandler(e) {
|
|
20
|
-
this.setCurrentActiveLevel(e.target);
|
|
21
|
-
this.setClasses(e.target);
|
|
22
|
-
}
|
|
23
|
-
setClasses(el) {
|
|
24
|
-
const activeDeepClass = 'digi-navigation-vertical-menu__item--deep-active';
|
|
25
|
-
const activeClass = 'digi-navigation-vertical-menu__item--active';
|
|
26
|
-
const navList = this.hostElement.querySelector('.digi-navigation-vertical-menu__list');
|
|
27
|
-
const activeNavItems = Array.from(navList.children).filter((item) => item.classList.contains(activeClass));
|
|
28
|
-
activeNavItems.forEach((listItem) => {
|
|
29
|
-
listItem.classList.add(activeDeepClass);
|
|
30
|
-
setClassRecursive(listItem);
|
|
31
|
-
});
|
|
32
|
-
function setClassRecursive(listItem) {
|
|
33
|
-
const arr = Array.from(listItem.children).filter((item) => item.tagName === 'UL');
|
|
34
|
-
const list = arr[0];
|
|
35
|
-
const activeListItems = Array.from(list.children).filter((item) => item.classList.contains(activeClass));
|
|
36
|
-
if (activeListItems.length == 0) {
|
|
37
|
-
removeClassRecursive(list);
|
|
38
|
-
return;
|
|
39
|
-
}
|
|
40
|
-
activeListItems.forEach((item) => {
|
|
41
|
-
item.classList.add(activeDeepClass);
|
|
42
|
-
setClassRecursive(item);
|
|
43
|
-
});
|
|
44
|
-
}
|
|
45
|
-
function removeClassRecursive(item, deepElement = true) {
|
|
46
|
-
const parentEl = item.closest('li');
|
|
47
|
-
if (!parentEl) {
|
|
48
|
-
return;
|
|
49
|
-
}
|
|
50
|
-
if (!deepElement) {
|
|
51
|
-
parentEl.classList.remove(activeDeepClass);
|
|
52
|
-
}
|
|
53
|
-
const deepParent = parentEl.closest('ul');
|
|
54
|
-
if (!deepParent) {
|
|
55
|
-
return;
|
|
56
|
-
}
|
|
57
|
-
removeClassRecursive(deepParent, false);
|
|
58
|
-
}
|
|
59
|
-
const removeUnselected = this.hostElement.querySelectorAll(`.${activeDeepClass}:not(.${activeClass})`);
|
|
60
|
-
removeUnselected.forEach((item) => {
|
|
61
|
-
item.classList.remove(activeDeepClass);
|
|
62
|
-
});
|
|
63
|
-
if (!el.matches('.digi-navigation-vertical-menu-item--has-subnav')) {
|
|
64
|
-
removeClassRecursive(el);
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
componentWillLoad() {
|
|
68
|
-
this.getListItems();
|
|
69
|
-
this.initNav();
|
|
70
|
-
this.setLevelClass();
|
|
71
|
-
}
|
|
72
|
-
componentDidLoad() {
|
|
73
|
-
this.initCurrentActiveLevel();
|
|
74
|
-
this.afOnReady.emit();
|
|
75
|
-
}
|
|
76
|
-
componentWillUpdate() {
|
|
77
|
-
this.getListItems();
|
|
78
|
-
this.initNav();
|
|
79
|
-
this.setLevelClass();
|
|
80
|
-
}
|
|
81
|
-
initCurrentActiveLevel() {
|
|
82
|
-
let elActiveSubnav = this.hostElement.querySelector('digi-navigation-vertical-menu-item[af-active-subnav="true"]');
|
|
83
|
-
if (elActiveSubnav) {
|
|
84
|
-
const getDeep = (elActiveSubnav) => {
|
|
85
|
-
const deepEl = elActiveSubnav
|
|
86
|
-
.closest('li')
|
|
87
|
-
.querySelector('ul')
|
|
88
|
-
.querySelector('digi-navigation-vertical-menu-item[af-active-subnav="true"]');
|
|
89
|
-
return deepEl ? deepEl : null;
|
|
90
|
-
};
|
|
91
|
-
const checkRecursive = (deepEl) => {
|
|
92
|
-
const elToCheck = getDeep(deepEl);
|
|
93
|
-
if (elToCheck) {
|
|
94
|
-
elActiveSubnav = elToCheck;
|
|
95
|
-
checkRecursive(elToCheck);
|
|
96
|
-
}
|
|
97
|
-
else {
|
|
98
|
-
elActiveSubnav = deepEl;
|
|
99
|
-
}
|
|
100
|
-
};
|
|
101
|
-
checkRecursive(elActiveSubnav);
|
|
102
|
-
this.setCurrentActiveLevel(elActiveSubnav);
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
setCurrentActiveLevel(targetElement) {
|
|
106
|
-
const currentLevelClass = 'digi-navigation-vertical-menu__item--current-level';
|
|
107
|
-
const target = targetElement;
|
|
108
|
-
const oldTarget = this.hostElement.querySelectorAll('.digi-navigation-vertical-menu__item--current-level');
|
|
109
|
-
oldTarget.forEach((el) => {
|
|
110
|
-
el.classList.remove(currentLevelClass);
|
|
111
|
-
});
|
|
112
|
-
let subnav = target.closest('li').querySelector('ul');
|
|
113
|
-
if (target.matches('.digi-navigation-vertical-menu-item--has-subnav')) {
|
|
114
|
-
subnav = target.closest('ul');
|
|
115
|
-
subnav.classList.add(currentLevelClass);
|
|
116
|
-
return;
|
|
117
|
-
}
|
|
118
|
-
if (subnav) {
|
|
119
|
-
subnav.classList.add(currentLevelClass);
|
|
120
|
-
}
|
|
121
|
-
else {
|
|
122
|
-
subnav = target.closest('ul');
|
|
123
|
-
subnav.classList.add(currentLevelClass);
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
setLevelClass() {
|
|
127
|
-
this.hostElement
|
|
128
|
-
.querySelector('ul')
|
|
129
|
-
.classList.remove('primary', 'secondary');
|
|
130
|
-
this.hostElement
|
|
131
|
-
.querySelector('ul')
|
|
132
|
-
.classList.add('digi-navigation-vertical-menu__list--root', this.afVariation);
|
|
133
|
-
}
|
|
134
|
-
initNav() {
|
|
135
|
-
const $ul = this.hostElement.querySelectorAll('ul');
|
|
136
|
-
const $li = this.hostElement.querySelectorAll('li');
|
|
137
|
-
$ul.forEach((item) => item.classList.add('digi-navigation-vertical-menu__list'));
|
|
138
|
-
$li.forEach((item) => item.classList.add('digi-navigation-vertical-menu__item'));
|
|
139
|
-
}
|
|
140
|
-
async afMSetCurrentActiveLevel(e) {
|
|
141
|
-
this.setCurrentActiveLevel(e);
|
|
142
|
-
this.initNav();
|
|
143
|
-
this.setClasses(e);
|
|
144
|
-
}
|
|
145
|
-
getListItems() {
|
|
146
|
-
const menuItems = this.hostElement.children;
|
|
147
|
-
if (!menuItems || menuItems.length <= 0) {
|
|
148
|
-
logger.warn(`The slot contains no children elements.`, this.hostElement);
|
|
149
|
-
return;
|
|
150
|
-
}
|
|
151
|
-
this.listItems = [...Array.from(menuItems)].map((filter) => {
|
|
152
|
-
return {
|
|
153
|
-
outerHTML: filter.outerHTML
|
|
154
|
-
};
|
|
155
|
-
});
|
|
156
|
-
}
|
|
157
|
-
get cssModifiers() {
|
|
158
|
-
return {
|
|
159
|
-
'digi-navigation-vertical-menu': false,
|
|
160
|
-
'digi-navigation-vertical-menu--primary': this.afVariation === NavigationVerticalMenuVariation.PRIMARY,
|
|
161
|
-
'digi-navigation-vertical-menu--secondary': this.afVariation === NavigationVerticalMenuVariation.SECONDARY,
|
|
162
|
-
'digi-navigation-vertical-menu--indicator--secondary': this.afActiveIndicatorSize ===
|
|
163
|
-
NavigationVerticalMenuActiveIndicatorSize.SECONDARY
|
|
164
|
-
};
|
|
165
|
-
}
|
|
166
|
-
render() {
|
|
167
|
-
return (h("nav", { key: '09adacd9e3d3b39226148431bd8ac025f3b6d5d4', class: Object.assign({ 'digi-navigation-vertical-menu': true }, this.cssModifiers), id: this.afId, "aria-label": this.afAriaLabel }, h("slot", { key: '87c7454dfb753c4df6b0c8aa5a41633ad3463ca4' })));
|
|
168
|
-
}
|
|
169
|
-
get hostElement() { return getElement(this); }
|
|
170
|
-
};
|
|
171
|
-
NavigationVerticalMenu.style = DigiNavigationVerticalMenuStyle0;
|
|
172
|
-
|
|
173
|
-
export { NavigationVerticalMenu as digi_navigation_vertical_menu };
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
var FormRadiobuttonLayout;
|
|
2
|
-
(function (FormRadiobuttonLayout) {
|
|
3
|
-
FormRadiobuttonLayout["INLINE"] = "inline";
|
|
4
|
-
FormRadiobuttonLayout["BLOCK"] = "block";
|
|
5
|
-
})(FormRadiobuttonLayout || (FormRadiobuttonLayout = {}));
|
|
6
|
-
|
|
7
|
-
var FormRadiobuttonValidation;
|
|
8
|
-
(function (FormRadiobuttonValidation) {
|
|
9
|
-
FormRadiobuttonValidation["ERROR"] = "error";
|
|
10
|
-
})(FormRadiobuttonValidation || (FormRadiobuttonValidation = {}));
|
|
11
|
-
|
|
12
|
-
var FormRadiobuttonVariation;
|
|
13
|
-
(function (FormRadiobuttonVariation) {
|
|
14
|
-
FormRadiobuttonVariation["PRIMARY"] = "primary";
|
|
15
|
-
FormRadiobuttonVariation["SECONDARY"] = "secondary";
|
|
16
|
-
})(FormRadiobuttonVariation || (FormRadiobuttonVariation = {}));
|
|
17
|
-
|
|
18
|
-
export { FormRadiobuttonLayout as F, FormRadiobuttonValidation as a, FormRadiobuttonVariation as b };
|