npm - @ukic/web-components - Versions diffs - 3.0.0-alpha.4 → 3.0.0-alpha.6 - Mend

@ukic/web-components 3.0.0-alpha.4 → 3.0.0-alpha.6

Files changed (735) hide show

package/dist/core/{p-7b35de65.entry.js → p-7124b387.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as i,H as o,g as n}from"./p-6b5e91e2.js";import{d as a}from"./p-b7eb8ef9.js";const s='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host:not[hidden]{display:block}:host{color:var(--ic-color-text-primary)}';const r=class{constructor(i){e(this,i);this.tabPanelCreated=t(this,"tabPanelCreated",7);this.tabPanelRemoved=t(this,"tabPanelRemoved",7);this.monochrome=false;this.panelId=undefined;this.selectedTab=undefined;this.tabPosition=undefined;this.theme="inherit"}connectedCallback(){this.tabPanelCreated.emit(this.el)}render(){const{panelId:e,selectedTab:t,theme:n}=this;return i(o,{class:{[`ic-theme-${n}`]:n!=="inherit"},role:"tabpanel",hidden:a(e)&&a(t)?!(e===t):true},i("div",null,i("slot",null)))}get el(){return n(this)}};r.style=s;export{r as ic_tab_panel};
-//# sourceMappingURL=p-7b35de65.entry.js.map
+import{r as e,c as t,h as i,H as o,g as n}from"./p-6b5e91e2.js";import{d as a}from"./p-48e98730.js";const s='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host:not[hidden]{display:block}:host{color:var(--ic-color-text-primary)}';const r=class{constructor(i){e(this,i);this.tabPanelCreated=t(this,"tabPanelCreated",7);this.tabPanelRemoved=t(this,"tabPanelRemoved",7);this.monochrome=false;this.panelId=undefined;this.selectedTab=undefined;this.tabPosition=undefined;this.theme="inherit"}connectedCallback(){this.tabPanelCreated.emit(this.el)}render(){const{panelId:e,selectedTab:t,theme:n}=this;return i(o,{class:{[`ic-theme-${n}`]:n!=="inherit"},role:"tabpanel",hidden:a(e)&&a(t)?!(e===t):true},i("div",null,i("slot",null)))}get el(){return n(this)}};r.style=s;export{r as ic_tab_panel};
+//# sourceMappingURL=p-7124b387.entry.js.map

package/dist/core/p-810744b5.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,f as t,h as i,H as n,g as o}from"./p-6b5e91e2.js";import{c as a,g as r,s,i as c,a as h,d,I as l}from"./p-48e98730.js";const m='/! normalize.css v8.0.1 \| MIT License \| github.com/necolas/normalize.css /html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;background-color:var(--ic-brand-color-tertiary);--hero-heading-bottom-margin:var(--ic-space-md);--hero-keyline:var(--ic-hero-keyline)}:host(.ic-hero-dark){background-color:var(--ic-brand-color-secondary);--ic-hero-heading:var(--ic-color-text-primary-light);--ic-hero-body:var(--ic-color-text-primary-light);--ic-hero-secondary-heading:var(--ic-color-text-primary-light);--hero-keyline:var(--ic-brand-text-color)}.heading{--ic-typography-color:var(--ic-hero-heading)}.subheading{--ic-typography-color:var(--ic-hero-body)}.secondary-container{--ic-typography-color:var(--ic-hero-secondary-heading);display:flex;flex-direction:column;justify-content:center;border-left:var(--ic-space-xxxs) solid var(--hero-keyline)}:host(.has-background-image){background-repeat:no-repeat;background-position:right -6.25rem;background-size:auto calc(100% + 6.25rem);box-shadow:var(--ic-elevation-inset)}@media (prefers-reduced-motion){:host(.has-background-image){background-position:right -6.25rem !important}}ic-typography.heading-bottom-spacing{margin-bottom:var(--hero-heading-bottom-margin)}.section-container{display:flex;align-items:center;height:100%}.left-container{padding:var(--ic-space-xl) 0}.left-container:not(.left-container-full-width){flex-basis:50%}.left-container-full-width{width:100%}.right-container{flex-basis:50%}.interaction-container{display:flex;gap:var(--ic-space-md);margin-top:var(--ic-space-lg);flex-wrap:wrap}.secondary-subheading{margin-top:var(--ic-space-xxs)}:host([content-aligned="left"]) .left-container,:host([content-aligned="left"]) .interaction-container{justify-content:flex-start;text-align:left}:host([content-aligned="center"]) .left-container,:host([content-aligned="center"]) .interaction-container{justify-content:center;text-align:center}@media (min-width: 992px){.left-container-full-width{width:66.6%}}@media (min-width: 1044px){:host,.section-container{min-height:13rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:10.813rem}.left-container:not(.left-container-full-width){flex-basis:66.6%}.left-container{min-height:9rem}.right-container{flex-basis:33.3%;margin-left:3.125rem}.secondary-container{min-height:9rem}.secondary-heading,.secondary-subheading{margin-left:3.938rem}}@media (min-width: 801px) and (max-width: 1043px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:5.922rem}.right-container{margin-left:3.125rem}}@media (min-width: 641px) and (max-width: 800px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:2.125rem}.right-container{margin-left:3.125rem}}@media (min-width: 481px) and (max-width: 640px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:13rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:17.5rem}:host(.secondary-heading) .section-container,:host(.ic-hero-small) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}.right-container{margin-bottom:2.5rem}}@media (max-width: 480px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:12rem}:host,.right-container{margin-bottom:var(--ic-space-md)}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:16.5rem}:host(.secondary-heading) .section-container,:host(.ic-hero-small) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}}';const g=class{constructor(i){e(this,i);this.hostMutationObserver=null;this.hostMutationCallback=e=>{if(e.some((({type:e,addedNodes:t,removedNodes:i})=>e==="childList"?a(t,i,"secondary"):false))){t(this)}};this.foregroundColor=r();this.rightContent=false;this.leftContentFullWidth=!this.rightContent&&this.secondaryHeading===undefined;this.scrollFactor="right -100px";this.aligned="left";this.backgroundImage=undefined;this.contentAligned="left";this.disableBackgroundParallax=false;this.heading=undefined;this.secondaryHeading=undefined;this.secondarySubheading=undefined;this.size="medium";this.subheading=undefined}disconnectedCallback(){var e;(e=this.hostMutationObserver)===null\|\|e===void 0?void 0:e.disconnect()}componentWillLoad(){this.rightContent=s(this.el,"secondary")}componentDidLoad(){!c(this.el,"heading")&&h([{prop:this.heading,propName:"heading"}],"Hero");this.hostMutationObserver=new MutationObserver(this.hostMutationCallback);this.hostMutationObserver.observe(this.el,{childList:true})}componentWillRender(){this.rightContent=s(this.el,"secondary")}brandChangeHandler(e){this.foregroundColor=e.detail.mode}doScroll(){if(this.disableBackgroundParallax){return}const e=document.scrollingElement.scrollTop;const t=.4;const i=-100+e*t;this.scrollFactor="right "+i+"px"}render(){const{aligned:e,size:t,heading:o,subheading:a,secondaryHeading:r,secondarySubheading:s,foregroundColor:c,backgroundImage:h,scrollFactor:m}=this;let g={};if(d(h)){g={"background-image":"url("+h+")","background-position":m}}return i(n,{class:{[`ic-hero-${l.Dark}`]:c===l.Dark,["has-background-image"]:h!==undefined,["ic-hero-small"]:t==="small",["secondary-heading"]:!!r},style:g},i("ic-section-container",{aligned:e,fullHeight:true,class:"section-container"},i("div",{class:{["left-container"]:true,["left-container-full-width"]:this.leftContentFullWidth}},i("div",{class:"heading"},i("slot",{name:"heading"},i("ic-typography",{variant:t==="small"?"h2":"h1",class:{["heading-bottom-spacing"]:t!=="small"}},i("h2",null,o)))),i("div",{class:"subheading"},i("slot",{name:"subheading"},i("ic-typography",{variant:"body"},a))),i("div",{class:"interaction-container"},i("slot",{name:"interaction"}))),(d(r)\|\|this.rightContent)&&i("div",{class:"right-container"},i("slot",{name:"secondary"},r&&i("div",{class:"secondary-container"},i("div",{class:"secondary-heading"},i("ic-typography",{variant:"h4"},i("h3",null,r))),i("div",{class:"secondary-subheading"},i("ic-typography",{variant:"subtitle-small"},s)))))))}get el(){return o(this)}};g.style=m;export{g as ic_hero};
2	+ //# sourceMappingURL=p-810744b5.entry.js.map

package/dist/core/p-810744b5.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["icHeroCss","Hero","this","hostMutationObserver","hostMutationCallback","mutationList","some","type","addedNodes","removedNodes","checkSlotInChildMutations","forceUpdate","getBrandForegroundAppearance","rightContent","secondaryHeading","undefined","disconnectedCallback","_a","disconnect","componentWillLoad","slotHasContent","el","componentDidLoad","isSlotUsed","onComponentRequiredPropUndefined","prop","heading","propName","MutationObserver","observe","childList","componentWillRender","brandChangeHandler","ev","foregroundColor","detail","mode","doScroll","disableBackgroundParallax","scrolltotop","document","scrollingElement","scrollTop","factor","y","scrollFactor","render","aligned","size","subheading","secondarySubheading","backgroundImage","style","isPropDefined","h","Host","class","IcBrandForegroundEnum","Dark","fullHeight","leftContentFullWidth","name","variant"],"sources":["src/components/ic-hero/ic-hero.css?tag=ic-hero&encapsulation=shadow","src/components/ic-hero/ic-hero.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n background-color: var(--ic-brand-color-tertiary);\n\n --hero-heading-bottom-margin: var(--ic-space-md);\n --hero-keyline: var(--ic-hero-keyline);\n}\n\n:host(.ic-hero-dark) {\n background-color: var(--ic-brand-color-secondary);\n\n --ic-hero-heading: var(--ic-color-text-primary-light);\n --ic-hero-body: var(--ic-color-text-primary-light);\n --ic-hero-secondary-heading: var(--ic-color-text-primary-light);\n --hero-keyline: var(--ic-brand-text-color);\n}\n\n.heading {\n --ic-typography-color: var(--ic-hero-heading);\n}\n\n.subheading {\n --ic-typography-color: var(--ic-hero-body);\n}\n\n.secondary-container {\n --ic-typography-color: var(--ic-hero-secondary-heading);\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n border-left: var(--ic-space-xxxs) solid var(--hero-keyline);\n}\n\n:host(.has-background-image) {\n background-repeat: no-repeat;\n background-position: right -6.25rem;\n background-size: auto calc(100% + 6.25rem);\n box-shadow: var(--ic-elevation-inset);\n}\n\n@media (prefers-reduced-motion) {\n :host(.has-background-image) {\n background-position: right -6.25rem !important;\n }\n}\n\nic-typography.heading-bottom-spacing {\n margin-bottom: var(--hero-heading-bottom-margin);\n}\n\n.section-container {\n display: flex;\n align-items: center;\n height: 100%;\n}\n\n.left-container {\n padding: var(--ic-space-xl) 0;\n}\n\n.left-container:not(.left-container-full-width) {\n flex-basis: 50%;\n}\n\n.left-container-full-width {\n width: 100%;\n}\n\n.right-container {\n flex-basis: 50%;\n}\n\n.interaction-container {\n display: flex;\n gap: var(--ic-space-md);\n margin-top: var(--ic-space-lg);\n flex-wrap: wrap;\n}\n\n.secondary-subheading {\n margin-top: var(--ic-space-xxs);\n}\n\n:host([content-aligned=\"left\"]) .left-container,\n:host([content-aligned=\"left\"]) .interaction-container {\n justify-content: flex-start;\n text-align: left;\n}\n\n:host([content-aligned=\"center\"]) .left-container,\n:host([content-aligned=\"center\"]) .interaction-container {\n justify-content: center;\n text-align: center;\n}\n\n@media (min-width: 992px) {\n .left-container-full-width {\n width: 66.6%;\n }\n}\n\n@media (min-width: 1044px) {\n :host,\n .section-container {\n min-height: 13rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 10.813rem;\n }\n\n .left-container:not(.left-container-full-width) {\n flex-basis: 66.6%;\n }\n\n .left-container {\n min-height: 9rem;\n }\n\n .right-container {\n flex-basis: 33.3%;\n margin-left: 3.125rem;\n }\n\n .secondary-container {\n min-height: 9rem;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 3.938rem;\n }\n}\n\n@media (min-width: 801px) and (max-width: 1043px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 16rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 15rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 14rem;\n }\n\n .left-container {\n min-height: 10rem;\n }\n\n .secondary-container {\n min-height: 10rem;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 5.922rem;\n }\n\n .right-container {\n margin-left: 3.125rem;\n }\n}\n\n@media (min-width: 641px) and (max-width: 800px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 16rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 15rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 14rem;\n }\n\n .left-container {\n min-height: 10rem;\n }\n\n .secondary-container {\n min-height: 10rem;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 2.125rem;\n }\n\n .right-container {\n margin-left: 3.125rem;\n }\n}\n\n@media (min-width: 481px) and (max-width: 640px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 13rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 10.813rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 17.5rem;\n }\n\n :host(.secondary-heading) .section-container,\n :host(.ic-hero-small) .section-container,\n .section-container {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .left-container {\n height: fit-content;\n }\n\n .secondary-container {\n height: fit-content;\n border: none;\n }\n\n .right-container {\n margin-bottom: 2.5rem;\n }\n}\n\n@media (max-width: 480px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 12rem;\n }\n\n :host,\n .right-container {\n margin-bottom: var(--ic-space-md);\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 10.813rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 16.5rem;\n }\n\n :host(.secondary-heading) .section-container,\n :host(.ic-hero-small) .section-container,\n .section-container {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .left-container {\n height: fit-content;\n }\n\n .secondary-container {\n height: fit-content;\n border: none;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Listen,\n forceUpdate,\n} from \"@stencil/core\";\nimport {\n IcAlignment,\n IcSizesNoLarge,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n} from \"../../utils/types\";\nimport {\n slotHasContent,\n getBrandForegroundAppearance,\n onComponentRequiredPropUndefined,\n isPropDefined,\n isSlotUsed,\n checkSlotInChildMutations,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/**\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n */\n\n@Component({\n tag: \"ic-hero\",\n styleUrl: \"ic-hero.css\",\n shadow: true,\n})\nexport class Hero {\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcHeroElement;\n\n @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n @State() rightContent: boolean = false;\n // set by above state\n @State() leftContentFullWidth: boolean =\n !this.rightContent && this.secondaryHeading === undefined;\n @State() scrollFactor: string = \"right -100px\";\n\n /**\n * The alignment of the hero.\n */\n @Prop() aligned: IcAlignment = \"left\";\n\n /**\n * The optional background image.\n */\n @Prop() backgroundImage?: string;\n\n /**\n * The alignment of the hero content.\n */\n @Prop() contentAligned: IcHeroContentAlignments = \"left\";\n\n /**\n * If `true`, the background image (if set) will not scroll using a parallax effect.\n */\n @Prop() disableBackgroundParallax?: boolean = false;\n\n /**\n * The heading of the hero. An <h2> level heading.\n */\n @Prop() heading: string;\n\n /**\n * The optional secondary heading, an <h3> level heading. Replaced by slotted right content.\n */\n @Prop() secondaryHeading?: string;\n\n /**\n * The optional secondary subheading, replaced by slotted right content.\n */\n @Prop() secondarySubheading?: string;\n\n /**\n * The size of the hero component.\n */\n @Prop() size?: IcSizesNoLarge = \"medium\";\n\n /**\n * The description for the hero.\n */\n @Prop() subheading?: string;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n this.rightContent = slotHasContent(this.el, \"secondary\");\n }\n\n componentDidLoad(): void {\n !isSlotUsed(this.el, \"heading\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Hero\"\n );\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n componentWillRender(): void {\n this.rightContent = slotHasContent(this.el, \"secondary\");\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n this.foregroundColor = ev.detail.mode;\n }\n\n @Listen(\"scroll\", { target: \"document\" })\n doScroll(): void {\n if (this.disableBackgroundParallax) {\n return;\n }\n\n const scrolltotop = document.scrollingElement.scrollTop;\n const factor = 0.4;\n const y = -100 + scrolltotop * factor;\n this.scrollFactor = \"right \" + y + \"px\";\n }\n\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n if (\n mutationList.some(({ type, addedNodes, removedNodes }) =>\n type === \"childList\"\n ? checkSlotInChildMutations(addedNodes, removedNodes, \"secondary\")\n : false\n )\n ) {\n forceUpdate(this);\n }\n };\n\n render() {\n const {\n aligned,\n size,\n heading,\n subheading,\n secondaryHeading,\n secondarySubheading,\n foregroundColor,\n backgroundImage,\n scrollFactor,\n } = this;\n\n let style = {};\n\n if (isPropDefined(backgroundImage)) {\n style = {\n \"background-image\": \"url(\" + backgroundImage + \")\",\n \"background-position\": scrollFactor,\n };\n }\n\n return (\n <Host\n class={{\n [`ic-hero-${IcBrandForegroundEnum.Dark}`]:\n foregroundColor === IcBrandForegroundEnum.Dark,\n [\"has-background-image\"]: backgroundImage !== undefined,\n [\"ic-hero-small\"]: size === \"small\",\n [\"secondary-heading\"]: !!secondaryHeading,\n }}\n style={style}\n >\n <ic-section-container\n aligned={aligned}\n fullHeight\n class=\"section-container\"\n >\n <div\n class={{\n [\"left-container\"]: true,\n [\"left-container-full-width\"]: this.leftContentFullWidth,\n }}\n >\n <div class=\"heading\">\n <slot name=\"heading\">\n <ic-typography\n variant={size === \"small\" ? \"h2\" : \"h1\"}\n class={{\n [\"heading-bottom-spacing\"]: size !== \"small\",\n }}\n >\n <h2>{heading}</h2>\n </ic-typography>\n </slot>\n </div>\n <div class=\"subheading\">\n <slot name=\"subheading\">\n <ic-typography variant=\"body\">{subheading}</ic-typography>\n </slot>\n </div>\n <div class=\"interaction-container\">\n <slot name=\"interaction\"></slot>\n </div>\n </div>\n {(isPropDefined(secondaryHeading) || this.rightContent) && (\n <div class=\"right-container\">\n <slot name=\"secondary\">\n {secondaryHeading && (\n <div class=\"secondary-container\">\n <div class=\"secondary-heading\">\n <ic-typography variant=\"h4\">\n <h3>{secondaryHeading}</h3>\n </ic-typography>\n </div>\n <div class=\"secondary-subheading\">\n <ic-typography variant=\"subtitle-small\">\n {secondarySubheading}\n </ic-typography>\n </div>\n </div>\n )}\n </slot>\n </div>\n )}\n </ic-section-container>\n </Host>\n );\n }\n}\n"],"mappings":"oIAAA,MAAMA,EAAY,oyN,MCuCLC,EAAI,M,yBACPC,KAAAC,qBAAyC,KAkGzCD,KAAAE,qBAAwBC,IAC9B,GACEA,EAAaC,MAAK,EAAGC,OAAMC,aAAYC,kBACrCF,IAAS,YACLG,EAA0BF,EAAYC,EAAc,aACpD,QAEN,CACAE,EAAYT,K,wBAtG8BU,I,kBACb,M,2BAG9BV,KAAKW,cAAgBX,KAAKY,mBAAqBC,U,kBAClB,e,aAKD,O,mDAUmB,O,+BAKJ,M,oGAoBd,S,0BAOhC,oBAAAC,G,OACEC,EAAAf,KAAKC,wBAAoB,MAAAc,SAAA,SAAAA,EAAEC,Y,CAG7B,iBAAAC,GACEjB,KAAKW,aAAeO,EAAelB,KAAKmB,GAAI,Y,CAG9C,gBAAAC,IACGC,EAAWrB,KAAKmB,GAAI,YACnBG,EACE,CAAC,CAAEC,KAAMvB,KAAKwB,QAASC,SAAU,YACjC,QAGJzB,KAAKC,qBAAuB,IAAIyB,iBAAiB1B,KAAKE,sBACtDF,KAAKC,qBAAqB0B,QAAQ3B,KAAKmB,GAAI,CACzCS,UAAW,M,CAIf,mBAAAC,GACE7B,KAAKW,aAAeO,EAAelB,KAAKmB,GAAI,Y,CAI9C,kBAAAW,CAAmBC,GACjB/B,KAAKgC,gBAAkBD,EAAGE,OAAOC,I,CAInC,QAAAC,GACE,GAAInC,KAAKoC,0BAA2B,CAClC,M,CAGF,MAAMC,EAAcC,SAASC,iBAAiBC,UAC9C,MAAMC,EAAS,GACf,MAAMC,GAAK,IAAML,EAAcI,EAC/BzC,KAAK2C,aAAe,SAAWD,EAAI,I,CAerC,MAAAE,GACE,MAAMC,QACJA,EAAOC,KACPA,EAAItB,QACJA,EAAOuB,WACPA,EAAUnC,iBACVA,EAAgBoC,oBAChBA,EAAmBhB,gBACnBA,EAAeiB,gBACfA,EAAeN,aACfA,GACE3C,KAEJ,IAAIkD,EAAQ,GAEZ,GAAIC,EAAcF,GAAkB,CAClCC,EAAQ,CACN,mBAAoB,OAASD,EAAkB,IAC/C,sBAAuBN,E,CAI3B,OACES,EAACC,EAAI,CACHC,MAAO,CACL,CAAC,WAAWC,EAAsBC,QAChCxB,IAAoBuB,EAAsBC,KAC5C,CAAC,wBAAyBP,IAAoBpC,UAC9C,CAAC,iBAAkBiC,IAAS,QAC5B,CAAC,uBAAwBlC,GAE3BsC,MAAOA,GAEPE,EAAA,wBACEP,QAASA,EACTY,WAAU,KACVH,MAAM,qBAENF,EAAA,OACEE,MAAO,CACL,CAAC,kBAAmB,KACpB,CAAC,6BAA8BtD,KAAK0D,uBAGtCN,EAAA,OAAKE,MAAM,WACTF,EAAA,QAAMO,KAAK,WACTP,EAAA,iBACEQ,QAASd,IAAS,QAAU,KAAO,KACnCQ,MAAO,CACL,CAAC,0BAA2BR,IAAS,UAGvCM,EAAA,UAAK5B,MAIX4B,EAAA,OAAKE,MAAM,cACTF,EAAA,QAAMO,KAAK,cACTP,EAAA,iBAAeQ,QAAQ,QAAQb,KAGnCK,EAAA,OAAKE,MAAM,yBACTF,EAAA,QAAMO,KAAK,mBAGbR,EAAcvC,IAAqBZ,KAAKW,eACxCyC,EAAA,OAAKE,MAAM,mBACTF,EAAA,QAAMO,KAAK,aACR/C,GACCwC,EAAA,OAAKE,MAAM,uBACTF,EAAA,OAAKE,MAAM,qBACTF,EAAA,iBAAeQ,QAAQ,MACrBR,EAAA,UAAKxC,KAGTwC,EAAA,OAAKE,MAAM,wBACTF,EAAA,iBAAeQ,QAAQ,kBACpBZ,Q"}

