npm - @ukic/web-components - Versions diffs - 2.1.0-beta.2 → 2.1.0-beta.4 - Mend

@ukic/web-components 2.1.0-beta.2 → 2.1.0-beta.4

Files changed (496) hide show

package/dist/core/p-6f442942.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,h as i,H as s,g as h}from"./p-f9370be6.js";import{c as e}from"./p-a8ac8f72.js";import"./p-6f57b13c.js";const l=":host{display:flex;width:100%}.step-item-list{display:flex;margin:0;padding:0}:host(.default:not(.aligned-left)) .step-item-list{flex:auto}:host(.compact) ul ::slotted(ic-step){display:none}:host(.compact) ul ::slotted(ic-step.show){display:flex}:host(.compact) ul ::slotted(ic-step.hide){display:none;opacity:0;visibility:hidden}";const p=class{constructor(i){t(this,i);this.resizeObserver=null;this.getChildren=()=>{this.steps=Array.from(this.el.querySelectorAll("ic-step"));this.stepsWithStepTitles=Array.from(this.el.querySelectorAll("ic-step[step-title]"))};this.checkStepTitles=()=>{if(this.stepsWithStepTitles.length<this.steps.length&&this.variantOverride&&this.variant==="compact"){this.noOfResizes=this.noOfResizes+1;if(this.noOfResizes===1){console.error(`The prop 'step-title' (web components) / 'stepTitle' (react) is required for all steps of the Stepper component (compact variant)`)}}};this.setStepTypes=()=>{this.getChildren();this.stepTypes=[];for(let t=0;t<this.steps.length;t++){this.stepTypes.push("active")}};this.setStepperWidth=()=>{this.alignedFullWidth=this.variant==="default"&&this.aligned==="full-width";const t=this.steps[this.steps.length-1];t.style.maxWidth="none";if(this.alignedFullWidth){this.stepperWidth=this.el.offsetWidth;t.style.maxWidth=`${this.stepperWidth/this.steps.length}px`;this.lastStepWidth=t.offsetWidth}};this.initialiseStepStates=()=>{this.steps.forEach(((t,i)=>{t.variant=this.variant;t.stepNum=i+1;t.lastStep=i===this.steps.length-1;t.lastStepNum=this.steps.length;if(t.stepType!=="current"){t.current=false;this.stepTypes[i]=t.stepType}else{t.current=true}const s=t.shadowRoot&&t.shadowRoot.querySelector(".step > .step-title-area");if(this.stepsWithStepTitles.length==0&&this.variantOverride){if(this.variant==="compact"){this.autoSetStepTitles=true;if(this.autoSetStepTitles){t.stepTitle="Step "+t.stepNum;s&&s.querySelector(".step-title").setAttribute("aria-hidden","true")}}if(this.variant==="default"){this.autoSetStepTitles=false;if(!this.autoSetStepTitles){t.stepTitle=undefined;s&&s.querySelector(".step-title").removeAttribute("aria-hidden")}}}if(this.variant==="compact"){if(t.current===true\|\|t.stepType==="current"){t.classList.remove("hide");t.classList.add("show")}else if(t.classList.contains("show")){t.classList.remove("show");t.classList.add("hide")}if(!t.lastStep){t.nextStepTitle=this.steps[i+1].stepTitle;t.progress=t.stepNum/this.steps.length100}else if(t.lastStep&&this.stepTypes[i]!=="completed"){t.progress=95}else{t.progress=100}if(this.hideStepInfo&&s!==null){s.classList.remove("visually-hidden")}t.compactStepStyling=this.stepTypes[i]}if(this.variant==="default"){if(!t.lastStep){if(this.alignedFullWidth){t.style.width=`${(this.stepperWidth-this.lastStepWidth)/(this.steps.length-1)}px`;t.style.minWidth="148px"}}else if(t.lastStep){t.classList.add("last-step");if(this.alignedFullWidth){t.style.maxWidth=`${this.lastStepWidth}px`}else{t.style.maxWidth=this.connectorWidth>100?`${this.connectorWidth+48}px`:"148px"}}if(this.aligned==="left"){t.style.width=this.connectorWidth>100?`${this.connectorWidth+48}px`:"148px";const i=t.shadowRoot.querySelector(".step > .step-top > .step-connect");if(i){i.style.width=this.connectorWidth>100?`${this.connectorWidth}px`:"100px"}}if(this.hideStepInfo&&s!==null){s.classList.add("visually-hidden")}}}))};this.overrideVariant=()=>{let t=148this.steps.length;if(this.aligned==="left"&&this.connectorWidth>100){t=(this.connectorWidth+48)*this.steps.length}if(this.variantOverride){if(this.el.clientWidth<t){this.variant="compact";this.getChildren()}else{this.variant="default";this.getChildren()}}};this.resizeObserverCallback=()=>{this.getChildren();this.checkStepTitles();this.overrideVariant();this.setStepperWidth();this.initialiseStepStates()};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{this.resizeObserverCallback()}));this.resizeObserver.observe(this.el)};this.aligned="full-width";this.variant="default";this.connectorWidth=100;this.hideStepInfo=false;this.stepperWidth=document.querySelector("ic-stepper").getBoundingClientRect().width;this.lastStepWidth=0;this.stepTypes=[];this.alignedFullWidth=true;this.autoSetStepTitles=true;this.variantOverride=this.variant!=="compact";this.noOfResizes=0}componentWillLoad(){this.setStepTypes();if(this.variant==="compact"){this.variantOverride=false}}componentDidLoad(){e(this.runResizeObserver)}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}render(){return i(s,{class:{[`${this.variant}`]:true,["aligned-left"]:this.variant==="default"&&this.aligned==="left"}},i("ul",{class:"step-item-list"},i("slot",null)))}get el(){return h(this)}};p.style=l;export{p as ic_stepper};
2	+ //# sourceMappingURL=p-6f442942.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/components/ic-stepper/ic-stepper.css?tag=ic-stepper&encapsulation=shadow","src/components/ic-stepper/ic-stepper.tsx"],"names":["icStepperCss","Stepper","this","resizeObserver","getChildren","steps","Array","from","el","querySelectorAll","stepsWithStepTitles","checkStepTitles","length","variantOverride","variant","noOfResizes","console","error","setStepTypes","stepTypes","i","push","setStepperWidth","alignedFullWidth","aligned","lastStep","style","maxWidth","stepperWidth","offsetWidth","lastStepWidth","initialiseStepStates","forEach","step","index","stepNum","lastStepNum","stepType","current","stepTitleArea","shadowRoot","querySelector","autoSetStepTitles","stepTitle","setAttribute","undefined","removeAttribute","classList","remove","add","contains","nextStepTitle","progress","hideStepInfo","compactStepStyling","width","minWidth","connectorWidth","stepConnect","overrideVariant","minDefaultStepperWidth","clientWidth","resizeObserverCallback","runResizeObserver","ResizeObserver","observe","document","getBoundingClientRect","[object Object]","checkResizeObserver","disconnect","h","Host","class"],"mappings":"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","sourcesContent":[":host {\n display: flex;\n width: 100%;\n}\n\n.step-item-list {\n display: flex;\n margin: 0;\n padding: 0;\n}\n\n:host(.default:not(.aligned-left)) .step-item-list {\n flex: auto;\n}\n\n:host(.compact) ul ::slotted(ic-step) {\n display: none;\n}\n\n:host(.compact) ul ::slotted(ic-step.show) {\n display: flex;\n}\n\n:host(.compact) ul ::slotted(ic-step.hide) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n","import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport { checkResizeObserver } from \"../../utils/helpers\";\nimport { IcStepperAlignment } from \"./ic-stepper.types\";\nimport { IcStepTypes, IcStepVariants } from \"../ic-step/ic-step.types\";\n\n@Component({\n tag: \"ic-stepper\",\n styleUrl: \"ic-stepper.css\",\n shadow: true,\n})\nexport class Stepper {\n @Element() el: HTMLIcStepperElement;\n\n /**\n * The alignment of the default stepper within its container.\n */\n @Prop() aligned?: IcStepperAlignment = \"full-width\";\n\n /**\n * The variant of the stepper.\n */\n @Prop({ mutable: true }) variant?: IcStepVariants = \"default\";\n\n /**\n * The length of the connnector between each step in pixels. Minimum length is 100px.\n */\n @Prop() connectorWidth?: number = 100;\n\n /**\n * If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.\n */\n @Prop() hideStepInfo?: boolean = false;\n\n @State() stepperWidth: number = document\n .querySelector(\"ic-stepper\")\n .getBoundingClientRect().width;\n\n @State() lastStepWidth: number = 0;\n\n @State() stepTypes: IcStepTypes[] = [];\n\n @State() alignedFullWidth: boolean = true;\n\n @State() autoSetStepTitles: boolean = true;\n\n @State() variantOverride?: boolean = this.variant !== \"compact\";\n\n @State() noOfResizes?: number = 0;\n\n private steps: HTMLIcStepElement[];\n\n private stepsWithStepTitles: HTMLIcStepElement[];\n\n private resizeObserver: ResizeObserver = null;\n\n // Get all steps currently within this stepper\n private getChildren = (): void => {\n this.steps = Array.from(this.el.querySelectorAll(\"ic-step\"));\n\n this.stepsWithStepTitles = Array.from(\n this.el.querySelectorAll(\"ic-step[step-title]\")\n );\n };\n\n // Inform the user that stepTitles are required on all steps in a compact stepper\n private checkStepTitles = (): void => {\n if (\n this.stepsWithStepTitles.length < this.steps.length &&\n this.variantOverride &&\n this.variant === \"compact\"\n ) {\n this.noOfResizes = this.noOfResizes + 1;\n if (this.noOfResizes === 1) {\n console.error(\n `The prop 'step-title' (web components) / 'stepTitle' (react) is required for all steps of the Stepper component (compact variant)`\n );\n }\n }\n };\n\n private setStepTypes = (): void => {\n this.getChildren();\n this.stepTypes = [];\n for (let i = 0; i < this.steps.length; i++) {\n this.stepTypes.push(\"active\");\n }\n };\n\n private setStepperWidth = (): void => {\n this.alignedFullWidth =\n this.variant === \"default\" && this.aligned === \"full-width\";\n\n const lastStep = this.steps[this.steps.length - 1];\n lastStep.style.maxWidth = \"none\";\n\n if (this.alignedFullWidth) {\n this.stepperWidth = this.el.offsetWidth;\n lastStep.style.maxWidth = `${this.stepperWidth / this.steps.length}px`;\n this.lastStepWidth = lastStep.offsetWidth;\n }\n };\n\n private initialiseStepStates = (): void => {\n this.steps.forEach((step, index) => {\n // Set variant\n step.variant = this.variant;\n // Assign stepNum to each step\n step.stepNum = index + 1;\n // Assign lastStep to final step\n step.lastStep = index === this.steps.length - 1;\n step.lastStepNum = this.steps.length;\n\n if (step.stepType !== \"current\") {\n step.current = false;\n this.stepTypes[index] = step.stepType;\n } else {\n step.current = true;\n }\n\n const stepTitleArea =\n step.shadowRoot &&\n step.shadowRoot.querySelector(\".step > .step-title-area\");\n\n if (this.stepsWithStepTitles.length == 0 && this.variantOverride) {\n if (this.variant === \"compact\") {\n this.autoSetStepTitles = true;\n if (this.autoSetStepTitles) {\n step.stepTitle = \"Step \" + step.stepNum;\n stepTitleArea &&\n stepTitleArea\n .querySelector(\".step-title\")\n .setAttribute(\"aria-hidden\", \"true\");\n }\n }\n if (this.variant === \"default\") {\n this.autoSetStepTitles = false;\n if (!this.autoSetStepTitles) {\n step.stepTitle = undefined;\n stepTitleArea &&\n stepTitleArea\n .querySelector(\".step-title\")\n .removeAttribute(\"aria-hidden\");\n }\n }\n }\n\n if (this.variant === \"compact\") {\n if (step.current === true || step.stepType === \"current\") {\n step.classList.remove(\"hide\");\n step.classList.add(\"show\");\n } else if (step.classList.contains(\"show\")) {\n step.classList.remove(\"show\");\n step.classList.add(\"hide\");\n }\n\n if (!step.lastStep) {\n step.nextStepTitle = this.steps[index + 1].stepTitle;\n step.progress = (step.stepNum / this.steps.length) * 100;\n } else if (step.lastStep && this.stepTypes[index] !== \"completed\") {\n step.progress = 95;\n } else {\n step.progress = 100;\n }\n\n if (this.hideStepInfo && stepTitleArea !== null) {\n stepTitleArea.classList.remove(\"visually-hidden\");\n }\n\n step.compactStepStyling = this.stepTypes[index];\n }\n\n if (this.variant === \"default\") {\n if (!step.lastStep) {\n if (this.alignedFullWidth) {\n step.style.width = `${\n (this.stepperWidth - this.lastStepWidth) / (this.steps.length - 1)\n }px`;\n step.style.minWidth = \"148px\";\n }\n } else if (step.lastStep) {\n step.classList.add(\"last-step\");\n if (this.alignedFullWidth) {\n step.style.maxWidth = `${this.lastStepWidth}px`;\n } else {\n step.style.maxWidth =\n this.connectorWidth > 100\n ? `${this.connectorWidth + 48}px`\n : \"148px\";\n }\n }\n\n if (this.aligned === \"left\") {\n step.style.width =\n this.connectorWidth > 100\n ? `${this.connectorWidth + 48}px`\n : \"148px\";\n const stepConnect = step.shadowRoot.querySelector(\n \".step > .step-top > .step-connect\"\n ) as HTMLElement;\n\n if (stepConnect) {\n stepConnect.style.width =\n this.connectorWidth > 100 ? `${this.connectorWidth}px` : \"100px\";\n }\n }\n\n if (this.hideStepInfo && stepTitleArea !== null) {\n stepTitleArea.classList.add(\"visually-hidden\");\n }\n }\n });\n };\n\n private overrideVariant = () => {\n let minDefaultStepperWidth = 148 * this.steps.length;\n\n if (this.aligned === \"left\" && this.connectorWidth > 100) {\n minDefaultStepperWidth = (this.connectorWidth + 48) * this.steps.length;\n }\n\n if (this.variantOverride) {\n if (this.el.clientWidth < minDefaultStepperWidth) {\n this.variant = \"compact\";\n this.getChildren();\n } else {\n this.variant = \"default\";\n this.getChildren();\n }\n }\n };\n\n private resizeObserverCallback = () => {\n this.getChildren();\n this.checkStepTitles();\n this.overrideVariant();\n this.setStepperWidth();\n this.initialiseStepStates();\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback();\n });\n this.resizeObserver.observe(this.el);\n };\n\n componentWillLoad(): void {\n this.setStepTypes();\n if (this.variant === \"compact\") {\n this.variantOverride = false;\n }\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n return (\n <Host\n class={{\n [`${this.variant}`]: true,\n [\"aligned-left\"]:\n this.variant === \"default\" && this.aligned === \"left\",\n }}\n >\n <ul class=\"step-item-list\">\n <slot></slot>\n </ul>\n </Host>\n );\n }\n}\n"]}

package/dist/core/{p-60ffb73e.entry.js → p-789e197b.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as i,H as a,g as s}from"./p-f9370be6.js";import{a as o}from"./p-6f57b13c.js";import{w as n,m as r,d as l,a as c,r as h,h as d,e as u,H as p,n as b}from"./p-23831891.js";const f='/*! 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}::-moz-placeholder{color:var(--ic-color-tertiary-text);opacity:1}::placeholder{color:var(--ic-color-tertiary-text);opacity:1}input,textarea{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);line-height:1.5rem;letter-spacing:0.005rem;width:100%;padding-right:var(--ic-space-xs);padding-left:var(--ic-space-xs)}textarea{min-height:var(--ic-space-lg);resize:vertical;padding-top:6px}input:focus,textarea:focus{border:0;outline:0}input:disabled,textarea:disabled{color:var(--ic-architectural-200)}input.readonly,textarea.readonly{color:var(--ic-color-primary-text)}.fullwidth{position:relative;width:100%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type="number"]{-moz-appearance:textfield}textarea.no-resize{resize:none}.maxlengthtext{color:var(--ic-color-secondary-text)}.exceeded{color:var(--ic-status-error)}.disabled{color:var(--ic-architectural-200)}.no-left-pad{padding-left:0}::slotted([slot="icon"]){fill:var(--ic-color-tertiary-text)}.has-value ::slotted([slot="icon"]){fill:var(--ic-color-primary-text)}.charcount{margin-right:calc(-1 * var(--ic-space-xxxs))}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration{display:none}input[type="search"].truncate-value{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media (forced-colors: active){input.readonly,textarea.readonly{color:canvastext}.has-value ::slotted([slot="icon"]){fill:currentcolor}}';let m=0;const y=class{constructor(i){t(this,i);this.icKeydown=e(this,"icKeydown",7);this.icInput=e(this,"icInput",7);this.icBlur=e(this,"icBlur",7);this.icFocus=e(this,"icFocus",7);this.icChange=e(this,"icChange",7);this.inheritedAttributes={};this.showLeftIcon=this.hasLeftIconSlot();this.onInput=t=>{this.value=t.target.value;this.icInput.emit({value:this.value})};this.onBlur=t=>{const e=t.target.value;this.icBlur.emit({value:e})};this.onFocus=t=>{const e=t.target.value;this.icFocus.emit({value:e})};this.isTextArea=()=>this.rows>1;this.hasStatus=t=>t!==""&&!this.disabled;this.showStatusText=t=>{if(this.hasStatus(t)&&!(t==o.Success&&this.validationInline)){return true}return false};this.handleFormReset=()=>{this.value=this.initialValue};this.inputId=`ic-text-field-input-${m++}`;this.label=undefined;this.required=false;this.disabled=false;this.readonly=false;this.placeholder="";this.fullWidth=false;this.hideLabel=false;this.helperText="";this.rows=1;this.resize=false;this.small=false;this.value="";this.maxLength=0;this.validationStatus="";this.validationText="";this.validationInline=false;this.autocapitalize="off";this.autocomplete="off";this.autocorrect="off";this.autoFocus=false;this.debounce=0;this.type="text";this.inputmode="text";this.name=this.inputId;this.spellcheck=false;this.ariaActiveDescendant=undefined;this.truncateValue=undefined;this.ariaExpanded=undefined;this.ariaOwns=undefined;this.ariaAutocomplete=undefined;this.role=undefined;this.hiddenInput=true;this.numChars=0;this.maxLengthExceeded=false;this.initialValue=this.value}debounceChanged(){this.icChange=n(this.icChange,this.debounce)}watchValueHandler(t){if(this.inputEl&&this.inputEl.value!==t){this.inputEl.value=t}if(this.maxLength>0){this.numChars=t.length;if(t.length>this.maxLength){this.maxLengthExceeded=true}else{this.maxLengthExceeded=false}}this.icChange.emit({value:t})}async setFocus(){if(this.inputEl){this.inputEl.focus()}}handleKeyDown(t){this.icKeydown.emit({event:t});t.cancelBubble=true}hasLeftIconSlot(){const t=this.el.querySelector(`[slot="icon"]`);if(t!=null){return true}return false}connectedCallback(){this.debounceChanged()}componentWillLoad(){this.watchValueHandler(this.value);this.inheritedAttributes=r(this.el,[...b,"title","aria-autocomplete","aria-haspopup"]);if(this.readonly){this.maxLengthExceeded=false}l(this.el,this.handleFormReset)}componentDidLoad(){c([{prop:this.label,propName:"label"}],"Text Field")}disconnectedCallback(){h(this.el,this.handleFormReset)}render(){const{inputId:t,name:e,label:s,required:n,small:r,placeholder:l,helperText:c,rows:h,resize:b,disabled:f,value:m,maxLength:y,numChars:g,readonly:v,maxLengthExceeded:x,validationStatus:w,validationText:k,validationInline:z,spellcheck:I,inputmode:F,fullWidth:L,truncateValue:j,hiddenInput:q}=this;const C=v?true:f;const T=f?"":l;const B=x?o.Error:w;const H=x?"Maximum length exceeded":k;const W=v?0:y;const M=x||y===0&&B===o.Error?"assertive":"polite";const S=this.showStatusText(B);const V=this.isTextArea();const D=y>0?t+"-charcount-desc":"";const K=(D+" "+d(t,c!=="",S)).trim();if(this.showLeftIcon){if(!v&&C){this.showLeftIcon=false}}const O=B===o.Error?"true":"false";const $=C&&!v;if(q){u(true,this.el,e,m,C)}return i(a,{class:{["fullwidth"]:L}},i("ic-input-container",{readonly:v,disabled:C},!this.hideLabel&&i("ic-input-label",{for:t,label:s,helperText:c,required:n,disabled:$,readonly:v}),i("ic-input-component-container",{small:r,validationStatus:B,multiLine:V,disabled:C,readonly:v,validationInline:z,fullWidth:L},this.showLeftIcon&&i("span",{class:{["readonly"]:v,["has-value"]:m.length>0},slot:"left-icon"},i("slot",{name:"icon"})),!V&&i("input",Object.assign({id:t,name:e,ref:t=>this.inputEl=t,type:this.type,value:m,class:{["no-left-pad"]:!this.showLeftIcon&&v,["readonly"]:v,["truncate-value"]:j},placeholder:T,required:n,disabled:C,readonly:v,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus,"aria-label":s,"aria-describedby":K,"aria-invalid":O,"aria-activedescendant":this.ariaActiveDescendant,"aria-expanded":this.ariaExpanded,"aria-owns":this.ariaOwns,autocomplete:this.autocomplete,autocapitalize:this.autocapitalize,autoFocus:this.autoFocus,spellcheck:I,inputmode:F,role:this.role},this.inheritedAttributes)),V&&i("textarea",Object.assign({id:t,class:{["no-resize"]:b===false||v,["no-left-pad"]:!this.showLeftIcon&&v,["readonly"]:v},name:e,ref:t=>this.inputEl=t,value:m,rows:h,required:n,disabled:C,placeholder:T,readonly:v,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus,"aria-label":s,"aria-describedby":K,"aria-invalid":O,autocapitalize:this.autocapitalize,autoFocus:this.autoFocus,spellcheck:I,inputmode:F},this.inheritedAttributes)),i("slot",{name:"clear-button"}),i("slot",{name:"search-submit-button"})),i("slot",{name:"menu"}),(!p(w)||!p(k)||W>0)&&i("ic-input-validation",{status:this.hasStatus(B)===false||B===o.Success&&z?"":B,message:S?H:"",ariaLiveMode:M,for:t,fullWidth:L},!v&&W>0&&i("div",{slot:"validation-message-adornment"},i("ic-typography",{variant:"caption",class:{["maxlengthtext"]:true,["exceeded"]:x,["disabled"]:$}},i("span",{"aria-live":"polite",id:`${t}-charcount`,class:"charcount"},g,"/",W),i("span",{hidden:true,id:D},"Field can contain a maximum of ",W," characters."))))))}get el(){return s(this)}static get watchers(){return{debounce:["debounceChanged"],value:["watchValueHandler"]}}};y.style=f;export{y as ic_text_field};
-//# sourceMappingURL=p-60ffb73e.entry.js.map
+import{r as t,c as e,h as i,H as a,g as s}from"./p-f9370be6.js";import{a as o}from"./p-6f57b13c.js";import{G as n,m as r,d as l,a as c,r as h,h as d,e as u,H as p,n as b}from"./p-a8ac8f72.js";const f='/*! 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}::-moz-placeholder{color:var(--ic-color-tertiary-text);opacity:1}::placeholder{color:var(--ic-color-tertiary-text);opacity:1}input,textarea{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);line-height:1.5rem;letter-spacing:0.005rem;width:100%;padding-right:var(--ic-space-xs);padding-left:var(--ic-space-xs)}textarea{min-height:var(--ic-space-lg);resize:vertical;padding-top:6px}input:focus,textarea:focus{border:0;outline:0}input:disabled,textarea:disabled{color:var(--ic-architectural-200)}input.readonly,textarea.readonly{color:var(--ic-color-primary-text)}.fullwidth{position:relative;width:100%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type="number"]{-moz-appearance:textfield}textarea.no-resize{resize:none}.maxlengthtext{color:var(--ic-color-secondary-text)}.exceeded{color:var(--ic-status-error)}.disabled{color:var(--ic-architectural-200)}.no-left-pad{padding-left:0}::slotted([slot="icon"]){fill:var(--ic-color-tertiary-text)}.has-value ::slotted([slot="icon"]){fill:var(--ic-color-primary-text)}.charcount{margin-right:calc(-1 * var(--ic-space-xxxs))}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration{display:none}input[type="search"].truncate-value{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media (forced-colors: active){input.readonly,textarea.readonly{color:canvastext}.has-value ::slotted([slot="icon"]){fill:currentcolor}}';let m=0;const y=class{constructor(i){t(this,i);this.icKeydown=e(this,"icKeydown",7);this.icInput=e(this,"icInput",7);this.icBlur=e(this,"icBlur",7);this.icFocus=e(this,"icFocus",7);this.icChange=e(this,"icChange",7);this.inheritedAttributes={};this.showLeftIcon=this.hasLeftIconSlot();this.onInput=t=>{this.value=t.target.value;this.icInput.emit({value:this.value})};this.onBlur=t=>{const e=t.target.value;this.icBlur.emit({value:e})};this.onFocus=t=>{const e=t.target.value;this.icFocus.emit({value:e})};this.isTextArea=()=>this.rows>1;this.hasStatus=t=>t!==""&&!this.disabled;this.showStatusText=t=>{if(this.hasStatus(t)&&!(t==o.Success&&this.validationInline)){return true}return false};this.handleFormReset=()=>{this.value=this.initialValue};this.inputId=`ic-text-field-input-${m++}`;this.label=undefined;this.required=false;this.disabled=false;this.readonly=false;this.placeholder="";this.fullWidth=false;this.hideLabel=false;this.helperText="";this.rows=1;this.resize=false;this.small=false;this.value="";this.maxLength=0;this.validationStatus="";this.validationText="";this.validationInline=false;this.autocapitalize="off";this.autocomplete="off";this.autocorrect="off";this.autoFocus=false;this.debounce=0;this.type="text";this.inputmode="text";this.name=this.inputId;this.spellcheck=false;this.ariaActiveDescendant=undefined;this.truncateValue=undefined;this.ariaExpanded=undefined;this.ariaOwns=undefined;this.ariaAutocomplete=undefined;this.role=undefined;this.hiddenInput=true;this.numChars=0;this.maxLengthExceeded=false;this.initialValue=this.value}debounceChanged(){this.icChange=n(this.icChange,this.debounce)}watchValueHandler(t){if(this.inputEl&&this.inputEl.value!==t){this.inputEl.value=t}if(this.maxLength>0){this.numChars=t.length;if(t.length>this.maxLength){this.maxLengthExceeded=true}else{this.maxLengthExceeded=false}}this.icChange.emit({value:t})}async setFocus(){if(this.inputEl){this.inputEl.focus()}}handleKeyDown(t){this.icKeydown.emit({event:t});t.cancelBubble=true}hasLeftIconSlot(){const t=this.el.querySelector(`[slot="icon"]`);if(t!=null){return true}return false}connectedCallback(){this.debounceChanged()}componentWillLoad(){this.watchValueHandler(this.value);this.inheritedAttributes=r(this.el,[...b,"title","aria-autocomplete","aria-haspopup"]);if(this.readonly){this.maxLengthExceeded=false}l(this.el,this.handleFormReset)}componentDidLoad(){c([{prop:this.label,propName:"label"}],"Text Field")}disconnectedCallback(){h(this.el,this.handleFormReset)}render(){const{inputId:t,name:e,label:s,required:n,small:r,placeholder:l,helperText:c,rows:h,resize:b,disabled:f,value:m,maxLength:y,numChars:g,readonly:v,maxLengthExceeded:x,validationStatus:w,validationText:k,validationInline:z,spellcheck:I,inputmode:F,fullWidth:L,truncateValue:j,hiddenInput:q}=this;const C=v?true:f;const T=f?"":l;const B=x?o.Error:w;const H=x?"Maximum length exceeded":k;const W=v?0:y;const M=x||y===0&&B===o.Error?"assertive":"polite";const S=this.showStatusText(B);const V=this.isTextArea();const D=y>0?t+"-charcount-desc":"";const K=(D+" "+d(t,c!=="",S)).trim();if(this.showLeftIcon){if(!v&&C){this.showLeftIcon=false}}const O=B===o.Error?"true":"false";const $=C&&!v;if(q){u(true,this.el,e,m,C)}return i(a,{class:{["fullwidth"]:L}},i("ic-input-container",{readonly:v,disabled:C},!this.hideLabel&&i("ic-input-label",{for:t,label:s,helperText:c,required:n,disabled:$,readonly:v}),i("ic-input-component-container",{small:r,validationStatus:B,multiLine:V,disabled:C,readonly:v,validationInline:z,fullWidth:L},this.showLeftIcon&&i("span",{class:{["readonly"]:v,["has-value"]:m.length>0},slot:"left-icon"},i("slot",{name:"icon"})),!V&&i("input",Object.assign({id:t,name:e,ref:t=>this.inputEl=t,type:this.type,value:m,class:{["no-left-pad"]:!this.showLeftIcon&&v,["readonly"]:v,["truncate-value"]:j},placeholder:T,required:n,disabled:C,readonly:v,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus,"aria-label":s,"aria-describedby":K,"aria-invalid":O,"aria-activedescendant":this.ariaActiveDescendant,"aria-expanded":this.ariaExpanded,"aria-owns":this.ariaOwns,autocomplete:this.autocomplete,autocapitalize:this.autocapitalize,autoFocus:this.autoFocus,spellcheck:I,inputmode:F,role:this.role},this.inheritedAttributes)),V&&i("textarea",Object.assign({id:t,class:{["no-resize"]:b===false||v,["no-left-pad"]:!this.showLeftIcon&&v,["readonly"]:v},name:e,ref:t=>this.inputEl=t,value:m,rows:h,required:n,disabled:C,placeholder:T,readonly:v,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus,"aria-label":s,"aria-describedby":K,"aria-invalid":O,autocapitalize:this.autocapitalize,autoFocus:this.autoFocus,spellcheck:I,inputmode:F},this.inheritedAttributes)),i("slot",{name:"clear-button"}),i("slot",{name:"search-submit-button"})),i("slot",{name:"menu"}),(!p(w)||!p(k)||W>0)&&i("ic-input-validation",{status:this.hasStatus(B)===false||B===o.Success&&z?"":B,message:S?H:"",ariaLiveMode:M,for:t,fullWidth:L},!v&&W>0&&i("div",{slot:"validation-message-adornment"},i("ic-typography",{variant:"caption",class:{["maxlengthtext"]:true,["exceeded"]:x,["disabled"]:$}},i("span",{"aria-live":"polite",id:`${t}-charcount`,class:"charcount"},g,"/",W),i("span",{hidden:true,id:D},"Field can contain a maximum of ",W," characters."))))))}get el(){return s(this)}static get watchers(){return{debounce:["debounceChanged"],value:["watchValueHandler"]}}};y.style=f;export{y as ic_text_field};
+//# sourceMappingURL=p-789e197b.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/components/ic-text-field/ic-text-field.css?tag=ic-text-field&encapsulation=shadow","src/components/ic-text-field/ic-text-field.tsx"],"names":["icTextFieldCss","inputIds","TextField","this","inheritedAttributes","showLeftIcon","hasLeftIconSlot","onInput","ev","value","target","icInput","emit","onBlur","icBlur","onFocus","icFocus","isTextArea","rows","hasStatus","status","disabled","showStatusText","IcInformationStatus","Success","validationInline","handleFormReset","initialValue","inputId","undefined","[object Object]","icChange","debounceEvent","debounce","newValue","inputEl","maxLength","numChars","length","maxLengthExceeded","focus","icKeydown","event","cancelBubble","iconEl","el","querySelector","debounceChanged","watchValueHandler","inheritAttributes","IC_INHERITED_ARIA","readonly","addFormResetListener","onComponentRequiredPropUndefined","prop","label","propName","removeFormResetListener","name","required","small","placeholder","helperText","resize","validationStatus","validationText","spellcheck","inputmode","fullWidth","truncateValue","hiddenInput","disabledMode","placeholderText","currentStatus","Error","currentValidationText","maxNumChars","messageAriaLive","multiline","hiddenCharCountDescId","describedBy","getInputDescribedByText","trim","invalid","disabledText","renderHiddenInput","h","Host","class","hideLabel","for","multiLine","slot","Object","assign","id","ref","type","aria-label","aria-describedby","aria-invalid","aria-activedescendant","ariaActiveDescendant","aria-expanded","ariaExpanded","aria-owns","ariaOwns","autocomplete","autocapitalize","autoFocus","role","isEmptyString","message","ariaLiveMode","variant","aria-live","hidden"],"mappings":"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","sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n /**\n * @prop --input-width: Width of the input field \n */\n display: block;\n}\n\n::placeholder {\n color: var(--ic-color-tertiary-text);\n opacity: 1;\n}\n\ninput,\ntextarea {\n border: 0;\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-architectural-white);\n line-height: 1.5rem;\n letter-spacing: 0.005rem;\n width: 100%;\n padding-right: var(--ic-space-xs);\n padding-left: var(--ic-space-xs);\n}\n\ntextarea {\n min-height: var(--ic-space-lg);\n resize: vertical;\n padding-top: 6px;\n}\n\ninput:focus,\ntextarea:focus {\n border: 0;\n outline: 0;\n}\n\ninput:disabled,\ntextarea:disabled {\n color: var(--ic-architectural-200);\n}\n\ninput.readonly,\ntextarea.readonly {\n color: var(--ic-color-primary-text);\n}\n\n.fullwidth {\n position: relative;\n width: 100%;\n}\n\n/* Chrome, Safari, Edge */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n/* Firefox */\ninput[type=\"number\"] {\n -moz-appearance: textfield;\n}\n\ntextarea.no-resize {\n resize: none;\n}\n\n.maxlengthtext {\n color: var(--ic-color-secondary-text);\n}\n\n.exceeded {\n color: var(--ic-status-error);\n}\n\n.disabled {\n color: var(--ic-architectural-200);\n}\n\n.no-left-pad {\n padding-left: 0;\n}\n\n::slotted([slot=\"icon\"]) {\n fill: var(--ic-color-tertiary-text);\n}\n\n.has-value ::slotted([slot=\"icon\"]) {\n fill: var(--ic-color-primary-text);\n}\n\n.charcount {\n margin-right: calc(-1 * var(--ic-space-xxxs));\n}\n\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration,\ninput[type=\"search\"]::-webkit-search-results-button,\ninput[type=\"search\"]::-webkit-search-results-decoration {\n display: none;\n}\n\ninput[type=\"search\"].truncate-value {\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n@media (forced-colors: active) {\n input.readonly,\n textarea.readonly {\n color: canvastext;\n }\n\n .has-value ::slotted([slot=\"icon\"]) {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n Method,\n h,\n} from \"@stencil/core\";\n\nimport {\n IcAutocompleteTypes,\n IcAutocorrectStates,\n IcInformationStatusOrEmpty,\n IcValueEventDetail,\n} from \"../../interface\";\nimport { IcInformationStatus } from \"../../utils/types\";\nimport {\n inheritAttributes,\n debounceEvent,\n getInputDescribedByText,\n renderHiddenInput,\n isEmptyString,\n onComponentRequiredPropUndefined,\n addFormResetListener,\n removeFormResetListener,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcAriaAutocompleteTypes,\n IcTextFieldInputModes,\n IcTextFieldTypes,\n} from \"./ic-text-field.types\";\n\nlet inputIds = 0;\n\n/**\n * @slot icon - Content will be placed to the left of the text input.\n */\n@Component({\n tag: \"ic-text-field\",\n styleUrl: \"ic-text-field.css\",\n shadow: true,\n})\nexport class TextField {\n @Element() el: HTMLIcTextFieldElement;\n\n private inputEl: HTMLInputElement | HTMLTextAreaElement;\n private inheritedAttributes: { [k: string]: unknown } = {};\n\n /**\n * @slot clear-button - an ic-button clear component will render as an end adornment to the input.\n * @slot search-submit-button - an ic-button search submit component will render as an end adornment to the input.\n * @slot menu - an ic-menu component will appear below the input.\n */\n\n /**\n * The ID for the input.\n */\n @Prop() inputId?: string = `ic-text-field-input-${inputIds++}`;\n\n /**\n * The label for the input.\n */\n @Prop() label!: string;\n\n /**\n * If `true`, the input will require a value.\n */\n @Prop() required: boolean = false;\n /**\n * If `true`, the disabled state will be set.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * If `true`, the read only state will be set.\n */\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /**\n * The placeholder value to be displayed.\n */\n @Prop() placeholder: string = \"\";\n\n /**\n * Specify whether the text field fills the full width of the container.\n * If `true`, this overrides the --input-width CSS variable.\n */\n @Prop() fullWidth: boolean = false;\n\n /**\n * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n */\n @Prop() hideLabel: boolean = false;\n\n /**\n * The helper text that will be displayed for additional field guidance.\n */\n @Prop() helperText: string = \"\";\n\n /**\n * The number of rows to transform the text field into a text area with a specific height.\n */\n @Prop() rows: number = 1;\n\n /**\n * If `true`, the multiline text area will be resizeable.\n */\n @Prop() resize: boolean = false;\n\n /**\n * If `true`, the small styling will be applied to the text field.\n */\n @Prop({ reflect: true }) small: boolean = false;\n\n /**\n * The value of the text field.\n */\n @Prop({ reflect: true, mutable: true }) value: string = \"\";\n\n /**\n * The maximum number of characters that can be entered in the field.\n */\n @Prop() maxLength: number = 0;\n\n /**\n * The validation state - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n /**\n * The validation state - e.g. 'error' | 'warning' | 'success'.\n */\n @Prop() validationText: string = \"\";\n\n /**\n * If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.\n */\n @Prop() validationInline: boolean = false;\n\n /**\n * The automatic capitalisation of the text value as it is entered/edited by the user.\n * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n */\n @Prop() autocapitalize = \"off\";\n\n /**\n * The state of autocompletion the browser can apply on the text value.\n */\n @Prop() autocomplete: IcAutocompleteTypes = \"off\";\n\n /**\n * The state of autocorrection the browser can apply when the user is entering/editing the text value.\n */\n @Prop() autocorrect: IcAutocorrectStates = \"off\";\n\n /**\n * If `true`, the form control will have input focus when the page loads.\n */\n @Prop() autoFocus = false;\n\n /**\n * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n */\n @Prop() debounce: number = 0;\n\n private showLeftIcon: boolean = this.hasLeftIconSlot();\n\n @Watch(\"debounce\")\n private debounceChanged() {\n this.icChange = debounceEvent(this.icChange, this.debounce);\n }\n\n /**\n * The type of control to display. The default type is text.\n */\n @Prop() type: IcTextFieldTypes = \"text\";\n\n /**\n * A hint to the browser for which keyboard to display.\n * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n */\n @Prop() inputmode: IcTextFieldInputModes = \"text\";\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * If `true`, the value of the text field will have its spelling and grammar checked.\n */\n @Prop() spellcheck: boolean = false;\n\n /**\n * @internal The active element when focus is on the ic-menu items.\n */\n @Prop() ariaActiveDescendant?: string;\n /**\n * @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.\n */\n @Prop() truncateValue?: boolean;\n\n /**\n * @internal Used to identify if the slotted menu is rendered\n */\n @Prop() ariaExpanded: string;\n\n /**\n * @internal Used to identify any related child component\n */\n @Prop() ariaOwns: string;\n\n /**\n * @internal Used to identify whether inputting any text triggers more predictions\n */\n @Prop() ariaAutocomplete: IcAriaAutocompleteTypes = undefined;\n\n /**\n * @internal Used to set the role if not default textbox;\n */\n @Prop() role: string;\n\n /**\n * @internal If `true`, the hidden form input will stop rendering for form submission.\n */\n @Prop() hiddenInput: boolean = true;\n\n @State() numChars: number = 0;\n @State() maxLengthExceeded: boolean = false;\n @State() initialValue = this.value;\n\n @Watch(\"value\")\n watchValueHandler(newValue: string): void {\n if (this.inputEl && this.inputEl.value !== newValue) {\n this.inputEl.value = newValue;\n }\n\n if (this.maxLength > 0) {\n this.numChars = newValue.length;\n if (newValue.length > this.maxLength) {\n this.maxLengthExceeded = true;\n } else {\n this.maxLengthExceeded = false;\n }\n }\n this.icChange.emit({ value: newValue });\n }\n\n /**\n * Sets focus on the native `input`\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.inputEl) {\n this.inputEl.focus();\n }\n }\n\n //stop keydown event bubbling up to storybook\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n this.icKeydown.emit({ event: ev });\n ev.cancelBubble = true;\n }\n\n /**\n * Emitted when a keydown event occurred.\n */\n @Event() icKeydown: EventEmitter<{ event: KeyboardEvent }>;\n\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() icInput: EventEmitter<IcValueEventDetail>;\n private onInput = (ev: Event) => {\n this.value = (ev.target as HTMLInputElement).value;\n this.icInput.emit({ value: this.value });\n };\n\n /**\n * Emitted when input loses focus.\n */\n @Event() icBlur: EventEmitter<IcValueEventDetail>;\n private onBlur = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n this.icBlur.emit({ value: value });\n };\n\n /**\n * Emitted when input gains focus.\n */\n @Event() icFocus: EventEmitter<IcValueEventDetail>;\n private onFocus = (ev: Event) => {\n const value = (ev.target as HTMLInputElement).value;\n this.icFocus.emit({ value: value });\n };\n\n /**\n * Emitted when the value has changed.\n */\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n private isTextArea = (): boolean => {\n return this.rows > 1;\n };\n\n private hasLeftIconSlot(): boolean {\n const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n if (iconEl != null) {\n return true;\n }\n return false;\n }\n\n private hasStatus = (status: IcInformationStatusOrEmpty): boolean => {\n return status !== \"\" && !this.disabled;\n };\n\n private showStatusText = (status: IcInformationStatusOrEmpty): boolean => {\n if (\n this.hasStatus(status) &&\n !(status == IcInformationStatus.Success && this.validationInline)\n ) {\n return true;\n }\n return false;\n };\n\n private handleFormReset = (): void => {\n this.value = this.initialValue;\n };\n\n connectedCallback(): void {\n this.debounceChanged();\n }\n\n componentWillLoad(): void {\n this.watchValueHandler(this.value);\n\n this.inheritedAttributes = inheritAttributes(this.el, [\n ...IC_INHERITED_ARIA,\n \"title\",\n \"aria-autocomplete\",\n \"aria-haspopup\",\n ]);\n\n if (this.readonly) {\n this.maxLengthExceeded = false;\n }\n\n addFormResetListener(this.el, this.handleFormReset);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Text Field\"\n );\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n render() {\n const {\n inputId,\n name,\n label,\n required,\n small,\n placeholder,\n helperText,\n rows,\n resize,\n disabled,\n value,\n maxLength,\n numChars,\n readonly,\n maxLengthExceeded,\n validationStatus,\n validationText,\n validationInline,\n spellcheck,\n inputmode,\n fullWidth,\n truncateValue,\n hiddenInput,\n } = this;\n\n const disabledMode = readonly ? true : disabled;\n\n const placeholderText = disabled ? \"\" : placeholder;\n\n const currentStatus = maxLengthExceeded\n ? IcInformationStatus.Error\n : validationStatus;\n\n const currentValidationText = maxLengthExceeded\n ? \"Maximum length exceeded\"\n : validationText;\n\n const maxNumChars = readonly ? 0 : maxLength;\n\n const messageAriaLive =\n maxLengthExceeded ||\n (maxLength === 0 && currentStatus === IcInformationStatus.Error)\n ? \"assertive\"\n : \"polite\";\n\n const showStatusText = this.showStatusText(currentStatus);\n const multiline = this.isTextArea();\n const hiddenCharCountDescId =\n maxLength > 0 ? inputId + \"-charcount-desc\" : \"\";\n const describedBy = (\n hiddenCharCountDescId +\n \" \" +\n getInputDescribedByText(inputId, helperText !== \"\", showStatusText)\n ).trim();\n\n if (this.showLeftIcon) {\n if (!readonly && disabledMode) {\n this.showLeftIcon = false;\n }\n }\n\n const invalid =\n currentStatus === IcInformationStatus.Error ? \"true\" : \"false\";\n const disabledText = disabledMode && !readonly;\n\n if (hiddenInput) {\n renderHiddenInput(true, this.el, name, value, disabledMode);\n }\n\n return (\n <Host class={{ [\"fullwidth\"]: fullWidth }}>\n <ic-input-container readonly={readonly} disabled={disabledMode}>\n {!this.hideLabel && (\n <ic-input-label\n for={inputId}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabledText}\n readonly={readonly}\n ></ic-input-label>\n )}\n\n <ic-input-component-container\n small={small}\n validationStatus={currentStatus}\n multiLine={multiline}\n disabled={disabledMode}\n readonly={readonly}\n validationInline={validationInline}\n fullWidth={fullWidth}\n >\n {this.showLeftIcon && (\n <span\n class={{\n [\"readonly\"]: readonly,\n [\"has-value\"]: value.length > 0,\n }}\n slot=\"left-icon\"\n >\n <slot name=\"icon\" />\n </span>\n )}\n\n {!multiline && (\n <input\n id={inputId}\n name={name}\n ref={(el) => (this.inputEl = el as HTMLInputElement)}\n type={this.type}\n value={value}\n class={{\n [\"no-left-pad\"]: !this.showLeftIcon && readonly,\n [\"readonly\"]: readonly,\n [\"truncate-value\"]: truncateValue,\n }}\n placeholder={placeholderText}\n required={required}\n disabled={disabledMode}\n readonly={readonly}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n aria-label={label}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n aria-activedescendant={this.ariaActiveDescendant}\n aria-expanded={this.ariaExpanded}\n aria-owns={this.ariaOwns}\n autocomplete={this.autocomplete}\n autocapitalize={this.autocapitalize}\n autoFocus={this.autoFocus}\n spellcheck={spellcheck}\n inputmode={inputmode}\n role={this.role}\n {...this.inheritedAttributes}\n ></input>\n )}\n {multiline && (\n <textarea\n id={inputId}\n class={{\n [\"no-resize\"]: resize === false || readonly,\n [\"no-left-pad\"]: !this.showLeftIcon && readonly,\n [\"readonly\"]: readonly,\n }}\n name={name}\n ref={(el) => (this.inputEl = el as HTMLTextAreaElement)}\n value={value}\n rows={rows}\n required={required}\n disabled={disabledMode}\n placeholder={placeholderText}\n readonly={readonly}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n aria-label={label}\n aria-describedby={describedBy}\n aria-invalid={invalid}\n autocapitalize={this.autocapitalize}\n autoFocus={this.autoFocus}\n spellcheck={spellcheck}\n inputmode={inputmode}\n {...this.inheritedAttributes}\n ></textarea>\n )}\n <slot name=\"clear-button\"></slot>\n <slot name=\"search-submit-button\"></slot>\n </ic-input-component-container>\n <slot name=\"menu\"></slot>\n {(!isEmptyString(validationStatus) ||\n !isEmptyString(validationText) ||\n maxNumChars > 0) && (\n <ic-input-validation\n status={\n this.hasStatus(currentStatus) === false ||\n (currentStatus === IcInformationStatus.Success &&\n validationInline)\n ? \"\"\n : currentStatus\n }\n message={showStatusText ? currentValidationText : \"\"}\n ariaLiveMode={messageAriaLive}\n for={inputId}\n fullWidth={fullWidth}\n >\n {!readonly && maxNumChars > 0 && (\n <div slot=\"validation-message-adornment\">\n <ic-typography\n variant=\"caption\"\n class={{\n [\"maxlengthtext\"]: true,\n [\"exceeded\"]: maxLengthExceeded,\n [\"disabled\"]: disabledText,\n }}\n >\n <span\n aria-live=\"polite\"\n id={`${inputId}-charcount`}\n class=\"charcount\"\n >\n {numChars}/{maxNumChars}\n </span>\n <span hidden={true} id={hiddenCharCountDescId}>\n Field can contain a maximum of {maxNumChars} characters.\n </span>\n </ic-typography>\n </div>\n )}\n </ic-input-validation>\n )}\n </ic-input-container>\n </Host>\n );\n }\n}\n"]}