package/dist/core/p-810f5a2d.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as i,h as a,H as e,g as o}from"./p-6b5e91e2.js";import{i as n,M as s,e as r,D as l,g as c,o as h,f as d,a as p,H as m,I as g,d as u}from"./p-48e98730.js";const v='/! normalize.css v8.0.1 \| MIT License \| github.com/necolas/normalize.css /html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;color:var(--ic-top-navigation-text);width:100%;position:relative;--ic-typography-color:var(--ic-top-navigation-text);--ic-button-secondary-text-monochrome:var(--ic-brand-text-color);--ic-button-secondary-border-monochrome:var(--ic-brand-text-color)}:host(.dark){color:var(--ic-color-text-primary-light);--ic-typography-color:var(--ic-color-text-primary-light);--ic-top-navigation-logo:var(--ic-color-icon-neutral);--ic-top-navigation-icon:var(--ic-color-icon-neutral);--ic-top-navigation-theme:var(--ic-color-icon-neutral);--ic-top-navigation-status-tag:var(--ic-color-background-primary-dark);--ic-top-navigation-status-tag-text:var(--ic-color-brand-text);--ic-top-navigation-status-tag-secondary:var(--ic-state-layer-darken-10);--navigation-link-colour:var(--ic-color-text-primary-light)}:host ::slotted(ic-navigation-item){--navigation-link-colour:var(--ic-top-navigation-text)}:host(.dark) ::slotted(ic-navigation-button){--ic-button-icon-monochrome:var(--ic-color-text-primary-light)}::slotted(ic-navigation-button){--ic-button-icon-monochrome:white}:host .top-navigation{background-color:var(--ic-top-navigation-background);height:-moz-max-content;height:max-content}:host(.fullwidth-searchbar) slot[name="search"]::slotted(form){width:100%}:host .title-link{display:inline-flex;align-items:center;text-decoration:none;padding:var(--ic-space-xxs);transition:var(--ic-easing-transition-fast)}:host .title-link,:host .title-link:visited,:host .title-link:active,:host .title-link ::slotted(a),:host .title-link:visited ::slotted(a),:host .title-link:active ::slotted(a){color:var(--ic-top-navigation-icon-and-label);text-decoration:none;outline:none}:host .title-link:hover:not(:focus){background-color:var(--ic-top-navigation-title-hover)}:host .title-link:active:not(:focus){background-color:var(--ic-top-navigation-title-pressed)}:host .title-link:hover{border-radius:var(--ic-border-radius)}:host .title-link:focus,:host .title-link:focus-within{border-radius:var(--ic-border-radius);box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline)}:host .title-link ic-typography{font-weight:600}:host .nav-panel-container{border-top:var(--ic-space-1px) solid var(--ic-top-navigation-keyline);padding:0 var(--ic-space-lg);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin));display:flex}:host(.dark) .nav-panel-container{border-top:var(--ic-border-keyline-darken)}.top-panel-container{display:flex;padding-top:0.5rem;padding-bottom:0.5rem}.navigation-tabs{margin-top:calc(-1 * var(--ic-space-1px))}.app-details-container{display:flex;align-items:center;flex:1 1 auto;margin-right:var(--ic-space-md)}.app-icon-container{display:flex;padding-right:var(--ic-space-xs)}.icon-buttons-container{display:flex;margin-left:var(--ic-space-md)}.icon-buttons-container ::slotted(nav){display:flex}.title-wrap{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}:host .app-status{border-radius:var(--ic-space-md);background-color:var(--ic-top-navigation-status-tag);color:var(--ic-top-navigation-status-tag-text);--ic-typography-color:var(--ic-top-navigation-status-tag-text);padding:var(--ic-space-xxs) var(--ic-space-lg);margin-left:var(--ic-space-md);flex:1 1 0;max-width:-moz-fit-content;max-width:fit-content}:host .app-version{border-radius:var(--ic-space-md);background-color:var(--ic-top-navigation-status-tag-secondary);color:var(--ic-top-navigation-status-tag);padding:var(--ic-space-xxs) var(--ic-space-sm);margin-left:var(--ic-space-xs);flex:1 1 0;max-width:-moz-fit-content;max-width:fit-content}slot[name="app-icon"]::slotted(){fill:var(--ic-top-navigation-logo);width:2em;height:2em}slot[name="toggle-icon"] svg{fill:var(--ic-top-navigation-icon)}.search-menu-container{justify-content:right;display:flex;align-items:center}.menu-button-container{margin-left:var(--ic-space-md)}.menu-button-container .navigation-landmark-button-text{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.search-actions-container{display:flex}.menu-buttons-slot{display:flex;flex-direction:column}.navigation-landmark-text{position:absolute;width:var(--ic-space-1px);height:var(--ic-space-1px);padding:0;margin:calc(-1 var(--ic-space-1px));overflow:hidden}.navigation-item-list{display:flex;list-style:none;height:2.75rem}.navigation-item-list::-webkit-scrollbar{display:none}:host ic-section-container{padding-bottom:0 !important;padding-top:0 !important}@media screen and (min-width: 993px){.app-details-container{margin-right:var(--ic-space-lg)}}@media screen and (max-width: 1200px){:host .nav-panel-container{padding:0 var(--ic-space-md)}}:host(.mobile-mode) .app-status,:host(.mobile-mode) .app-version{display:none}:host(.mobile-mode) .title-link{margin-right:var(--ic-space-xs)}:host(.mobile-mode) .search-menu-container{max-width:10rem}:host(.mobile-mode) .search-bar-container{display:flex;justify-content:center;align-items:center;border-top:var(--ic-border-keyline-darken);height:4rem;padding-left:var(--ic-space-md);padding-right:var(--ic-space-md);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin))}@media screen and (max-width: 576px){:host .title-link{margin-right:var(--ic-space-xxxs);word-break:break-word;-webkit-hyphens:none;hyphens:none}.top-panel-container{min-height:2.5rem}.search-bar-container{margin-top:0;height:3.5rem;padding-left:var(--ic-space-xs);padding-right:var(--ic-space-xs)}.menu-button-container{margin-left:var(--ic-space-sm)}slot[name="app-icon"]::slotted(){width:1.5em;height:1.5em}slot[name="toggle-icon"] svg{width:1.5em;height:1.5em}}@media (forced-colors: active){:host .top-navigation{border-bottom:var(--ic-border-hc)}.app-status,.app-version{border:var(--ic-border-hc)}slot[name="app-icon"]::slotted(){fill:currentcolor}}';const b=class{constructor(a){t(this,a);this.icNavigationMenuClosed=i(this,"icNavigationMenuClosed",7);this.icNavigationMenuOpened=i(this,"icNavigationMenuOpened",7);this.icTopNavResized=i(this,"icTopNavResized",7);this.hasAppIcon=false;this.hasIconButtons=false;this.hasNavigation=false;this.hasSearchSlotContent=false;this.resizeObserver=null;this.searchBar=null;this.checkSlots=()=>{this.hasAppIcon=n(this.el,"app-icon");this.hasNavigation=n(this.el,"navigation");this.hasIconButtons=n(this.el,"buttons");this.hasSearchSlotContent=n(this.el,"search")};this.initialiseSearchBar=()=>{if(this.hasSearchSlotContent){const t=s(this.el,"search");if((t===null\|\|t===void 0?void 0:t.tagName)==="IC-SEARCH-BAR"){this.searchBar=t}else if((t===null\|\|t===void 0?void 0:t.tagName)==="FORM"){this.searchBar=t.querySelector("ic-search-bar")}if(this.searchBar!==null){this.searchBar.hideLabel=true}}};this.menuButtonClick=()=>{this.showNavMenu(true)};this.searchButtonMouseDownHandler=()=>{this.searchButtonClick=true};this.searchButtonClickHandler=()=>{this.toggleSearchBar();this.searchButtonClick=false};this.resizeObserverCallback=t=>{if(t!==this.deviceSize){this.deviceSize=t;if(t>this.customMobileBreakpoint){this.showNavMenu(false);if(this.mobileSearchBarVisible){this.toggleSearchBar()}}this.icTopNavResized.emit({size:t});if(this.searchBar&&document.activeElement===this.searchBar){this.searchBar.setAttribute("hidden","true");this.searchBar.removeAttribute("hidden");setTimeout((()=>{this.searchBar.focus()}),100)}}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{this.resizeObserverCallback(r())}));this.resizeObserver.observe(this.el)};this.deviceSize=l.XL;this.foregroundColor=c();this.hasFullWidthSearchBar=false;this.mobileSearchBarVisible=false;this.mobileSearchHiddenOnBlur=false;this.navMenuVisible=false;this.searchButtonClick=false;this.searchValue="";this.contentAligned="full-width";this.customMobileBreakpoint=l.L;this.href="/";this.inline=false;this.shortAppTitle="";this.status="";this.theme="inherit";this.version="";this.appTitle=undefined}watchPropHandler(t,i){h(i,t,this.initialiseSearchBar)}disconnectedCallback(){var t;(t=this.resizeObserver)===null\|\|t===void 0?void 0:t.disconnect()}componentWillLoad(){this.checkSlots();this.deviceSize=r();this.initialiseSearchBar()}componentDidLoad(){d(this.runResizeObserver);!n(this.el,"app-title")&&p([{prop:this.appTitle,propName:"app-title"}],"Top Navigation")}componentWillRender(){this.checkSlots()}navBarMenuCloseHandler(){this.showNavMenu(false);this.el.shadowRoot.querySelector("#menu-button").focus()}searchInputBlurHandler({detail:t}){if(t!==null){if(this.mobileSearchBarVisible&&!this.searchButtonClick){this.toggleSearchBar()}this.searchValue=t.value}}searchValueChangeHandler({detail:t}){this.searchValue=t.value}brandChangeHandler({detail:t}){this.foregroundColor=t.mode}toggleSearchBar(){this.mobileSearchBarVisible=!this.mobileSearchBarVisible;if(this.searchBar!==null){this.mobileSearchButtonEl.setAttribute("aria-label",`${this.mobileSearchBarVisible?"Hide":"Show"} search`);this.hasFullWidthSearchBar=this.mobileSearchBarVisible;this.searchBar.fullWidth=this.mobileSearchBarVisible;if(this.mobileSearchBarVisible){setTimeout((()=>{this.searchBar.focus()}),100)}}}showNavMenu(t){this.navMenuVisible=t;(t?this.icNavigationMenuOpened:this.icNavigationMenuClosed).emit();document.body.style.height=t?"100%":"auto";document.body.style.overflow=t?"hidden":"auto"}render(){const{appTitle:t,contentAligned:i,customMobileBreakpoint:o,deviceSize:s,el:r,foregroundColor:c,hasAppIcon:h,hasFullWidthSearchBar:d,hasIconButtons:p,hasNavigation:v,hasSearchSlotContent:b,href:f,inline:x,menuButtonClick:y,mobileSearchBarVisible:k,navMenuVisible:w,searchButtonClickHandler:z,searchButtonMouseDownHandler:H,shortAppTitle:M,status:C,version:B,theme:S}=this;const T=C!=="";const j=B!=="";const N=v\|\|p\|\|T\|\|j;const $=s<=l.S?"medium":"large";const I=t!==""&&u(t);const R=s<=o;const V=R?s<=l.S?"subtitle-small":"h4":"h3";const A=`${k?"Hide":"Show"} search`;const O=s<=l.S?"small":"medium";const D=n(r,"short-app-title");const L=n(r,"app-title");const W=L?"div":"a";const q=W=="a"&&{href:f};return a(e,{class:{"fullwidth-searchbar":d,"mobile-mode":R,[g.Dark]:c===g.Dark,[`ic-theme-${S}`]:S!=="inherit"}},a("div",{class:"top-navigation"},a("ic-section-container",{aligned:i,"full-height":true},a("header",{role:"banner"},a("div",{class:"top-panel-container"},a("div",{class:"app-details-container"},(I\|\|L)&&a(W,Object.assign({class:"title-link"},q),h&&a("div",{class:"app-icon-container"},a("slot",{name:"app-icon"})),s<=l.S&&(!m(M)\|\|D)?a("ic-typography",{variant:"subtitle-small","aria-label":(!L\|\|!D)&&`${t} (${M})`},a("h1",null,D?a("slot",{name:"short-app-title"}):M)):a("ic-typography",{variant:V},a("h1",{class:"title-wrap"},L?a("slot",{name:"app-title"}):t))),T&&a("div",{class:"app-status"},a("ic-typography",{"aria-label":"app tag",variant:"label-uppercase",class:"app-status-text"},C)),j&&a("div",{class:"app-version"},a("ic-typography",{variant:"label",class:"app-version-text","aria-label":"app version"},B))),(b\|\|N)&&a("div",{class:"search-menu-container"},a("div",{class:"search-actions-container"},!R&&a("slot",{name:"search"}),b&&R&&a("ic-button",{id:"search-toggle-button",ref:t=>this.mobileSearchButtonEl=t,onMouseDown:H,variant:"icon-tertiary",monochrome:true,size:$,"aria-label":A,theme:c==g.Light?g.Dark:g.Light,onClick:z},a("slot",{name:"toggle-icon"},a("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"#ffffff"},a("path",{d:"M0 0h24v24H0V0z",fill:"none"}),a("path",{d:"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"})))),p&&!R&&a("div",{class:"icon-buttons-container"},a("slot",{name:"buttons"})),N&&R&&a("div",{class:"menu-button-container"},a("span",{id:"navigation-landmark-button-text",class:"navigation-landmark-button-text","aria-hidden":"true"},"Main navigation button"),a("nav",{"aria-labelledby":"navigation-landmark-button-text","aria-hidden":`${w}`},a("ic-button",{id:"menu-button",theme:c==g.Light?g.Dark:g.Light,variant:"secondary",monochrome:true,"aria-expanded":"false","aria-haspopup":"true","aria-label":`Open ${v?"navigation":"app"} menu`,size:O,onClick:y},"Menu",a("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#ffffff",slot:"left-icon"},a("path",{d:"M0 0h24v24H0V0z",fill:"none"}),a("path",{d:"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"})))))))),k&&a("div",{class:"search-bar-container"},a("slot",{name:"search"})),v&&!R&&a("div",{class:"navigation-tabs"},a("span",{id:"navigation-landmark-text",class:"navigation-landmark-text","aria-hidden":"true"},"Main pages"),a("nav",{"aria-labelledby":"navigation-landmark-text",class:"nav-panel-container"},a("ic-horizontal-scroll",{monochrome:true,appearance:c},a("ul",{class:"navigation-item-list",tabindex:"-1"},a("slot",{name:"navigation"})))))))),w&&a("ic-navigation-menu",{version:B,status:C,class:{["inline"]:x}},p&&a("div",{class:"menu-buttons-slot",slot:"buttons"},a("slot",{name:"buttons"})),a("ul",{slot:"navigation"},a("slot",{name:"navigation"}))))}get el(){return o(this)}static get watchers(){return{appTitle:["watchPropHandler"]}}};b.style=v;export{b as ic_top_navigation};
2	+ //# sourceMappingURL=p-810f5a2d.entry.js.map

package/dist/core/p-810f5a2d.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["icTopNavigationCss","TopNavigation","this","hasAppIcon","hasIconButtons","hasNavigation","hasSearchSlotContent","resizeObserver","searchBar","checkSlots","isSlotUsed","el","initialiseSearchBar","slot","getSlot","tagName","querySelector","hideLabel","menuButtonClick","showNavMenu","searchButtonMouseDownHandler","searchButtonClick","searchButtonClickHandler","toggleSearchBar","resizeObserverCallback","currSize","deviceSize","customMobileBreakpoint","mobileSearchBarVisible","icTopNavResized","emit","size","document","activeElement","setAttribute","removeAttribute","setTimeout","focus","runResizeObserver","ResizeObserver","getCurrentDeviceSize","observe","DEVICE_SIZES","XL","getBrandForegroundAppearance","L","watchPropHandler","newValue","oldValue","onComponentPropUndefinedChange","disconnectedCallback","_a","disconnect","componentWillLoad","componentDidLoad","checkResizeObserver","onComponentRequiredPropUndefined","prop","appTitle","propName","componentWillRender","navBarMenuCloseHandler","shadowRoot","searchInputBlurHandler","detail","searchValue","value","searchValueChangeHandler","brandChangeHandler","foregroundColor","mode","mobileSearchButtonEl","hasFullWidthSearchBar","fullWidth","show","navMenuVisible","icNavigationMenuOpened","icNavigationMenuClosed","body","style","height","overflow","render","contentAligned","href","inline","shortAppTitle","status","version","theme","hasStatus","hasVersion","hasMenuContent","searchButtonSize","S","hasTitle","isPropDefined","overMobileBreakpoint","appTitleVariant","mobileSearchButtonTitle","menuSize","shortAppTitleSlot","hasAppTitleSlot","Component","attrs","h","Host","class","IcBrandForegroundEnum","Dark","aligned","role","Object","assign","name","isEmptyString","variant","id","ref","onMouseDown","monochrome","Light","onClick","xmlns","viewBox","fill","d","width","appearance","tabindex"],"sources":["src/components/ic-top-navigation/ic-top-navigation.css?tag=ic-top-navigation&encapsulation=shadow","src/components/ic-top-navigation/ic-top-navigation.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n color: var(--ic-top-navigation-text);\n width: 100%;\n position: relative;\n\n --ic-typography-color: var(--ic-top-navigation-text);\n\n --ic-button-secondary-text-monochrome: var(--ic-brand-text-color);\n --ic-button-secondary-border-monochrome: var(--ic-brand-text-color);\n}\n\n:host(.dark) {\n color: var(--ic-color-text-primary-light);\n --ic-typography-color: var(--ic-color-text-primary-light);\n --ic-top-navigation-logo: var(--ic-color-icon-neutral);\n --ic-top-navigation-icon: var(--ic-color-icon-neutral);\n --ic-top-navigation-theme: var(--ic-color-icon-neutral);\n --ic-top-navigation-status-tag: var(--ic-color-background-primary-dark);\n --ic-top-navigation-status-tag-text: var(--ic-color-brand-text);\n --ic-top-navigation-status-tag-secondary: var(--ic-state-layer-darken-10);\n --navigation-link-colour: var(--ic-color-text-primary-light);\n}\n\n:host ::slotted(ic-navigation-item) {\n --navigation-link-colour: var(--ic-top-navigation-text);\n}\n\n:host(.dark) ::slotted(ic-navigation-button) {\n --ic-button-icon-monochrome: var(--ic-color-text-primary-light);\n}\n\n::slotted(ic-navigation-button) {\n --ic-button-icon-monochrome: white;\n}\n\n:host .top-navigation {\n background-color: var(--ic-top-navigation-background);\n height: max-content;\n}\n\n:host(.fullwidth-searchbar) slot[name=\"search\"]::slotted(form) {\n width: 100%;\n}\n\n:host .title-link {\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n padding: var(--ic-space-xxs);\n transition: var(--ic-easing-transition-fast);\n}\n\n:host .title-link,\n:host .title-link:visited,\n:host .title-link:active,\n:host .title-link ::slotted(a),\n:host .title-link:visited ::slotted(a),\n:host .title-link:active ::slotted(a) {\n color: var(--ic-top-navigation-icon-and-label);\n text-decoration: none;\n outline: none;\n}\n\n:host .title-link:hover:not(:focus) {\n background-color: var(--ic-top-navigation-title-hover);\n}\n\n:host .title-link:active:not(:focus) {\n background-color: var(--ic-top-navigation-title-pressed);\n}\n\n:host .title-link:hover {\n border-radius: var(--ic-border-radius);\n}\n\n:host .title-link:focus,\n:host .title-link:focus-within {\n border-radius: var(--ic-border-radius);\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host .title-link ic-typography {\n font-weight: 600;\n}\n\n:host .nav-panel-container {\n border-top: var(--ic-space-1px) solid var(--ic-top-navigation-keyline);\n padding: 0 var(--ic-space-lg);\n margin-left: calc(-1 * var(--section-container-margin));\n margin-right: calc(-1 * var(--section-container-margin));\n display: flex;\n}\n\n:host(.dark) .nav-panel-container {\n border-top: var(--ic-border-keyline-darken);\n}\n\n.top-panel-container {\n display: flex;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.navigation-tabs {\n margin-top: calc(-1 * var(--ic-space-1px));\n}\n\n.app-details-container {\n display: flex;\n align-items: center;\n flex: 1 1 auto;\n margin-right: var(--ic-space-md);\n}\n\n.app-icon-container {\n display: flex;\n padding-right: var(--ic-space-xs);\n}\n\n.icon-buttons-container {\n display: flex;\n margin-left: var(--ic-space-md);\n}\n\n.icon-buttons-container ::slotted(nav) {\n display: flex;\n}\n\n.title-wrap {\n overflow-wrap: break-word;\n word-wrap: break-word;\n -ms-word-break: break-all;\n word-break: break-word;\n hyphens: auto;\n}\n\n:host .app-status {\n border-radius: var(--ic-space-md);\n background-color: var(--ic-top-navigation-status-tag);\n color: var(--ic-top-navigation-status-tag-text);\n --ic-typography-color: var(--ic-top-navigation-status-tag-text);\n padding: var(--ic-space-xxs) var(--ic-space-lg);\n margin-left: var(--ic-space-md);\n flex: 1 1 0;\n max-width: fit-content;\n}\n\n:host .app-version {\n border-radius: var(--ic-space-md);\n background-color: var(--ic-top-navigation-status-tag-secondary);\n color: var(--ic-top-navigation-status-tag);\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n margin-left: var(--ic-space-xs);\n flex: 1 1 0;\n max-width: fit-content;\n}\n\nslot[name=\"app-icon\"]::slotted(*) {\n fill: var(--ic-top-navigation-logo);\n width: 2em;\n height: 2em;\n}\n\nslot[name=\"toggle-icon\"] svg {\n fill: var(--ic-top-navigation-icon);\n}\n\n.search-menu-container {\n justify-content: right;\n display: flex;\n align-items: center;\n}\n\n.menu-button-container {\n margin-left: var(--ic-space-md);\n}\n\n.menu-button-container .navigation-landmark-button-text {\n position: absolute;\n left: -10000px;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n}\n\n.search-actions-container {\n display: flex;\n}\n\n.menu-buttons-slot {\n display: flex;\n flex-direction: column;\n}\n\n.navigation-landmark-text {\n position: absolute;\n width: var(--ic-space-1px);\n height: var(--ic-space-1px);\n padding: 0;\n margin: calc(-1 * var(--ic-space-1px));\n overflow: hidden;\n}\n\n.navigation-item-list {\n display: flex;\n list-style: none;\n height: 2.75rem;\n}\n\n.navigation-item-list::-webkit-scrollbar {\n display: none;\n}\n\n:host ic-section-container {\n padding-bottom: 0 !important;\n padding-top: 0 !important;\n}\n\n@media screen and (min-width: 993px) {\n .app-details-container {\n margin-right: var(--ic-space-lg);\n }\n}\n\n/* large */\n@media screen and (max-width: 1200px) {\n :host .nav-panel-container {\n padding: 0 var(--ic-space-md);\n }\n}\n\n/** Mobile styling **/\n:host(.mobile-mode) .app-status,\n:host(.mobile-mode) .app-version {\n display: none;\n}\n\n:host(.mobile-mode) .title-link {\n margin-right: var(--ic-space-xs);\n}\n\n:host(.mobile-mode) .search-menu-container {\n max-width: 10rem;\n}\n\n:host(.mobile-mode) .search-bar-container {\n display: flex;\n justify-content: center;\n align-items: center;\n border-top: var(--ic-border-keyline-darken);\n height: 4rem;\n padding-left: var(--ic-space-md);\n padding-right: var(--ic-space-md);\n margin-left: calc(-1 * var(--section-container-margin));\n margin-right: calc(-1 * var(--section-container-margin));\n}\n\n/* x small */\n@media screen and (max-width: 576px) {\n :host .title-link {\n margin-right: var(--ic-space-xxxs);\n word-break: break-word;\n hyphens: none;\n }\n\n .top-panel-container {\n min-height: 2.5rem;\n }\n\n .search-bar-container {\n margin-top: 0;\n height: 3.5rem;\n padding-left: var(--ic-space-xs);\n padding-right: var(--ic-space-xs);\n }\n\n .menu-button-container {\n margin-left: var(--ic-space-sm);\n }\n\n slot[name=\"app-icon\"]::slotted(*) {\n width: 1.5em;\n height: 1.5em;\n }\n\n slot[name=\"toggle-icon\"] svg {\n width: 1.5em;\n height: 1.5em;\n }\n}\n\n@media (forced-colors: active) {\n :host .top-navigation {\n border-bottom: var(--ic-border-hc);\n }\n\n .app-status,\n .app-version {\n border: var(--ic-border-hc);\n }\n\n slot[name=\"app-icon\"]::slotted(*) {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Listen,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\n\nimport {\n IcTypographyVariants,\n IcAlignment,\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcBrand,\n IcDeviceSizes,\n IcValueEventDetail,\n IcThemeMode,\n} from \"../../utils/types\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n getBrandForegroundAppearance,\n getSlot,\n onComponentPropUndefinedChange,\n onComponentRequiredPropUndefined,\n isSlotUsed,\n isEmptyString,\n isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcSearchBarBlurEventDetail } from \"../ic-search-bar/ic-search-bar.types\";\n\n/**\n * @slot app-icon - Content will be rendered to left of app title. Anything that is slotted here will be hidden from screen readers.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot short-app-title - Handle routing by nesting a route in the short app title (to be displayed in place of app title on small screen sizes).\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n */\n@Component({\n tag: \"ic-top-navigation\",\n styleUrl: \"ic-top-navigation.css\",\n shadow: true,\n})\nexport class TopNavigation {\n private hasAppIcon: boolean = false;\n private hasIconButtons: boolean = false;\n private hasNavigation: boolean = false;\n private hasSearchSlotContent: boolean = false;\n private mobileSearchButtonEl: HTMLIcButtonElement;\n private resizeObserver: ResizeObserver = null;\n private searchBar: HTMLIcSearchBarElement = null;\n\n @Element() el: HTMLIcTopNavigationElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n @State() hasFullWidthSearchBar: boolean = false;\n @State() mobileSearchBarVisible: boolean = false;\n @State() mobileSearchHiddenOnBlur: boolean = false;\n @State() navMenuVisible: boolean = false;\n @State() searchButtonClick: boolean = false;\n @State() searchValue: string = \"\";\n\n /**\n * The alignment of the top navigation content.\n */\n @Prop() contentAligned: IcAlignment = \"full-width\";\n /**\n * Can set a custom breakpoint for the top navigation to switch to mobile mode.\n * Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.\n */\n @Prop() customMobileBreakpoint: IcDeviceSizes = DEVICE_SIZES.L;\n /**\n * The URL to navigate to when the app title is clicked.\n */\n @Prop() href: string = \"/\";\n\n /**\n * If `true`, the flyout navigation menu on small devices will be contained by the parent element.\n */\n @Prop() inline: boolean = false;\n\n /**\n * The short title of the app to be displayed at small screen sizes in place of the app title.\n */\n @Prop() shortAppTitle: string = \"\";\n\n /**\n * The status info to be displayed.\n */\n @Prop() status: string = \"\";\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /**\n * The version info to be displayed.\n */\n @Prop() version: string = \"\";\n\n /**\n * The app title to be displayed. This is required, unless a slotted app title link is used.\n */\n @Prop() appTitle: string;\n\n @Watch(\"appTitle\")\n watchPropHandler(newValue: string, oldValue: string): void {\n //added for Gatsby rehydration issue where prop is initially undefined but then changes to actual value\n //this watch can be removed once Gatsby hydration issue is resolved\n onComponentPropUndefinedChange(\n oldValue,\n newValue,\n this.initialiseSearchBar\n );\n }\n\n /**\n * @internal - Emitted when the menu is closed.\n */\n @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n /**\n * @internal - Emitted when the menu is opened.\n */\n @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n /**\n * Emitted when the top navigation is resized.\n */\n @Event() icTopNavResized: EventEmitter<{ size: number }>;\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n this.checkSlots();\n this.deviceSize = getCurrentDeviceSize();\n this.initialiseSearchBar();\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n !isSlotUsed(this.el, \"app-title\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.appTitle, propName: \"app-title\" }],\n \"Top Navigation\"\n );\n }\n\n componentWillRender(): void {\n this.checkSlots();\n }\n\n @Listen(\"icNavigationMenuClose\", {})\n navBarMenuCloseHandler(): void {\n this.showNavMenu(false);\n this.el.shadowRoot.querySelector<HTMLElement>(\"#menu-button\").focus();\n }\n\n @Listen(\"icSearchBarBlur\", {})\n searchInputBlurHandler({\n detail,\n }: CustomEvent<IcSearchBarBlurEventDetail>): void {\n if (detail !== null) {\n if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n this.toggleSearchBar();\n }\n this.searchValue = detail.value as string;\n }\n }\n\n @Listen(\"icChange\", {})\n searchValueChangeHandler({ detail }: CustomEvent<IcValueEventDetail>): void {\n this.searchValue = detail.value as string;\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n this.foregroundColor = detail.mode;\n }\n\n private checkSlots = () => {\n this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n };\n\n private initialiseSearchBar = () => {\n if (this.hasSearchSlotContent) {\n const slot = getSlot(this.el, \"search\");\n if (slot?.tagName === \"IC-SEARCH-BAR\") {\n this.searchBar = slot as HTMLIcSearchBarElement;\n } else if (slot?.tagName === \"FORM\") {\n this.searchBar = slot.querySelector(\"ic-search-bar\");\n }\n\n if (this.searchBar !== null) {\n this.searchBar.hideLabel = true;\n }\n }\n };\n\n private toggleSearchBar(): void {\n this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n if (this.searchBar !== null) {\n this.mobileSearchButtonEl.setAttribute(\n \"aria-label\",\n `${this.mobileSearchBarVisible ? \"Hide\" : \"Show\"} search`\n );\n this.hasFullWidthSearchBar = this.mobileSearchBarVisible;\n this.searchBar.fullWidth = this.mobileSearchBarVisible;\n if (this.mobileSearchBarVisible) {\n setTimeout(() => {\n this.searchBar.focus();\n }, 100);\n }\n }\n }\n\n private menuButtonClick = () => {\n this.showNavMenu(true);\n };\n\n private showNavMenu(show: boolean): void {\n this.navMenuVisible = show;\n (show ? this.icNavigationMenuOpened : this.icNavigationMenuClosed).emit();\n document.body.style.height = show ? \"100%\" : \"auto\";\n document.body.style.overflow = show ? \"hidden\" : \"auto\";\n }\n\n private searchButtonMouseDownHandler = () => {\n this.searchButtonClick = true;\n };\n\n private searchButtonClickHandler = () => {\n this.toggleSearchBar();\n this.searchButtonClick = false;\n };\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n if (currSize > this.customMobileBreakpoint) {\n this.showNavMenu(false);\n if (this.mobileSearchBarVisible) {\n this.toggleSearchBar();\n }\n }\n this.icTopNavResized.emit({\n size: currSize,\n });\n if (this.searchBar && document.activeElement === this.searchBar) {\n this.searchBar.setAttribute(\"hidden\", \"true\");\n //remove attribute again as this trigger a redraw & applies css\n this.searchBar.removeAttribute(\"hidden\");\n setTimeout(() => {\n this.searchBar.focus();\n }, 100);\n }\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback(getCurrentDeviceSize());\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n render() {\n const {\n appTitle,\n contentAligned,\n customMobileBreakpoint,\n deviceSize,\n el,\n foregroundColor,\n hasAppIcon,\n hasFullWidthSearchBar,\n hasIconButtons,\n hasNavigation,\n hasSearchSlotContent,\n href,\n inline,\n menuButtonClick,\n mobileSearchBarVisible,\n navMenuVisible,\n searchButtonClickHandler,\n searchButtonMouseDownHandler,\n shortAppTitle,\n status,\n version,\n theme,\n } = this;\n\n const hasStatus = status !== \"\";\n const hasVersion = version !== \"\";\n const hasMenuContent =\n hasNavigation || hasIconButtons || hasStatus || hasVersion;\n\n const searchButtonSize = deviceSize <= DEVICE_SIZES.S ? \"medium\" : \"large\";\n const hasTitle = appTitle !== \"\" && isPropDefined(appTitle);\n const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;\n\n const appTitleVariant: IcTypographyVariants = overMobileBreakpoint\n ? deviceSize <= DEVICE_SIZES.S\n ? \"subtitle-small\"\n : \"h4\"\n : \"h3\";\n\n const mobileSearchButtonTitle = `${\n mobileSearchBarVisible ? \"Hide\" : \"Show\"\n } search`;\n const menuSize = deviceSize <= DEVICE_SIZES.S ? \"small\" : \"medium\";\n\n const shortAppTitleSlot = isSlotUsed(el, \"short-app-title\");\n const hasAppTitleSlot = isSlotUsed(el, \"app-title\");\n const Component = hasAppTitleSlot ? \"div\" : \"a\";\n const attrs = Component == \"a\" && {\n href: href,\n };\n\n return (\n <Host\n class={{\n \"fullwidth-searchbar\": hasFullWidthSearchBar,\n \"mobile-mode\": overMobileBreakpoint,\n [IcBrandForegroundEnum.Dark]:\n foregroundColor === IcBrandForegroundEnum.Dark,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class=\"top-navigation\">\n <ic-section-container aligned={contentAligned} full-height>\n <header role=\"banner\">\n <div class=\"top-panel-container\">\n <div class=\"app-details-container\">\n {(hasTitle || hasAppTitleSlot) && (\n <Component class=\"title-link\" {...attrs}>\n {hasAppIcon && (\n <div class=\"app-icon-container\">\n <slot name=\"app-icon\" />\n </div>\n )}\n {deviceSize <= DEVICE_SIZES.S &&\n (!isEmptyString(shortAppTitle) || shortAppTitleSlot) ? (\n <ic-typography\n variant=\"subtitle-small\"\n aria-label={\n (!hasAppTitleSlot || !shortAppTitleSlot) &&\n `${appTitle} (${shortAppTitle})`\n }\n >\n <h1>\n {shortAppTitleSlot ? (\n <slot name=\"short-app-title\"></slot>\n ) : (\n shortAppTitle\n )}\n </h1>\n </ic-typography>\n ) : (\n <ic-typography variant={appTitleVariant}>\n <h1 class=\"title-wrap\">\n {hasAppTitleSlot ? (\n <slot name=\"app-title\"></slot>\n ) : (\n appTitle\n )}\n </h1>\n </ic-typography>\n )}\n </Component>\n )}\n {hasStatus && (\n <div class=\"app-status\">\n <ic-typography\n aria-label=\"app tag\"\n variant=\"label-uppercase\"\n class=\"app-status-text\"\n >\n {status}\n </ic-typography>\n </div>\n )}\n {hasVersion && (\n <div class=\"app-version\">\n <ic-typography\n variant=\"label\"\n class=\"app-version-text\"\n aria-label=\"app version\"\n >\n {version}\n </ic-typography>\n </div>\n )}\n </div>\n\n {(hasSearchSlotContent || hasMenuContent) && (\n <div class=\"search-menu-container\">\n <div class=\"search-actions-container\">\n {!overMobileBreakpoint && <slot name=\"search\"></slot>}\n\n {hasSearchSlotContent && overMobileBreakpoint && (\n <ic-button\n id=\"search-toggle-button\"\n ref={(el) => (this.mobileSearchButtonEl = el)}\n onMouseDown={searchButtonMouseDownHandler}\n variant=\"icon-tertiary\"\n monochrome\n size={searchButtonSize}\n aria-label={mobileSearchButtonTitle}\n theme={\n foregroundColor == IcBrandForegroundEnum.Light\n ? IcBrandForegroundEnum.Dark\n : IcBrandForegroundEnum.Light\n }\n onClick={searchButtonClickHandler}\n >\n <slot name=\"toggle-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"#ffffff\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n </svg>\n </slot>\n </ic-button>\n )}\n\n {hasIconButtons && !overMobileBreakpoint && (\n <div class=\"icon-buttons-container\">\n <slot name=\"buttons\"></slot>\n </div>\n )}\n {hasMenuContent && overMobileBreakpoint && (\n <div class=\"menu-button-container\">\n <span\n id=\"navigation-landmark-button-text\"\n class=\"navigation-landmark-button-text\"\n aria-hidden=\"true\"\n >\n Main navigation button\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-button-text\"\n aria-hidden={`${navMenuVisible}`}\n >\n <ic-button\n id=\"menu-button\"\n theme={\n foregroundColor == IcBrandForegroundEnum.Light\n ? IcBrandForegroundEnum.Dark\n : IcBrandForegroundEnum.Light\n }\n variant=\"secondary\"\n monochrome\n aria-expanded=\"false\"\n aria-haspopup=\"true\"\n aria-label={`Open ${\n hasNavigation ? \"navigation\" : \"app\"\n } menu`}\n size={menuSize}\n onClick={menuButtonClick}\n >\n Menu\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#ffffff\"\n slot=\"left-icon\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n </svg>\n </ic-button>\n </nav>\n </div>\n )}\n </div>\n </div>\n )}\n </div>\n\n {mobileSearchBarVisible && (\n <div class=\"search-bar-container\">\n <slot name=\"search\"></slot>\n </div>\n )}\n\n {hasNavigation && !overMobileBreakpoint && (\n <div class=\"navigation-tabs\">\n <span\n id=\"navigation-landmark-text\"\n class=\"navigation-landmark-text\"\n aria-hidden=\"true\"\n >\n Main pages\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-text\"\n class=\"nav-panel-container\"\n >\n <ic-horizontal-scroll\n monochrome\n appearance={foregroundColor}\n >\n <ul class=\"navigation-item-list\" tabindex=\"-1\">\n <slot name=\"navigation\"></slot>\n </ul>\n </ic-horizontal-scroll>\n </nav>\n </div>\n )}\n </header>\n </ic-section-container>\n </div>\n {navMenuVisible && (\n <ic-navigation-menu\n version={version}\n status={status}\n class={{\n [\"inline\"]: inline,\n }}\n >\n {hasIconButtons && (\n <div class=\"menu-buttons-slot\" slot=\"buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n )}\n <ul slot=\"navigation\">\n <slot name=\"navigation\"></slot>\n </ul>\n </ic-navigation-menu>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/core/p-8a2670c1.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as n,f as e,h as t,H as i,g as r}from"./p-6b5e91e2.js";import{c as o,r as a,i as s,a as d,h as c,I as l}from"./p-48e98730.js";import{C as h}from"./p-3b185c32.js";const m='/! normalize.css v8.0.1 \| MIT License \| github.com/necolas/normalize.css /\n\n/* Document\n ========================================================================== /\n\n/\n 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n /\n\nhtml {\n line-height: 1.15; / 1 /\n -webkit-text-size-adjust: 100%; / 2 /\n}\n\n/ Sections\n ========================================================================== /\n\n/\n Remove the margin in all browsers.\n /\n\nbody {\n margin: 0;\n}\n\n/\n Render the `main` element consistently in IE.\n /\n\nmain {\n display: block;\n}\n\n/\n Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n /\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/ Grouping content\n ========================================================================== /\n\n/\n 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n /\n\nhr {\n box-sizing: content-box; / 1 /\n height: 0; / 1 /\n overflow: visible; / 2 /\n}\n\n/\n 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n /\n\npre {\n font-family: monospace, monospace; / 1 /\n font-size: 1em; / 2 /\n}\n\n/ Text-level semantics\n ========================================================================== /\n\n/\n Remove the gray background on active links in IE 10.\n /\n\na {\n background-color: transparent;\n}\n\n/\n 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n /\n\nabbr[title] {\n border-bottom: none; / 1 /\n text-decoration: underline; / 2 /\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted; / 2 /\n}\n\n/\n Add the correct font weight in Chrome, Edge, and Safari.\n /\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/\n 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n /\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace; / 1 /\n font-size: 1em; / 2 /\n}\n\n/\n Add the correct font size in all browsers.\n /\n\nsmall {\n font-size: 80%;\n}\n\n/\n Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n /\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/ Embedded content\n ========================================================================== /\n\n/\n Remove the border on images inside links in IE 10.\n /\n\nimg {\n border-style: none;\n}\n\n/ Forms\n ========================================================================== /\n\n/\n 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n /\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; / 1 /\n font-size: 100%; / 1 /\n line-height: 1.15; / 1 /\n margin: 0; / 2 /\n}\n\n/\n Show the overflow in IE.\n * 1. Show the overflow in Edge.\n /\n\nbutton,\ninput {\n / 1 /\n overflow: visible;\n}\n\n/\n Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n /\n\nbutton,\nselect {\n / 1 /\n text-transform: none;\n}\n\n/\n Correct the inability to style clickable types in iOS and Safari.\n /\n\nbutton,\n[type="button"],\n[type="reset"],\n[type="submit"] {\n -webkit-appearance: button;\n}\n\n/\n Remove the inner border and padding in Firefox.\n /\n\nbutton::-moz-focus-inner,\n[type="button"]::-moz-focus-inner,\n[type="reset"]::-moz-focus-inner,\n[type="submit"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/\n Restore the focus styles unset by the previous rule.\n /\n\nbutton:-moz-focusring,\n[type="button"]:-moz-focusring,\n[type="reset"]:-moz-focusring,\n[type="submit"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/\n Correct the padding in Firefox.\n /\n\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/\n 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n /\n\nlegend {\n box-sizing: border-box; / 1 /\n color: inherit; / 2 /\n display: table; / 1 /\n max-width: 100%; / 1 /\n padding: 0; / 3 /\n white-space: normal; / 1 /\n}\n\n/\n Add the correct vertical alignment in Chrome, Firefox, and Opera.\n /\n\nprogress {\n vertical-align: baseline;\n}\n\n/\n Remove the default vertical scrollbar in IE 10+.\n /\n\ntextarea {\n overflow: auto;\n}\n\n/\n 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n /\n\n[type="checkbox"],\n[type="radio"] {\n box-sizing: border-box; / 1 /\n padding: 0; / 2 /\n}\n\n/\n Correct the cursor style of increment and decrement buttons in Chrome.\n /\n\n[type="number"]::-webkit-inner-spin-button,\n[type="number"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/\n 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n /\n\n[type="search"] {\n -webkit-appearance: textfield; / 1 /\n outline-offset: -2px; / 2 /\n}\n\n/\n Remove the inner padding in Chrome and Safari on macOS.\n /\n\n[type="search"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/\n 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n /\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; / 1 /\n font: inherit; / 2 /\n}\n\n/ Interactive\n ========================================================================== /\n\n/\n * Add the correct display in Edge, IE 10+, and Firefox.\n /\n\ndetails {\n display: block;\n}\n\n/\n * Add the correct display in all browsers.\n /\n\nsummary {\n display: list-item;\n}\n\n/ Misc\n ========================================================================== /\n\n/\n Add the correct display in IE 10+.\n /\n\ntemplate {\n display: none;\n}\n\n/\n Add the correct display in IE 10.\n /\n\n[hidden] {\n display: none;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font-style: inherit;\n vertical-align: baseline;\n}\n\n\n:host {\n display: flex;\n}\n\na {\n text-decoration: none !important;\n color: var(--ic-card-text-primary) !important;\n}\n\na:visited {\n color: var(--ic-card-link-action-dark) !important;\n}\n\nbutton {\n border: none;\n background-color: transparent;\n outline: var(--ic-hc-focus-outline);\n}\n\n.card {\n display: flex;\n flex-direction: column;\n border: var(--ic-space-1px) solid var(--ic-card-border-primary);\n border-radius: var(--ic-border-radius);\n box-sizing: border-box;\n padding: var(--ic-space-md);\n text-align: left;\n color: var(--ic-card-text-primary);\n transition: var(--ic-easing-transition-fast);\n position: relative;\n width: inherit;\n min-width: -moz-fit-content;\n min-width: fit-content;\n height: -moz-fit-content;\n height: fit-content;\n min-height: 100%;\n\n ::slotted(svg) {\n fill: var(--ic-card-icon);\n }\n &.monochrome {\n border: var(--ic-border-width) solid var(--ic-card-border-monochrome);\n }\n &.fullwidth {\n width: 100%;\n }\n &.clickable {\n &:hover {\n background-color: var(--ic-card-background-hover);\n border: var(--ic-space-1px) solid var(--ic-card-hover-border-color);\n cursor: pointer;\n }\n &.focussed,\n &:focus {\n background-color: var(--ic-card-background-hover);\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n border: var(--ic-space-1px) solid var(--ic-card-pressed-border-color);\n }\n &:active {\n background-color: var(--ic-card-background-pressed);\n box-shadow: var(--ic-border-focus);\n\n .card-title {\n text-decoration: none;\n }\n }\n .card-title {\n --ic-typography-color: var(--ic-card-clickable-text);\n\n color: var(--ic-card-clickable-text);\n text-decoration: underline;\n text-decoration-thickness: var(--ic-space-1px);\n }\n }\n &.disabled {\n border: var(--ic-space-1px) dashed var(--ic-card-disabled-border-color);\n\n .card-message,\n .subheading,\n .card-title {\n --ic-typography-color: var(--ic-card-disabled-text);\n }\n .card-title {\n text-decoration: underline;\n text-decoration-thickness: var(--ic-space-1px);\n text-decoration-color: var(--ic-card-disabled-text);\n color: var(--ic-card-disabled-text);\n }\n ::slotted(svg) {\n fill: var(--ic-card-disabled-text);\n }\n }\n}\n\n.card-header {\n display: flex;\n align-items: center;\n}\n\n.icon {\n display: flex;\n align-items: center;\n padding-right: var(--ic-space-xs);\n}\n\n.card.clickable:hover .card-title,\n.card.clickable:focus .card-title,\n.card.clickable.focussed .card-title {\n display: inline-block;\n border-bottom: 0.25rem solid !important;\n margin-bottom: -0.25rem !important;\n text-decoration: none;\n}\n\n@supports (text-underline-offset: 25%) {\n .card.clickable:hover .card-title,\n .card.clickable:focus .card-title,\n .card.clickable.focussed .card-title {\n text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 25%;\n border-bottom: 0 !important;\n margin-bottom: 0 !important;\n }\n}\n\n.subheading {\n margin-top: var(--ic-space-xxs);\n}\n\n.adornment {\n margin-top: var(--ic-space-xxs);\n}\n\n.card-message {\n margin-top: var(--ic-space-md);\n align-items: left;\n}\n\n.interaction-button {\n margin-left: auto;\n}\n\n.image-top {\n margin-bottom: var(--ic-space-md);\n display: flex;\n justify-content: center;\n}\n\n.image-mid {\n margin-top: var(--ic-space-md);\n display: flex;\n justify-content: center;\n}\n\n.interaction-area {\n display: flex;\n flex-grow: 1;\n gap: var(--ic-space-md);\n margin-top: var(--ic-space-md);\n align-items: flex-end;\n}\n\n.interaction-controls {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--ic-space-sm);\n}\n\n.toggle-button {\n width: 2.5rem;\n height: 2.5rem;\n padding: var(--ic-space-xs);\n margin: var(--ic-space-1px) 0;\n min-width: 0;\n cursor: pointer;\n transition: var(--ic-easing-transition-fast);\n border-radius: var(--ic-border-radius);\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n background: none;\n border: none;\n box-sizing: border-box;\n white-space: nowrap;\n vertical-align: middle;\n\n &:hover {\n background-color: var(--ic-card-background-hover);\n }\n &:focus {\n box-shadow: var(--ic-border-focus);\n }\n &:active:not(:focus) {\n background-color: var(--ic-card-background-pressed);\n }\n\n svg {\n pointer-events: none;\n width: 100% !important;\n height: 100% !important;\n fill: currentcolor !important;\n }\n}\n\n#ic-tooltip-expand-button {\n margin-left: auto;\n position: relative;\n}\n\n.toggle-button-closed svg {\n transform: rotate(90deg);\n}\n\n.toggle-button-expanded svg {\n transform: rotate(-90deg);\n}\n\n.expanded-content {\n margin-top: var(--ic-space-md);\n}\n\n/* High Contrast **/\n@media (forced-colors: active) {\n .card {\n ::slotted(svg) {\n fill: currentcolor;\n }\n &.disabled {\n border-color: GrayText !important;\n\n ::slotted(svg) {\n fill: GrayText !important;\n }\n .card-message,\n .subheading,\n .card-title {\n color: GrayText;\n\n --ic-typography-color: GrayText;\n }\n }\n }\n}\n';const p=class{constructor(t){n(this,t);this.hostMutationObserver=null;this.parentFocussed=()=>{this.isFocussed=true};this.parentBlurred=()=>{this.isFocussed=false};this.toggleExpanded=()=>{this.areaExpanded=!this.areaExpanded};this.hostMutationCallback=n=>{if(n.some((({type:n,addedNodes:e,removedNodes:t})=>n==="childList"?o(e,t,["message","adornment","expanded-content","image-top","image-mid","icon","interaction-button","badge","interaction-controls"]):false))){e(this)}};this.areaExpanded=false;this.isFocussed=false;this.monochrome=false;this.parentEl=null;this.parentIsAnchorTag=false;this.clickable=false;this.disabled=false;this.expandable=false;this.fullWidth=false;this.heading=undefined;this.href=undefined;this.hreflang="";this.message="";this.referrerpolicy=undefined;this.rel=undefined;this.subheading=undefined;this.target=undefined;this.theme="inherit"}watchDisabledHandler(){a(this.disabled,this.el)}disconnectedCallback(){var n;if(this.parentIsAnchorTag){this.parentEl.removeEventListener("focus",this.parentFocussed);this.parentEl.removeEventListener("blur",this.parentBlurred)}(n=this.hostMutationObserver)===null\|\|n===void 0?void 0:n.disconnect()}componentWillLoad(){this.parentEl=this.el.parentElement;if(this.parentEl.tagName==="A"){this.clickable=true;this.parentIsAnchorTag=true;this.parentEl.classList.add("ic-card-wrapper-link");this.parentEl.addEventListener("focus",this.parentFocussed);this.parentEl.addEventListener("blur",this.parentBlurred)}a(this.disabled,this.el)}componentDidLoad(){!s(this.el,"heading")&&d([{prop:this.heading,propName:"heading"}],"Card");this.updateTheme();this.hostMutationObserver=new MutationObserver(this.hostMutationCallback);this.hostMutationObserver.observe(this.el,{childList:true})}handleHostClick(n){if(this.disabled){n.stopImmediatePropagation()}}brandChangeHandler(n){this.updateTheme(n.detail.mode)}async setFocus(){if(this.el.shadowRoot.querySelector("a")){this.el.shadowRoot.querySelector("a").focus()}else if(this.el.shadowRoot.querySelector("button")){this.el.shadowRoot.querySelector("button").focus()}}updateTheme(n=null){const e=c(this.el,n);if(e!==l.Default){this.monochrome=true;this.theme=e===l.Light?l.Dark:l.Light}}render(){const{clickable:n,disabled:e,expandable:r,fullWidth:o,heading:a,isFocussed:d,message:c,monochrome:l,href:m,hreflang:p,parentIsAnchorTag:b,referrerpolicy:u,rel:g,subheading:f,target:v,theme:x}=this;const y=b\|\|!n?"div":m===undefined?"button":"a";const w=y=="a"&&{href:m,hrefLang:p,referrerPolicy:u,rel:g,target:v};return t(i,{class:{[`ic-theme-${x}`]:x!=="inherit"}},t(y,Object.assign({class:{card:true,clickable:n&&!e,disabled:e,fullwidth:o,focussed:d,monochrome:l},tabindex:n&&!b?0:null,"aria-disabled":e?"true":null,disabled:e?true:null},w),s(this.el,"image-top")&&t("div",{class:"image-top"},t("slot",{name:"image-top"})),t("div",{class:"card-header"},s(this.el,"icon")&&t("div",{class:"icon"},t("slot",{name:"icon"})),t("div",{class:"card-title"},t("slot",{name:"heading"},t("ic-typography",{variant:"h4"},t("p",null,a)))),s(this.el,"interaction-button")&&t("div",{class:"interaction-button"},t("slot",{name:"interaction-button"}))),(f\|\|s(this.el,"subheading"))&&t("div",{class:"subheading"},t("slot",{name:"subheading"},t("ic-typography",{variant:"subtitle-small"},f))),s(this.el,"adornment")&&t("div",{class:"adornment"},t("slot",{name:"adornment"})),s(this.el,"image-mid")&&t("div",{class:"image-mid"},t("slot",{name:"image-mid"})),(c\|\|s(this.el,"message"))&&t("div",{class:"card-message"},c&&t("ic-typography",{variant:"body"},c),s(this.el,"message")&&t("slot",{name:"message"})),(s(this.el,"interaction-controls")\|\|r)&&t("div",{class:"interaction-area"},t("div",{class:"interaction-controls"},t("slot",{name:"interaction-controls"})),r&&t("ic-tooltip",{id:"ic-tooltip-expand-button",label:"Toggle expandable area",silent:true},t("button",{class:{"toggle-button":true,[`toggle-button-${this.areaExpanded?"expanded":"closed"}`]:true},"aria-label":"Toggle expandable area","aria-expanded":`${this.areaExpanded}`,"aria-controls":this.areaExpanded?"expanded-content-area":null,onClick:this.toggleExpanded,innerHTML:h}))),s(this.el,"expanded-content")&&this.areaExpanded&&t("div",{class:"expanded-content",id:"expanded-content-area"},t("slot",{name:"expanded-content"})),s(this.el,"badge")&&t("slot",{name:"badge"})))}get el(){return r(this)}static get watchers(){return{disabled:["watchDisabledHandler"]}}};p.style=m;export{p as ic_card_vertical};
2	+ //# sourceMappingURL=p-8a2670c1.entry.js.map

package/dist/core/p-8a2670c1.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["icCardVerticalCss","CardVertical","this","hostMutationObserver","parentFocussed","isFocussed","parentBlurred","toggleExpanded","areaExpanded","hostMutationCallback","mutationList","some","type","addedNodes","removedNodes","checkSlotInChildMutations","forceUpdate","watchDisabledHandler","removeDisabledFalse","disabled","el","disconnectedCallback","parentIsAnchorTag","parentEl","removeEventListener","_a","disconnect","componentWillLoad","parentElement","tagName","clickable","classList","add","addEventListener","componentDidLoad","isSlotUsed","onComponentRequiredPropUndefined","prop","heading","propName","updateTheme","MutationObserver","observe","childList","handleHostClick","event","stopImmediatePropagation","brandChangeHandler","ev","detail","mode","setFocus","shadowRoot","querySelector","focus","foregroundColor","getBrandFromContext","IcBrandForegroundEnum","Default","monochrome","theme","Light","Dark","render","expandable","fullWidth","message","href","hreflang","referrerpolicy","rel","subheading","target","Component","undefined","attrs","hrefLang","referrerPolicy","h","Host","class","Object","assign","card","fullwidth","focussed","tabindex","name","variant","id","label","silent","onClick","innerHTML","chevronIcon"],"sources":["src/components/ic-card-vertical/ic-card-vertical.css?tag=ic-card-vertical&encapsulation=shadow","src/components/ic-card-vertical/ic-card-vertical.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: flex;\n}\n\na {\n text-decoration: none !important;\n color: var(--ic-card-text-primary) !important;\n}\n\na:visited {\n color: var(--ic-card-link-action-dark) !important;\n}\n\nbutton {\n border: none;\n background-color: transparent;\n outline: var(--ic-hc-focus-outline);\n}\n\n.card {\n display: flex;\n flex-direction: column;\n border: var(--ic-space-1px) solid var(--ic-card-border-primary);\n border-radius: var(--ic-border-radius);\n box-sizing: border-box;\n padding: var(--ic-space-md);\n text-align: left;\n color: var(--ic-card-text-primary);\n transition: var(--ic-easing-transition-fast);\n position: relative;\n width: inherit;\n min-width: fit-content;\n height: fit-content;\n min-height: 100%;\n\n ::slotted(svg) {\n fill: var(--ic-card-icon);\n }\n &.monochrome {\n border: var(--ic-border-width) solid var(--ic-card-border-monochrome);\n }\n &.fullwidth {\n width: 100%;\n }\n &.clickable {\n &:hover {\n background-color: var(--ic-card-background-hover);\n border: var(--ic-space-1px) solid var(--ic-card-hover-border-color);\n cursor: pointer;\n }\n &.focussed,\n &:focus {\n background-color: var(--ic-card-background-hover);\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n border: var(--ic-space-1px) solid var(--ic-card-pressed-border-color);\n }\n &:active {\n background-color: var(--ic-card-background-pressed);\n box-shadow: var(--ic-border-focus);\n\n .card-title {\n text-decoration: none;\n }\n }\n .card-title {\n --ic-typography-color: var(--ic-card-clickable-text);\n\n color: var(--ic-card-clickable-text);\n text-decoration: underline;\n text-decoration-thickness: var(--ic-space-1px);\n }\n }\n &.disabled {\n border: var(--ic-space-1px) dashed var(--ic-card-disabled-border-color);\n\n .card-message,\n .subheading,\n .card-title {\n --ic-typography-color: var(--ic-card-disabled-text);\n }\n .card-title {\n text-decoration: underline;\n text-decoration-thickness: var(--ic-space-1px);\n text-decoration-color: var(--ic-card-disabled-text);\n color: var(--ic-card-disabled-text);\n }\n ::slotted(svg) {\n fill: var(--ic-card-disabled-text);\n }\n }\n}\n\n.card-header {\n display: flex;\n align-items: center;\n}\n\n.icon {\n display: flex;\n align-items: center;\n padding-right: var(--ic-space-xs);\n}\n\n.card.clickable:hover .card-title,\n.card.clickable:focus .card-title,\n.card.clickable.focussed .card-title {\n display: inline-block;\n border-bottom: 0.25rem solid !important;\n margin-bottom: -0.25rem !important;\n text-decoration: none;\n}\n\n@supports (text-underline-offset: 25%) {\n .card.clickable:hover .card-title,\n .card.clickable:focus .card-title,\n .card.clickable.focussed .card-title {\n text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 25%;\n border-bottom: 0 !important;\n margin-bottom: 0 !important;\n }\n}\n\n.subheading {\n margin-top: var(--ic-space-xxs);\n}\n\n.adornment {\n margin-top: var(--ic-space-xxs);\n}\n\n.card-message {\n margin-top: var(--ic-space-md);\n align-items: left;\n}\n\n.interaction-button {\n margin-left: auto;\n}\n\n.image-top {\n margin-bottom: var(--ic-space-md);\n display: flex;\n justify-content: center;\n}\n\n.image-mid {\n margin-top: var(--ic-space-md);\n display: flex;\n justify-content: center;\n}\n\n.interaction-area {\n display: flex;\n flex-grow: 1;\n gap: var(--ic-space-md);\n margin-top: var(--ic-space-md);\n align-items: flex-end;\n}\n\n.interaction-controls {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--ic-space-sm);\n}\n\n.toggle-button {\n width: 2.5rem;\n height: 2.5rem;\n padding: var(--ic-space-xs);\n margin: var(--ic-space-1px) 0;\n min-width: 0;\n cursor: pointer;\n transition: var(--ic-easing-transition-fast);\n border-radius: var(--ic-border-radius);\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n background: none;\n border: none;\n box-sizing: border-box;\n white-space: nowrap;\n vertical-align: middle;\n\n &:hover {\n background-color: var(--ic-card-background-hover);\n }\n &:focus {\n box-shadow: var(--ic-border-focus);\n }\n &:active:not(:focus) {\n background-color: var(--ic-card-background-pressed);\n }\n\n svg {\n pointer-events: none;\n width: 100% !important;\n height: 100% !important;\n fill: currentcolor !important;\n }\n}\n\n#ic-tooltip-expand-button {\n margin-left: auto;\n position: relative;\n}\n\n.toggle-button-closed svg {\n transform: rotate(90deg);\n}\n\n.toggle-button-expanded svg {\n transform: rotate(-90deg);\n}\n\n.expanded-content {\n margin-top: var(--ic-space-md);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n .card {\n ::slotted(svg) {\n fill: currentcolor;\n }\n &.disabled {\n border-color: GrayText !important;\n\n ::slotted(svg) {\n fill: GrayText !important;\n }\n .card-message,\n .subheading,\n .card-title {\n color: GrayText;\n\n --ic-typography-color: GrayText;\n }\n }\n }\n}\n","import {\n Component,\n Element,\n Listen,\n Prop,\n State,\n h,\n Method,\n forceUpdate,\n Host,\n Watch,\n} from \"@stencil/core\";\nimport {\n onComponentRequiredPropUndefined,\n isSlotUsed,\n getBrandFromContext,\n removeDisabledFalse,\n checkSlotInChildMutations,\n} from \"../../utils/helpers\";\nimport {\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcThemeMode,\n} from \"../../utils/types\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot heading - Content will be placed at the top of the card to the right of the icon.\n * @slot message - Content will be placed in the main body of the card.\n * @slot subheading - Content will be placed below the card heading.\n * @slot adornment - Content will be placed below the card subheading.\n * @slot image-top - Content will be placed at the top of the card above all other content.\n * @slot image-mid - Content will be placed below the card heading section.\n * @slot icon - Content will be placed to the left of the card heading.\n * @slot interaction-button - Content will be placed in the top right corner of the heading section.\n * @slot interaction-controls - Content will be placed below the card message.\n * @slot expanded-content - Content will be placed below the interaction controls but will not initially be rendered.\n * @slot badge - Badge component overlaying the top right of the card.\n */\n@Component({\n tag: \"ic-card-vertical\",\n styleUrl: \"ic-card-vertical.css\",\n shadow: true,\n})\nexport class CardVertical {\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcCardVerticalElement;\n\n @State() areaExpanded: boolean = false;\n @State() isFocussed: boolean = false;\n @State() monochrome: boolean = false;\n @State() parentEl: HTMLElement | null = null;\n @State() parentIsAnchorTag: boolean = false;\n\n /**\n * If `true`, the card will be a clickable variant, instead of static.\n */\n @Prop({ mutable: true }) clickable?: boolean = false;\n\n /**\n * If `true`, the card will be disabled if it is clickable.\n */\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /**\n * If `true`, the card will have an expandable area and expansion toggle button.\n */\n @Prop() expandable?: boolean = false;\n\n /**\n * If `true`, the card will fill the width of the container.\n */\n @Prop() fullWidth?: boolean = false;\n\n /**\n * The heading for the card. This is required, unless a slotted heading is used.\n */\n @Prop() heading?: string;\n\n /**\n * The URL that the clickable card link points to. If set, the clickable card will render as an \"a\" tag, otherwise it will render as a button.\n */\n @Prop() href?: string;\n\n /**\n * The human language of the linked URL.\n */\n @Prop() hreflang?: string = \"\";\n\n /**\n * The main body message of the card.\n */\n @Prop() message?: string = \"\";\n\n /**\n * How much of the referrer to send when following the link.\n */\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /**\n * The relationship of the linked URL as space-separated link types.\n */\n @Prop() rel?: string;\n\n /**\n * The subheading for the card.\n */\n @Prop() subheading?: string;\n\n /**\n * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n */\n @Prop() target?: string;\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop({ mutable: true }) theme?: IcThemeMode = \"inherit\";\n\n disconnectedCallback(): void {\n if (this.parentIsAnchorTag) {\n this.parentEl.removeEventListener(\"focus\", this.parentFocussed);\n this.parentEl.removeEventListener(\"blur\", this.parentBlurred);\n }\n\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n this.parentEl = this.el.parentElement;\n\n if (this.parentEl.tagName === \"A\") {\n this.clickable = true;\n this.parentIsAnchorTag = true;\n this.parentEl.classList.add(\"ic-card-wrapper-link\");\n this.parentEl.addEventListener(\"focus\", this.parentFocussed);\n this.parentEl.addEventListener(\"blur\", this.parentBlurred);\n }\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n !isSlotUsed(this.el, \"heading\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Card\"\n );\n this.updateTheme();\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(event: Event): void {\n if (this.disabled) {\n event.stopImmediatePropagation();\n }\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n this.updateTheme(ev.detail.mode);\n }\n\n /**\n * Sets focus on the card.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"a\")) {\n this.el.shadowRoot.querySelector(\"a\").focus();\n } else if (this.el.shadowRoot.querySelector(\"button\")) {\n this.el.shadowRoot.querySelector(\"button\").focus();\n }\n }\n\n private parentFocussed = (): void => {\n this.isFocussed = true;\n };\n\n private parentBlurred = (): void => {\n this.isFocussed = false;\n };\n\n private updateTheme(mode: IcBrandForeground = null): void {\n const foregroundColor = getBrandFromContext(this.el, mode);\n\n if (foregroundColor !== IcBrandForegroundEnum.Default) {\n this.monochrome = true;\n this.theme =\n foregroundColor === IcBrandForegroundEnum.Light\n ? IcBrandForegroundEnum.Dark\n : IcBrandForegroundEnum.Light;\n }\n }\n\n private toggleExpanded = (): void => {\n this.areaExpanded = !this.areaExpanded;\n };\n\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n if (\n mutationList.some(({ type, addedNodes, removedNodes }) =>\n type === \"childList\"\n ? checkSlotInChildMutations(addedNodes, removedNodes, [\n \"message\",\n \"adornment\",\n \"expanded-content\",\n \"image-top\",\n \"image-mid\",\n \"icon\",\n \"interaction-button\",\n \"badge\",\n \"interaction-controls\",\n ])\n : false\n )\n ) {\n forceUpdate(this);\n }\n };\n\n render() {\n const {\n clickable,\n disabled,\n expandable,\n fullWidth,\n heading,\n isFocussed,\n message,\n monochrome,\n href,\n hreflang,\n parentIsAnchorTag,\n referrerpolicy,\n rel,\n subheading,\n target,\n theme,\n } = this;\n\n const Component =\n parentIsAnchorTag || !clickable\n ? \"div\"\n : href === undefined\n ? \"button\"\n : \"a\";\n\n const attrs = Component == \"a\" && {\n href: href,\n hrefLang: hreflang,\n referrerPolicy: referrerpolicy,\n rel: rel,\n target: target,\n };\n\n return (\n <Host\n class={{\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <Component\n class={{\n card: true,\n clickable: clickable && !disabled,\n disabled,\n fullwidth: fullWidth,\n focussed: isFocussed,\n monochrome: monochrome,\n }}\n tabindex={clickable && !parentIsAnchorTag ? 0 : null}\n aria-disabled={disabled ? \"true\" : null}\n disabled={disabled ? true : null}\n {...attrs}\n >\n {isSlotUsed(this.el, \"image-top\") && (\n <div class=\"image-top\">\n <slot name=\"image-top\"></slot>\n </div>\n )}\n <div class=\"card-header\">\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon\">\n <slot name=\"icon\" />\n </div>\n )}\n <div class=\"card-title\">\n <slot name=\"heading\">\n <ic-typography variant=\"h4\">\n <p>{heading}</p>\n </ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"interaction-button\") && (\n <div class=\"interaction-button\">\n <slot name=\"interaction-button\"></slot>\n </div>\n )}\n </div>\n {(subheading || isSlotUsed(this.el, \"subheading\")) && (\n <div class=\"subheading\">\n <slot name=\"subheading\">\n <ic-typography variant=\"subtitle-small\">\n {subheading}\n </ic-typography>\n </slot>\n </div>\n )}\n {isSlotUsed(this.el, \"adornment\") && (\n <div class=\"adornment\">\n <slot name=\"adornment\"></slot>\n </div>\n )}\n {isSlotUsed(this.el, \"image-mid\") && (\n <div class=\"image-mid\">\n <slot name=\"image-mid\"></slot>\n </div>\n )}\n {(message || isSlotUsed(this.el, \"message\")) && (\n <div class=\"card-message\">\n {message && (\n <ic-typography variant=\"body\">{message}</ic-typography>\n )}\n {isSlotUsed(this.el, \"message\") && <slot name=\"message\"></slot>}\n </div>\n )}\n {(isSlotUsed(this.el, \"interaction-controls\") || expandable) && (\n <div class=\"interaction-area\">\n <div class=\"interaction-controls\">\n <slot name=\"interaction-controls\"></slot>\n </div>\n {expandable && (\n <ic-tooltip\n id=\"ic-tooltip-expand-button\"\n label=\"Toggle expandable area\"\n silent\n >\n <button\n class={{\n \"toggle-button\": true,\n [`toggle-button-${\n this.areaExpanded ? \"expanded\" : \"closed\"\n }`]: true,\n }}\n aria-label=\"Toggle expandable area\"\n aria-expanded={`${this.areaExpanded}`}\n aria-controls={\n this.areaExpanded ? \"expanded-content-area\" : null\n }\n onClick={this.toggleExpanded}\n innerHTML={chevronIcon}\n ></button>\n </ic-tooltip>\n )}\n </div>\n )}\n {isSlotUsed(this.el, \"expanded-content\") && this.areaExpanded && (\n <div class=\"expanded-content\" id=\"expanded-content-area\">\n <slot name=\"expanded-content\"></slot>\n </div>\n )}\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </Component>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/core/{p-29767574.entry.js → p-91c1327d.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as t,h as e,H as i,g as o}from"./p-6b5e91e2.js";import{i as s}from"./p-b7eb8ef9.js";const n='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}.label-container{--ic-typography-color:var(--ic-accordion-group-title-text);color:var(--ic-accordion-group-title-text);padding:var(--ic-space-xs);display:flex;justify-content:space-between;align-items:center}:host(.ic-accordion-group-small) .label-container{padding:var(--ic-space-xxs) var(--ic-space-xs)}:host(.ic-accordion-group-large) .label-container{padding:var(--ic-space-sm) var(--ic-space-xs)}';let a=0;const r=class{constructor(e){t(this,e);this.accordionGroupId=`ic-accordion-group-${a++}`;this.handleExpanded=()=>{if(this.areAllAccordionsOpen){this.expanded=false;this.accordions.forEach((t=>{t.expanded=this.expanded}))}else{this.expanded=true;this.accordions.forEach((t=>{t.expanded=this.expanded}))}this.setExpandedToAreAllAccordionsOpen()};this.linkAccordions=()=>{this.accordions.forEach((t=>{t.setAttribute("context-id",this.accordionGroupId)}))};this.setExpandedToAreAllAccordionsOpen=()=>{this.areAllAccordionsOpen=this.accordions.every((t=>!!t.expanded))};this.accordionOpenBtnText=()=>!this.areAllAccordionsOpen?"See all":"Hide all";this.accordions=undefined;this.areAllAccordionsOpen=undefined;this.accessibleButtonLabel="accordions";this.theme="inherit";this.expanded=false;this.label="";this.singleExpansion=false;this.size="medium"}watchThemeHandler(){this.accordions.forEach((t=>{t.theme=this.theme}))}watchExpandedHandler(){this.handleExpanded()}componentDidLoad(){const t=this.el.children;this.accordions=Array.from(t).filter((t=>t.tagName==="IC-ACCORDION"));this.linkAccordions();this.accordions.forEach((t=>{t.theme=this.theme}));this.accordions.forEach((t=>{t.size=this.size}));if(this.expanded){this.accordions.forEach((t=>{t.expanded=true}));this.setExpandedToAreAllAccordionsOpen()}else{this.setExpandedToAreAllAccordionsOpen();this.expanded=this.areAllAccordionsOpen}}handleAccordionClicked(t){if(!this.singleExpansion){this.setExpandedToAreAllAccordionsOpen()}else{this.accordions.forEach((e=>{if(e.expanded&&t.detail.id!==e.id){e.expanded=false}}))}}async setFocus(){const t=this.singleExpansion?this.accordions[0]:this.allButtonEl;t.setFocus()}render(){const{size:t,label:o,singleExpansion:n,accessibleButtonLabel:a,theme:r}=this;return e(i,{"context-id":this.accordionGroupId,class:{[`ic-accordion-group-${t}`]:true,["ic-accordion-group"]:true,[`ic-theme-${r}`]:r!=="inherit"}},e("div",{class:"label-container"},e("ic-typography",{variant:"h4"},e("h3",null,s(this.el,"label")?e("slot",{name:"label"}):o)),!n&&e("ic-button",{ref:t=>this.allButtonEl=t,onClick:this.handleExpanded,variant:"tertiary","aria-label":`${this.accordionOpenBtnText()} ${a}`},this.accordionOpenBtnText())),e("slot",null))}get el(){return o(this)}static get watchers(){return{theme:["watchThemeHandler"],expanded:["watchExpandedHandler"]}}};r.style=n;export{r as ic_accordion_group};
-//# sourceMappingURL=p-29767574.entry.js.map
+import{r as t,h as e,H as i,g as o}from"./p-6b5e91e2.js";import{i as s}from"./p-48e98730.js";const n='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}.label-container{--ic-typography-color:var(--ic-accordion-group-title-text);color:var(--ic-accordion-group-title-text);padding:var(--ic-space-xs);display:flex;justify-content:space-between;align-items:center}:host(.ic-accordion-group-small) .label-container{padding:var(--ic-space-xxs) var(--ic-space-xs)}:host(.ic-accordion-group-large) .label-container{padding:var(--ic-space-sm) var(--ic-space-xs)}';let a=0;const r=class{constructor(e){t(this,e);this.accordionGroupId=`ic-accordion-group-${a++}`;this.handleExpanded=()=>{if(this.areAllAccordionsOpen){this.expanded=false;this.accordions.forEach((t=>{t.expanded=this.expanded}))}else{this.expanded=true;this.accordions.forEach((t=>{t.expanded=this.expanded}))}this.setExpandedToAreAllAccordionsOpen()};this.linkAccordions=()=>{this.accordions.forEach((t=>{t.setAttribute("context-id",this.accordionGroupId)}))};this.setExpandedToAreAllAccordionsOpen=()=>{this.areAllAccordionsOpen=this.accordions.every((t=>!!t.expanded))};this.accordionOpenBtnText=()=>!this.areAllAccordionsOpen?"See all":"Hide all";this.accordions=undefined;this.areAllAccordionsOpen=undefined;this.accessibleButtonLabel="accordions";this.theme="inherit";this.expanded=false;this.label="";this.singleExpansion=false;this.size="medium"}watchThemeHandler(){this.accordions.forEach((t=>{t.theme=this.theme}))}watchExpandedHandler(){this.handleExpanded()}componentDidLoad(){const t=this.el.children;this.accordions=Array.from(t).filter((t=>t.tagName==="IC-ACCORDION"));this.linkAccordions();this.accordions.forEach((t=>{t.theme=this.theme}));this.accordions.forEach((t=>{t.size=this.size}));if(this.expanded){this.accordions.forEach((t=>{t.expanded=true}));this.setExpandedToAreAllAccordionsOpen()}else{this.setExpandedToAreAllAccordionsOpen();this.expanded=this.areAllAccordionsOpen}}handleAccordionClicked(t){if(!this.singleExpansion){this.setExpandedToAreAllAccordionsOpen()}else{this.accordions.forEach((e=>{if(e.expanded&&t.detail.id!==e.id){e.expanded=false}}))}}async setFocus(){const t=this.singleExpansion?this.accordions[0]:this.allButtonEl;t.setFocus()}render(){const{size:t,label:o,singleExpansion:n,accessibleButtonLabel:a,theme:r}=this;return e(i,{"context-id":this.accordionGroupId,class:{[`ic-accordion-group-${t}`]:true,["ic-accordion-group"]:true,[`ic-theme-${r}`]:r!=="inherit"}},e("div",{class:"label-container"},e("ic-typography",{variant:"h4"},e("h3",null,s(this.el,"label")?e("slot",{name:"label"}):o)),!n&&e("ic-button",{ref:t=>this.allButtonEl=t,onClick:this.handleExpanded,variant:"tertiary","aria-label":`${this.accordionOpenBtnText()} ${a}`},this.accordionOpenBtnText())),e("slot",null))}get el(){return o(this)}static get watchers(){return{theme:["watchThemeHandler"],expanded:["watchExpandedHandler"]}}};r.style=n;export{r as ic_accordion_group};
+//# sourceMappingURL=p-91c1327d.entry.js.map

package/dist/core/p-98dbbb34.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,h as r,H as c,g as i}from"./p-6b5e91e2.js";import{C as t}from"./p-3b185c32.js";import{i as o,d as a}from"./p-48e98730.js";const s=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z" fill="currentColor"/>\n</svg>\n`;const n=':host{display:block;margin:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0}:host .breadcrumb{display:flex;align-items:center;white-space:nowrap;gap:var(--ic-space-xs);min-height:var(--ic-space-lg)}:host .chevron{width:var(--ic-space-lg);height:var(--ic-space-lg)}:host .chevron svg,:host(.ic-breadcrumb-monochrome) .chevron svg{color:var(--ic-breadcrumb-icon-chevron)}:host(:first-child) .chevron{display:none}.back-icon svg{color:var(--ic-breadcrumb-icon)}:host(.ic-breadcrumb-monochrome) .back-icon svg{color:var(--ic-breadcrumb-icon-monochrome)}:host(.ic-breadcrumb-back){display:flex;align-items:center}:host(.ic-breadcrumb-back) .chevron{display:none}ic-link{--breadcrumb-link-display:inline-flex;--breadcrumb-link-align-items:center;--breadcrumb-link-gap:var(--ic-space-xs)}:host([aria-current="page"]) .current-page-container{display:flex;align-items:center;gap:var(--ic-space-xs);color:var(--ic-breadcrumb-text)}:host([aria-current="page"].ic-breadcrumb-monochrome) .current-page-container{color:var(--ic-breadcrumb-text-monochrome)}:host(.collapsed-breadcrumb-wrapper){margin-right:var(--ic-space-xs) !important;display:flex;align-items:center;gap:var(--ic-space-xs)}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb){border:none;background-color:transparent;color:var(--ic-color-hyperlink-default);text-decoration:underline;font-weight:var(--ic-font-weight-bold);cursor:pointer}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus){outline:var(--ic-hc-focus-outline);border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none}.hide,:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide){display:none}@media (forced-colors: active){.back-icon svg{color:currentcolor}}@supports (text-underline-offset: 25%){ic-link{--breadcrumb-link-display:flex}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus){text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%;border-bottom:0 !important;margin-bottom:0 !important}}';const l=class{constructor(c){e(this,c);this.renderDefaultBreadcrumb=(e,c,i,t)=>{const n=c!==null&&a(c)&&c!=="";if(e&&n){return r("span",{class:{"current-page-container":e}},o(this.el,"icon")&&r("slot",{name:"icon"}),c)}return r("ic-link",{theme:this.theme,monochrome:this.monochrome,href:t,class:"breadcrumb-link","aria-describedby":this.showBackIcon&&i&&i},this.showBackIcon&&r("div",{class:"back-icon",innerHTML:s}),o(this.el,"icon")&&r("slot",{name:"icon"}),c)};this.setSlottedCurrentPageClass=()=>{const e=this.el.querySelector("ic-link");const r="current-page";if(e){e.classList.remove(r);if(this.current){const c=e.classList.contains(r);if(!c){e.classList.add("breadcrumb-link",r)}}}};this.current=false;this.href=undefined;this.monochrome=false;this.pageTitle=undefined;this.showBackIcon=false;this.theme="inherit"}componentWillRender(){this.setSlottedCurrentPageClass()}async setFocus(){if(this.el.shadowRoot.querySelector("ic-link")){this.el.shadowRoot.querySelector("ic-link").focus()}}render(){const{current:e,href:i,pageTitle:o}=this;const s=`${o&&o.toLowerCase().replace(" ","-")}-describedby`;const n=o!==null&&a(o)&&o!=="";const l=i!==null&&a(i)&&i!=="";return r(c,{class:{"ic-breadcrumb-back":this.showBackIcon,[`ic-theme-${this.theme}`]:this.theme!=="inherit","ic-breadcrumb-monochrome":this.monochrome},"aria-current":e&&"page",role:"listitem"},r("div",{class:"breadcrumb"},r("span",{innerHTML:t,class:"chevron","aria-hidden":"true"}),this.showBackIcon&&s&&r("span",{id:s,class:"hide"},`Back to ${o}`),n&&l?this.renderDefaultBreadcrumb(e,o,s,i):r("slot",null)))}static get delegatesFocus(){return true}get el(){return i(this)}};l.style=n;export{l as ic_breadcrumb};
2	+ //# sourceMappingURL=p-98dbbb34.entry.js.map

package/dist/core/p-98dbbb34.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["icBreadcrumbCss","Breadcrumb","this","renderDefaultBreadcrumb","current","pageTitle","describedById","href","hasPageTitle","isPropDefined","h","class","isSlotUsed","el","name","theme","monochrome","showBackIcon","innerHTML","backIcon","setSlottedCurrentPageClass","icLink","querySelector","currentPage","classList","remove","hasCurrentPageClass","contains","add","componentWillRender","setFocus","shadowRoot","focus","render","toLowerCase","replace","hasHref","Host","role","chevronIcon","id"],"sources":["src/components/ic-breadcrumb/ic-breadcrumb.css?tag=ic-breadcrumb&encapsulation=shadow","src/components/ic-breadcrumb/ic-breadcrumb.tsx"],"sourcesContent":[":host {\n display: block;\n margin: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n:host .breadcrumb {\n display: flex;\n align-items: center;\n white-space: nowrap;\n gap: var(--ic-space-xs);\n min-height: var(--ic-space-lg);\n}\n\n:host .chevron {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n:host .chevron svg,\n:host(.ic-breadcrumb-monochrome) .chevron svg {\n color: var(--ic-breadcrumb-icon-chevron);\n}\n\n:host(:first-child) .chevron {\n display: none;\n}\n\n.back-icon svg {\n color: var(--ic-breadcrumb-icon);\n}\n\n:host(.ic-breadcrumb-monochrome) .back-icon svg {\n color: var(--ic-breadcrumb-icon-monochrome);\n}\n\n:host(.ic-breadcrumb-back) {\n display: flex;\n align-items: center;\n}\n\n:host(.ic-breadcrumb-back) .chevron {\n display: none;\n}\n\nic-link {\n --breadcrumb-link-display: inline-flex;\n --breadcrumb-link-align-items: center;\n --breadcrumb-link-gap: var(--ic-space-xs);\n}\n\n:host([aria-current=\"page\"]) .current-page-container {\n display: flex;\n align-items: center;\n gap: var(--ic-space-xs);\n color: var(--ic-breadcrumb-text);\n}\n\n:host([aria-current=\"page\"].ic-breadcrumb-monochrome) .current-page-container {\n color: var(--ic-breadcrumb-text-monochrome);\n}\n\n:host(.collapsed-breadcrumb-wrapper) {\n margin-right: var(--ic-space-xs) !important;\n display: flex;\n align-items: center;\n gap: var(--ic-space-xs);\n}\n\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb) {\n border: none;\n background-color: transparent;\n color: var(--ic-color-hyperlink-default);\n text-decoration: underline;\n font-weight: var(--ic-font-weight-bold);\n cursor: pointer;\n}\n\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {\n outline: var(--ic-hc-focus-outline);\n border-bottom: 0.25rem solid !important;\n margin-bottom: -0.25rem !important;\n text-decoration: none;\n}\n\n.hide,\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide) {\n display: none;\n}\n\n@media (forced-colors: active) {\n .back-icon svg {\n color: currentcolor;\n }\n}\n\n@supports (text-underline-offset: 25%) {\n ic-link {\n --breadcrumb-link-display: flex;\n }\n\n :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),\n :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {\n text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 25%;\n border-bottom: 0 !important;\n margin-bottom: 0 !important;\n }\n}\n","import { Component, Host, Prop, h, Element, Method } from \"@stencil/core\";\nimport { IcBreadcrumbDefault } from \"./ic-breadcrumb.types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport backIcon from \"../../assets/back-icon.svg\";\nimport { isPropDefined, isSlotUsed } from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n/**\n * @slot icon - Content will be rendered to the left of the breadcrumb page title.\n */\n@Component({\n tag: \"ic-breadcrumb\",\n styleUrl: \"ic-breadcrumb.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Breadcrumb {\n @Element() el: HTMLIcBreadcrumbElement;\n\n /**\n * If `true`, aria-current will be set on the breadcrumb.\n */\n @Prop() current?: boolean = false;\n\n /**\n * The URL that the breadcrumb link points to.\n */\n @Prop() href?: string;\n\n /**\n * @internal If `true`, the breadcrumb will display as black in the light theme, and white in the dark theme.\n */\n @Prop() monochrome?: boolean = false;\n\n /**\n * The title of the breadcrumb.\n */\n @Prop() pageTitle!: string;\n\n /**\n * @internal If `true`, back icon will be displayed.\n */\n @Prop({ reflect: true }) showBackIcon: boolean = false;\n\n /**\n * @internal Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n componentWillRender(): void {\n this.setSlottedCurrentPageClass();\n }\n\n /**\n * Sets focus on the breadcrumb.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"ic-link\")) {\n this.el.shadowRoot.querySelector(\"ic-link\").focus();\n }\n }\n\n private renderDefaultBreadcrumb = (\n current: boolean,\n pageTitle: string,\n describedById: string,\n href: string\n ): IcBreadcrumbDefault => {\n const hasPageTitle =\n pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== \"\";\n\n if (current && hasPageTitle) {\n return (\n <span\n class={{\n \"current-page-container\": current,\n }}\n >\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n {pageTitle}\n </span>\n );\n }\n\n return (\n <ic-link\n theme={this.theme}\n monochrome={this.monochrome}\n href={href}\n class=\"breadcrumb-link\"\n aria-describedby={this.showBackIcon && describedById && describedById}\n >\n {this.showBackIcon && (\n <div class=\"back-icon\" innerHTML={backIcon}></div>\n )}\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n {pageTitle}\n </ic-link>\n );\n };\n\n private setSlottedCurrentPageClass = () => {\n const icLink = this.el.querySelector(\"ic-link\");\n const currentPage = \"current-page\";\n if (icLink) {\n icLink.classList.remove(currentPage);\n if (this.current) {\n const hasCurrentPageClass = icLink.classList.contains(currentPage);\n if (!hasCurrentPageClass) {\n icLink.classList.add(\"breadcrumb-link\", currentPage);\n }\n }\n }\n };\n\n render() {\n const { current, href, pageTitle } = this;\n const describedById = `${\n pageTitle && pageTitle.toLowerCase().replace(\" \", \"-\")\n }-describedby`;\n\n const hasPageTitle =\n pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== \"\";\n const hasHref = href !== null && isPropDefined(href) && href !== \"\";\n\n return (\n <Host\n class={{\n \"ic-breadcrumb-back\": this.showBackIcon,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n \"ic-breadcrumb-monochrome\": this.monochrome,\n }}\n aria-current={current && \"page\"}\n role=\"listitem\"\n >\n <div class=\"breadcrumb\">\n <span innerHTML={chevronIcon} class=\"chevron\" aria-hidden=\"true\" />\n {this.showBackIcon && describedById && (\n <span\n id={describedById}\n class=\"hide\"\n >{`Back to ${pageTitle}`}</span>\n )}\n {hasPageTitle && hasHref ? (\n this.renderDefaultBreadcrumb(\n current,\n pageTitle,\n describedById,\n href\n )\n ) : (\n <slot />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"wUAAA,MAAMA,EAAkB,qqE,MCkBXC,EAAU,M,yBA+CbC,KAAAC,wBAA0B,CAChCC,EACAC,EACAC,EACAC,KAEA,MAAMC,EACJH,IAAc,MAAQI,EAAcJ,IAAcA,IAAc,GAElE,GAAID,GAAWI,EAAc,CAC3B,OACEE,EAAA,QACEC,MAAO,CACL,yBAA0BP,IAG3BQ,EAAWV,KAAKW,GAAI,SAAWH,EAAA,QAAMI,KAAK,SAC1CT,E,CAKP,OACEK,EAAA,WACEK,MAAOb,KAAKa,MACZC,WAAYd,KAAKc,WACjBT,KAAMA,EACNI,MAAM,kBAAiB,mBACLT,KAAKe,cAAgBX,GAAiBA,GAEvDJ,KAAKe,cACJP,EAAA,OAAKC,MAAM,YAAYO,UAAWC,IAEnCP,EAAWV,KAAKW,GAAI,SAAWH,EAAA,QAAMI,KAAK,SAC1CT,EACO,EAINH,KAAAkB,2BAA6B,KACnC,MAAMC,EAASnB,KAAKW,GAAGS,cAAc,WACrC,MAAMC,EAAc,eACpB,GAAIF,EAAQ,CACVA,EAAOG,UAAUC,OAAOF,GACxB,GAAIrB,KAAKE,QAAS,CAChB,MAAMsB,EAAsBL,EAAOG,UAAUG,SAASJ,GACtD,IAAKG,EAAqB,CACxBL,EAAOG,UAAUI,IAAI,kBAAmBL,E,kBAxFpB,M,oCAUG,M,2CAUkB,M,WAKnB,S,CAE9B,mBAAAM,GACE3B,KAAKkB,4B,CAOP,cAAMU,GACJ,GAAI5B,KAAKW,GAAGkB,WAAWT,cAAc,WAAY,CAC/CpB,KAAKW,GAAGkB,WAAWT,cAAc,WAAWU,O,EAyDhD,MAAAC,GACE,MAAM7B,QAAEA,EAAOG,KAAEA,EAAIF,UAAEA,GAAcH,KACrC,MAAMI,EAAgB,GACpBD,GAAaA,EAAU6B,cAAcC,QAAQ,IAAK,mBAGpD,MAAM3B,EACJH,IAAc,MAAQI,EAAcJ,IAAcA,IAAc,GAClE,MAAM+B,EAAU7B,IAAS,MAAQE,EAAcF,IAASA,IAAS,GAEjE,OACEG,EAAC2B,EAAI,CACH1B,MAAO,CACL,qBAAsBT,KAAKe,aAC3B,CAAC,YAAYf,KAAKa,SAAUb,KAAKa,QAAU,UAC3C,2BAA4Bb,KAAKc,YAClC,eACaZ,GAAW,OACzBkC,KAAK,YAEL5B,EAAA,OAAKC,MAAM,cACTD,EAAA,QAAMQ,UAAWqB,EAAa5B,MAAM,UAAS,cAAa,SACzDT,KAAKe,cAAgBX,GACpBI,EAAA,QACE8B,GAAIlC,EACJK,MAAM,QACN,WAAWN,KAEdG,GAAgB4B,EACflC,KAAKC,wBACHC,EACAC,EACAC,EACAC,GAGFG,EAAA,c"}

package/dist/core/p-9c1d4f72.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,f as e,h as i,H as n,g as o}from"./p-6b5e91e2.js";import{g as a,v as s,a as r,i as l,w as d,I as c}from"./p-48e98730.js";const u='/! normalize.css v8.0.1 \| MIT License \| github.com/necolas/normalize.css /html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;margin-right:var(--ic-space-xs);list-style:none}:host(.in-side-menu){margin-right:0}:host::part(button){height:100%;min-height:2.5rem}:host(.in-side-menu) ::part(button){color:var(--ic-top-navigation-icon-active)}:host(.in-side-menu) ::part(button):hover{color:var(--ic-top-navigation-icon-hover);background-color:var(--ic-top-navigation-icon-hover-background)}:host(.in-side-menu) ::part(button):active{color:var(--ic-top-navigation-icon-pressed);background-color:var(--ic-top-navigation-icon-pressed-background)}';const h=[...d,"title"];const b=class{constructor(i){t(this,i);this.inheritedAttributes={};this.hostMutationObserver=null;this.hostMutationCallback=t=>{let i=false;t.forEach((({attributeName:t})=>{if(h.includes(t)){this.inheritedAttributes[t]=this.el.getAttribute(t);i=true}}));if(i){e(this)}};this.initialAppearance=a();this.mode="navbar";this.download=false;this.href=undefined;this.hreflang=undefined;this.label=undefined;this.referrerpolicy=undefined;this.rel=undefined;this.target=undefined;this.theme="inherit"}componentWillLoad(){this.inheritedAttributes=s(this.el,h)}componentDidLoad(){r([{prop:this.label,propName:"label"}],"Navigation Button");this.hostMutationObserver=new MutationObserver(this.hostMutationCallback);this.hostMutationObserver.observe(this.el,{attributes:true})}componentWillRender(){const t=this.el.querySelector(`[slot="icon"]`);t!==null&&t.setAttribute("viewBox","0 0 24 24")}disconnectedCallback(){var t;(t=this.hostMutationObserver)===null\|\|t===void 0?void 0:t.disconnect()}navBarMenuOpenHandler(){this.mode="menu"}navBarMenuCloseHandler(){this.mode="navbar"}brandChangeHandler(t){this.initialAppearance=t.detail.mode}async setFocus(){if(this.buttonEl){this.buttonEl.focus()}}render(){const{href:t,target:e,rel:o,download:s,referrerpolicy:r}=this;let d="";let u="";let h="icon";let b=this.initialAppearance;let p="large";let m=false;let g=false;if(this.mode==="menu"){d=this.label;h="tertiary";b=c.Default;p="medium";m=true;u="popout-menu-button";g=true}const f={variant:h,appearance:b,size:p,href:t,target:e,rel:o,download:s,referrerpolicy:r,fullWidth:m,disableTooltip:g};return i(n,{class:{["in-side-menu"]:this.mode==="menu",[`ic-theme-${this.theme}`]:this.theme!=="inherit"}},i("ic-button",Object.assign({class:u,"aria-label":h=="icon"?this.label:null,ref:t=>this.buttonEl=t},f,this.inheritedAttributes,{monochrome:this.mode!=="menu",theme:a()=="light"?"light":"dark"}),d,i("slot",{slot:"left-icon",name:"icon"}),l(this.el,"badge")&&h==="icon"&&i("slot",{name:"badge"})))}static get delegatesFocus(){return true}get el(){return o(this)}};b.style=u;export{b as ic_navigation_button};
2	+ //# sourceMappingURL=p-9c1d4f72.entry.js.map

package/dist/core/p-9c1d4f72.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["icNavigationButtonCss","MUTABLE_ATTRIBUTES","IC_INHERITED_ARIA","NavigationButton","this","inheritedAttributes","hostMutationObserver","hostMutationCallback","mutationList","forceComponentUpdate","forEach","attributeName","includes","el","getAttribute","forceUpdate","getBrandForegroundAppearance","componentWillLoad","inheritAttributes","componentDidLoad","onComponentRequiredPropUndefined","prop","label","propName","MutationObserver","observe","attributes","componentWillRender","iconEl","querySelector","setAttribute","disconnectedCallback","_a","disconnect","navBarMenuOpenHandler","mode","navBarMenuCloseHandler","brandChangeHandler","ev","initialAppearance","detail","setFocus","buttonEl","focus","render","href","target","rel","download","referrerpolicy","className","variant","appearance","size","fullWidth","disableTooltip","IcBrandForegroundEnum","Default","buttonProps","h","Host","class","theme","Object","assign","ref","monochrome","slot","name","isSlotUsed"],"sources":["src/components/ic-navigation-button/ic-navigation-button.css?tag=ic-navigation-button&encapsulation=shadow","src/components/ic-navigation-button/ic-navigation-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n margin-right: var(--ic-space-xs);\n list-style: none;\n}\n\n:host(.in-side-menu) {\n margin-right: 0;\n}\n\n:host::part(button) {\n height: 100%;\n min-height: 2.5rem;\n}\n\n:host(.in-side-menu) ::part(button) {\n color: var(--ic-top-navigation-icon-active);\n}\n\n:host(.in-side-menu) ::part(button):hover {\n color: var(--ic-top-navigation-icon-hover);\n background-color: var(--ic-top-navigation-icon-hover-background);\n}\n\n:host(.in-side-menu) ::part(button):active {\n color: var(--ic-top-navigation-icon-pressed);\n background-color: var(--ic-top-navigation-icon-pressed-background);\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n State,\n h,\n Listen,\n Method,\n forceUpdate,\n} from \"@stencil/core\";\n\nimport {\n getBrandForegroundAppearance,\n inheritAttributes,\n onComponentRequiredPropUndefined,\n isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcBrandForegroundNoDefault,\n IcThemeMode,\n} from \"../../utils/types\";\nimport { IcNavButtonModes } from \"./ic-navigation-button.types\";\n\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n * @slot badge - Badge component overlaying the top right of the button.\n */\n\n@Component({\n tag: \"ic-navigation-button\",\n styleUrl: \"ic-navigation-button.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class NavigationButton {\n private buttonEl: HTMLIcButtonElement;\n private inheritedAttributes: { [k: string]: string } = {};\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcNavigationButtonElement;\n\n @State() initialAppearance: IcBrandForegroundNoDefault | IcBrandForeground =\n getBrandForegroundAppearance();\n /**\n * The display mode.\n */\n @State() mode: IcNavButtonModes = \"navbar\";\n\n /**\n * If `true`, the user can save the linked URL instead of navigating to it.\n */\n @Prop() download?: string | boolean = false;\n\n /**\n * The URL that the link points to. This will render the button as an \"a\" tag.\n */\n @Prop() href?: string;\n\n /**\n * The human language of the linked URL.\n */\n @Prop() hreflang?: string;\n\n /**\n * The label info to display.\n */\n @Prop() label!: string;\n\n /**\n * How much of the referrer to send when following the link.\n */\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /**\n * The relationship of the linked URL as space-separated link types.\n */\n @Prop() rel?: string;\n\n /**\n * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n */\n @Prop() target?: string;\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n componentWillLoad(): void {\n this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Navigation Button\"\n );\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n });\n }\n\n componentWillRender(): void {\n const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n iconEl !== null && iconEl.setAttribute(\"viewBox\", \"0 0 24 24\");\n }\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n navBarMenuOpenHandler(): void {\n this.mode = \"menu\";\n }\n\n @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n navBarMenuCloseHandler(): void {\n this.mode = \"navbar\";\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n this.initialAppearance = ev.detail.mode;\n }\n\n /**\n * Sets focus on the native `button`.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.buttonEl) {\n this.buttonEl.focus();\n }\n }\n\n // triggered when attributes of host element change\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n let forceComponentUpdate = false;\n mutationList.forEach(({ attributeName }) => {\n if (MUTABLE_ATTRIBUTES.includes(attributeName)) {\n this.inheritedAttributes[attributeName] =\n this.el.getAttribute(attributeName);\n forceComponentUpdate = true;\n }\n });\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n render() {\n const { href, target, rel, download, referrerpolicy } = this;\n\n let label = \"\";\n let className = \"\";\n let variant: \"icon\" | \"tertiary\" = \"icon\";\n let appearance: IcBrandForeground | IcBrandForegroundEnum.Default =\n this.initialAppearance;\n let size: \"medium\" | \"large\" = \"large\";\n let fullWidth = false;\n let disableTooltip = false;\n\n if (this.mode === \"menu\") {\n label = this.label;\n variant = \"tertiary\";\n appearance = IcBrandForegroundEnum.Default;\n size = \"medium\";\n fullWidth = true;\n className = \"popout-menu-button\";\n disableTooltip = true;\n }\n\n const buttonProps = {\n variant,\n appearance,\n size,\n href,\n target,\n rel,\n download,\n referrerpolicy,\n fullWidth,\n disableTooltip,\n };\n\n return (\n <Host\n class={{\n [\"in-side-menu\"]: this.mode === \"menu\",\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <ic-button\n class={className}\n aria-label={variant == \"icon\" ? this.label : null}\n ref={(el) => (this.buttonEl = el)}\n {...buttonProps}\n {...this.inheritedAttributes}\n monochrome={this.mode !== \"menu\"}\n theme={getBrandForegroundAppearance() == \"light\" ? \"light\" : \"dark\"}\n >\n {label}\n <slot slot=\"left-icon\" name=\"icon\"></slot>\n {isSlotUsed(this.el, \"badge\") && variant === \"icon\" && (\n <slot name=\"badge\"></slot>\n )}\n </ic-button>\n </Host>\n );\n }\n}\n"],"mappings":"uIAAA,MAAMA,EAAwB,03FC4B9B,MAAMC,EAAqB,IAAIC,EAAmB,S,MAcrCC,EAAgB,M,yBAEnBC,KAAAC,oBAA+C,GAC/CD,KAAAE,qBAAyC,KAsGzCF,KAAAG,qBAAwBC,IAC9B,IAAIC,EAAuB,MAC3BD,EAAaE,SAAQ,EAAGC,oBACtB,GAAIV,EAAmBW,SAASD,GAAgB,CAC9CP,KAAKC,oBAAoBM,GACvBP,KAAKS,GAAGC,aAAaH,GACvBF,EAAuB,I,KAG3B,GAAIA,EAAsB,CACxBM,EAAYX,K,0BA3GdY,I,UAIgC,S,cAKI,M,mJAmCR,S,CAE9B,iBAAAC,GACEb,KAAKC,oBAAsBa,EAAkBd,KAAKS,GAAIZ,E,CAGxD,gBAAAkB,GACEC,EACE,CAAC,CAAEC,KAAMjB,KAAKkB,MAAOC,SAAU,UAC/B,qBAGFnB,KAAKE,qBAAuB,IAAIkB,iBAAiBpB,KAAKG,sBACtDH,KAAKE,qBAAqBmB,QAAQrB,KAAKS,GAAI,CACzCa,WAAY,M,CAIhB,mBAAAC,GACE,MAAMC,EAASxB,KAAKS,GAAGgB,cAAc,iBACrCD,IAAW,MAAQA,EAAOE,aAAa,UAAW,Y,CAGpD,oBAAAC,G,OACEC,EAAA5B,KAAKE,wBAAoB,MAAA0B,SAAA,SAAAA,EAAEC,Y,CAI7B,qBAAAC,GACE9B,KAAK+B,KAAO,M,CAId,sBAAAC,GACEhC,KAAK+B,KAAO,Q,CAId,kBAAAE,CAAmBC,GACjBlC,KAAKmC,kBAAoBD,EAAGE,OAAOL,I,CAOrC,cAAMM,GACJ,GAAIrC,KAAKsC,SAAU,CACjBtC,KAAKsC,SAASC,O,EAmBlB,MAAAC,GACE,MAAMC,KAAEA,EAAIC,OAAEA,EAAMC,IAAEA,EAAGC,SAAEA,EAAQC,eAAEA,GAAmB7C,KAExD,IAAIkB,EAAQ,GACZ,IAAI4B,EAAY,GAChB,IAAIC,EAA+B,OACnC,IAAIC,EACFhD,KAAKmC,kBACP,IAAIc,EAA2B,QAC/B,IAAIC,EAAY,MAChB,IAAIC,EAAiB,MAErB,GAAInD,KAAK+B,OAAS,OAAQ,CACxBb,EAAQlB,KAAKkB,MACb6B,EAAU,WACVC,EAAaI,EAAsBC,QACnCJ,EAAO,SACPC,EAAY,KACZJ,EAAY,qBACZK,EAAiB,I,CAGnB,MAAMG,EAAc,CAClBP,UACAC,aACAC,OACAR,OACAC,SACAC,MACAC,WACAC,iBACAK,YACAC,kBAGF,OACEI,EAACC,EAAI,CACHC,MAAO,CACL,CAAC,gBAAiBzD,KAAK+B,OAAS,OAChC,CAAC,YAAY/B,KAAK0D,SAAU1D,KAAK0D,QAAU,YAG7CH,EAAA,YAAAI,OAAAC,OAAA,CACEH,MAAOX,EAAS,aACJC,GAAW,OAAS/C,KAAKkB,MAAQ,KAC7C2C,IAAMpD,GAAQT,KAAKsC,SAAW7B,GAC1B6C,EACAtD,KAAKC,oBAAmB,CAC5B6D,WAAY9D,KAAK+B,OAAS,OAC1B2B,MAAO9C,KAAkC,QAAU,QAAU,SAE5DM,EACDqC,EAAA,QAAMQ,KAAK,YAAYC,KAAK,SAC3BC,EAAWjE,KAAKS,GAAI,UAAYsC,IAAY,QAC3CQ,EAAA,QAAMS,KAAK,W"}

package/dist/core/{p-428f95f8.entry.js → p-a23c515d.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as i,H as o,g as s}from"./p-6b5e91e2.js";import{y as n,d as a}from"./p-b7eb8ef9.js";import{c as r}from"./p-68a5aaff.js";const l='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){:host .opening-from-parent{animation:slide-in var(--ic-transition-duration-slow) ease-in-out}:host .opening-from-child{animation:slide-out var(--ic-transition-duration-slow) ease-in-out}}:host{border-radius:var(--ic-border-radius);color:var(--ic-popover-nav-text);--ic-typography-color:var(--ic-popover-nav-text);position:relative;z-index:var(--ic-z-index-popover);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);display:none}:host(.on-dialog){inset:auto !important}:host(.on-dialog-fix-translate){transform:translate(0, var(--ic-space-xs)) !important}:host(.on-dialog-translate-y){transform:translate(0, calc(-1 * var(--translate-y))) !important}.menu{border:var(--ic-border-default);border-color:var(--ic-popover-border);border-radius:var(--ic-border-radius);background-color:var(--ic-popover-background);visibility:hidden;height:0}.button{text-decoration:none;list-style-type:none}:host(:focus-within){box-shadow:var(--ic-border-focus)}.menu:focus-visible{outline:none}:host(.ic-popover-menu-open){display:block;min-width:calc(20rem - var(--ic-space-xl));width:var(--popover-width, 20rem);max-width:calc(100vw - var(--ic-space-xl))}:host(.ic-popover-menu-open) .menu{visibility:visible;height:-moz-fit-content;height:fit-content;max-height:var(--max-height, -moz-fit-content);max-height:var(--max-height, fit-content);overflow-y:auto;overflow-x:hidden}.parent-label{--ic-typography-color:var(--ic-popover-parent-label);margin:var(--ic-space-xs) var(--ic-space-xs) 0}@keyframes slide-in{from{opacity:0;transform:translateX(10rem)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out{from{opacity:0;transform:translateX(-10rem)}to{opacity:1;transform:translateX(0)}}';const h=class{constructor(i){e(this,i);this.icPopoverClosed=t(this,"icPopoverClosed",7);this.ARIA_LABEL="aria-label";this.popoverMenuEls=[];this.setButtonFocus=()=>{var e;(e=this.popoverMenuEls[this.currentFocus])===null||e===void 0?void 0:e.focus()};this.findAnchorEl=e=>{let t=null;if(!e){this.submenuId===undefined&&console.error("No anchor specified for popover component")}else{t=document.querySelector(e.indexOf("#")===0?e:"#"+e);if(t===null){console.error(`Popover anchor element '${e}' not found`)}}return t};this.isNotPopoverMenuEl=e=>{const{id:t,tagName:i}=e.target;return t!==this.anchor&&i!=="IC-MENU-ITEM"&&i!=="IC-MENU-GROUP"&&i!=="IC-POPOVER-MENU"};this.getNextItemToSelect=(e,t)=>{const i=this.popoverMenuEls.length-1;if(e<1){e=0}let o=t?e+1:e-1;if(o<0){o=i}else if(o>i){o=0}return o};this.addMenuItems=e=>{for(let t=0;t<e.length;t++){const i=e[t];if(i.tagName==="IC-MENU-ITEM"){this.popoverMenuEls.push(i)}else if(i.tagName==="IC-MENU-GROUP"){const e=i.shadowRoot.querySelector(".menu-items-wrapper");const t=n(e);this.addMenuItems(t)}}};this.getMenuAriaLabel=()=>{const e=this.el.getAttribute(this.ARIA_LABEL);if(a(this.submenuId)){return`${e}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`}else{return e}};this.handleBackButtonClick=()=>{this.parentPopover.openFromChild();this.open=false};this.initPopperJS=()=>{this.popperInstance=r(this.anchorEl,this.el,{placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[0,4]}},{name:"flip",options:{fallbackPlacements:["top-start","top-end","bottom-end"],rootBoundary:"viewport"}}]})};this.openingFromChild=false;this.openingFromParent=false;this.anchor=undefined;this.parentLabel=undefined;this.parentPopover=undefined;this.submenuId=undefined;this.submenuLevel=1;this.theme="inherit";this.open=undefined}watchOpenHandler(){if(this.open){if(this.parentPopover!==undefined&&!this.popoverMenuEls.some((e=>e.id))){this.popoverMenuEls.unshift(this.backButton)}this.currentFocus=0;setTimeout(this.setButtonFocus,50)}else if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}disconnectedCallback(){if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}componentDidLoad(){const e=this.el.shadowRoot.querySelector("ul.button");const t=n(e);if(t!==null){this.addMenuItems(t)}if(this.submenuId===undefined&&this.el.getAttribute(this.ARIA_LABEL)===null){console.error(`No aria-label specified for popover menu component - aria-label required`)}}componentWillRender(){this.anchorEl=this.findAnchorEl(this.anchor)}componentDidRender(){if(this.open&&!this.popperInstance){this.initPopperJS()}}handleMenuItemClick(e){if(!e.detail.hasSubMenu&&e.detail.label!=="Back"){this.closeMenu()}}handleSubmenuChange(e){const t=e.target;this.open=false;const i=document.querySelector(`ic-popover-menu[submenu-id=${t.submenuTriggerFor}]`);i.parentPopover=this.el;i.anchor=this.anchor;i.ariaLabel=this.el.getAttribute(this.ARIA_LABEL);i.openFromParent();i.submenuLevel=this.submenuLevel+1;i.parentLabel=t.label}handleClick(e){if(this.open&&this.isNotPopoverMenuEl(e)){this.closeMenu()}}handleKeyDown(e){switch(e.key){case"ArrowDown":case"ArrowUp":e.preventDefault();this.currentFocus=this.getNextItemToSelect(this.currentFocus,e.key==="ArrowDown");this.setButtonFocus();break;case"Home":this.currentFocus=0;this.setButtonFocus();break;case"End":this.currentFocus=this.popoverMenuEls.length-1;this.setButtonFocus();break;case"Escape":case"Tab":e.preventDefault();if(this.open){this.closeMenu(true);this.el.blur()}break}}async openFromChild(){this.open=true;this.openingFromChild=true;setTimeout((()=>this.openingFromChild=false),1e3)}async openFromParent(){this.open=true;this.openingFromParent=true;setTimeout((()=>this.openingFromParent=false),1e3)}async closeMenu(e=false){var t;this.open=false;if(this.parentPopover){this.parentPopover.closeMenu(e)}else{if(e){(t=this.anchorEl)===null||t===void 0?void 0:t.focus()}this.icPopoverClosed.emit()}}render(){return i(o,{class:{["ic-popover-menu-open"]:this.open,[`ic-theme-${this.theme}`]:this.theme!=="inherit"}},i("div",{id:this.parentPopover===undefined?`ic-popover-submenu-${this.submenuId}`:"",class:{menu:true},tabindex:open?"0":"-1"},i("span",{class:{"opening-from-parent":this.openingFromParent,"opening-from-child":this.openingFromChild}},a(this.submenuId)&&i("span",null,i("span",{role:"menu"},i("ic-menu-item",{class:"ic-popover-submenu-back-button",ref:e=>this.backButton=e,label:"Back",onClick:this.handleBackButtonClick,id:`ic-popover-submenu-back-button-${this.submenuLevel}`},i("svg",{slot:"icon",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",class:"submenu-back-icon"},i("path",{d:"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z",fill:"currentColor"})))),i("ic-typography",{variant:"subtitle-small",class:"parent-label"},this.parentLabel)),i("ul",{class:"button","aria-label":this.getMenuAriaLabel(),role:"menu"},i("slot",null)))))}static get delegatesFocus(){return true}get el(){return s(this)}static get watchers(){return{open:["watchOpenHandler"]}}};h.style=l;export{h as ic_popover_menu};
-//# sourceMappingURL=p-428f95f8.entry.js.map
+import{r as e,c as t,h as i,H as o,g as s}from"./p-6b5e91e2.js";import{z as n,d as a}from"./p-48e98730.js";import{c as r}from"./p-68a5aaff.js";const l='/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){:host .opening-from-parent{animation:slide-in var(--ic-transition-duration-slow) ease-in-out}:host .opening-from-child{animation:slide-out var(--ic-transition-duration-slow) ease-in-out}}:host{border-radius:var(--ic-border-radius);color:var(--ic-popover-nav-text);--ic-typography-color:var(--ic-popover-nav-text);position:relative;z-index:var(--ic-z-index-popover);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);display:none}:host(.on-dialog){inset:auto !important}:host(.on-dialog-fix-translate){transform:translate(0, var(--ic-space-xs)) !important}:host(.on-dialog-translate-y){transform:translate(0, calc(-1 * var(--translate-y))) !important}.menu{border:var(--ic-border-default);border-color:var(--ic-popover-border);border-radius:var(--ic-border-radius);background-color:var(--ic-popover-background);visibility:hidden;height:0}.button{text-decoration:none;list-style-type:none}:host(:focus-within){box-shadow:var(--ic-border-focus)}.menu:focus-visible{outline:none}:host(.ic-popover-menu-open){display:block;min-width:calc(20rem - var(--ic-space-xl));width:var(--popover-width, 20rem);max-width:calc(100vw - var(--ic-space-xl))}:host(.ic-popover-menu-open) .menu{visibility:visible;height:-moz-fit-content;height:fit-content;max-height:var(--max-height, -moz-fit-content);max-height:var(--max-height, fit-content);overflow-y:auto;overflow-x:hidden}.parent-label{--ic-typography-color:var(--ic-popover-parent-label);margin:var(--ic-space-xs) var(--ic-space-xs) 0}@keyframes slide-in{from{opacity:0;transform:translateX(10rem)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out{from{opacity:0;transform:translateX(-10rem)}to{opacity:1;transform:translateX(0)}}';const h=class{constructor(i){e(this,i);this.icPopoverClosed=t(this,"icPopoverClosed",7);this.ARIA_LABEL="aria-label";this.popoverMenuEls=[];this.setButtonFocus=()=>{var e;(e=this.popoverMenuEls[this.currentFocus])===null||e===void 0?void 0:e.focus()};this.findAnchorEl=e=>{let t=null;if(!e){this.submenuId===undefined&&console.error("No anchor specified for popover component")}else{t=document.querySelector(e.indexOf("#")===0?e:"#"+e);if(t===null){console.error(`Popover anchor element '${e}' not found`)}}return t};this.isNotPopoverMenuEl=e=>{const{id:t,tagName:i}=e.target;return t!==this.anchor&&i!=="IC-MENU-ITEM"&&i!=="IC-MENU-GROUP"&&i!=="IC-POPOVER-MENU"};this.getNextItemToSelect=(e,t)=>{const i=this.popoverMenuEls.length-1;if(e<1){e=0}let o=t?e+1:e-1;if(o<0){o=i}else if(o>i){o=0}return o};this.addMenuItems=e=>{for(let t=0;t<e.length;t++){const i=e[t];if(i.tagName==="IC-MENU-ITEM"){this.popoverMenuEls.push(i)}else if(i.tagName==="IC-MENU-GROUP"){const e=i.shadowRoot.querySelector(".menu-items-wrapper");const t=n(e);this.addMenuItems(t)}}};this.getMenuAriaLabel=()=>{const e=this.el.getAttribute(this.ARIA_LABEL);if(a(this.submenuId)){return`${e}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`}else{return e}};this.handleBackButtonClick=()=>{this.parentPopover.openFromChild();this.open=false};this.initPopperJS=()=>{this.popperInstance=r(this.anchorEl,this.el,{placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[0,4]}},{name:"flip",options:{fallbackPlacements:["top-start","top-end","bottom-end"],rootBoundary:"viewport"}}]})};this.openingFromChild=false;this.openingFromParent=false;this.anchor=undefined;this.parentLabel=undefined;this.parentPopover=undefined;this.submenuId=undefined;this.submenuLevel=1;this.theme="inherit";this.open=undefined}watchOpenHandler(){if(this.open){if(this.parentPopover!==undefined&&!this.popoverMenuEls.some((e=>e.id))){this.popoverMenuEls.unshift(this.backButton)}this.currentFocus=0;setTimeout(this.setButtonFocus,50)}else if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}disconnectedCallback(){if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}componentDidLoad(){const e=this.el.shadowRoot.querySelector("ul.button");const t=n(e);if(t!==null){this.addMenuItems(t)}if(this.submenuId===undefined&&this.el.getAttribute(this.ARIA_LABEL)===null){console.error(`No aria-label specified for popover menu component - aria-label required`)}}componentWillRender(){this.anchorEl=this.findAnchorEl(this.anchor)}componentDidRender(){if(this.open&&!this.popperInstance){this.initPopperJS()}}handleMenuItemClick(e){if(!e.detail.submenuTriggerFor&&e.detail.label!=="Back"){this.closeMenu(false,e.detail)}}handleSubmenuChange(e){const t=e.target;this.open=false;const i=document.querySelector(`ic-popover-menu[submenu-id=${t.submenuTriggerFor}]`);i.parentPopover=this.el;i.anchor=this.anchor;i.ariaLabel=this.el.getAttribute(this.ARIA_LABEL);i.openFromParent();i.submenuLevel=this.submenuLevel+1;i.parentLabel=t.label}handleClick(e){if(this.open&&this.isNotPopoverMenuEl(e)){this.closeMenu()}}handleKeyDown(e){switch(e.key){case"ArrowDown":case"ArrowUp":e.preventDefault();this.currentFocus=this.getNextItemToSelect(this.currentFocus,e.key==="ArrowDown");this.setButtonFocus();break;case"Home":this.currentFocus=0;this.setButtonFocus();break;case"End":this.currentFocus=this.popoverMenuEls.length-1;this.setButtonFocus();break;case"Escape":case"Tab":e.preventDefault();if(this.open){this.closeMenu(true);this.el.blur()}break}}async openFromChild(){this.open=true;this.openingFromChild=true;setTimeout((()=>this.openingFromChild=false),1e3)}async openFromParent(){this.open=true;this.openingFromParent=true;setTimeout((()=>this.openingFromParent=false),1e3)}async closeMenu(e=false,t){var i;this.open=false;if(this.parentPopover){this.parentPopover.closeMenu(e,t)}else{if(e){(i=this.anchorEl)===null||i===void 0?void 0:i.focus()}this.icPopoverClosed.emit(t)}}render(){return i(o,{class:{["ic-popover-menu-open"]:this.open,[`ic-theme-${this.theme}`]:this.theme!=="inherit"}},i("div",{id:this.parentPopover===undefined?`ic-popover-submenu-${this.submenuId}`:"",class:{menu:true},tabindex:open?"0":"-1"},i("span",{class:{"opening-from-parent":this.openingFromParent,"opening-from-child":this.openingFromChild}},a(this.submenuId)&&i("span",null,i("span",{role:"menu"},i("ic-menu-item",{class:"ic-popover-submenu-back-button",ref:e=>this.backButton=e,label:"Back",onClick:this.handleBackButtonClick,id:`ic-popover-submenu-back-button-${this.submenuLevel}`},i("svg",{slot:"icon",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",class:"submenu-back-icon"},i("path",{d:"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z",fill:"currentColor"})))),i("ic-typography",{variant:"subtitle-small",class:"parent-label"},this.parentLabel)),i("ul",{class:"button","aria-label":this.getMenuAriaLabel(),role:"menu"},i("slot",null)))))}static get delegatesFocus(){return true}get el(){return s(this)}static get watchers(){return{open:["watchOpenHandler"]}}};h.style=l;export{h as ic_popover_menu};
+//# sourceMappingURL=p-a23c515d.entry.js.map

package/dist/core/p-a23c515d.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["icPopoverMenuCss","PopoverMenu","this","ARIA_LABEL","popoverMenuEls","setButtonFocus","_a","currentFocus","focus","findAnchorEl","anchor","anchorElement","submenuId","undefined","console","error","document","querySelector","indexOf","isNotPopoverMenuEl","ev","id","tagName","target","getNextItemToSelect","currentItem","movingDown","numButtons","length","nextItem","addMenuItems","elements","i","el","push","groupSlotWrapper","shadowRoot","menuGroupElements","getSlotElements","getMenuAriaLabel","ariaLabel","getAttribute","isPropDefined","submenuLevel","parentLabel","handleBackButtonClick","parentPopover","openFromChild","open","initPopperJS","popperInstance","createPopper","anchorEl","placement","modifiers","name","options","offset","fallbackPlacements","rootBoundary","watchOpenHandler","some","menuItem","unshift","backButton","setTimeout","destroy","disconnectedCallback","componentDidLoad","slotWrapper","popoverMenuElements","componentWillRender","componentDidRender","handleMenuItemClick","detail","submenuTriggerFor","label","closeMenu","handleSubmenuChange","childEl","openFromParent","handleClick","handleKeyDown","key","preventDefault","blur","openingFromChild","openingFromParent","setFocusToAnchor","menuElement","icPopoverClosed","emit","render","h","Host","class","theme","menu","tabindex","role","ref","onClick","slot","viewBox","fill","xmlns","d","variant"],"sources":["src/components/ic-popover-menu/ic-popover-menu.css?tag=ic-popover-menu&encapsulation=shadow","src/components/ic-popover-menu/ic-popover-menu.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n* @prop --ic-z-index-popover: z-index of popover menu. \n* @prop --max-height: Maximum height of the popover menu.\n* @prop --popover-width: Default width of the popover menu.\n*/\n\n@media (prefers-reduced-motion: no-preference) {\n :host .opening-from-parent {\n animation: slide-in var(--ic-transition-duration-slow) ease-in-out;\n }\n\n :host .opening-from-child {\n animation: slide-out var(--ic-transition-duration-slow) ease-in-out;\n }\n}\n\n:host {\n border-radius: var(--ic-border-radius);\n color: var(--ic-popover-nav-text);\n\n --ic-typography-color: var(--ic-popover-nav-text);\n\n position: relative;\n z-index: var(--ic-z-index-popover);\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n display: none;\n}\n\n:host(.on-dialog) {\n inset: auto !important;\n}\n\n:host(.on-dialog-fix-translate) {\n transform: translate(0, var(--ic-space-xs)) !important;\n}\n\n:host(.on-dialog-translate-y) {\n transform: translate(0, calc(-1 * var(--translate-y))) !important;\n}\n\n.menu {\n border: var(--ic-border-default);\n border-color: var(--ic-popover-border);\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-popover-background);\n visibility: hidden;\n height: 0;\n}\n\n.button {\n text-decoration: none;\n list-style-type: none;\n}\n\n:host(:focus-within) {\n box-shadow: var(--ic-border-focus);\n}\n\n.menu:focus-visible {\n outline: none;\n}\n\n:host(.ic-popover-menu-open) {\n display: block;\n min-width: calc(20rem - var(--ic-space-xl));\n width: var(--popover-width, 20rem);\n max-width: calc(100vw - var(--ic-space-xl));\n}\n\n:host(.ic-popover-menu-open) .menu {\n visibility: visible;\n height: fit-content;\n max-height: var(--max-height, fit-content);\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.parent-label {\n --ic-typography-color: var(--ic-popover-parent-label);\n\n margin: var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n@keyframes slide-in {\n from {\n opacity: 0;\n transform: translateX(10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes slide-out {\n from {\n opacity: 0;\n transform: translateX(-10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n","import {\n Component,\n Element,\n Host,\n h,\n Prop,\n Listen,\n Watch,\n State,\n Method,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport { getSlotElements, isPropDefined } from \"../../utils/helpers\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-popover-menu\",\n styleUrl: \"ic-popover-menu.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class PopoverMenu {\n private anchorEl: HTMLElement;\n private ARIA_LABEL: string = \"aria-label\";\n private backButton: HTMLIcMenuItemElement;\n private currentFocus: number;\n private popoverMenuEls: HTMLIcMenuItemElement[] = [];\n private popperInstance: PopperInstance;\n\n @Element() el: HTMLIcPopoverMenuElement;\n\n @State() openingFromChild: boolean = false;\n @State() openingFromParent: boolean = false;\n\n /**\n * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.\n */\n @Prop() anchor: string;\n\n /**\n * @internal The parent popover menu of a child popover menu.\n */\n @Prop() parentLabel?: string;\n\n /**\n * @internal The parent popover menu of a child popover menu.\n */\n @Prop() parentPopover?: HTMLIcPopoverMenuElement;\n\n /**\n * The unique identifier for a popover submenu.\n */\n @Prop() submenuId?: string;\n\n /**\n * @internal The level of menu being displayed.\n */\n @Prop() submenuLevel: number = 1;\n\n /**\n * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /**\n * If `true`, the popover menu will be displayed.\n */\n @Prop({ reflect: true, mutable: true }) open: boolean = undefined;\n\n @Watch(\"open\")\n watchOpenHandler(): void {\n if (this.open) {\n if (\n this.parentPopover !== undefined &&\n !this.popoverMenuEls.some((menuItem) => menuItem.id)\n ) {\n this.popoverMenuEls.unshift(this.backButton);\n }\n\n this.currentFocus = 0;\n // Needed so that anchorEl isn't always focused\n setTimeout(this.setButtonFocus, 50);\n } else if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n /**\n * Emitted when the popover menu is closed.\n */\n @Event() icPopoverClosed: EventEmitter<HTMLIcMenuItemElement>;\n\n disconnectedCallback(): void {\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n componentDidLoad(): void {\n const slotWrapper = this.el.shadowRoot.querySelector(\"ul.button\");\n const popoverMenuElements = getSlotElements(slotWrapper);\n\n if (popoverMenuElements !== null) {\n this.addMenuItems(popoverMenuElements);\n }\n\n if (\n this.submenuId === undefined &&\n this.el.getAttribute(this.ARIA_LABEL) === null\n ) {\n console.error(\n `No aria-label specified for popover menu component - aria-label required`\n );\n }\n }\n\n componentWillRender(): void {\n this.anchorEl = this.findAnchorEl(this.anchor);\n }\n\n componentDidRender(): void {\n if (this.open && !this.popperInstance) {\n this.initPopperJS();\n }\n }\n\n @Listen(\"handleMenuItemClick\")\n handleMenuItemClick(ev: CustomEvent<HTMLIcMenuItemElement>): void {\n if (!ev.detail.submenuTriggerFor && ev.detail.label !== \"Back\") {\n this.closeMenu(false, ev.detail);\n }\n }\n\n // This is listening for the event emitted when a menu item is acting as a trigger button\n @Listen(\"triggerPopoverMenuInstance\", { capture: true })\n handleSubmenuChange(ev: Event): void {\n // Finds the trigger menu item that has emitted the event\n const target = ev.target as HTMLIcMenuItemElement;\n this.open = false;\n\n // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).\n const childEl = document.querySelector(\n `ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`\n ) as HTMLIcPopoverMenuElement;\n // Set the parent popover menu of the submenu and open the submenu\n childEl.parentPopover = this.el;\n childEl.anchor = this.anchor;\n childEl.ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n childEl.openFromParent();\n childEl.submenuLevel = this.submenuLevel + 1;\n // Set the label in the submenu using the label of the menu item that has emitted the event\n childEl.parentLabel = target.label;\n }\n\n @Listen(\"click\", { target: \"document\" })\n handleClick(ev: Event): void {\n if (this.open && this.isNotPopoverMenuEl(ev)) {\n // If menu is open and the next click on the document is not a popover El, close the popover\n this.closeMenu();\n }\n }\n\n // Manages the keyboard navigation in the popover menu\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n switch (ev.key) {\n case \"ArrowDown\":\n case \"ArrowUp\":\n ev.preventDefault();\n this.currentFocus = this.getNextItemToSelect(\n this.currentFocus,\n ev.key === \"ArrowDown\"\n );\n this.setButtonFocus();\n break;\n case \"Home\":\n //Sets home focus as first element, or back button\n this.currentFocus = 0;\n this.setButtonFocus();\n break;\n case \"End\":\n //Sets end focus as last element\n this.currentFocus = this.popoverMenuEls.length - 1;\n this.setButtonFocus();\n break;\n case \"Escape\":\n case \"Tab\":\n ev.preventDefault();\n if (this.open) {\n this.closeMenu(true);\n this.el.blur();\n }\n break;\n }\n }\n\n /**\n * @internal Opens the menu from the child menu.\n */\n @Method()\n async openFromChild(): Promise<void> {\n this.open = true;\n this.openingFromChild = true;\n\n setTimeout(() => (this.openingFromChild = false), 1000);\n }\n\n /**\n * @internal Opens the menu from the parent menu.\n */\n @Method()\n async openFromParent(): Promise<void> {\n this.open = true;\n this.openingFromParent = true;\n\n setTimeout(() => (this.openingFromParent = false), 1000);\n }\n\n private setButtonFocus = () => {\n this.popoverMenuEls[this.currentFocus]?.focus();\n };\n\n // Checks that the popover menu has an anchor\n private findAnchorEl = (anchor: string): HTMLElement => {\n let anchorElement: HTMLElement = null;\n if (!anchor) {\n this.submenuId === undefined &&\n console.error(\"No anchor specified for popover component\");\n } else {\n anchorElement = document.querySelector(\n anchor.indexOf(\"#\") === 0 ? anchor : \"#\" + anchor\n );\n if (anchorElement === null) {\n console.error(`Popover anchor element '${anchor}' not found`);\n }\n }\n return anchorElement;\n };\n\n private isNotPopoverMenuEl = (ev: Event) => {\n const { id, tagName } = ev.target as HTMLElement;\n return (\n id !== this.anchor &&\n tagName !== \"IC-MENU-ITEM\" &&\n tagName !== \"IC-MENU-GROUP\" &&\n tagName !== \"IC-POPOVER-MENU\"\n );\n };\n\n /**\n * @internal Close the menu, emit icPopoverClosed of the root popover\n * @param setFocusToAnchor when true return focus to anchor element when menu is closed\n */\n @Method()\n async closeMenu(\n setFocusToAnchor = false,\n menuElement?: HTMLIcMenuItemElement\n ): Promise<void> {\n this.open = false;\n if (this.parentPopover) {\n this.parentPopover.closeMenu(setFocusToAnchor, menuElement);\n } else {\n if (setFocusToAnchor) {\n this.anchorEl?.focus();\n }\n this.icPopoverClosed.emit(menuElement);\n }\n }\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numButtons = this.popoverMenuEls.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n // Check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numButtons;\n } else if (nextItem > numButtons) {\n nextItem = 0;\n }\n\n return nextItem;\n };\n\n private addMenuItems = (elements: Element[] | NodeListOf<ChildNode>) => {\n for (let i = 0; i < elements.length; i++) {\n const el = elements[i] as HTMLIcMenuItemElement;\n if (el.tagName === \"IC-MENU-ITEM\") {\n this.popoverMenuEls.push(el);\n } else if (el.tagName === \"IC-MENU-GROUP\") {\n const groupSlotWrapper = el.shadowRoot.querySelector(\n \".menu-items-wrapper\"\n );\n const menuGroupElements = getSlotElements(groupSlotWrapper);\n\n this.addMenuItems(menuGroupElements);\n }\n }\n };\n\n private getMenuAriaLabel = (): string => {\n const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n\n if (isPropDefined(this.submenuId)) {\n return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;\n } else {\n return ariaLabel;\n }\n };\n\n private handleBackButtonClick = (): void => {\n this.parentPopover.openFromChild();\n this.open = false;\n };\n\n private initPopperJS = () => {\n this.popperInstance = createPopper(this.anchorEl, this.el, {\n placement: \"bottom-start\",\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 4],\n },\n },\n {\n name: \"flip\",\n options: {\n fallbackPlacements: [\"top-start\", \"top-end\", \"bottom-end\"],\n rootBoundary: \"viewport\",\n },\n },\n ],\n });\n };\n\n render() {\n return (\n <Host\n class={{\n [\"ic-popover-menu-open\"]: this.open,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <div\n id={\n this.parentPopover === undefined\n ? `ic-popover-submenu-${this.submenuId}`\n : \"\"\n }\n class={{\n menu: true,\n }}\n tabindex={open ? \"0\" : \"-1\"}\n >\n <span\n class={{\n \"opening-from-parent\": this.openingFromParent,\n \"opening-from-child\": this.openingFromChild,\n }}\n >\n {isPropDefined(this.submenuId) && (\n <span>\n <span role=\"menu\">\n <ic-menu-item\n class=\"ic-popover-submenu-back-button\"\n ref={(el) => (this.backButton = el)}\n label=\"Back\"\n onClick={this.handleBackButtonClick}\n id={`ic-popover-submenu-back-button-${this.submenuLevel}`}\n >\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"submenu-back-icon\"\n >\n <path\n d=\"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-menu-item>\n </span>\n <ic-typography variant=\"subtitle-small\" class=\"parent-label\">\n {this.parentLabel}\n </ic-typography>\n </span>\n )}\n <ul class=\"button\" aria-label={this.getMenuAriaLabel()} role=\"menu\">\n <slot></slot>\n </ul>\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}