package/dist/core/{p-4c72f3a9.entry.js → p-7ba184da.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as e,h as r,H as i,g as s}from"./p-f9370be6.js";import{c}from"./p-e28af65b.js";import{i as a}from"./p-23831891.js";import"./p-6f57b13c.js";const t=`<svg width="24" height="24" 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{color:var(--ic-architectural-400)}:host(:first-child) .chevron{display:none}.back-icon svg{color:var(--ic-hyperlink)}:host(.back){display:flex;align-items:center}:host(.back) .chevron{display:none}ic-link{--breadcrumb-link-display: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)}: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-hyperlink);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);text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%}.hide,:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide){display:none}@media (forced-colors: active){.back-icon svg{color:currentcolor}}';const o=class{constructor(i){e(this,i);this.renderDefaultBreadcrumb=(e,i,s,c)=>{const n=i!==null&&i!==undefined&&i!=="";if(e&&n){return r("span",{class:{"current-page-container":e}},a(this.el,"icon")&&r("slot",{name:"icon"}),i)}return r("ic-link",{href:c,class:"breadcrumb-link","aria-describedby":this.showBackIcon&&s&&s},this.showBackIcon&&r("div",{class:"back-icon",innerHTML:t}),a(this.el,"icon")&&r("slot",{name:"icon"}),i)};this.setSlottedCurrentPageClass=()=>{const e=this.el.querySelector("ic-link");if(e){e.classList.remove("current-page");if(this.current){const r=e.classList.contains("current-page");if(!r){e.classList.add("breadcrumb-link","current-page")}}}};this.pageTitle=undefined;this.href=undefined;this.current=false;this.showBackIcon=false}componentWillRender(){this.setSlottedCurrentPageClass()}render(){const{current:e,href:s,pageTitle:a}=this;const t=`${a&&a.toLowerCase().replace(" ","-")}-describedby`;const n=a!==null&&a!==undefined&&a!=="";const o=s!==null&&s!==undefined&&s!=="";return r(i,{class:{back:this.showBackIcon},"aria-current":e&&"page",role:"listitem"},r("div",{class:"breadcrumb"},r("span",{innerHTML:c,class:"chevron","aria-hidden":"true"}),this.showBackIcon&&t&&r("span",{id:t,class:"hide"},`Back to ${a}`),n&&o?this.renderDefaultBreadcrumb(e,a,t,s):r("slot",null)))}get el(){return s(this)}};o.style=n;export{o as ic_breadcrumb};
-//# sourceMappingURL=p-4c72f3a9.entry.js.map
+import{r as e,h as r,H as i,g as s}from"./p-f9370be6.js";import{c}from"./p-e28af65b.js";import{i as a}from"./p-a8ac8f72.js";import"./p-6f57b13c.js";const t=`<svg width="24" height="24" 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{color:var(--ic-architectural-400)}:host(:first-child) .chevron{display:none}.back-icon svg{color:var(--ic-hyperlink)}:host(.back){display:flex;align-items:center}:host(.back) .chevron{display:none}ic-link{--breadcrumb-link-display: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)}: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-hyperlink);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);text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%}.hide,:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide){display:none}@media (forced-colors: active){.back-icon svg{color:currentcolor}}';const o=class{constructor(i){e(this,i);this.renderDefaultBreadcrumb=(e,i,s,c)=>{const n=i!==null&&i!==undefined&&i!=="";if(e&&n){return r("span",{class:{"current-page-container":e}},a(this.el,"icon")&&r("slot",{name:"icon"}),i)}return r("ic-link",{href:c,class:"breadcrumb-link","aria-describedby":this.showBackIcon&&s&&s},this.showBackIcon&&r("div",{class:"back-icon",innerHTML:t}),a(this.el,"icon")&&r("slot",{name:"icon"}),i)};this.setSlottedCurrentPageClass=()=>{const e=this.el.querySelector("ic-link");if(e){e.classList.remove("current-page");if(this.current){const r=e.classList.contains("current-page");if(!r){e.classList.add("breadcrumb-link","current-page")}}}};this.pageTitle=undefined;this.href=undefined;this.current=false;this.showBackIcon=false}componentWillRender(){this.setSlottedCurrentPageClass()}render(){const{current:e,href:s,pageTitle:a}=this;const t=`${a&&a.toLowerCase().replace(" ","-")}-describedby`;const n=a!==null&&a!==undefined&&a!=="";const o=s!==null&&s!==undefined&&s!=="";return r(i,{class:{back:this.showBackIcon},"aria-current":e&&"page",role:"listitem"},r("div",{class:"breadcrumb"},r("span",{innerHTML:c,class:"chevron","aria-hidden":"true"}),this.showBackIcon&&t&&r("span",{id:t,class:"hide"},`Back to ${a}`),n&&o?this.renderDefaultBreadcrumb(e,a,t,s):r("slot",null)))}get el(){return s(this)}};o.style=n;export{o as ic_breadcrumb};
+//# sourceMappingURL=p-7ba184da.entry.js.map

package/dist/core/{p-4c72f3a9.entry.js.map → p-7ba184da.entry.js.map} RENAMED Viewed

File without changes

package/dist/core/p-80cd0a2d.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,h as e,H as s,g as i}from"./p-f9370be6.js";import{C as a}from"./p-1e7b4310.js";const c=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M7.99935 4.32666L13.0193 13H2.97935L7.99935 4.32666ZM7.99935 1.66666L0.666016 14.3333H15.3327L7.99935 1.66666ZM8.66602 11H7.33268V12.3333H8.66602V11ZM8.66602 6.99999H7.33268V9.66666H8.66602V6.99999Z" fill="currentColor"/>\n</svg>`;const r=":host{display:flex;flex:auto}.step{display:flex;flex:1 1 0}.step-icon{display:flex;justify-content:center}.step-title,.step-subtitle,.step-status,.next-step{white-space:pre-line}.visually-hidden{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}:host(.compact){-moz-column-gap:var(--ic-space-sm);column-gap:var(--ic-space-sm);--compact-step-inner-color:var(--ic-theme-primary);--compact-step-circular-line-width:var(--ic-space-xxs)}:host(.compact) .step{-moz-column-gap:var(--ic-space-sm);column-gap:var(--ic-space-sm)}:host(.compact) .step:not(.current){display:none;opacity:0;visibility:hidden}.compact-step-progress-indicator{margin:var(--ic-space-xs) 0 0}:host(.compact) .step-title-area{display:flex;flex-direction:column;width:228px}.info-line{display:flex;-moz-column-gap:var(--ic-space-xs);column-gap:var(--ic-space-xs)}.step-status{display:flex;color:var(--ic-color-secondary-text);-moz-column-gap:var(--ic-space-xxxs);column-gap:var(--ic-space-xxxs)}.compact-step-completed .step-status{color:var(--ic-status-success)}.compact-step-disabled :is(.step-title,.step-status){color:var(--ic-color-tertiary-text)}.step-num{color:var(--ic-color-secondary-text);white-space:nowrap}:host(.compact) .step-icon{margin:var(--ic-space-xxxs)}:host(.compact) .step-icon svg{width:16px;height:16px}:host(.default) .step{flex-direction:column}:host(.default.last-step){flex-grow:initial}.step-top{display:flex;width:100%;align-items:center;align-self:flex-start;height:40px}:host(.default) .step-icon{border-radius:50%}.step-icon-inner{width:var(--ic-space-xl);height:var(--ic-space-xl);display:flex;justify-content:center;align-items:center;border-radius:50%}:host(.default) .current{color:var(--ic-theme-primary)}:host(.default) .step-title-area{margin:var(--ic-space-xs) 0;padding-right:var(--ic-space-xs);width:100%}:host(.default) .step-title,.step-subtitle{width:-moz-fit-content;width:fit-content}.step-subtitle{color:var(--ic-color-tertiary-text)}.current .step-subtitle{color:var(--ic-color-primary-text)}:host(.default) .completed{color:var(--ic-status-success)}.active .step-icon-inner{box-shadow:inset var(--ic-architectural-200) 0 0 0 2px}.current .step-icon-inner{background-color:var(--ic-theme-primary);color:white}.disabled{color:var(--ic-architectural-200)}.disabled .step-icon-inner{border:1px dashed var(--ic-architectural-200);width:calc(var(--ic-space-xl) - var(--ic-space-xxxs));height:calc(var(--ic-space-xl) - var(--ic-space-xxxs))}.disabled .step-title-area{color:var(--ic-color-tertiary-text)}.completed .step-icon-inner{background:var(--ic-status-success);box-shadow:inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);border-radius:100%}:host(.default) .current .step-icon{border:var(--ic-space-xxxs) solid var(--ic-theme-primary);padding:var(--ic-space-xxxs);margin:0 calc(-1 * var(--ic-space-xxxs));}.step-connect{height:var(--ic-space-xxxs);background-color:var(--ic-architectural-200);margin:0 var(--ic-space-xs);border-radius:var(--ic-space-xxs);width:100%}.aligned-full-width.step-connect{min-width:100px;width:100%}.disabled .step-connect{height:0;background-color:rgb(0 0 0 / 0%);border-top:2px dashed var(--ic-architectural-200);border-radius:0}.completed .step-connect{background-color:var(--ic-status-success)}.step-connect-inner{width:70%;display:flex;flex:auto;height:var(--ic-space-xxxs);border-radius:var(--ic-space-xxs);background-color:var(--ic-theme-primary)}.step-icon-inner .check-icon{padding-top:var(--ic-space-xxs)}.step-icon-inner .check-icon svg{width:var(--ic-space-md);height:auto}.step-icon-inner .check-icon>svg>path{fill:var(--ic-color-white-text)}@media (forced-colors: active){.compact-step-disabled :is(.step-title,.step-status){color:GrayText}.step-connect:not(.disabled .step-connect){border:var(--ic-hc-border)}.active .step-icon-inner,.completed .step-icon-inner,.current .step-icon-inner{forced-color-adjust:none;box-shadow:inset canvastext 0 0 0 2px;background-color:transparent;color:canvastext}:host(.default) .current .step-icon{padding:0;border:none}.disabled,.disabled .step-title-area{color:GrayText}.step-connect-inner,.completed .step-connect{background-color:canvastext}.step-icon-inner .check-icon>svg>path{fill:canvastext}}";const n=class{constructor(e){t(this,e);this.variant=undefined;this.stepTitle=undefined;this.stepSubtitle=undefined;this.stepStatus=undefined;this.stepType="active";this.current=false;this.compactStepStyling=undefined;this.stepNum=undefined;this.lastStep=undefined;this.lastStepNum=undefined;this.nextStepTitle=undefined;this.progress=undefined}stepTypeChangeHandler(){if(this.variant==="compact"&&this.stepType==="current"){this.current=true}else{this.current=false}}render(){let t="";if(this.stepType==="completed"){t=". Completed step"}else if(this.stepType==="disabled"){t=". Non-required step"}else if(this.stepStatus==="required"){t=". Required step"}else if(this.stepStatus==="optional"){t=". Optional step"}let i;if(this.stepStatus){i=this.stepStatus[0].toUpperCase()+this.stepStatus.slice(1)}let r;if(this.stepType==="disabled"\|\|this.compactStepStyling==="disabled"){r="Not required"}else if(this.compactStepStyling==="completed"){r="Completed"}let n;if(this.stepType==="completed"\|\|this.compactStepStyling==="completed"){n=e("span",{class:"check-icon step-icon","aria-hidden":"true",innerHTML:a})}else if(this.stepType==="disabled"\|\|this.compactStepStyling==="disabled"){n=e("span",{class:"warning-icon step-icon","aria-hidden":"true",innerHTML:c})}const o=e("div",{class:{["step"]:true,["current"]:this.current,[`compact-step-${this.compactStepStyling}`]:!!this.compactStepStyling}},e("ic-loading-indicator",{class:{"compact-step-progress-indicator":true,"not-required":this.stepType==="disabled"\|\|this.compactStepStyling==="disabled"},"aria-hidden":"true",size:"small","inner-label":this.stepNum,progress:this.progress}),e("div",{class:"step-title-area"},e("ic-typography",{variant:"h4",class:"step-title"},this.stepTitle),e("div",{class:"info-line"},e("ic-typography",{variant:"caption",class:"step-num"},`${this.stepNum} of ${this.lastStepNum}`,e("span",{class:"visually-hidden"}," steps")),(this.stepSubtitle\|\|this.stepType==="completed"\|\|this.stepType==="disabled"\|\|this.variant==="compact"&&!!this.compactStepStyling&&this.compactStepStyling!=="active"\|\|!!this.stepStatus)&&e("div",{class:"step-status"},n&&n,(this.stepSubtitle\|\|r)&&e("ic-typography",{variant:"caption"},this.stepSubtitle!==null&&this.stepSubtitle!==undefined?this.stepSubtitle:this.stepType==="disabled"\|\|this.variant==="compact"&&this.compactStepStyling==="disabled"\|\|this.stepType==="completed"\|\|this.variant==="compact"&&this.compactStepStyling==="completed"?r:this.stepStatus&&i))),this.lastStep?e("ic-typography",{variant:"subtitle-small",class:"next-step"},"Last step"):this.nextStepTitle!==undefined&&e("ic-typography",{variant:"subtitle-small",class:"next-step"},"Next",e("span",{class:"visually-hidden"}," step is"),":"," ",this.nextStepTitle)));let l;if(this.stepType!=="completed"){l=e("ic-typography",{variant:"subtitle-small"},e("span",{class:"step-icon-inner","aria-hidden":"true"},this.stepNum))}else{l=e("div",{class:"step-icon-inner","aria-hidden":"true"},e("span",{class:"check-icon",innerHTML:a}))}const p=this.stepType==="current"&&e("div",{class:"step-connect-inner"});const d=!this.lastStep&&e("div",{class:{["step-connect"]:true,["aligned-full-width"]:this.el.parentElement.classList.contains("default")&&!this.el.parentElement.classList.contains("aligned-left")}},p);const h=e("div",{class:{["step"]:true,[`${this.stepType}`]:true}},e("div",{class:"step-top"},e("div",{class:"step-icon"},l),d),(this.stepTitle\|\|this.stepSubtitle\|\|this.stepStatus)&&e("div",{class:"step-title-area"},this.stepTitle&&e("ic-typography",{variant:"subtitle-large",class:"step-title"},this.stepTitle),this.stepTitle&&(this.stepSubtitle\|\|this.stepStatus)&&e("ic-typography",{variant:"caption",class:"step-subtitle"},this.stepSubtitle!==null&&this.stepSubtitle!==undefined?this.stepSubtitle:i)));return e(s,{role:"listitem","aria-label":`Step ${this.stepNum}${t}`,"aria-current":(this.current\|\|this.stepType==="current")&&"step",class:{["aligned-full-width"]:this.el.parentElement.classList.contains("default")&&!this.el.parentElement.classList.contains("aligned-left"),[`${this.variant}`]:true}},this.variant==="compact"?o:h)}get el(){return i(this)}static get watchers(){return{stepType:["stepTypeChangeHandler"]}}};n.style=r;export{n as ic_step};
2	+ //# sourceMappingURL=p-80cd0a2d.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/components/ic-step/ic-step.css?tag=ic-step&encapsulation=shadow","src/components/ic-step/ic-step.tsx"],"names":["icStepCss","Step","[object Object]","this","variant","stepType","current","ariaLabel","stepStatus","toUpperCase","slice","compactStepStyling","statusIcon","h","class","aria-hidden","innerHTML","checkIcon","warningIcon","compactStep","compact-step-progress-indicator","not-required","size","inner-label","stepNum","progress","stepTitle","lastStepNum","stepSubtitle","undefined","lastStep","nextStepTitle","icon","partialBar","finalStep","el","parentElement","classList","contains","defaultStep","Host","role","aria-label","aria-current"],"mappings":"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","sourcesContent":["/* SHARED STYLING */\n:host {\n display: flex;\n flex: auto;\n}\n\n.step {\n display: flex;\n flex: 1 1 0;\n}\n\n.step-icon {\n display: flex;\n justify-content: center;\n}\n\n.step-title,\n.step-subtitle,\n.step-status,\n.next-step {\n white-space: pre-line;\n}\n\n.visually-hidden {\n position: absolute;\n left: -10000px;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n}\n\n/* COMPACT STEP STYLING */\n:host(.compact) {\n column-gap: var(--ic-space-sm);\n\n --compact-step-inner-color: var(--ic-theme-primary);\n --compact-step-circular-line-width: var(--ic-space-xxs);\n}\n\n:host(.compact) .step {\n column-gap: var(--ic-space-sm);\n}\n\n:host(.compact) .step:not(.current) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n\n.compact-step-progress-indicator {\n margin: var(--ic-space-xs) 0 0;\n}\n\n:host(.compact) .step-title-area {\n display: flex;\n flex-direction: column;\n width: 228px;\n}\n\n.info-line {\n display: flex;\n column-gap: var(--ic-space-xs);\n}\n\n.step-status {\n display: flex;\n color: var(--ic-color-secondary-text);\n column-gap: var(--ic-space-xxxs);\n}\n\n.compact-step-completed .step-status {\n color: var(--ic-status-success);\n}\n\n.compact-step-disabled :is(.step-title, .step-status) {\n color: var(--ic-color-tertiary-text);\n}\n\n.step-num {\n color: var(--ic-color-secondary-text);\n white-space: nowrap;\n}\n\n:host(.compact) .step-icon {\n margin: var(--ic-space-xxxs);\n}\n\n:host(.compact) .step-icon svg {\n width: 16px;\n height: 16px;\n}\n\n/* DEFAULT STEP STYLING */\n:host(.default) .step {\n flex-direction: column;\n}\n\n:host(.default.last-step) {\n flex-grow: initial;\n}\n\n.step-top {\n display: flex;\n width: 100%;\n align-items: center;\n align-self: flex-start;\n height: 40px;\n}\n\n:host(.default) .step-icon {\n border-radius: 50%;\n}\n\n.step-icon-inner {\n width: var(--ic-space-xl);\n height: var(--ic-space-xl);\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n}\n\n:host(.default) .current {\n color: var(--ic-theme-primary);\n}\n\n:host(.default) .step-title-area {\n margin: var(--ic-space-xs) 0;\n padding-right: var(--ic-space-xs);\n width: 100%;\n}\n\n:host(.default) .step-title,\n.step-subtitle {\n width: fit-content;\n}\n\n.step-subtitle {\n color: var(--ic-color-tertiary-text);\n}\n\n.current .step-subtitle {\n color: var(--ic-color-primary-text);\n}\n\n:host(.default) .completed {\n color: var(--ic-status-success);\n}\n\n.active .step-icon-inner {\n box-shadow: inset var(--ic-architectural-200) 0 0 0 2px;\n}\n\n.current .step-icon-inner {\n background-color: var(--ic-theme-primary);\n color: white;\n}\n\n.disabled {\n color: var(--ic-architectural-200);\n}\n\n.disabled .step-icon-inner {\n border: 1px dashed var(--ic-architectural-200);\n width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n}\n\n.disabled .step-title-area {\n color: var(--ic-color-tertiary-text);\n}\n\n.completed .step-icon-inner {\n background: var(--ic-status-success);\n box-shadow: inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);\n border-radius: 100%;\n}\n\n:host(.default) .current .step-icon {\n border: var(--ic-space-xxxs) solid var(--ic-theme-primary);\n padding: var(--ic-space-xxxs);\n margin: 0 calc(-1 * var(--ic-space-xxxs));\n /* compensating for the circle being bigger than other steps */\n}\n\n.step-connect {\n height: var(--ic-space-xxxs);\n background-color: var(--ic-architectural-200);\n margin: 0 var(--ic-space-xs);\n border-radius: var(--ic-space-xxs);\n width: 100%;\n}\n\n.aligned-full-width.step-connect {\n min-width: 100px;\n width: 100%;\n}\n\n.disabled .step-connect {\n height: 0;\n background-color: rgb(0 0 0 / 0%);\n border-top: 2px dashed var(--ic-architectural-200);\n border-radius: 0;\n}\n\n.completed .step-connect {\n background-color: var(--ic-status-success);\n}\n\n.step-connect-inner {\n width: 70%;\n display: flex;\n flex: auto;\n height: var(--ic-space-xxxs);\n border-radius: var(--ic-space-xxs);\n background-color: var(--ic-theme-primary);\n}\n\n.step-icon-inner .check-icon {\n padding-top: var(--ic-space-xxs);\n}\n\n.step-icon-inner .check-icon svg {\n width: var(--ic-space-md);\n height: auto;\n}\n\n.step-icon-inner .check-icon > svg > path {\n fill: var(--ic-color-white-text);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n /* COMPACT STEP */\n .compact-step-disabled :is(.step-title, .step-status) {\n color: GrayText;\n }\n\n /* DEFAULT STEP */\n .step-connect:not(.disabled .step-connect) {\n border: var(--ic-hc-border);\n }\n\n .active .step-icon-inner,\n .completed .step-icon-inner,\n .current .step-icon-inner {\n forced-color-adjust: none;\n box-shadow: inset canvastext 0 0 0 2px;\n background-color: transparent;\n color: canvastext;\n }\n\n :host(.default) .current .step-icon {\n padding: 0;\n border: none;\n }\n\n .disabled,\n .disabled .step-title-area {\n color: GrayText;\n }\n\n .step-connect-inner,\n .completed .step-connect {\n background-color: canvastext;\n }\n\n .step-icon-inner .check-icon > svg > path {\n fill: canvastext;\n }\n}\n","import { Component, Host, h, Prop, Element, Watch } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon-outline.svg\";\nimport { IcStepVariants, IcStepStatuses, IcStepTypes } from \"./ic-step.types\";\n\n@Component({\n tag: \"ic-step\",\n styleUrl: \"ic-step.css\",\n shadow: true,\n})\nexport class Step {\n @Element() el: HTMLIcStepElement;\n /**\n * @internal The variant of the step. This is managed by ic-stepper.\n */\n @Prop() variant!: IcStepVariants;\n\n /**\n * The title of the step within the stepper.\n */\n @Prop() stepTitle?: string;\n\n /**\n * Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.\n */\n @Prop() stepSubtitle?: string;\n\n /**\n * The status of the step. Use this prop to display a status message on the step if it is required or optional.\n */\n @Prop() stepStatus?: IcStepStatuses;\n\n /**\n * The state of the step within the stepper.\n */\n @Prop() stepType?: IcStepTypes = \"active\";\n\n /**\n * @internal If `true`, and a compact stepper is being used, the current step will be the only step in view.\n */\n @Prop({ mutable: true }) current?: boolean = false;\n\n /**\n * @internal If a compact stepper is being used, this sets the styling of the step.\n */\n @Prop() compactStepStyling?: IcStepTypes;\n\n /**\n * @internal The step number, managed by ic-stepper.\n */\n @Prop() stepNum?: number;\n\n /**\n * @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.\n */\n @Prop() lastStep!: boolean;\n\n /**\n * @internal The step number of the final step. This is managed by ic-stepper.\n */\n @Prop() lastStepNum?: number;\n\n /**\n * @internal The name of the next step. This is managed by ic-stepper.\n */\n @Prop() nextStepTitle?: string;\n\n /**\n * @internal The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper.\n */\n @Prop() progress?: number;\n\n @Watch(\"stepType\")\n stepTypeChangeHandler(): void {\n if (this.variant === \"compact\" && this.stepType === \"current\") {\n this.current = true;\n } else {\n this.current = false;\n }\n }\n\n render() {\n // ARIA LABEL\n let ariaLabel = \"\";\n\n if (this.stepType === \"completed\") {\n ariaLabel = \". Completed step\";\n } else if (this.stepType === \"disabled\") {\n ariaLabel = \". Non-required step\";\n } else if (this.stepStatus === \"required\") {\n ariaLabel = \". Required step\";\n } else if (this.stepStatus === \"optional\") {\n ariaLabel = \". Optional step\";\n }\n\n // STEP STATUS\n let stepStatus;\n if (this.stepStatus) {\n stepStatus = this.stepStatus[0].toUpperCase() + this.stepStatus.slice(1);\n }\n\n // STEP TYPE\n let stepType;\n if (\n this.stepType === \"disabled\" ||\n this.compactStepStyling === \"disabled\"\n ) {\n stepType = \"Not required\";\n } else if (this.compactStepStyling === \"completed\") {\n stepType = \"Completed\";\n }\n\n // STATUS ICON FOR COMPACT STEP\n let statusIcon;\n if (\n this.stepType === \"completed\" ||\n this.compactStepStyling === \"completed\"\n ) {\n statusIcon = (\n <span\n class=\"check-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={checkIcon}\n ></span>\n );\n } else if (\n this.stepType === \"disabled\" ||\n this.compactStepStyling === \"disabled\"\n ) {\n statusIcon = (\n <span\n class=\"warning-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={warningIcon}\n ></span>\n );\n }\n\n // COMPACT STEP COMPONENT\n const compactStep = (\n <div\n class={{\n [\"step\"]: true,\n [\"current\"]: this.current,\n [`compact-step-${this.compactStepStyling}`]:\n !!this.compactStepStyling,\n }}\n >\n <ic-loading-indicator\n class={{\n \"compact-step-progress-indicator\": true,\n \"not-required\":\n this.stepType === \"disabled\" ||\n this.compactStepStyling === \"disabled\",\n }}\n aria-hidden=\"true\"\n size=\"small\"\n inner-label={this.stepNum}\n progress={this.progress}\n ></ic-loading-indicator>\n <div class=\"step-title-area\">\n <ic-typography variant=\"h4\" class=\"step-title\">\n {this.stepTitle}\n </ic-typography>\n <div class=\"info-line\">\n <ic-typography variant=\"caption\" class=\"step-num\">\n {`${this.stepNum} of ${this.lastStepNum}`}\n <span class=\"visually-hidden\"> steps</span>\n </ic-typography>\n {(this.stepSubtitle ||\n this.stepType === \"completed\" ||\n this.stepType === \"disabled\" ||\n (this.variant === \"compact\" &&\n !!this.compactStepStyling &&\n this.compactStepStyling !== \"active\") ||\n !!this.stepStatus) && (\n <div class=\"step-status\">\n {statusIcon && statusIcon}\n {(this.stepSubtitle || stepType) && (\n <ic-typography variant=\"caption\">\n {this.stepSubtitle !== null &&\n this.stepSubtitle !== undefined\n ? this.stepSubtitle\n : this.stepType === \"disabled\" ||\n (this.variant === \"compact\" &&\n this.compactStepStyling === \"disabled\") ||\n this.stepType === \"completed\" ||\n (this.variant === \"compact\" &&\n this.compactStepStyling === \"completed\")\n ? stepType\n : this.stepStatus && stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n {this.lastStep ? (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n Last step\n </ic-typography>\n ) : (\n this.nextStepTitle !== undefined && (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n Next<span class=\"visually-hidden\"> step is</span>:{\" \"}\n {this.nextStepTitle}\n </ic-typography>\n )\n )}\n </div>\n </div>\n );\n\n // ICON FOR DEFAULT STEP\n let icon;\n if (this.stepType !== \"completed\") {\n icon = (\n <ic-typography variant=\"subtitle-small\">\n <span class=\"step-icon-inner\" aria-hidden=\"true\">\n {this.stepNum}\n </span>\n </ic-typography>\n );\n } else {\n icon = (\n <div class=\"step-icon-inner\" aria-hidden=\"true\">\n <span class=\"check-icon\" innerHTML={checkIcon}></span>\n </div>\n );\n }\n\n // STEP CONNECT FOR DEFAULT STEP\n const partialBar = this.stepType === \"current\" && (\n <div class=\"step-connect-inner\"></div>\n );\n\n const finalStep = !this.lastStep && (\n <div\n class={{\n [\"step-connect\"]: true,\n [\"aligned-full-width\"]:\n this.el.parentElement.classList.contains(\"default\") &&\n !this.el.parentElement.classList.contains(\"aligned-left\"),\n }}\n >\n {partialBar}\n </div>\n );\n\n // DEFAULT STEP COMPONENT\n const defaultStep = (\n <div\n class={{\n [\"step\"]: true,\n [`${this.stepType}`]: true,\n }}\n >\n <div class=\"step-top\">\n <div class=\"step-icon\">{icon}</div>\n {finalStep}\n </div>\n {(this.stepTitle || this.stepSubtitle || this.stepStatus) && (\n <div class=\"step-title-area\">\n {this.stepTitle && (\n <ic-typography variant=\"subtitle-large\" class=\"step-title\">\n {this.stepTitle}\n </ic-typography>\n )}\n {this.stepTitle && (this.stepSubtitle || this.stepStatus) && (\n <ic-typography variant=\"caption\" class=\"step-subtitle\">\n {this.stepSubtitle !== null && this.stepSubtitle !== undefined\n ? this.stepSubtitle\n : stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n );\n\n return (\n <Host\n role=\"listitem\"\n aria-label={`Step ${this.stepNum}${ariaLabel}`}\n aria-current={(this.current || this.stepType === \"current\") && \"step\"}\n class={{\n [\"aligned-full-width\"]:\n this.el.parentElement.classList.contains(\"default\") &&\n !this.el.parentElement.classList.contains(\"aligned-left\"),\n [`${this.variant}`]: true,\n }}\n >\n {this.variant === \"compact\" ? compactStep : defaultStep}\n </Host>\n );\n }\n}\n"]}

package/dist/core/{p-2b5c9143.entry.js → p-8470c255.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as i,h as t,H as a,g as e}from"./p-f9370be6.js";import{c as o}from"./p-44512ebe.js";import{c as n}from"./p-e28af65b.js";import{z as s,i as r,D as l,g as p,k as d,c,a as h,l as v}from"./p-23831891.js";import{I as g}from"./p-6f57b13c.js";const m=`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">\n  <path d="M0 0h24v24H0V0z" fill="none" />\n  <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />\n  <title>menu icon</title>\n</svg>\n`;const b=':host{display:block;--side-navigation-position:fixed;--side-navigation-position-left:0;--side-navigation-position-top:var(--ic-space-xxl);--side-navigation-height:var(--ic-space-xxl);--sm-side-navigation-top-bar-height:56px;--sm-side-navigation-collapsed-labels-width:96px;--sm-side-navigation-expand-transition-duration:var(\n    --ic-transition-duration-slow\n  );--side-navigation-width:320px}:host>*{box-sizing:border-box}.side-navigation{display:flex;flex-direction:column;width:var(--side-navigation-width);color:var(--ic-theme-text);position:var(--side-navigation-position);top:var(--side-navigation-position-top);left:calc(var(--side-navigation-width) * -1);bottom:0;background-color:var(--ic-theme-primary)}:host(.inline) .side-navigation{position:absolute;height:100%}:host(.anchor-right) .side-navigation{right:calc(var(--side-navigation-width) * -1)}.classification-spacing{margin-bottom:var(--ic-space-lg)}.navigation-list{padding:0;margin:0;list-style:none}.side-navigation-inner{background-color:var(--ic-theme-primary);display:flex;flex-direction:column;flex:1 1 0;overflow:auto;visibility:hidden}:host(.inline) .side-navigation-inner{flex:1}:host(.xs-menu-open) .side-navigation{transition:left var(--ic-easing-transition-slow);left:0}:host(.xs-menu-close) .side-navigation{left:calc(var(--side-navigation-width) * -1);transition:left var(--ic-easing-transition-slow)}:host(.anchor-right.xs-menu-open) .side-navigation{right:0;left:auto}:host(.anchor-right.xs-menu-close) .side-navigation{right:calc(var(--side-navigation-width) * -1);left:auto;transition:right var(--ic-easing-transition-slow)}.bottom-wrapper{border-top:var(--ic-keyline-lighten);position:sticky;bottom:0;left:0;z-index:2;box-shadow:-3px -3px 8px rgb(0 0 0 / 20%);background-color:var(--ic-theme-primary);display:flex;flex-direction:column;visibility:hidden}:host(.dark) .bottom-wrapper{border-top:var(--ic-keyline-darken)}.top-bar{display:flex;flex-direction:row;align-items:center;min-height:var(--side-navigation-height);padding:var(--ic-space-xs);box-sizing:border-box;background-color:var(--ic-theme-primary);position:fixed;top:0;left:0;right:0;border-bottom:var(--ic-keyline-darken);box-shadow:var(--ic-elevation-overlay);z-index:2;overflow:hidden;visibility:visible}:host(.inline) .top-bar{position:absolute}.top-bar.dark a:focus{box-shadow:var(--ic-border-focus)}.top-bar.light{border-bottom:var(--ic-keyline-lighten)}.app-title-wrapper{display:flex;margin-left:var(--ic-space-xs);border-left:var(--ic-keyline-darken);padding-left:var(--ic-space-xxs);color:var(--ic-theme-text);align-items:center}@media screen and (min-width: 340px){.app-title-wrapper ic-typography{margin-left:var(--ic-space-xs)}}:host .title-link:link{display:flex;align-items:center;transition:box-shadow var(--ic-easing-transition-fast),\n    background-color var(--ic-easing-transition-fast);text-decoration:none;padding:var(--ic-space-xxs);color:var(--ic-theme-text)}:host .title-link:visited,:host .title-link:active{color:var(--ic-theme-text)}:host .title-link:hover{border-radius:var(--ic-border-radius);background-color:var(--ic-theme-hover)}:host .title-link:active{background-color:var(--ic-theme-active)}:host .title-link:focus{border-radius:var(--ic-border-radius);box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);background-color:transparent}:host .title-link ic-typography{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.app-title-wrapper ::slotted(svg){fill:var(--ic-theme-text)}.app-icon-container{display:none}.button-label{display:flex;align-items:center}.mobile-top-bar-menu-icon{display:flex}.menu-button{width:104px}.app-status-wrapper{position:absolute;right:var(--ic-space-md);top:0;bottom:0;width:auto;display:flex;align-items:center;pointer-events:none}.app-status-wrapper .app-version{max-width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-status-wrapper .app-status{border-radius:80px;background-color:var(--ic-theme-text);color:var(--ic-color-primary-text);padding:var(--ic-space-xxs) var(--ic-space-lg);margin-right:var(--ic-space-xs);max-width:100px}.app-status-wrapper .app-status-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:96px}:host(.dark) .app-status-wrapper .app-status{color:var(--ic-color-white-text)}.navigation-landmark-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden}::slotted(ic-navigation-group){--navigation-group-height:44px;--navigation-group-width:100%;--navigation-group-justify-content:space-between;--navigation-group-hover:var(--ic-theme-hover);--navigation-group-text-hover:var(--ic-theme-text);--navigation-item-child-height:56px;--navigation-item-child-active:var(--ic-action-dark-bg-active);--navigation-item-child-color:var(--ic-theme-text);--navigation-group-expand-toggle-padding:4px}::slotted(ic-navigation-item),::slotted(ic-navigation-group){--navigation-item-height:56px;--navigation-item-width:auto;--navigation-item-justify-content:flex-start}.bottom-side-nav{position:relative;align-content:flex-end;height:var(--sm-side-navigation-top-bar-height)}.primary-navigation{flex:1;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none}.primary-navigation::-webkit-scrollbar{display:none}.primary-navigation,.secondary-navigation{overflow-x:hidden}.bottom-side-nav .menu-expand-button{display:none}.menu-visibility-visible{visibility:visible}.menu-visibility-hidden{visibility:hidden}@media screen and (min-width: 340px){.app-icon-container{display:flex}}@media screen and (min-width: 577px){:host{display:flex;flex-direction:column;height:100vh;position:var(--side-navigation-position);left:0;top:0;bottom:0}:host(.static){position:relative;left:auto;top:auto;bottom:auto}.app-icon-container{padding:var(--ic-space-xxs) 0}.top-bar{--side-navigation-height:var(--sm-side-navigation-top-bar-height);position:relative;padding:0;box-shadow:-3px 3px 8px rgb(0 0 0 / 20%)}:host(.inline) .top-bar{position:sticky}:host(.anchor-right) .top-bar{box-shadow:3px 3px 8px rgb(0 0 0 / 20%)}:host(.anchor-right) .bottom-wrapper{box-shadow:3px -3px 8px rgb(0 0 0 / 20%)}.side-navigation,.top-bar{width:var(--sm-side-navigation-top-bar-height)}:host(.sm-collapsed){width:var(--sm-side-navigation-top-bar-height);transition:width var(--ic-easing-transition-slow)}:host(.sm-collapsed.collapsed-labels){width:var(--sm-side-navigation-collapsed-labels-width)}:host(.sm-expanded){width:var(--side-navigation-width);transition:width var(--ic-easing-transition-slow);box-shadow:var(--ic-elevation-overlay)}.side-navigation{--side-navigation-position-top:0;flex:1;position:relative;top:auto;left:auto;bottom:auto}:host(.inline) .side-navigation{position:relative}:host(.anchor-right) .side-navigation{left:auto;right:0}.side-navigation-inner{width:100%;visibility:visible}.bottom-wrapper{visibility:visible}.app-title-wrapper{margin-left:0;border-left:none;padding:var(--ic-space-sm)}.app-title-wrapper ::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg)}.app-title-wrapper ic-typography{margin:calc(-1 * 4.5px) 0 calc(-1 * 4.5px) var(--ic-space-md);font-weight:var(--ic-font-weight-semibold)}:host(.sm-collapsed) .app-title-wrapper ic-typography{position:absolute;left:-9999px;opacity:0;transition:opacity var(--ic-easing-transition-slow)}:host(.sm-expanded) ic-typography{position:relative;left:0}:host(.sm-expanded) :is(.side-navigation,.top-bar){width:var(--side-navigation-width);transition:width var(--ic-easing-transition-slow)}:host(.sm-collapsed) :is(.side-navigation,.top-bar){width:var(--sm-side-navigation-top-bar-height);transition:width var(--ic-easing-transition-slow)}:host(.anchor-right.sm-expanded) :is(.side-navigation,.top-bar){left:auto;right:0}.app-status-wrapper,:host(.sm-collapsed) .app-status-wrapper{display:none}:host(.sm-expanded) .app-status-wrapper{display:flex}.bottom-side-nav{justify-items:flex-end;display:flex;flex-direction:column}.bottom-side-nav .menu-expand-button{padding-left:var(--ic-space-md);height:var(--sm-side-navigation-top-bar-height);width:100%;color:var(--ic-theme-text);background-color:transparent;outline:var(--ic-hc-focus-outline);border:none;cursor:pointer;display:flex;transition:var(--ic-easing-transition-fast)}.bottom-side-nav .menu-expand-button svg{justify-items:flex-start;align-self:center}.bottom-side-nav .menu-expand-button:hover{background-color:var(--ic-theme-hover)}:host .bottom-side-nav{outline:none}:host .bottom-side-nav .menu-expand-button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background-color:transparent}:host(.sm-collapsed) .bottom-side-nav .menu-expand-button svg{transform:scaleX(1);transition:transform var(--ic-easing-transition-slow)}:host(.sm-expanded) .bottom-side-nav .menu-expand-button svg{transform:scaleX(-1);transition:transform var(--ic-easing-transition-slow)}:host(.anchor-right.sm-collapsed) .bottom-side-nav .menu-expand-button svg{transform:scaleX(-1)}:host(.anchor-right.sm-expanded) .bottom-side-nav .menu-expand-button svg{transform:scaleX(1)}:host(.sm-collapsed) ::slotted(ic-navigation-item){--navigation-item-label-opacity:1}:host(.sm-collapsed) ::slotted(ic-navigation-item),:host(.sm-collapsed) ::slotted(ic-navigation-group){--navigation-item-label-opacity:0}:host(.sm-expanded) ::slotted(ic-navigation-item),:host(.sm-expanded) ::slotted(ic-navigation-group){--navigation-item-label-opacity:1}:host(.sm-collapsed) ::slotted(ic-navigation-group){--navigation-group-title-position:absolute;--navigation-group-title-position-left:-9999px;--navigation-group-title-opacity:none}:host(.sm-expanded) ::slotted(ic-navigation-group){--navigation-group-title-position:relative;--navigation-group-title-position-left:0;--navigation-group-expand-toggle-padding:4px;--navigation-group-title-opacity:flex}:host(.sm-collapsed.collapsed-labels) .side-navigation,:host(.sm-collapsed.collapsed-labels) .top-bar{width:var(--sm-side-navigation-collapsed-labels-width)}:host(.sm-collapsed.collapsed-labels) .menu-expand-button{padding:0}:host(.sm-collapsed.collapsed-labels) .app-title-wrapper{width:100%;justify-content:center}:host(.sm-collapsed.collapsed-labels) ::slotted(ic-navigation-group){--navigation-group-justify-content:center;--navigation-item-label-opacity:1;--navigation-group-item-min-width:100%;--navigation-group-expand-toggle-padding:16px}:host(.collapsed-labels) .bottom-side-nav .menu-expand-button{justify-content:center}:host .collapsed-icon-labels-start{visibility:hidden;opacity:0}:host .collapsed-icon-labels-end{visibility:visible;opacity:1;transition:visibility 0s, opacity var(--ic-easing-transition-slow)}}@media screen and (min-width: 993px){:host{position:sticky;left:auto;top:0;bottom:0}:host(.sm-expanded){box-shadow:none}}@media (forced-colors: active){.side-navigation,.top-bar{border-right:var(--ic-hc-border)}slot[name="app-icon"]::slotted(svg){fill:currentcolor}}';const u=class{constructor(a){i(this,a);this.ANIMATION_DURATION=parseInt(s("--ic-transition-duration-slow"))||0;this.emitSideNavigationExpanded=i=>{const t=new CustomEvent("sideNavExpanded",{detail:{sideNavExpanded:i.sideNavExpanded,sideNavMobile:i.sideNavMobile}});this.el.dispatchEvent(t)};this.toggleMenu=()=>{this.menuOpen=!this.menuOpen;this.setMobileMenuAriaAttributes(this.menuOpen);this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);this.emitSideNavigationExpanded({sideNavExpanded:this.menuOpen,sideNavMobile:true})};this.setToggleMenuFlyoutMenuVisibility=i=>{const t=this.el.shadowRoot.querySelector("#side-navigation");const a=t.querySelector(".side-navigation-inner");const e=t.querySelector(".bottom-wrapper");if(i){e.classList.add("menu-visibility-visible");a.classList.add("menu-visibility-visible")}else{setTimeout((()=>{a.classList.remove("menu-visibility-visible");e.classList.remove("menu-visibility-visible")}),this.ANIMATION_DURATION)}};this.setMobileMenuAriaAttributes=i=>{const t=this.el.shadowRoot.querySelector("#menu-button").shadowRoot.querySelector("button");if(i){t.setAttribute("aria-expanded","true");t.setAttribute("aria-label","Close navigation menu")}else{t.setAttribute("aria-expanded","false");t.setAttribute("aria-label","Open navigation menu")}};this.setAndRemoveNoWrapAfterMenuExpanded=()=>{const i=this.el.shadowRoot.querySelector(".title-link ic-typography");i.classList.add("ic-typography-no-wrap");setTimeout((()=>{i.classList.remove("ic-typography-no-wrap")}),this.ANIMATION_DURATION)};this.toggleMenuExpanded=()=>{this.menuExpanded=!this.menuExpanded;if(this.menuExpanded){this.setAndRemoveNoWrapAfterMenuExpanded()}this.arrangeSlottedNavigationItem(this.menuExpanded);this.displayTooltipWithExpandedLongLabel(this.menuExpanded);if(this.collapsedIconLabels){this.animateCollapsedIconLabels()}this.emitSideNavigationExpanded({sideNavExpanded:this.menuExpanded})};this.arrangeSlottedNavigationItem=i=>{const t=this.el.querySelectorAll("ic-navigation-item");t.forEach((t=>{const a=r(t,"navigation-item");if(a){const a=t.querySelector("[slot='navigation-item']");const e=document.createElement("div");const o=a.querySelector("svg");const n=t.textContent.trim();const s=document.createElement("ic-typography");s.classList.add("ic-typography-label","hydrated","navigation-item-side-nav-slotted-text");e.className="icon-container";e.append(o);a.textContent="";s.textContent=n;a.append(e);a.append(s);if(this.collapsedIconLabels){this.styleSlottedCollapsedIconLabels(i,s)}else{this.styleSlottedIconLabels(i,s)}}}))};this.styleSlottedCollapsedIconLabels=(i,t)=>{if(i){t.style.marginTop="0";t.style.whiteSpace="nowrap";t.style.overflow="hidden";t.style.textOverflow="ellipsis"}else{t.style.marginTop="10px";t.style.whiteSpace="nowrap";t.style.overflow="hidden";t.style.textOverflow="ellipsis"}};this.styleSlottedIconLabels=(i,t)=>{if(i){t.style.opacity="1";t.style.visibility="visible";t.style.transition="visibility 0s, opacity var(--ic-easing-transition-slow)"}else{t.style.opacity="0";t.style.visibility="hidden";t.style.transition="visibility 0s, opacity var(--ic-easing-transition-slow)"}};this.animateCollapsedIconLabels=()=>{const i=this.el.shadowRoot.querySelector(".primary-navigation");const t=this.el.shadowRoot.querySelector(".bottom-wrapper > .secondary-navigation");if(i){i.classList.remove("collapsed-icon-labels-end");i.classList.add("collapsed-icon-labels-start")}if(t){t.classList.remove("collapsed-icon-labels-end");t.classList.add("collapsed-icon-labels-start")}this.el.addEventListener("transitionend",(()=>{if(i){i.classList.remove("collapsed-icon-labels-start");i.classList.add("collapsed-icon-labels-end")}if(t){t.classList.remove("collapsed-icon-labels-start");t.classList.add("collapsed-icon-labels-end")}}))};this.paddingIconWidth=i=>{const t=i[0].shadowRoot&&i[0].shadowRoot.querySelector("ic-tooltip a")||i[0].querySelector("a");const a=i[0].querySelector("svg");const e={gap:window.getComputedStyle(t).gap,iconWidth:window.getComputedStyle(a).width,paddingLeft:window.getComputedStyle(t).paddingLeft};return Object.values(e).reduce(((i,t)=>i+=parseInt(t)),0)};this.displayTooltipWithExpandedLongLabel=i=>{let t;if(i){t=setTimeout((()=>{const i=this.el.clientWidth;const t=Array.from(this.el.querySelectorAll("ic-navigation-item"));const a=t.length?this.paddingIconWidth(t):0;t.forEach((t=>{var e,o;const n=((e=t.shadowRoot&&t.shadowRoot.querySelector("ic-tooltip .link ic-typography.ic-typography-label"))===null||e===void 0?void 0:e.scrollWidth)||((o=t.querySelector("ic-typography.ic-typography-label"))===null||o===void 0?void 0:o.scrollWidth);if(n>i-a){t.setAttribute("display-navigation-tooltip","true")}}))}),this.ANIMATION_DURATION)}else{clearTimeout(t);const i=Array.from(this.el.querySelectorAll("ic-navigation-item"));i.forEach((i=>{i.setAttribute("display-navigation-tooltip","false")}))}};this.setMenuExpanded=i=>{this.menuExpanded=i};this.setParentPaddingTop=i=>{this.el.parentElement.style.setProperty("padding-top",i)};this.setParentPaddingLeft=i=>{this.el.parentElement.style.setProperty("padding-left",i)};this.resizeObserver=null;this.resizeObserverCallback=i=>{if(i!==this.deviceSize){this.deviceSize=i;if(i===l.S){if(!this.disableAutoParentStyling){const i=this.el.shadowRoot.querySelector(".top-bar").scrollHeight;this.setParentPaddingTop(`${i}px`);this.setParentPaddingLeft("0");if(this.inline){this.el.parentElement.style.setProperty("height",`calc(100% - ${i}px)`)}}this.emitSideNavigationExpanded({sideNavExpanded:this.menuExpanded,sideNavMobile:true})}else{if(!this.disableAutoParentStyling){this.setParentPaddingTop("0");this.el.parentElement.style.setProperty("height","100%")}this.emitSideNavigationExpanded({sideNavExpanded:this.menuExpanded,sideNavMobile:false})}if(i>l.L){if(!this.disableAutoParentStyling){this.setParentPaddingTop("0");this.setParentPaddingLeft("0")}}else if(i>l.S&&i<=l.L&&!this.static&&!this.disableAutoParentStyling){if(this.collapsedIconLabels){this.setParentPaddingLeft("calc(var(--ic-space-xxl) * 2)")}else{this.setParentPaddingLeft("calc(var(--ic-space-xxl) + var(--ic-space-xs))")}}}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{const i=p();this.deviceSizeAppTitle=i;this.resizeObserverCallback(i)}));this.resizeObserver.observe(document.body,{box:"content-box"})};this.setCollapsedIconLabels=()=>{const i=Array.from(this.el.querySelectorAll("ic-navigation-item"));i.forEach((i=>{i.setAttribute("collapsed-icon-label","true")}))};this.styleSlottedCollapsedIconLabel=()=>{const i=Array.from(this.el.querySelectorAll(".navigation-item-side-nav-slotted-text"));i.forEach((i=>{var t,a;if((a=(t=i===null||i===void 0?void 0:i.parentElement)===null||t===void 0?void 0:t.parentElement)===null||a===void 0?void 0:a.classList.contains("navigation-item-side-nav-collapsed-with-label")){i.style.whiteSpace="nowrap";i.style.overflow="hidden";i.style.textOverflow="ellipsis";i.style.marginTop="10px"}}))};this.renderTopBar=({isSDevice:i,foregroundColor:a,menuOpen:e,href:n,isAppNameSubtitleVariant:s,appTitle:r})=>t("div",{class:{"top-bar":true,[this.foregroundColor]:true}},i&&t("nav",{"aria-labelledby":"menu-navigation-toggle-button-landmark","aria-hidden":"false"},t("ic-button",{"aria-label":"Open navigation menu",class:"menu-button",id:"menu-button",variant:"secondary",size:"small","full-width":"true",appearance:a,onClick:this.toggleMenu,"aria-owns":"side-navigation","aria-haspopup":"true","aria-expanded":"false"},t("span",{class:"mobile-top-bar-menu-icon",slot:"icon",innerHTML:e?o:m}),e?"Close":"Menu"),t("span",{id:"menu-navigation-toggle-button-landmark",class:"navigation-landmark-title","aria-hidden":"true"},"Navigation menu toggle button")),t("div",{class:"app-title-wrapper"},t("a",{href:n,class:"title-link"},t("div",{class:"app-icon-container","aria-hidden":"true"},t("slot",{name:"app-icon"})),t("ic-typography",{variant:s?"subtitle-small":"h3"},r))));this.appTitle=undefined;this.status=undefined;this.version=undefined;this.expanded=false;this.href="/";this.static=false;this.collapsedIconLabels=false;this.inline=false;this.disableAutoParentStyling=false;this.foregroundColor=d();this.menuOpen=false;this.menuExpanded=false;this.deviceSize=l.XL;this.deviceSizeAppTitle=l.S;this.hasSecondaryNavigation=false}themeChangeHandler(i){const t=i.detail;this.foregroundColor=t.mode}componentWillLoad(){if(this.expanded){this.setMenuExpanded(true)}else{this.setMenuExpanded(false)}if(this.collapsedIconLabels){this.setCollapsedIconLabels()}this.hasSecondaryNavigation=r(this.el,"secondary-navigation")}componentDidLoad(){this.emitSideNavigationExpanded({sideNavExpanded:this.menuExpanded,sideNavMobile:this.deviceSize===l.S});c(this.runResizeObserver);this.arrangeSlottedNavigationItem();this.styleSlottedCollapsedIconLabel();this.displayTooltipWithExpandedLongLabel(this.menuExpanded);h([{prop:this.appTitle,propName:"app-title"}],"Side Navigation")}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}render(){const{appTitle:i,menuOpen:e,foregroundColor:o,menuExpanded:s,href:p,status:d,version:c,collapsedIconLabels:h,inline:m}=this;const b=this.deviceSize===l.S;const u=this.deviceSize===l.M;const x=this.deviceSize>=l.L;const f=this.deviceSizeAppTitle===l.S;const y=u||x&&!this.static;const w={isSDevice:b,foregroundColor:o,menuOpen:e,href:p,isAppNameSubtitleVariant:f,appTitle:i};return t(a,{class:{"xs-menu-open":e&&b,"xs-menu-close":!e&&b,"sm-collapsed":!b&&!s,"sm-expanded":!b&&s,[g.Dark]:o===g.Dark,["collapsed-labels"]:!b&&!s&&h,["static"]:this.static,["inline"]:m}},b&&this.renderTopBar(Object.assign({},w)),t("div",{class:"side-navigation",id:"side-navigation"},!b&&this.renderTopBar(Object.assign({},w)),t("div",{class:"side-navigation-inner"},r(this.el,"primary-navigation")&&t("nav",{class:"primary-navigation","aria-labelledby":"primary-navigation-landmark"},t("span",{"aria-hidden":"true",class:"navigation-landmark-title",id:"primary-navigation-landmark"},"Primary"),t("ul",{class:"navigation-list"},t("slot",{name:"primary-navigation"})))),t("div",{class:{["bottom-wrapper"]:true,["classification-spacing"]:v()}},r(this.el,"secondary-navigation")&&t("nav",{class:"secondary-navigation","aria-labelledby":"secondary-navigation-landmark"},t("span",{"aria-hidden":"true",class:"navigation-landmark-title",id:"secondary-navigation-landmark"},"Secondary"),t("ul",{class:"navigation-list"},t("slot",{name:"secondary-navigation"}))),t("div",{class:"bottom-side-nav"},this.hasSecondaryNavigation&&t("ic-divider",null),y&&t("button",{class:"menu-expand-button",innerHTML:n,onClick:this.toggleMenuExpanded,"aria-label":`${s?"Collapse":"Expand"} side navigation`}),t("div",{class:"app-status-wrapper"},d!==""&&t("div",{class:{["app-status"]:true}},t("ic-typography",{"aria-label":"app tag",variant:"label-uppercase",class:"app-status-text"},d)),c!==""&&t("ic-typography",{variant:"label",class:"app-version","aria-label":"app version"},c))))))}get el(){return e(this)}};u.style=b;export{u as ic_side_navigation};
-//# sourceMappingURL=p-2b5c9143.entry.js.map
+import{r as i,h as t,H as a,g as e}from"./p-f9370be6.js";import{c as o}from"./p-44512ebe.js";import{c as n}from"./p-e28af65b.js";import{y as s,i as r,D as l,g as p,k as d,c,a as h,l as v}from"./p-a8ac8f72.js";import{I as g}from"./p-6f57b13c.js";const m=`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">\n  <path d="M0 0h24v24H0V0z" fill="none" />\n  <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />\n  <title>menu icon</title>\n</svg>\n`;const b=':host{display:block;--side-navigation-position:fixed;--side-navigation-position-left:0;--side-navigation-position-top:var(--ic-space-xxl);--side-navigation-height:var(--ic-space-xxl);--sm-side-navigation-top-bar-height:56px;--sm-side-navigation-collapsed-labels-width:96px;--sm-side-navigation-expand-transition-duration:var(\n    --ic-transition-duration-slow\n  );--side-navigation-width:320px}:host>*{box-sizing:border-box}.side-navigation{display:flex;flex-direction:column;width:var(--side-navigation-width);color:var(--ic-theme-text);position:var(--side-navigation-position);top:var(--side-navigation-position-top);left:calc(var(--side-navigation-width) * -1);bottom:0;background-color:var(--ic-theme-primary)}:host(.inline) .side-navigation{position:absolute;height:100%}:host(.anchor-right) .side-navigation{right:calc(var(--side-navigation-width) * -1)}.classification-spacing{margin-bottom:var(--ic-space-lg)}.navigation-list{padding:0;margin:0;list-style:none}.side-navigation-inner{background-color:var(--ic-theme-primary);display:flex;flex-direction:column;flex:1 1 0;overflow:auto;visibility:hidden}:host(.inline) .side-navigation-inner{flex:1}:host(.xs-menu-open) .side-navigation{transition:left var(--ic-easing-transition-slow);left:0}:host(.xs-menu-close) .side-navigation{left:calc(var(--side-navigation-width) * -1);transition:left var(--ic-easing-transition-slow)}:host(.anchor-right.xs-menu-open) .side-navigation{right:0;left:auto}:host(.anchor-right.xs-menu-close) .side-navigation{right:calc(var(--side-navigation-width) * -1);left:auto;transition:right var(--ic-easing-transition-slow)}.bottom-wrapper{border-top:var(--ic-keyline-lighten);position:sticky;bottom:0;left:0;z-index:2;box-shadow:-3px -3px 8px rgb(0 0 0 / 20%);background-color:var(--ic-theme-primary);display:flex;flex-direction:column;visibility:hidden}:host(.dark) .bottom-wrapper{border-top:var(--ic-keyline-darken)}.top-bar{display:flex;flex-direction:row;align-items:center;min-height:var(--side-navigation-height);padding:var(--ic-space-xs);box-sizing:border-box;background-color:var(--ic-theme-primary);position:fixed;top:0;left:0;right:0;border-bottom:var(--ic-keyline-darken);box-shadow:var(--ic-elevation-overlay);z-index:2;overflow:hidden;visibility:visible}:host(.inline) .top-bar{position:absolute}.top-bar.dark a:focus{box-shadow:var(--ic-border-focus)}.top-bar.light{border-bottom:var(--ic-keyline-lighten)}.app-title-wrapper{display:flex;margin-left:var(--ic-space-xs);border-left:var(--ic-keyline-darken);padding-left:var(--ic-space-xxs);color:var(--ic-theme-text);align-items:center}@media screen and (min-width: 340px){.app-title-wrapper ic-typography{margin-left:var(--ic-space-xs)}}:host .title-link:link{display:flex;align-items:center;transition:box-shadow var(--ic-easing-transition-fast),\n    background-color var(--ic-easing-transition-fast);text-decoration:none;padding:var(--ic-space-xxs);color:var(--ic-theme-text)}:host .title-link:visited,:host .title-link:active{color:var(--ic-theme-text)}:host .title-link:hover{border-radius:var(--ic-border-radius);background-color:var(--ic-theme-hover)}:host .title-link:active{background-color:var(--ic-theme-active)}:host .title-link:focus{border-radius:var(--ic-border-radius);box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);background-color:transparent}:host .title-link ic-typography{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.app-title-wrapper ::slotted(svg){fill:var(--ic-theme-text)}.app-icon-container{display:none}.button-label{display:flex;align-items:center}.mobile-top-bar-menu-icon{display:flex}.menu-button{width:104px}.app-status-wrapper{position:absolute;right:var(--ic-space-md);top:0;bottom:0;width:auto;display:flex;align-items:center;pointer-events:none}.app-status-wrapper .app-version{max-width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-status-wrapper .app-status{border-radius:80px;background-color:var(--ic-theme-text);color:var(--ic-color-primary-text);padding:var(--ic-space-xxs) var(--ic-space-lg);margin-right:var(--ic-space-xs);max-width:100px}.app-status-wrapper .app-status-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:96px}:host(.dark) .app-status-wrapper .app-status{color:var(--ic-color-white-text)}.navigation-landmark-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden}::slotted(ic-navigation-group){--navigation-group-height:44px;--navigation-group-width:100%;--navigation-group-justify-content:space-between;--navigation-group-hover:var(--ic-theme-hover);--navigation-group-text-hover:var(--ic-theme-text);--navigation-item-child-height:56px;--navigation-item-child-active:var(--ic-action-dark-bg-active);--navigation-item-child-color:var(--ic-theme-text);--navigation-group-expand-toggle-padding:4px}::slotted(ic-navigation-item),::slotted(ic-navigation-group){--navigation-item-height:56px;--navigation-item-width:auto;--navigation-item-justify-content:flex-start}.bottom-side-nav{position:relative;align-content:flex-end;height:var(--sm-side-navigation-top-bar-height)}.primary-navigation{flex:1;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none}.primary-navigation::-webkit-scrollbar{display:none}.primary-navigation,.secondary-navigation{overflow-x:hidden}.bottom-side-nav .menu-expand-button{display:none}.menu-visibility-visible{visibility:visible}.menu-visibility-hidden{visibility:hidden}@media screen and (min-width: 340px){.app-icon-container{display:flex}}@media screen and (min-width: 577px){:host{display:flex;flex-direction:column;height:100vh;position:var(--side-navigation-position);left:0;top:0;bottom:0}:host(.static){position:relative;left:auto;top:auto;bottom:auto}.app-icon-container{padding:var(--ic-space-xxs) 0}.top-bar{--side-navigation-height:var(--sm-side-navigation-top-bar-height);position:relative;padding:0;box-shadow:-3px 3px 8px rgb(0 0 0 / 20%)}:host(.inline) .top-bar{position:sticky}:host(.anchor-right) .top-bar{box-shadow:3px 3px 8px rgb(0 0 0 / 20%)}:host(.anchor-right) .bottom-wrapper{box-shadow:3px -3px 8px rgb(0 0 0 / 20%)}.side-navigation,.top-bar{width:var(--sm-side-navigation-top-bar-height)}:host(.sm-collapsed){width:var(--sm-side-navigation-top-bar-height);transition:width var(--ic-easing-transition-slow)}:host(.sm-collapsed.collapsed-labels){width:var(--sm-side-navigation-collapsed-labels-width)}:host(.sm-expanded){width:var(--side-navigation-width);transition:width var(--ic-easing-transition-slow);box-shadow:var(--ic-elevation-overlay)}.side-navigation{--side-navigation-position-top:0;flex:1;position:relative;top:auto;left:auto;bottom:auto}:host(.inline) .side-navigation{position:relative}:host(.anchor-right) .side-navigation{left:auto;right:0}.side-navigation-inner{width:100%;visibility:visible}.bottom-wrapper{visibility:visible}.app-title-wrapper{margin-left:0;border-left:none;padding:var(--ic-space-sm)}.app-title-wrapper ::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg)}.app-title-wrapper ic-typography{margin:calc(-1 * 4.5px) 0 calc(-1 * 4.5px) var(--ic-space-md);font-weight:var(--ic-font-weight-semibold)}:host(.sm-collapsed) .app-title-wrapper ic-typography{position:absolute;left:-9999px;opacity:0;transition:opacity var(--ic-easing-transition-slow)}:host(.sm-expanded) ic-typography{position:relative;left:0}:host(.sm-expanded) :is(.side-navigation,.top-bar){width:var(--side-navigation-width);transition:width var(--ic-easing-transition-slow)}:host(.sm-collapsed) :is(.side-navigation,.top-bar){width:var(--sm-side-navigation-top-bar-height);transition:width var(--ic-easing-transition-slow)}:host(.anchor-right.sm-expanded) :is(.side-navigation,.top-bar){left:auto;right:0}.app-status-wrapper,:host(.sm-collapsed) .app-status-wrapper{display:none}:host(.sm-expanded) .app-status-wrapper{display:flex}.bottom-side-nav{justify-items:flex-end;display:flex;flex-direction:column}.bottom-side-nav .menu-expand-button{padding-left:var(--ic-space-md);height:var(--sm-side-navigation-top-bar-height);width:100%;color:var(--ic-theme-text);background-color:transparent;outline:var(--ic-hc-focus-outline);border:none;cursor:pointer;display:flex;transition:var(--ic-easing-transition-fast)}.bottom-side-nav .menu-expand-button svg{justify-items:flex-start;align-self:center}.bottom-side-nav .menu-expand-button:hover{background-color:var(--ic-theme-hover)}:host .bottom-side-nav{outline:none}:host .bottom-side-nav .menu-expand-button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background-color:transparent}:host(.sm-collapsed) .bottom-side-nav .menu-expand-button svg{transform:scaleX(1);transition:transform var(--ic-easing-transition-slow)}:host(.sm-expanded) .bottom-side-nav .menu-expand-button svg{transform:scaleX(-1);transition:transform var(--ic-easing-transition-slow)}:host(.anchor-right.sm-collapsed) .bottom-side-nav .menu-expand-button svg{transform:scaleX(-1)}:host(.anchor-right.sm-expanded) .bottom-side-nav .menu-expand-button svg{transform:scaleX(1)}:host(.sm-collapsed) ::slotted(ic-navigation-item){--navigation-item-label-opacity:1}:host(.sm-collapsed) ::slotted(ic-navigation-item),:host(.sm-collapsed) ::slotted(ic-navigation-group){--navigation-item-label-opacity:0}:host(.sm-expanded) ::slotted(ic-navigation-item),:host(.sm-expanded) ::slotted(ic-navigation-group){--navigation-item-label-opacity:1}:host(.sm-collapsed) ::slotted(ic-navigation-group){--navigation-group-title-position:absolute;--navigation-group-title-position-left:-9999px;--navigation-group-title-opacity:none}:host(.sm-expanded) ::slotted(ic-navigation-group){--navigation-group-title-position:relative;--navigation-group-title-position-left:0;--navigation-group-expand-toggle-padding:4px;--navigation-group-title-opacity:flex}:host(.sm-collapsed.collapsed-labels) .side-navigation,:host(.sm-collapsed.collapsed-labels) .top-bar{width:var(--sm-side-navigation-collapsed-labels-width)}:host(.sm-collapsed.collapsed-labels) .menu-expand-button{padding:0}:host(.sm-collapsed.collapsed-labels) .app-title-wrapper{width:100%;justify-content:center}:host(.sm-collapsed.collapsed-labels) ::slotted(ic-navigation-group){--navigation-group-justify-content:center;--navigation-item-label-opacity:1;--navigation-group-item-min-width:100%;--navigation-group-expand-toggle-padding:16px}:host(.collapsed-labels) .bottom-side-nav .menu-expand-button{justify-content:center}:host .collapsed-icon-labels-start{visibility:hidden;opacity:0}:host .collapsed-icon-labels-end{visibility:visible;opacity:1;transition:visibility 0s, opacity var(--ic-easing-transition-slow)}}@media screen and (min-width: 993px){:host{position:sticky;left:auto;top:0;bottom:0}:host(.sm-expanded){box-shadow:none}}@media (forced-colors: active){.side-navigation,.top-bar{border-right:var(--ic-hc-border)}slot[name="app-icon"]::slotted(svg){fill:currentcolor}}';const u=class{constructor(a){i(this,a);this.ANIMATION_DURATION=parseInt(s("--ic-transition-duration-slow"))||0;this.emitSideNavigationExpanded=i=>{const t=new CustomEvent("sideNavExpanded",{detail:{sideNavExpanded:i.sideNavExpanded,sideNavMobile:i.sideNavMobile}});this.el.dispatchEvent(t)};this.toggleMenu=()=>{this.menuOpen=!this.menuOpen;this.setMobileMenuAriaAttributes(this.menuOpen);this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);this.emitSideNavigationExpanded({sideNavExpanded:this.menuOpen,sideNavMobile:true})};this.setToggleMenuFlyoutMenuVisibility=i=>{const t=this.el.shadowRoot.querySelector("#side-navigation");const a=t.querySelector(".side-navigation-inner");const e=t.querySelector(".bottom-wrapper");if(i){e.classList.add("menu-visibility-visible");a.classList.add("menu-visibility-visible")}else{setTimeout((()=>{a.classList.remove("menu-visibility-visible");e.classList.remove("menu-visibility-visible")}),this.ANIMATION_DURATION)}};this.setMobileMenuAriaAttributes=i=>{const t=this.el.shadowRoot.querySelector("#menu-button").shadowRoot.querySelector("button");if(i){t.setAttribute("aria-expanded","true");t.setAttribute("aria-label","Close navigation menu")}else{t.setAttribute("aria-expanded","false");t.setAttribute("aria-label","Open navigation menu")}};this.setAndRemoveNoWrapAfterMenuExpanded=()=>{const i=this.el.shadowRoot.querySelector(".title-link ic-typography");i.classList.add("ic-typography-no-wrap");setTimeout((()=>{i.classList.remove("ic-typography-no-wrap")}),this.ANIMATION_DURATION)};this.toggleMenuExpanded=()=>{this.menuExpanded=!this.menuExpanded;if(this.menuExpanded){this.setAndRemoveNoWrapAfterMenuExpanded()}this.arrangeSlottedNavigationItem(this.menuExpanded);this.displayTooltipWithExpandedLongLabel(this.menuExpanded);if(this.collapsedIconLabels){this.animateCollapsedIconLabels()}this.emitSideNavigationExpanded({sideNavExpanded:this.menuExpanded})};this.arrangeSlottedNavigationItem=i=>{const t=this.el.querySelectorAll("ic-navigation-item");t.forEach((t=>{const a=r(t,"navigation-item");if(a){const a=t.querySelector("[slot='navigation-item']");const e=document.createElement("div");const o=a.querySelector("svg");const n=t.textContent.trim();const s=document.createElement("ic-typography");s.classList.add("ic-typography-label","hydrated","navigation-item-side-nav-slotted-text");e.className="icon-container";e.append(o);a.textContent="";s.textContent=n;a.append(e);a.append(s);if(this.collapsedIconLabels){this.styleSlottedCollapsedIconLabels(i,s)}else{this.styleSlottedIconLabels(i,s)}}}))};this.styleSlottedCollapsedIconLabels=(i,t)=>{if(i){t.style.marginTop="0";t.style.whiteSpace="nowrap";t.style.overflow="hidden";t.style.textOverflow="ellipsis"}else{t.style.marginTop="10px";t.style.whiteSpace="nowrap";t.style.overflow="hidden";t.style.textOverflow="ellipsis"}};this.styleSlottedIconLabels=(i,t)=>{if(i){t.style.opacity="1";t.style.visibility="visible";t.style.transition="visibility 0s, opacity var(--ic-easing-transition-slow)"}else{t.style.opacity="0";t.style.visibility="hidden";t.style.transition="visibility 0s, opacity var(--ic-easing-transition-slow)"}};this.animateCollapsedIconLabels=()=>{const i=this.el.shadowRoot.querySelector(".primary-navigation");const t=this.el.shadowRoot.querySelector(".bottom-wrapper > .secondary-navigation");if(i){i.classList.remove("collapsed-icon-labels-end");i.classList.add("collapsed-icon-labels-start")}if(t){t.classList.remove("collapsed-icon-labels-end");t.classList.add("collapsed-icon-labels-start")}this.el.addEventListener("transitionend",(()=>{if(i){i.classList.remove("collapsed-icon-labels-start");i.classList.add("collapsed-icon-labels-end")}if(t){t.classList.remove("collapsed-icon-labels-start");t.classList.add("collapsed-icon-labels-end")}}))};this.paddingIconWidth=i=>{const t=i[0].shadowRoot&&i[0].shadowRoot.querySelector("ic-tooltip a")||i[0].querySelector("a");const a=i[0].querySelector("svg");const e={gap:window.getComputedStyle(t).gap,iconWidth:window.getComputedStyle(a).width,paddingLeft:window.getComputedStyle(t).paddingLeft};return Object.values(e).reduce(((i,t)=>i+=parseInt(t)),0)};this.displayTooltipWithExpandedLongLabel=i=>{let t;if(i){t=setTimeout((()=>{const i=this.el.clientWidth;const t=Array.from(this.el.querySelectorAll("ic-navigation-item"));const a=t.length?this.paddingIconWidth(t):0;t.forEach((t=>{var e,o;const n=((e=t.shadowRoot&&t.shadowRoot.querySelector("ic-tooltip .link ic-typography.ic-typography-label"))===null||e===void 0?void 0:e.scrollWidth)||((o=t.querySelector("ic-typography.ic-typography-label"))===null||o===void 0?void 0:o.scrollWidth);if(n>i-a){t.setAttribute("display-navigation-tooltip","true")}}))}),this.ANIMATION_DURATION)}else{clearTimeout(t);const i=Array.from(this.el.querySelectorAll("ic-navigation-item"));i.forEach((i=>{i.setAttribute("display-navigation-tooltip","false")}))}};this.setMenuExpanded=i=>{this.menuExpanded=i};this.setParentPaddingTop=i=>{this.el.parentElement.style.setProperty("padding-top",i)};this.setParentPaddingLeft=i=>{this.el.parentElement.style.setProperty("padding-left",i)};this.resizeObserver=null;this.resizeObserverCallback=i=>{if(i!==this.deviceSize){this.deviceSize=i;if(i===l.S){if(!this.disableAutoParentStyling){const i=this.el.shadowRoot.querySelector(".top-bar").scrollHeight;this.setParentPaddingTop(`${i}px`);this.setParentPaddingLeft("0");if(this.inline){this.el.parentElement.style.setProperty("height",`calc(100% - ${i}px)`)}}this.emitSideNavigationExpanded({sideNavExpanded:this.menuExpanded,sideNavMobile:true})}else{if(!this.disableAutoParentStyling){this.setParentPaddingTop("0");this.el.parentElement.style.setProperty("height","100%")}this.emitSideNavigationExpanded({sideNavExpanded:this.menuExpanded,sideNavMobile:false})}if(i>l.L){if(!this.disableAutoParentStyling){this.setParentPaddingTop("0");this.setParentPaddingLeft("0")}}else if(i>l.S&&i<=l.L&&!this.static&&!this.disableAutoParentStyling){if(this.collapsedIconLabels){this.setParentPaddingLeft("calc(var(--ic-space-xxl) * 2)")}else{this.setParentPaddingLeft("calc(var(--ic-space-xxl) + var(--ic-space-xs))")}}}};this.runResizeObserver=()=>{this.resizeObserver=new ResizeObserver((()=>{const i=p();this.deviceSizeAppTitle=i;this.resizeObserverCallback(i)}));this.resizeObserver.observe(document.body,{box:"content-box"})};this.setCollapsedIconLabels=()=>{const i=Array.from(this.el.querySelectorAll("ic-navigation-item"));i.forEach((i=>{i.setAttribute("collapsed-icon-label","true")}))};this.styleSlottedCollapsedIconLabel=()=>{const i=Array.from(this.el.querySelectorAll(".navigation-item-side-nav-slotted-text"));i.forEach((i=>{var t,a;if((a=(t=i===null||i===void 0?void 0:i.parentElement)===null||t===void 0?void 0:t.parentElement)===null||a===void 0?void 0:a.classList.contains("navigation-item-side-nav-collapsed-with-label")){i.style.whiteSpace="nowrap";i.style.overflow="hidden";i.style.textOverflow="ellipsis";i.style.marginTop="10px"}}))};this.renderTopBar=({isSDevice:i,foregroundColor:a,menuOpen:e,href:n,isAppNameSubtitleVariant:s,appTitle:r})=>t("div",{class:{"top-bar":true,[this.foregroundColor]:true}},i&&t("nav",{"aria-labelledby":"menu-navigation-toggle-button-landmark","aria-hidden":"false"},t("ic-button",{"aria-label":"Open navigation menu",class:"menu-button",id:"menu-button",variant:"secondary",size:"small","full-width":"true",appearance:a,onClick:this.toggleMenu,"aria-owns":"side-navigation","aria-haspopup":"true","aria-expanded":"false"},t("span",{class:"mobile-top-bar-menu-icon",slot:"icon",innerHTML:e?o:m}),e?"Close":"Menu"),t("span",{id:"menu-navigation-toggle-button-landmark",class:"navigation-landmark-title","aria-hidden":"true"},"Navigation menu toggle button")),t("div",{class:"app-title-wrapper"},t("a",{href:n,class:"title-link"},t("div",{class:"app-icon-container","aria-hidden":"true"},t("slot",{name:"app-icon"})),t("ic-typography",{variant:s?"subtitle-small":"h3"},r))));this.appTitle=undefined;this.status=undefined;this.version=undefined;this.expanded=false;this.href="/";this.static=false;this.collapsedIconLabels=false;this.inline=false;this.disableAutoParentStyling=false;this.foregroundColor=d();this.menuOpen=false;this.menuExpanded=false;this.deviceSize=l.XL;this.deviceSizeAppTitle=l.S;this.hasSecondaryNavigation=false}themeChangeHandler(i){const t=i.detail;this.foregroundColor=t.mode}componentWillLoad(){if(this.expanded){this.setMenuExpanded(true)}else{this.setMenuExpanded(false)}if(this.collapsedIconLabels){this.setCollapsedIconLabels()}this.hasSecondaryNavigation=r(this.el,"secondary-navigation")}componentDidLoad(){this.emitSideNavigationExpanded({sideNavExpanded:this.menuExpanded,sideNavMobile:this.deviceSize===l.S});c(this.runResizeObserver);this.arrangeSlottedNavigationItem();this.styleSlottedCollapsedIconLabel();this.displayTooltipWithExpandedLongLabel(this.menuExpanded);h([{prop:this.appTitle,propName:"app-title"}],"Side Navigation")}disconnectedCallback(){if(this.resizeObserver!==null){this.resizeObserver.disconnect()}}render(){const{appTitle:i,menuOpen:e,foregroundColor:o,menuExpanded:s,href:p,status:d,version:c,collapsedIconLabels:h,inline:m}=this;const b=this.deviceSize===l.S;const u=this.deviceSize===l.M;const x=this.deviceSize>=l.L;const f=this.deviceSizeAppTitle===l.S;const y=u||x&&!this.static;const w={isSDevice:b,foregroundColor:o,menuOpen:e,href:p,isAppNameSubtitleVariant:f,appTitle:i};return t(a,{class:{"xs-menu-open":e&&b,"xs-menu-close":!e&&b,"sm-collapsed":!b&&!s,"sm-expanded":!b&&s,[g.Dark]:o===g.Dark,["collapsed-labels"]:!b&&!s&&h,["static"]:this.static,["inline"]:m}},b&&this.renderTopBar(Object.assign({},w)),t("div",{class:"side-navigation",id:"side-navigation"},!b&&this.renderTopBar(Object.assign({},w)),t("div",{class:"side-navigation-inner"},r(this.el,"primary-navigation")&&t("nav",{class:"primary-navigation","aria-labelledby":"primary-navigation-landmark"},t("span",{"aria-hidden":"true",class:"navigation-landmark-title",id:"primary-navigation-landmark"},"Primary"),t("ul",{class:"navigation-list"},t("slot",{name:"primary-navigation"})))),t("div",{class:{["bottom-wrapper"]:true,["classification-spacing"]:v()}},r(this.el,"secondary-navigation")&&t("nav",{class:"secondary-navigation","aria-labelledby":"secondary-navigation-landmark"},t("span",{"aria-hidden":"true",class:"navigation-landmark-title",id:"secondary-navigation-landmark"},"Secondary"),t("ul",{class:"navigation-list"},t("slot",{name:"secondary-navigation"}))),t("div",{class:"bottom-side-nav"},this.hasSecondaryNavigation&&t("ic-divider",null),y&&t("button",{class:"menu-expand-button",innerHTML:n,onClick:this.toggleMenuExpanded,"aria-label":`${s?"Collapse":"Expand"} side navigation`}),t("div",{class:"app-status-wrapper"},d!==""&&t("div",{class:{["app-status"]:true}},t("ic-typography",{"aria-label":"app tag",variant:"label-uppercase",class:"app-status-text"},d)),c!==""&&t("ic-typography",{variant:"label",class:"app-version","aria-label":"app version"},c))))))}get el(){return e(this)}};u.style=b;export{u as ic_side_navigation};
+//# sourceMappingURL=p-8470c255.entry.js.map