npm - @ukic/web-components - Versions diffs - 2.24.0 → 2.25.1 - Mend

@ukic/web-components 2.24.0 → 2.25.1

Files changed (481) hide show

package/dist/components/ic-accordion-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-accordion-group.js","mappings":";;;;;;;AAAA,MAAM,mBAAmB,GAAG,~~myFAAmyF~~;;~~ACc/zF~~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","names":[],"sources":["src/components/ic-accordion-group/ic-accordion-group.css?tag=ic-accordion-group&encapsulation=shadow","src/components/ic-accordion-group/ic-accordion-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n.group-title-container {\n padding: var(--ic-space-xs);\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n:host(.small) .group-title-container {\n padding: var(--ic-space-xxs) var(--ic-space-xs);\n}\n\n:host(.large) .group-title-container {\n padding: var(--ic-space-sm) var(--ic-space-xs);\n}\n\n:host(.light) {\n color: var(--ic-~~architectural~~-white);\n}\n\n:host(.accordion-group.dark) ::slotted(ic-accordion) {\n color: var(--ic-~~architectural~~-white);\n}\n","import {\n Component,\n Element,\n h,\n Host,\n Listen,\n Prop,\n State,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport { IcThemeForeground, IcSizes } from \"../../utils/types\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\nlet accordionGroupIds = 0;\n\n/*\n @slot group-title - Content is placed as the accordion group title.\n /\n@Component({\n tag: \"ic-accordion-group\",\n styleUrl: \"ic-accordion-group.css\",\n shadow: true,\n})\nexport class AccordionGroup {\n private accordionGroupId = `ic-accordion-group-${accordionGroupIds++}`;\n private allButtonEl: HTMLIcButtonElement;\n\n @Element() el: HTMLIcAccordionGroupElement;\n\n @State() accordions: HTMLIcAccordionElement[];\n\n @State() areAllAccordionsOpen: boolean;\n\n /\n The accessible button label to provide more context to the 'See all/Hide all' button for screen reader users.\n /\n @Prop() accessibleButtonLabel: string = \"accordions\";\n\n /\n The appearance of the accordion group, e.g dark, or light.\n /\n @Prop() appearance: IcThemeForeground = \"default\";\n @Watch(\"appearance\")\n watchAppearanceHandler() {\n this.accordions.forEach((acc) => {\n acc.appearance = this.appearance;\n });\n }\n\n /\n If `true`, the accordion will load in an expanded state.\n /\n @Prop({ mutable: true }) expanded: boolean = false;\n @Watch(\"expanded\")\n watchExpandedHandler() {\n this.handleExpanded();\n }\n\n /\n The header for the accordion group.\n /\n @Prop() groupTitle: string = \"\";\n\n /\n If `true`, only one accordion will open at a time.\n /\n @Prop() singleExpansion: boolean = false;\n\n /\n The size of the accordion.\n /\n @Prop() size?: IcSizes = \"default\";\n\n componentDidLoad(): void {\n const accordionDirectChildren = (this.el as HTMLElement).children;\n this.accordions = Array.from(accordionDirectChildren).filter(\n (child) => child.tagName === \"IC-ACCORDION\"\n ) as HTMLIcAccordionElement[];\n this.linkAccordions();\n this.accordions.forEach((acc) => {\n acc.appearance = this.appearance;\n });\n this.accordions.forEach((acc) => {\n acc.size = this.size;\n });\n if (this.expanded) {\n this.accordions.forEach((acc) => {\n acc.expanded = true;\n });\n this.setExpandedToAreAllAccordionsOpen();\n } else {\n this.setExpandedToAreAllAccordionsOpen();\n this.expanded = this.areAllAccordionsOpen;\n }\n }\n\n @Listen(\"accordionClicked\")\n handleAccordionClicked(event: CustomEvent): void {\n if (!this.singleExpansion) {\n // 'See all' should be visible until all accordions are open, then 'Hide all' should be visible\n this.setExpandedToAreAllAccordionsOpen();\n } else {\n this.accordions.forEach((acc) => {\n if (acc.expanded && event.detail.id !== acc.id) {\n acc.expanded = false;\n }\n });\n }\n }\n\n /\n Sets the focus on first focusable element in the accordion group. If the \"See/Hide all\" button is present, it will be focused.\n * Otherwise, the first accordion will be focused.\n */\n @Method()\n async setFocus(): Promise<void> {\n const focusEl = this.singleExpansion\n ? this.accordions[0]\n : this.allButtonEl;\n focusEl.setFocus();\n }\n\n private handleExpanded = () => {\n if (this.areAllAccordionsOpen) {\n this.expanded = false;\n this.accordions.forEach((acc) => {\n acc.expanded = this.expanded;\n });\n } else {\n this.expanded = true;\n this.accordions.forEach((acc) => {\n acc.expanded = this.expanded;\n });\n }\n this.setExpandedToAreAllAccordionsOpen();\n };\n\n private linkAccordions = () => {\n this.accordions.forEach((accordion) => {\n accordion.setAttribute(\"context-id\", this.accordionGroupId);\n });\n };\n\n private setExpandedToAreAllAccordionsOpen = () => {\n this.areAllAccordionsOpen = this.accordions.every(\n (accordion) => !!accordion.expanded\n );\n };\n\n private accordionOpenBtnText = () => {\n return !this.areAllAccordionsOpen ? \"See all\" : \"Hide all\";\n };\n\n render() {\n const {\n appearance,\n size,\n groupTitle,\n singleExpansion,\n accessibleButtonLabel,\n } = this;\n return (\n <Host\n context-id={this.accordionGroupId}\n class={{\n [`${appearance}`]: true,\n [`${size}`]: true,\n [\"accordion-group\"]: true,\n }}\n >\n <div class=\"group-title-container\">\n <ic-typography variant=\"h4\">\n <h3>\n {isSlotUsed(this.el, \"group-title\") ? (\n <slot name=\"group-title\" />\n ) : (\n groupTitle\n )}\n </h3>\n </ic-typography>\n {!singleExpansion && (\n <ic-button\n ref={(el) => (this.allButtonEl = el)}\n appearance={appearance === \"light\" ? \"light\" : \"default\"}\n onClick={this.handleExpanded}\n variant=\"tertiary\"\n aria-label={`${this.accordionOpenBtnText()} ${accessibleButtonLabel}`}\n >\n {this.accordionOpenBtnText()}\n </ic-button>\n )}\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-accordion-group.js","mappings":"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","names":[],"sources":["src/components/ic-accordion-group/ic-accordion-group.css?tag=ic-accordion-group&encapsulation=shadow","src/components/ic-accordion-group/ic-accordion-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n.group-title-container {\n padding: var(--ic-space-xs);\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n:host(.small) .group-title-container {\n padding: var(--ic-space-xxs) var(--ic-space-xs);\n}\n\n:host(.large) .group-title-container {\n padding: var(--ic-space-sm) var(--ic-space-xs);\n}\n\n:host(.light) {\n color: var(--ic-color-white-text);\n}\n\n:host(.accordion-group.dark) ::slotted(ic-accordion) {\n color: var(--ic-color-white-text);\n}\n","import {\n Component,\n Element,\n h,\n Host,\n Listen,\n Prop,\n State,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport { IcThemeForeground, IcSizes } from \"../../utils/types\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\nlet accordionGroupIds = 0;\n\n/*\n @slot group-title - Content is placed as the accordion group title.\n /\n@Component({\n tag: \"ic-accordion-group\",\n styleUrl: \"ic-accordion-group.css\",\n shadow: true,\n})\nexport class AccordionGroup {\n private accordionGroupId = `ic-accordion-group-${accordionGroupIds++}`;\n private allButtonEl: HTMLIcButtonElement;\n\n @Element() el: HTMLIcAccordionGroupElement;\n\n @State() accordions: HTMLIcAccordionElement[];\n\n @State() areAllAccordionsOpen: boolean;\n\n /\n The accessible button label to provide more context to the 'See all/Hide all' button for screen reader users.\n /\n @Prop() accessibleButtonLabel: string = \"accordions\";\n\n /\n The appearance of the accordion group, e.g dark, or light.\n /\n @Prop() appearance: IcThemeForeground = \"default\";\n @Watch(\"appearance\")\n watchAppearanceHandler() {\n this.accordions.forEach((acc) => {\n acc.appearance = this.appearance;\n });\n }\n\n /\n If `true`, the accordion will load in an expanded state.\n /\n @Prop({ mutable: true }) expanded: boolean = false;\n @Watch(\"expanded\")\n watchExpandedHandler() {\n this.handleExpanded();\n }\n\n /\n The header for the accordion group.\n /\n @Prop() groupTitle: string = \"\";\n\n /\n If `true`, only one accordion will open at a time.\n /\n @Prop() singleExpansion: boolean = false;\n\n /\n The size of the accordion.\n /\n @Prop() size?: IcSizes = \"default\";\n\n componentDidLoad(): void {\n const accordionDirectChildren = (this.el as HTMLElement).children;\n this.accordions = Array.from(accordionDirectChildren).filter(\n (child) => child.tagName === \"IC-ACCORDION\"\n ) as HTMLIcAccordionElement[];\n this.linkAccordions();\n this.accordions.forEach((acc) => {\n acc.appearance = this.appearance;\n });\n this.accordions.forEach((acc) => {\n acc.size = this.size;\n });\n if (this.expanded) {\n this.accordions.forEach((acc) => {\n acc.expanded = true;\n });\n this.setExpandedToAreAllAccordionsOpen();\n } else {\n this.setExpandedToAreAllAccordionsOpen();\n this.expanded = this.areAllAccordionsOpen;\n }\n }\n\n @Listen(\"accordionClicked\")\n handleAccordionClicked(event: CustomEvent): void {\n if (!this.singleExpansion) {\n // 'See all' should be visible until all accordions are open, then 'Hide all' should be visible\n this.setExpandedToAreAllAccordionsOpen();\n } else {\n this.accordions.forEach((acc) => {\n if (acc.expanded && event.detail.id !== acc.id) {\n acc.expanded = false;\n }\n });\n }\n }\n\n /\n Sets the focus on first focusable element in the accordion group. If the \"See/Hide all\" button is present, it will be focused.\n * Otherwise, the first accordion will be focused.\n */\n @Method()\n async setFocus(): Promise<void> {\n const focusEl = this.singleExpansion\n ? this.accordions[0]\n : this.allButtonEl;\n focusEl.setFocus();\n }\n\n private handleExpanded = () => {\n if (this.areAllAccordionsOpen) {\n this.expanded = false;\n this.accordions.forEach((acc) => {\n acc.expanded = this.expanded;\n });\n } else {\n this.expanded = true;\n this.accordions.forEach((acc) => {\n acc.expanded = this.expanded;\n });\n }\n this.setExpandedToAreAllAccordionsOpen();\n };\n\n private linkAccordions = () => {\n this.accordions.forEach((accordion) => {\n accordion.setAttribute(\"context-id\", this.accordionGroupId);\n });\n };\n\n private setExpandedToAreAllAccordionsOpen = () => {\n this.areAllAccordionsOpen = this.accordions.every(\n (accordion) => !!accordion.expanded\n );\n };\n\n private accordionOpenBtnText = () => {\n return !this.areAllAccordionsOpen ? \"See all\" : \"Hide all\";\n };\n\n render() {\n const {\n appearance,\n size,\n groupTitle,\n singleExpansion,\n accessibleButtonLabel,\n } = this;\n return (\n <Host\n context-id={this.accordionGroupId}\n class={{\n [`${appearance}`]: true,\n [`${size}`]: true,\n [\"accordion-group\"]: true,\n }}\n >\n <div class=\"group-title-container\">\n <ic-typography variant=\"h4\">\n <h3>\n {isSlotUsed(this.el, \"group-title\") ? (\n <slot name=\"group-title\" />\n ) : (\n groupTitle\n )}\n </h3>\n </ic-typography>\n {!singleExpansion && (\n <ic-button\n ref={(el) => (this.allButtonEl = el)}\n appearance={appearance === \"light\" ? \"light\" : \"default\"}\n onClick={this.handleExpanded}\n variant=\"tertiary\"\n aria-label={`${this.accordionOpenBtnText()} ${accessibleButtonLabel}`}\n >\n {this.accordionOpenBtnText()}\n </ic-button>\n )}\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-accordion.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { i as isSlotUsed } from './helpers.js';
 import { c as chevronIcon } from './chevron-icon.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
-const icAccordionCss = "/*! 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;border-bottom:var(--ic-border-default)}:host(.light) ic-typography,:host(.light) .expanded-content,:host(.light) .icon-container,:host(.light) .expand-chevron{color:var(--ic-architectural-white)}:host(.disabled) ic-typography,:host(.disabled) .icon-container,:host(.disabled) .expand-chevron{color:var(--ic-architectural-500)}.section-button.small{padding:var(--ic-space-xxs) var(--ic-space-xs)}.section-button.large{padding:var(--ic-space-sm) var(--ic-space-xs)}:host(:first-of-type){border-top:var(--ic-border-default)}:focus{outline:none}.section-button{background-color:transparent;display:flex;align-items:center;width:100%;padding:var(--ic-space-xs);font-weight:var(--ic-font-weight-bold);border:none}.section-header{text-align:left;flex:1 0}button:hover:enabled{background-color:var(--ic-action-dark-bg-hover);cursor:pointer}button:active{background-color:var(--ic-action-dark-bg-active)}button:focus{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-transition-duration-fast)}button:disabled{pointer-events:none}.icon-container{margin:0 var(--ic-space-xs) 0 0;display:flex;align-items:center;width:var(--ic-space-lg);height:var(--ic-space-lg)}::slotted(svg){width:var(--ic-space-md);height:var(--ic-space-md)}.expand-chevron{width:var(--ic-space-lg);height:var(--ic-space-lg);margin-left:calc(var(--ic-space-xl) + var(--ic-space-xs));transform:rotate(90deg);justify-self:end}.content-expanded-chevron{transform:rotate(-90deg)}.expanded-content{height:0;overflow:hidden;display:flex;flex-direction:column;visibility:var(--ic-expanded-content-visiblity, hidden)}.expanded-content-inner{padding:var(--ic-space-xs)}.expanded-content-opened{overflow:visible}";
+const icAccordionCss = "/*! 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;border-bottom:var(--ic-border-default)}:host ic-typography,:host .expand-chevron{color:var(--ic-color-primary-text)}:host(.light) ic-typography,:host(.light) .expanded-content,:host(.light) .icon-container,:host(.light) .expand-chevron{color:var(--ic-color-white-text)}:host(.disabled) ic-typography,:host(.disabled) .icon-container,:host(.disabled) .expand-chevron{color:var(--ic-architectural-500)}.section-button.small{padding:var(--ic-space-xxs) var(--ic-space-xs)}.section-button.large{padding:var(--ic-space-sm) var(--ic-space-xs)}:host(:first-of-type){border-top:var(--ic-border-default)}:focus{outline:none}.section-button{background-color:transparent;display:flex;align-items:center;width:100%;padding:var(--ic-space-xs);font-weight:var(--ic-font-weight-bold);border:none}.section-header{text-align:left;flex:1 0}button:hover:enabled{background-color:var(--ic-action-dark-bg-hover);cursor:pointer}button:active{background-color:var(--ic-action-dark-bg-active)}button:focus{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-transition-duration-fast)}button:disabled{pointer-events:none}.icon-container{margin:0 var(--ic-space-xs) 0 0;display:flex;align-items:center;width:var(--ic-space-lg);height:var(--ic-space-lg)}::slotted(svg){width:var(--ic-space-md);height:var(--ic-space-md)}.expand-chevron{width:var(--ic-space-lg);height:var(--ic-space-lg);margin-left:calc(var(--ic-space-xl) + var(--ic-space-xs));transform:rotate(90deg);justify-self:end}.content-expanded-chevron{transform:rotate(-90deg)}.expanded-content{height:0;overflow:hidden;display:flex;flex-direction:column;visibility:var(--ic-expanded-content-visibility, hidden)}.expanded-content-inner{padding:var(--ic-space-xs)}.expanded-content-opened{overflow:visible}";
 let accordionIds = 0;
 const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLElement {
@@ -13,7 +13,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
         this.__attachShadow();
         this.accordionClicked = createEvent(this, "accordionClicked", 7);
         this.accordionId = `ic-accordion-${accordionIds++}`;
-        this.CONTENT_VISIBILITY_PROPERTY = "--ic-expanded-content-visiblity";
+        this.CONTENT_VISIBILITY_PROPERTY = "--ic-expanded-content-visibility";
         this.toggleExpanded = () => {
             this.expanded = !this.expanded;
             this.accordionClicked.emit({ id: this.accordionId });

package/dist/components/ic-accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-accordion.js","mappings":";;;;;AAAA,MAAM,cAAc,GAAG,4jIAA4jI;;ACenlI,IAAI,YAAY,GAAG,CAAC,CAAC;MAYR,SAAS;;;;;;QACZ,gBAAW,GAAG,gBAAgB,YAAY,EAAE,EAAE,CAAC;QAG/C,gCAA2B,GAAG,iCAAiC,CAAC;QAgFhE,mBAAc,GAAG;YACvB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC/B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;SACtD,CAAC;;QAGM,0BAAqB,GAAG,CAC9B,EAAe,EACf,QAAgB,EAChB,QAAgB,EAChB,KAAa;YAEb,EAAE,CAAC,KAAK,CAAC,kBAAkB,GAAG,GAAG,QAAQ,IAAI,CAAC;YAC9C,EAAE,CAAC,KAAK,CAAC,kBAAkB,GAAG,QAAQ,CAAC;YACvC,EAAE,CAAC,KAAK,CAAC,eAAe,GAAG,KAAK,CAAC;SAClC,CAAC;QAEM,4BAAuB,GAAG,CAChC,EAAmB,EACnB,eAA+B;YAE/B,IAAI,EAAE,CAAC,YAAY,KAAK,QAAQ,IAAI,eAAe,CAAC,YAAY,GAAG,CAAC,EAAE;gBACpE,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC;gBACzD,eAAe,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;aACvC;SACF,CAAC;QAEM,wBAAmB,GAAG,CAC5B,EAAmB,EACnB,eAA+B;YAE/B,IAAI,EAAE,CAAC,YAAY,KAAK,QAAQ,IAAI,eAAe,CAAC,YAAY,KAAK,CAAC,EAAE;gBACtE,eAAe,CAAC,KAAK,CAAC,WAAW,CAC/B,IAAI,CAAC,2BAA2B,EAChC,QAAQ,CACT,CAAC;aACH;SACF,CAAC;QAEM,2BAAsB,GAAG;YAC/B,MAAM,aAAa,GAAG,IAAI,CAAC,iBAAiB,CAAC,YAAY,CAAC;YAC1D,IAAI,aAAa,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACtC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,IAAI,CAAC,2BAA2B,EAChC,SAAS,CACV,CAAC;gBACF,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,aAAa,IAAI,CAAC;gBAC3D,IAAI,CAAC,qBAAqB,CACxB,IAAI,CAAC,iBAAiB,EACtB,KAAK,EACL,QAAQ,EACR,UAAU,CACX,CAAC;gBAEF,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CACrC,eAAe,EACf,CAAC,CAAkB;oBACjB,IAAI,CAAC,uBAAuB,CAAC,CAAC,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;iBACzD,CACF,CAAC;aACH;iBAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBACzB,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,iBAAiB,CAAC,YAAY,IAAI,CAAC;gBACjF,IAAI,IAAI,CAAC,iBAAiB,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;oBAC7D,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;oBAC1C,IAAI,CAAC,qBAAqB,CACxB,IAAI,CAAC,iBAAiB,EACtB,KAAK,EACL,QAAQ,EACR,SAAS,CACV,CAAC;oBACF,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC;iBACpE;gBACD,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,eAAe,EAAE,CAAC,CAAC;oBACzD,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;iBACrD,CAAC,CAAC;aACJ;SACF,CAAC;0BAtJuC,SAAS;wBAKrB,KAAK;wBAKW,KAAK;uBAKvB,EAAE;uBAKF,EAAE;oBAKJ,SAAS;;;IASlC,mBAAmB;QACjB,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;;;;IAMD,MAAM,QAAQ;QACZ,IAAI,IAAI,CAAC,mBAAmB,EAAE;YAC5B,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,CAAC;SAClC;KACF;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,iBAAiB,EAAE;YAC1B,IAAI,CAAC,iBAAiB,CAAC,mBAAmB,CACxC,eAAe,EACf,CAAC,CAAC,KAAK,IAAI,CAAC,uBAAuB,CAAC,CAAC,EAAE,IAAI,CAAC,iBAAiB,CAAC,EAC9D,IAAI,CACL,CAAC;YACF,IAAI,CAAC,iBAAiB,CAAC,mBAAmB,CACxC,eAAe,EACf,CAAC,CAAC,KAAK,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE,IAAI,CAAC,iBAAiB,CAAC,EAC1D,IAAI,CACL,CAAC;SACH;KACF;IAED,gBAAgB;;QAEd,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAC7C,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,IAAI,CAAC,2BAA2B,EAChC,SAAS,CACV,CAAC;SACH;KACF;IAgFD,MAAM;QACJ,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QACtD,QACE,EAAC,IAAI,IACH,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,KAAK,EAAE;gBACL,CAAC,GAAG,UAAU,EAAE,GAAG,IAAI;gBACvB,CAAC,UAAU,GAAG,QAAQ;aACvB,mBACc,QAAQ,GAAG,MAAM,GAAG,OAAO,IAE1C,cACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC,EAC5C,EAAE,EAAE,GAAG,IAAI,CAAC,WAAW,SAAS,EAChC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAC3B,KAAK,EAAE;gBACL,CAAC,GAAG,IAAI,EAAE,GAAG,IAAI;gBACjB,CAAC,gBAAgB,GAAG,IAAI;gBACxB,CAAC,qBAAqB,GAAG,QAAQ,IAAI,CAAC,QAAQ;aAC/C,mBACc,GAAG,QAAQ,EAAE,mBACd,uBAAuB,EACrC,OAAO,EAAE,IAAI,CAAC,cAAc,IAE3B,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,KAC1B,WAAK,KAAK,EAAC,gBAAgB,IACzB,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP,EACD,qBAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,gBAAgB,IAC3D,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,IAC7B,YAAM,IAAI,EAAC,SAAS,GAAG,KAEvB,IAAI,CAAC,OAAO,CACb,CACa,EAChB,YACE,KAAK,EAAE;gBACL,CAAC,gBAAgB,GAAG,IAAI;gBACxB,CAAC,0BAA0B,GAAG,QAAQ,IAAI,CAAC,QAAQ;aACpD,iBACW,MAAM,EAClB,SAAS,EAAE,WAAW,GACtB,CACK,EACT,WACE,KAAK,EAAE;gBACL,CAAC,kBAAkB,GAAG,IAAI;aAC3B,qBACgB,GAAG,IAAI,CAAC,WAAW,SAAS,EAC7C,IAAI,EAAC,QAAQ,iBACA,GAAG,CAAC,QAAQ,EAAE,EAC3B,EAAE,EAAC,uBAAuB,EAC1B,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC,IAE1C,WAAK,KAAK,EAAC,wBAAwB,IAChC,IAAI,CAAC,OAAO,IACX,qBAAe,OAAO,EAAC,MAAM,IAAE,IAAI,CAAC,OAAO,CAAiB,KAE5D,eAAQ,CACT,CACG,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-accordion/ic-accordion.css?tag=ic-accordion&encapsulation=shadow","src/components/ic-accordion/ic-accordion.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n border-bottom: var(--ic-border-default);\n}\n\n:host(.light) ic-typography,\n:host(.light) .expanded-content,\n:host(.light) .icon-container,\n:host(.light) .expand-chevron {\n color: var(--ic-architectural-white);\n}\n\n:host(.disabled) ic-typography,\n:host(.disabled) .icon-container,\n:host(.disabled) .expand-chevron {\n color: var(--ic-architectural-500);\n}\n\n.section-button.small {\n padding: var(--ic-space-xxs) var(--ic-space-xs);\n}\n\n.section-button.large {\n padding: var(--ic-space-sm) var(--ic-space-xs);\n}\n\n:host(:first-of-type) {\n border-top: var(--ic-border-default);\n}\n\n:focus {\n outline: none;\n}\n\n.section-button {\n background-color: transparent;\n display: flex;\n align-items: center;\n width: 100%;\n padding: var(--ic-space-xs);\n font-weight: var(--ic-font-weight-bold);\n border: none;\n}\n\n.section-header {\n text-align: left;\n flex: 1 0;\n}\n\nbutton:hover:enabled {\n background-color: var(--ic-action-dark-bg-hover);\n cursor: pointer;\n}\n\nbutton:active {\n background-color: var(--ic-action-dark-bg-active);\n}\n\nbutton:focus {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n transition: var(--ic-transition-duration-fast);\n}\n\nbutton:disabled {\n pointer-events: none;\n}\n\n.icon-container {\n margin: 0 var(--ic-space-xs) 0 0;\n display: flex;\n align-items: center;\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n::slotted(svg) {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n.expand-chevron {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n margin-left: calc(var(--ic-space-xl) + var(--ic-space-xs));\n transform: rotate(90deg);\n justify-self: end;\n}\n\n.content-expanded-chevron {\n transform: rotate(-90deg);\n}\n\n.expanded-content {\n height: 0;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n visibility: var(--ic-expanded-content-visiblity, hidden);\n}\n\n.expanded-content-inner {\n padding: var(--ic-space-xs);\n}\n\n.expanded-content-opened {\n overflow: visible;\n}\n","import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Host,\n Watch,\n Method,\n} from \"@stencil/core\";\nimport { isSlotUsed } from \"../../utils/helpers\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport { IcThemeForeground, IcSizes } from \"../../utils/types\";\n\nlet accordionIds = 0;\n\n/*\n @slot heading - Content is placed as the accordion heading.\n * @slot icon - Content is placed to the left of the heading.\n /\n\n@Component({\n tag: \"ic-accordion\",\n styleUrl: \"ic-accordion.css\",\n shadow: true,\n})\nexport class Accordion {\n private accordionId = `ic-accordion-${accordionIds++}`;\n private expandedContentEl: HTMLDivElement;\n private accordionBtnHeading: HTMLButtonElement;\n private CONTENT_VISIBILITY_PROPERTY = \"--ic-expanded-content-visiblity\";\n\n @Element() el: HTMLIcAccordionElement;\n /\n @internal Determines whether the light or dark variant of the accordion should be displayed.\n /\n @Prop() appearance?: IcThemeForeground = \"default\";\n\n /\n If `true`, the accordion will be disabled.\n /\n @Prop() disabled?: boolean = false;\n\n /\n If `true`, the accordion appears expanded.\n /\n @Prop({ mutable: true }) expanded: boolean = false;\n\n /\n The section header outlining section content.\n /\n @Prop() heading?: string = \"\";\n\n /\n The main body message of the accordion.\n /\n @Prop() message?: string = \"\";\n\n /\n The size of the accordion.\n /\n @Prop() size?: IcSizes = \"default\";\n\n /\n @internal Emitted when accordion is clicked.\n /\n @Event() accordionClicked: EventEmitter<{ id: string }>;\n\n // Every time expanded is set via toggleExpanded or accordionGroup, animate to open or close\n @Watch(\"expanded\")\n handleExpandedWatch(): void {\n this.animateExpandedContent();\n }\n\n /\n Sets focus on accordion heading.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.accordionBtnHeading) {\n this.accordionBtnHeading.focus();\n }\n }\n\n disconnectedCallback(): void {\n if (this.expandedContentEl) {\n this.expandedContentEl.removeEventListener(\n \"transitionend\",\n (e) => this.setExpandedContentStyle(e, this.expandedContentEl),\n true\n );\n this.expandedContentEl.removeEventListener(\n \"transitionend\",\n (e) => this.hideExpandedContent(e, this.expandedContentEl),\n true\n );\n }\n }\n\n componentDidLoad(): void {\n // So accordion opens by default if expanded set to true\n if (this.expanded) {\n this.expandedContentEl.style.height = \"auto\";\n this.expandedContentEl.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"visible\"\n );\n }\n }\n\n private toggleExpanded = (): void => {\n this.expanded = !this.expanded;\n this.accordionClicked.emit({ id: this.accordionId });\n };\n\n // Set accordion animation\n private setAccordionAnimation = (\n el: HTMLElement,\n duration: string,\n property: string,\n delay: string\n ) => {\n el.style.transitionDuration = `${duration}ms`;\n el.style.transitionProperty = property;\n el.style.transitionDelay = delay;\n };\n\n private setExpandedContentStyle = (\n ev: TransitionEvent,\n expandedContent: HTMLDivElement\n ) => {\n if (ev.propertyName === \"height\" && expandedContent.clientHeight > 0) {\n expandedContent.classList.add(\"expanded-content-opened\");\n expandedContent.style.height = \"auto\";\n }\n };\n\n private hideExpandedContent = (\n ev: TransitionEvent,\n expandedContent: HTMLDivElement\n ) => {\n if (ev.propertyName === \"height\" && expandedContent.clientHeight === 0) {\n expandedContent.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"hidden\"\n );\n }\n };\n\n private animateExpandedContent = () => {\n const elementHeight = this.expandedContentEl.scrollHeight;\n if (elementHeight > 0 && this.expanded) {\n this.expandedContentEl.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"visible\"\n );\n this.expandedContentEl.style.height = `${elementHeight}px`;\n this.setAccordionAnimation(\n this.expandedContentEl,\n \"300\",\n \"height\",\n \"ease-out\"\n );\n\n this.expandedContentEl.addEventListener(\n \"transitionend\",\n (e: TransitionEvent) => {\n this.setExpandedContentStyle(e, this.expandedContentEl);\n }\n );\n } else if (!this.expanded) {\n this.expandedContentEl.style.height = `${this.expandedContentEl.scrollHeight}px`;\n if (this.expandedContentEl.scrollHeight > 0 && !this.expanded) {\n this.expandedContentEl.style.height = \"0\";\n this.setAccordionAnimation(\n this.expandedContentEl,\n \"300\",\n \"height\",\n \"ease-in\"\n );\n this.expandedContentEl.classList.remove(\"expanded-content-opened\");\n }\n this.expandedContentEl.addEventListener(\"transitionend\", (e) => {\n this.hideExpandedContent(e, this.expandedContentEl);\n });\n }\n };\n\n render() {\n const { appearance, size, disabled, expanded } = this;\n return (\n <Host\n id={this.accordionId}\n class={{\n [`${appearance}`]: true,\n [\"disabled\"]: disabled,\n }}\n aria-disabled={disabled ? \"true\" : \"false\"}\n >\n <button\n ref={(el) => (this.accordionBtnHeading = el)}\n id={`${this.accordionId}-button`}\n disabled={disabled}\n tabindex={disabled ? -1 : 0}\n class={{\n [`${size}`]: true,\n [\"section-button\"]: true,\n [\"section-button-open\"]: expanded && !disabled,\n }}\n aria-expanded={`${expanded}`}\n aria-controls=\"expanded-content-area\"\n onClick={this.toggleExpanded}\n >\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography variant=\"subtitle-large\" class=\"section-header\">\n {isSlotUsed(this.el, \"heading\") ? (\n <slot name=\"heading\" />\n ) : (\n this.heading\n )}\n </ic-typography>\n <span\n class={{\n [\"expand-chevron\"]: true,\n [\"content-expanded-chevron\"]: expanded && !disabled,\n }}\n aria-hidden=\"true\"\n innerHTML={chevronIcon}\n />\n </button>\n <div\n class={{\n [\"expanded-content\"]: true,\n }}\n aria-labelledby={`${this.accordionId}-button`}\n role=\"region\"\n aria-hidden={`${!expanded}`}\n id=\"expanded-content-area\"\n ref={(el) => (this.expandedContentEl = el)}\n >\n <div class=\"expanded-content-inner\">\n {this.message ? (\n <ic-typography variant=\"body\">{this.message}</ic-typography>\n ) : (\n <slot />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-accordion.js","mappings":";;;;;AAAA,MAAM,cAAc,GAAG,uoIAAuoI;;ACe9pI,IAAI,YAAY,GAAG,CAAC,CAAC;MAYR,SAAS;;;;;;QACZ,gBAAW,GAAG,gBAAgB,YAAY,EAAE,EAAE,CAAC;QAG/C,gCAA2B,GAAG,kCAAkC,CAAC;QAgFjE,mBAAc,GAAG;YACvB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC/B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;SACtD,CAAC;;QAGM,0BAAqB,GAAG,CAC9B,EAAe,EACf,QAAgB,EAChB,QAAgB,EAChB,KAAa;YAEb,EAAE,CAAC,KAAK,CAAC,kBAAkB,GAAG,GAAG,QAAQ,IAAI,CAAC;YAC9C,EAAE,CAAC,KAAK,CAAC,kBAAkB,GAAG,QAAQ,CAAC;YACvC,EAAE,CAAC,KAAK,CAAC,eAAe,GAAG,KAAK,CAAC;SAClC,CAAC;QAEM,4BAAuB,GAAG,CAChC,EAAmB,EACnB,eAA+B;YAE/B,IAAI,EAAE,CAAC,YAAY,KAAK,QAAQ,IAAI,eAAe,CAAC,YAAY,GAAG,CAAC,EAAE;gBACpE,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC;gBACzD,eAAe,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;aACvC;SACF,CAAC;QAEM,wBAAmB,GAAG,CAC5B,EAAmB,EACnB,eAA+B;YAE/B,IAAI,EAAE,CAAC,YAAY,KAAK,QAAQ,IAAI,eAAe,CAAC,YAAY,KAAK,CAAC,EAAE;gBACtE,eAAe,CAAC,KAAK,CAAC,WAAW,CAC/B,IAAI,CAAC,2BAA2B,EAChC,QAAQ,CACT,CAAC;aACH;SACF,CAAC;QAEM,2BAAsB,GAAG;YAC/B,MAAM,aAAa,GAAG,IAAI,CAAC,iBAAiB,CAAC,YAAY,CAAC;YAC1D,IAAI,aAAa,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACtC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,IAAI,CAAC,2BAA2B,EAChC,SAAS,CACV,CAAC;gBACF,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,aAAa,IAAI,CAAC;gBAC3D,IAAI,CAAC,qBAAqB,CACxB,IAAI,CAAC,iBAAiB,EACtB,KAAK,EACL,QAAQ,EACR,UAAU,CACX,CAAC;gBAEF,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CACrC,eAAe,EACf,CAAC,CAAkB;oBACjB,IAAI,CAAC,uBAAuB,CAAC,CAAC,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;iBACzD,CACF,CAAC;aACH;iBAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBACzB,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,iBAAiB,CAAC,YAAY,IAAI,CAAC;gBACjF,IAAI,IAAI,CAAC,iBAAiB,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;oBAC7D,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;oBAC1C,IAAI,CAAC,qBAAqB,CACxB,IAAI,CAAC,iBAAiB,EACtB,KAAK,EACL,QAAQ,EACR,SAAS,CACV,CAAC;oBACF,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC;iBACpE;gBACD,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,eAAe,EAAE,CAAC,CAAC;oBACzD,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;iBACrD,CAAC,CAAC;aACJ;SACF,CAAC;0BAtJuC,SAAS;wBAKrB,KAAK;wBAKW,KAAK;uBAKvB,EAAE;uBAKF,EAAE;oBAKJ,SAAS;;;IASlC,mBAAmB;QACjB,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;;;;IAMD,MAAM,QAAQ;QACZ,IAAI,IAAI,CAAC,mBAAmB,EAAE;YAC5B,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,CAAC;SAClC;KACF;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,iBAAiB,EAAE;YAC1B,IAAI,CAAC,iBAAiB,CAAC,mBAAmB,CACxC,eAAe,EACf,CAAC,CAAC,KAAK,IAAI,CAAC,uBAAuB,CAAC,CAAC,EAAE,IAAI,CAAC,iBAAiB,CAAC,EAC9D,IAAI,CACL,CAAC;YACF,IAAI,CAAC,iBAAiB,CAAC,mBAAmB,CACxC,eAAe,EACf,CAAC,CAAC,KAAK,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE,IAAI,CAAC,iBAAiB,CAAC,EAC1D,IAAI,CACL,CAAC;SACH;KACF;IAED,gBAAgB;;QAEd,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAC7C,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,IAAI,CAAC,2BAA2B,EAChC,SAAS,CACV,CAAC;SACH;KACF;IAgFD,MAAM;QACJ,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QACtD,QACE,EAAC,IAAI,IACH,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,KAAK,EAAE;gBACL,CAAC,GAAG,UAAU,EAAE,GAAG,IAAI;gBACvB,CAAC,UAAU,GAAG,QAAQ;aACvB,mBACc,QAAQ,GAAG,MAAM,GAAG,OAAO,IAE1C,cACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC,EAC5C,EAAE,EAAE,GAAG,IAAI,CAAC,WAAW,SAAS,EAChC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAC3B,KAAK,EAAE;gBACL,CAAC,GAAG,IAAI,EAAE,GAAG,IAAI;gBACjB,CAAC,gBAAgB,GAAG,IAAI;gBACxB,CAAC,qBAAqB,GAAG,QAAQ,IAAI,CAAC,QAAQ;aAC/C,mBACc,GAAG,QAAQ,EAAE,mBACd,uBAAuB,EACrC,OAAO,EAAE,IAAI,CAAC,cAAc,IAE3B,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,KAC1B,WAAK,KAAK,EAAC,gBAAgB,IACzB,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP,EACD,qBAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,gBAAgB,IAC3D,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,IAC7B,YAAM,IAAI,EAAC,SAAS,GAAG,KAEvB,IAAI,CAAC,OAAO,CACb,CACa,EAChB,YACE,KAAK,EAAE;gBACL,CAAC,gBAAgB,GAAG,IAAI;gBACxB,CAAC,0BAA0B,GAAG,QAAQ,IAAI,CAAC,QAAQ;aACpD,iBACW,MAAM,EAClB,SAAS,EAAE,WAAW,GACtB,CACK,EACT,WACE,KAAK,EAAE;gBACL,CAAC,kBAAkB,GAAG,IAAI;aAC3B,qBACgB,GAAG,IAAI,CAAC,WAAW,SAAS,EAC7C,IAAI,EAAC,QAAQ,iBACA,GAAG,CAAC,QAAQ,EAAE,EAC3B,EAAE,EAAC,uBAAuB,EAC1B,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC,IAE1C,WAAK,KAAK,EAAC,wBAAwB,IAChC,IAAI,CAAC,OAAO,IACX,qBAAe,OAAO,EAAC,MAAM,IAAE,IAAI,CAAC,OAAO,CAAiB,KAE5D,eAAQ,CACT,CACG,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-accordion/ic-accordion.css?tag=ic-accordion&encapsulation=shadow","src/components/ic-accordion/ic-accordion.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n border-bottom: var(--ic-border-default);\n}\n\n:host ic-typography,\n:host .expand-chevron {\n color: var(--ic-color-primary-text);\n}\n\n:host(.light) ic-typography,\n:host(.light) .expanded-content,\n:host(.light) .icon-container,\n:host(.light) .expand-chevron {\n color: var(--ic-color-white-text);\n}\n\n:host(.disabled) ic-typography,\n:host(.disabled) .icon-container,\n:host(.disabled) .expand-chevron {\n color: var(--ic-architectural-500);\n}\n\n.section-button.small {\n padding: var(--ic-space-xxs) var(--ic-space-xs);\n}\n\n.section-button.large {\n padding: var(--ic-space-sm) var(--ic-space-xs);\n}\n\n:host(:first-of-type) {\n border-top: var(--ic-border-default);\n}\n\n:focus {\n outline: none;\n}\n\n.section-button {\n background-color: transparent;\n display: flex;\n align-items: center;\n width: 100%;\n padding: var(--ic-space-xs);\n font-weight: var(--ic-font-weight-bold);\n border: none;\n}\n\n.section-header {\n text-align: left;\n flex: 1 0;\n}\n\nbutton:hover:enabled {\n background-color: var(--ic-action-dark-bg-hover);\n cursor: pointer;\n}\n\nbutton:active {\n background-color: var(--ic-action-dark-bg-active);\n}\n\nbutton:focus {\n box-shadow: var(--ic-border-focus);\n border-radius: var(--ic-border-radius);\n transition: var(--ic-transition-duration-fast);\n}\n\nbutton:disabled {\n pointer-events: none;\n}\n\n.icon-container {\n margin: 0 var(--ic-space-xs) 0 0;\n display: flex;\n align-items: center;\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n::slotted(svg) {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n.expand-chevron {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n margin-left: calc(var(--ic-space-xl) + var(--ic-space-xs));\n transform: rotate(90deg);\n justify-self: end;\n}\n\n.content-expanded-chevron {\n transform: rotate(-90deg);\n}\n\n.expanded-content {\n height: 0;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n visibility: var(--ic-expanded-content-visibility, hidden);\n}\n\n.expanded-content-inner {\n padding: var(--ic-space-xs);\n}\n\n.expanded-content-opened {\n overflow: visible;\n}\n","import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Host,\n Watch,\n Method,\n} from \"@stencil/core\";\nimport { isSlotUsed } from \"../../utils/helpers\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport { IcThemeForeground, IcSizes } from \"../../utils/types\";\n\nlet accordionIds = 0;\n\n/*\n @slot heading - Content is placed as the accordion heading.\n * @slot icon - Content is placed to the left of the heading.\n /\n\n@Component({\n tag: \"ic-accordion\",\n styleUrl: \"ic-accordion.css\",\n shadow: true,\n})\nexport class Accordion {\n private accordionId = `ic-accordion-${accordionIds++}`;\n private expandedContentEl: HTMLDivElement;\n private accordionBtnHeading: HTMLButtonElement;\n private CONTENT_VISIBILITY_PROPERTY = \"--ic-expanded-content-visibility\";\n\n @Element() el: HTMLIcAccordionElement;\n /\n @internal Determines whether the light or dark variant of the accordion should be displayed.\n /\n @Prop() appearance?: IcThemeForeground = \"default\";\n\n /\n If `true`, the accordion will be disabled.\n /\n @Prop() disabled?: boolean = false;\n\n /\n If `true`, the accordion appears expanded.\n /\n @Prop({ mutable: true }) expanded: boolean = false;\n\n /\n The section header outlining section content.\n /\n @Prop() heading?: string = \"\";\n\n /\n The main body message of the accordion.\n /\n @Prop() message?: string = \"\";\n\n /\n The size of the accordion.\n /\n @Prop() size?: IcSizes = \"default\";\n\n /\n @internal Emitted when accordion is clicked.\n /\n @Event() accordionClicked: EventEmitter<{ id: string }>;\n\n // Every time expanded is set via toggleExpanded or accordionGroup, animate to open or close\n @Watch(\"expanded\")\n handleExpandedWatch(): void {\n this.animateExpandedContent();\n }\n\n /\n Sets focus on accordion heading.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.accordionBtnHeading) {\n this.accordionBtnHeading.focus();\n }\n }\n\n disconnectedCallback(): void {\n if (this.expandedContentEl) {\n this.expandedContentEl.removeEventListener(\n \"transitionend\",\n (e) => this.setExpandedContentStyle(e, this.expandedContentEl),\n true\n );\n this.expandedContentEl.removeEventListener(\n \"transitionend\",\n (e) => this.hideExpandedContent(e, this.expandedContentEl),\n true\n );\n }\n }\n\n componentDidLoad(): void {\n // So accordion opens by default if expanded set to true\n if (this.expanded) {\n this.expandedContentEl.style.height = \"auto\";\n this.expandedContentEl.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"visible\"\n );\n }\n }\n\n private toggleExpanded = (): void => {\n this.expanded = !this.expanded;\n this.accordionClicked.emit({ id: this.accordionId });\n };\n\n // Set accordion animation\n private setAccordionAnimation = (\n el: HTMLElement,\n duration: string,\n property: string,\n delay: string\n ) => {\n el.style.transitionDuration = `${duration}ms`;\n el.style.transitionProperty = property;\n el.style.transitionDelay = delay;\n };\n\n private setExpandedContentStyle = (\n ev: TransitionEvent,\n expandedContent: HTMLDivElement\n ) => {\n if (ev.propertyName === \"height\" && expandedContent.clientHeight > 0) {\n expandedContent.classList.add(\"expanded-content-opened\");\n expandedContent.style.height = \"auto\";\n }\n };\n\n private hideExpandedContent = (\n ev: TransitionEvent,\n expandedContent: HTMLDivElement\n ) => {\n if (ev.propertyName === \"height\" && expandedContent.clientHeight === 0) {\n expandedContent.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"hidden\"\n );\n }\n };\n\n private animateExpandedContent = () => {\n const elementHeight = this.expandedContentEl.scrollHeight;\n if (elementHeight > 0 && this.expanded) {\n this.expandedContentEl.style.setProperty(\n this.CONTENT_VISIBILITY_PROPERTY,\n \"visible\"\n );\n this.expandedContentEl.style.height = `${elementHeight}px`;\n this.setAccordionAnimation(\n this.expandedContentEl,\n \"300\",\n \"height\",\n \"ease-out\"\n );\n\n this.expandedContentEl.addEventListener(\n \"transitionend\",\n (e: TransitionEvent) => {\n this.setExpandedContentStyle(e, this.expandedContentEl);\n }\n );\n } else if (!this.expanded) {\n this.expandedContentEl.style.height = `${this.expandedContentEl.scrollHeight}px`;\n if (this.expandedContentEl.scrollHeight > 0 && !this.expanded) {\n this.expandedContentEl.style.height = \"0\";\n this.setAccordionAnimation(\n this.expandedContentEl,\n \"300\",\n \"height\",\n \"ease-in\"\n );\n this.expandedContentEl.classList.remove(\"expanded-content-opened\");\n }\n this.expandedContentEl.addEventListener(\"transitionend\", (e) => {\n this.hideExpandedContent(e, this.expandedContentEl);\n });\n }\n };\n\n render() {\n const { appearance, size, disabled, expanded } = this;\n return (\n <Host\n id={this.accordionId}\n class={{\n [`${appearance}`]: true,\n [\"disabled\"]: disabled,\n }}\n aria-disabled={disabled ? \"true\" : \"false\"}\n >\n <button\n ref={(el) => (this.accordionBtnHeading = el)}\n id={`${this.accordionId}-button`}\n disabled={disabled}\n tabindex={disabled ? -1 : 0}\n class={{\n [`${size}`]: true,\n [\"section-button\"]: true,\n [\"section-button-open\"]: expanded && !disabled,\n }}\n aria-expanded={`${expanded}`}\n aria-controls=\"expanded-content-area\"\n onClick={this.toggleExpanded}\n >\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography variant=\"subtitle-large\" class=\"section-header\">\n {isSlotUsed(this.el, \"heading\") ? (\n <slot name=\"heading\" />\n ) : (\n this.heading\n )}\n </ic-typography>\n <span\n class={{\n [\"expand-chevron\"]: true,\n [\"content-expanded-chevron\"]: expanded && !disabled,\n }}\n aria-hidden=\"true\"\n innerHTML={chevronIcon}\n />\n </button>\n <div\n class={{\n [\"expanded-content\"]: true,\n }}\n aria-labelledby={`${this.accordionId}-button`}\n role=\"region\"\n aria-hidden={`${!expanded}`}\n id=\"expanded-content-area\"\n ref={(el) => (this.expandedContentEl = el)}\n >\n <div class=\"expanded-content-inner\">\n {this.message ? (\n <ic-typography variant=\"body\">{this.message}</ic-typography>\n ) : (\n <slot />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-alert2.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { c as closeIcon } from './close-icon.js';
-import { V as VARIANT_ICONS, i as isSlotUsed } from './helpers.js';
+import { e as checkSlotInChildMutations, V as VARIANT_ICONS, i as isSlotUsed } from './helpers.js';
 import { I as IcThemeForegroundEnum } from './types.js';
 import { d as defineCustomElement$4 } from './ic-button2.js';
 import { d as defineCustomElement$3 } from './ic-loading-indicator2.js';
@@ -16,10 +16,18 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
         this.__attachShadow();
         this.dismiss = createEvent(this, "dismiss", 7);
         this.icDismiss = createEvent(this, "icDismiss", 7);
+        this.hostMutationObserver = null;
         this.dismissAction = () => {
             this.dismiss.emit();
             this.icDismiss.emit();
         };
+        this.hostMutationCallback = (mutationList) => {
+            if (mutationList.some(({ type, addedNodes, removedNodes }) => type === "childList"
+                ? checkSlotInChildMutations(addedNodes, removedNodes, "action")
+                : false)) {
+                forceUpdate(this);
+            }
+        };
         this.alertTitleWrap = false;
         this.visible = true;
         this.announced = true;
@@ -29,8 +37,16 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
         this.titleAbove = false;
         this.variant = "neutral";
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     componentDidLoad() {
         this.alertTitleShouldWrap();
+        this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
+        this.hostMutationObserver.observe(this.el, {
+            childList: true,
+        });
     }
     handleClick() {
         this.visible = !this.visible;

package/dist/components/ic-alert2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-alert2.js","mappings":";;;;;;;;;AAAA,MAAM,UAAU,GAAG,+uJAA+uJ;;MCyBrvJ,KAAK;;;;;;;QAuDR,kBAAa,GAAG;YACtB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YACpB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;SACvB,CAAC;8BAvDiC,KAAK;uBACZ,IAAI;yBAKF,IAAI;2BAKF,KAAK;uBAKV,EAAE;;0BAUE,KAAK;uBAKC,SAAS;;IAY9C,gBAAgB;QACd,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;IAGD,WAAW;QACT,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;KAC9B;IAOO,oBAAoB;;QAC1B,MAAM,WAAW,GACf,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,0CAAE,YAAY,CAAC;QACjE,IAAI,WAAW,GAAG,EAAE;YAAE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAClD;IAED,MAAM;QACJ,MAAM,EACJ,OAAO,EACP,OAAO,EACP,OAAO,EACP,UAAU,EACV,WAAW,EACX,SAAS,EACT,OAAO,GACR,GAAG,IAAI,CAAC;QAET,QACE,OAAO,KACL,EAAC,IAAI,IACH,IAAI,EAAE,SAAS,GAAG,OAAO,GAAG,IAAI,EAChC,KAAK,EAAE;gBACL,CAAC,qBAAqB,CAAC,IAAI,GAAG,IAAI;aACnC,IAED,WACE,KAAK,EAAE;gBACL,CAAC,WAAW,GAAG,IAAI;gBACnB,CAAC,aAAa,OAAO,EAAE,GAAG,IAAI;aAC/B,IAED,WAAK,KAAK,EAAC,sBAAsB,IAC/B,WACE,KAAK,EAAE;gBACL,CAAC,SAAS,GAAG,IAAI;gBACjB,CAAC,WAAW,OAAO,EAAE,GAAG,IAAI;aAC7B,GACI,EACP,YACE,KAAK,EAAE;gBACL,CAAC,YAAY,GAAG,IAAI;gBACpB,CAAC,eAAe,GAAG,IAAI;gBACvB,CAAC,QAAQ,OAAO,EAAE,GAAG,IAAI;aAC1B,EACD,SAAS,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC,IAAI,GAChC,CACJ,EACN,WAAK,KAAK,EAAC,eAAe,IACxB,WACE,KAAK,EAAE;gBACL,CAAC,eAAe,GAAG,IAAI;gBACvB,CAAC,2BAA2B,GAC1B,UAAU,IAAI,IAAI,CAAC,cAAc;aACpC,IAEA,OAAO,KACN,qBACE,KAAK,EAAE;gBACL,CAAC,aAAa,GAAG,IAAI;gBACrB,CAAC,mBAAmB,GAAG,UAAU,IAAI,IAAI,CAAC,cAAc;aACzD,EACD,OAAO,EAAC,gBAAgB,IAExB,aAAI,OAAO,CAAK,CACF,CACjB,EACD,YAAM,IAAI,EAAC,SAAS,IAClB,qBAAe,OAAO,EAAC,MAAM,IAAE,OAAO,CAAiB,CAClD,CACH,EACL,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,KAC5B,WAAK,KAAK,EAAC,wBAAwB,IACjC,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP,CACG,EACN,WAAK,KAAK,EAAC,wBAAwB,IAChC,WAAW,KACV,iBACE,KAAK,EAAE;gBACL,CAAC,eAAe,GAAG,IAAI;gBACvB,CAAC,cAAc,GAAG,IAAI;aACvB,EACD,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,OAAO,EAAC,MAAM,EACd,UAAU,EAAE,qBAAqB,CAAC,IAAI,EACtC,KAAK,EAAC,SAAS,GACJ,CACd,CACG,CACF,CACD,CACR,EACD;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-alert/ic-alert.css?tag=ic-alert&encapsulation=shadow","src/components/ic-alert/ic-alert.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n}\n\n.container {\n min-height: 3.5rem;\n border-radius: var(--ic-border-radius);\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.container-neutral {\n background-color: var(--ic-status-unknown-light);\n}\n\n.container-info {\n background-color: var(--ic-status-info-light);\n}\n\n.container-warning {\n background-color: var(--ic-status-warning-light);\n}\n\n.container-error {\n background-color: var(--ic-status-error-light);\n}\n\n.container-success {\n background-color: var(--ic-status-success-light);\n}\n\n.alert-icon-container {\n height: 100%;\n display: flex;\n align-items: center;\n}\n\n.divider {\n height: 100%;\n width: var(--ic-space-xs);\n border-radius: var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);\n position: absolute;\n}\n\n.divider-neutral {\n background-color: var(--ic-status-unknown);\n}\n\n.divider-info {\n background-color: var(--ic-status-info);\n}\n\n.divider-warning {\n background-color: var(--ic-status-warning);\n}\n\n.divider-error {\n background-color: var(--ic-status-error);\n}\n\n.divider-success {\n background-color: var(--ic-status-success);\n}\n\n.alert-icon {\n height: var(--ic-space-lg);\n width: 1.375rem;\n margin-left: 1.125rem;\n}\n\n.alert-icon > svg {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n display: inline-block;\n}\n\n.icon-neutral > svg {\n fill: var(--ic-status-unknown);\n}\n\n:host([variant=\"info\"]) .alert-icon svg {\n fill: var(--ic-status-info);\n}\n\n:host([variant=\"warning\"]) .alert-icon svg {\n fill: var(--ic-status-warning);\n}\n\n:host([variant=\"error\"]) .alert-icon svg {\n fill: var(--ic-status-error);\n}\n\n:host([variant=\"success\"]) .alert-icon svg {\n fill: var(--ic-status-success);\n}\n\n.alert-content {\n display: flex;\n align-items: center;\n margin-left: 0.625rem;\n width: 100%;\n}\n\n.alert-message {\n display: flex;\n align-items: center;\n padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n flex: 1;\n}\n\n.alert-message-title-above {\n display: inline;\n}\n\n.alert-title {\n margin-right: var(--ic-space-xs);\n}\n\n.alert-title-above {\n white-space: normal;\n}\n\n.alert-action-container {\n margin-right: var(--ic-space-xs);\n display: flex;\n align-items: center;\n}\n\n.dismiss-icon {\n margin-right: var(--ic-space-xxxs);\n margin-left: -0.375rem;\n padding: 0.375rem;\n border: none;\n border-radius: 50%;\n background-color: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.dismiss-icon:hover {\n cursor: pointer;\n}\n\n@media (max-width: 628px) {\n .alert-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .alert-message {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .alert-title {\n white-space: normal;\n }\n\n .alert-action-container {\n margin-bottom: var(--ic-space-xs);\n }\n}\n\n@media (forced-colors: active) {\n .container {\n border: var(--ic-hc-border);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n State,\n Listen,\n Prop,\n h,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { isSlotUsed } from \"../../utils/helpers\";\nimport { IcThemeForegroundEnum, IcStatusVariants } from \"../../utils/types\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\n\n/*\n @slot message - Content is placed to the right of the title.\n * @slot action - Content is placed to the right of the message.\n /\n@Component({\n tag: \"ic-alert\",\n styleUrl: \"ic-alert.css\",\n shadow: true,\n})\nexport class Alert {\n @Element() el: HTMLIcAlertElement;\n\n @State() alertTitleWrap: boolean = false;\n @State() visible: boolean = true;\n\n /\n If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.\n /\n @Prop() announced?: boolean = true;\n\n /\n If `true`, the alert will have a close icon at the end to dismiss it.\n /\n @Prop() dismissible?: boolean = false;\n\n /\n The optional title to display at the start of the alert.\n /\n @Prop() heading?: string = \"\";\n\n /\n The main body message of the alert.\n /\n @Prop() message?: string;\n\n /\n If `true`, the title and message will appear above and below instead of inline.\n /\n @Prop() titleAbove?: boolean = false;\n\n /\n The variant of the alert which will be rendered.\n /\n @Prop() variant?: IcStatusVariants = \"neutral\";\n\n /\n @deprecated This event should not be used anymore. Use icDismiss instead.\n /\n @Event() dismiss: EventEmitter<void>;\n\n /\n Is emitted when the user dismisses the alert.\n */\n @Event() icDismiss: EventEmitter<void>;\n\n componentDidLoad(): void {\n this.alertTitleShouldWrap();\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleClick(): void {\n this.visible = !this.visible;\n }\n\n private dismissAction = (): void => {\n this.dismiss.emit();\n this.icDismiss.emit();\n };\n\n private alertTitleShouldWrap() {\n const titleHeight =\n this.el.shadowRoot.querySelector(\".alert-title\")?.clientHeight;\n if (titleHeight > 24) this.alertTitleWrap = true;\n }\n\n render() {\n const {\n variant,\n heading,\n message,\n titleAbove,\n dismissible,\n announced,\n visible,\n } = this;\n\n return (\n visible && (\n <Host\n role={announced ? \"alert\" : null}\n class={{\n [IcThemeForegroundEnum.Dark]: true,\n }}\n >\n <div\n class={{\n [\"container\"]: true,\n [`container-${variant}`]: true,\n }}\n >\n <div class=\"alert-icon-container\">\n <div\n class={{\n [\"divider\"]: true,\n [`divider-${variant}`]: true,\n }}\n ></div>\n <span\n class={{\n [\"alert-icon\"]: true,\n [\"svg-container\"]: true,\n [`icon-${variant}`]: true,\n }}\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n </div>\n <div class=\"alert-content\">\n <div\n class={{\n [\"alert-message\"]: true,\n [\"alert-message-title-above\"]:\n titleAbove \|\| this.alertTitleWrap,\n }}\n >\n {heading && (\n <ic-typography\n class={{\n [\"alert-title\"]: true,\n [\"alert-title-above\"]: titleAbove \|\| this.alertTitleWrap,\n }}\n variant=\"subtitle-large\"\n >\n <p>{heading}</p>\n </ic-typography>\n )}\n <slot name=\"message\">\n <ic-typography variant=\"body\">{message}</ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"action\") && (\n <div class=\"alert-action-container\">\n <slot name=\"action\" />\n </div>\n )}\n </div>\n <div class=\"dismiss-icon-container\">\n {dismissible && (\n <ic-button\n class={{\n [\"svg-container\"]: true,\n [\"dismiss-icon\"]: true,\n }}\n innerHTML={closeIcon}\n onClick={this.dismissAction}\n variant=\"icon\"\n appearance={IcThemeForegroundEnum.Dark}\n title=\"dismiss\"\n ></ic-button>\n )}\n </div>\n </div>\n </Host>\n )\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-alert2.js","mappings":"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","names":[],"sources":["src/components/ic-alert/ic-alert.css?tag=ic-alert&encapsulation=shadow","src/components/ic-alert/ic-alert.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n}\n\n.container {\n min-height: 3.5rem;\n border-radius: var(--ic-border-radius);\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.container-neutral {\n background-color: var(--ic-status-unknown-light);\n}\n\n.container-info {\n background-color: var(--ic-status-info-light);\n}\n\n.container-warning {\n background-color: var(--ic-status-warning-light);\n}\n\n.container-error {\n background-color: var(--ic-status-error-light);\n}\n\n.container-success {\n background-color: var(--ic-status-success-light);\n}\n\n.alert-icon-container {\n height: 100%;\n display: flex;\n align-items: center;\n}\n\n.divider {\n height: 100%;\n width: var(--ic-space-xs);\n border-radius: var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);\n position: absolute;\n}\n\n.divider-neutral {\n background-color: var(--ic-status-unknown);\n}\n\n.divider-info {\n background-color: var(--ic-status-info);\n}\n\n.divider-warning {\n background-color: var(--ic-status-warning);\n}\n\n.divider-error {\n background-color: var(--ic-status-error);\n}\n\n.divider-success {\n background-color: var(--ic-status-success);\n}\n\n.alert-icon {\n height: var(--ic-space-lg);\n width: 1.375rem;\n margin-left: 1.125rem;\n}\n\n.alert-icon > svg {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n display: inline-block;\n}\n\n.icon-neutral > svg {\n fill: var(--ic-status-unknown);\n}\n\n:host([variant=\"info\"]) .alert-icon svg {\n fill: var(--ic-status-info);\n}\n\n:host([variant=\"warning\"]) .alert-icon svg {\n fill: var(--ic-status-warning);\n}\n\n:host([variant=\"error\"]) .alert-icon svg {\n fill: var(--ic-status-error);\n}\n\n:host([variant=\"success\"]) .alert-icon svg {\n fill: var(--ic-status-success);\n}\n\n.alert-content {\n display: flex;\n align-items: center;\n margin-left: 0.625rem;\n width: 100%;\n}\n\n.alert-message {\n display: flex;\n align-items: center;\n padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n flex: 1;\n}\n\n.alert-message-title-above {\n display: inline;\n}\n\n.alert-title {\n margin-right: var(--ic-space-xs);\n}\n\n.alert-title-above {\n white-space: normal;\n}\n\n.alert-action-container {\n margin-right: var(--ic-space-xs);\n display: flex;\n align-items: center;\n}\n\n.dismiss-icon {\n margin-right: var(--ic-space-xxxs);\n margin-left: -0.375rem;\n padding: 0.375rem;\n border: none;\n border-radius: 50%;\n background-color: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.dismiss-icon:hover {\n cursor: pointer;\n}\n\n@media (max-width: 628px) {\n .alert-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .alert-message {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .alert-title {\n white-space: normal;\n }\n\n .alert-action-container {\n margin-bottom: var(--ic-space-xs);\n }\n}\n\n@media (forced-colors: active) {\n .container {\n border: var(--ic-hc-border);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n State,\n Listen,\n Prop,\n h,\n forceUpdate,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { isSlotUsed, checkSlotInChildMutations } from \"../../utils/helpers\";\nimport { IcThemeForegroundEnum, IcStatusVariants } from \"../../utils/types\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\n\n/*\n @slot message - Content is placed to the right of the title.\n * @slot action - Content is placed to the right of the message.\n /\n@Component({\n tag: \"ic-alert\",\n styleUrl: \"ic-alert.css\",\n shadow: true,\n})\nexport class Alert {\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcAlertElement;\n\n @State() alertTitleWrap: boolean = false;\n @State() visible: boolean = true;\n\n /\n If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.\n /\n @Prop() announced?: boolean = true;\n\n /\n If `true`, the alert will have a close icon at the end to dismiss it.\n /\n @Prop() dismissible?: boolean = false;\n\n /\n The optional title to display at the start of the alert.\n /\n @Prop() heading?: string = \"\";\n\n /\n The main body message of the alert.\n /\n @Prop() message?: string;\n\n /\n If `true`, the title and message will appear above and below instead of inline.\n /\n @Prop() titleAbove?: boolean = false;\n\n /\n The variant of the alert which will be rendered.\n /\n @Prop() variant?: IcStatusVariants = \"neutral\";\n\n /\n @deprecated This event should not be used anymore. Use icDismiss instead.\n /\n @Event() dismiss: EventEmitter<void>;\n\n /\n Is emitted when the user dismisses the alert.\n */\n @Event() icDismiss: EventEmitter<void>;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentDidLoad(): void {\n this.alertTitleShouldWrap();\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleClick(): void {\n this.visible = !this.visible;\n }\n\n private dismissAction = (): void => {\n this.dismiss.emit();\n this.icDismiss.emit();\n };\n\n private alertTitleShouldWrap() {\n const titleHeight =\n this.el.shadowRoot.querySelector(\".alert-title\")?.clientHeight;\n if (titleHeight > 24) this.alertTitleWrap = true;\n }\n\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n if (\n mutationList.some(({ type, addedNodes, removedNodes }) =>\n type === \"childList\"\n ? checkSlotInChildMutations(addedNodes, removedNodes, \"action\")\n : false\n )\n ) {\n forceUpdate(this);\n }\n };\n\n render() {\n const {\n variant,\n heading,\n message,\n titleAbove,\n dismissible,\n announced,\n visible,\n } = this;\n\n return (\n visible && (\n <Host\n role={announced ? \"alert\" : null}\n class={{\n [IcThemeForegroundEnum.Dark]: true,\n }}\n >\n <div\n class={{\n [\"container\"]: true,\n [`container-${variant}`]: true,\n }}\n >\n <div class=\"alert-icon-container\">\n <div\n class={{\n [\"divider\"]: true,\n [`divider-${variant}`]: true,\n }}\n ></div>\n <span\n class={{\n [\"alert-icon\"]: true,\n [\"svg-container\"]: true,\n [`icon-${variant}`]: true,\n }}\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n </div>\n <div class=\"alert-content\">\n <div\n class={{\n [\"alert-message\"]: true,\n [\"alert-message-title-above\"]:\n titleAbove \|\| this.alertTitleWrap,\n }}\n >\n {heading && (\n <ic-typography\n class={{\n [\"alert-title\"]: true,\n [\"alert-title-above\"]: titleAbove \|\| this.alertTitleWrap,\n }}\n variant=\"subtitle-large\"\n >\n <p>{heading}</p>\n </ic-typography>\n )}\n <slot name=\"message\">\n <ic-typography variant=\"body\">{message}</ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"action\") && (\n <div class=\"alert-action-container\">\n <slot name=\"action\" />\n </div>\n )}\n </div>\n <div class=\"dismiss-icon-container\">\n {dismissible && (\n <ic-button\n class={{\n [\"svg-container\"]: true,\n [\"dismiss-icon\"]: true,\n }}\n innerHTML={closeIcon}\n onClick={this.dismissAction}\n variant=\"icon\"\n appearance={IcThemeForegroundEnum.Dark}\n title=\"dismiss\"\n ></ic-button>\n )}\n </div>\n </div>\n </Host>\n )\n );\n }\n}\n"],"version":3}

package/dist/components/ic-back-to-top.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { e as onComponentPropUndefinedChange, o as onComponentRequiredPropUndefined } from './helpers.js';
+import { f as onComponentPropUndefinedChange, o as onComponentRequiredPropUndefined } from './helpers.js';
 import { d as defineCustomElement$3 } from './ic-tooltip2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
@@ -17,6 +17,9 @@ const BackToTop = /*@__PURE__*/ proxyCustomElement(class BackToTop extends HTMLE
         this.__registerHost();
         this.__attachShadow();
         this.topObserver = null;
+        this.getObservedEl = () => {
+            return document.querySelector("#ic-back-to-top-target");
+        };
         this.setTargetElVisible = (visible) => {
             this.targetElVisible = visible;
         };
@@ -49,7 +52,7 @@ const BackToTop = /*@__PURE__*/ proxyCustomElement(class BackToTop extends HTMLE
             let objParent;
             //remove old element & observer
             if (this.topObserver !== null) {
-                const observedEl = document.querySelector("#ic-back-to-top-target");
+                const observedEl = this.getObservedEl();
                 if (observedEl !== null) {
                     this.topObserver.unobserve(observedEl);
                     observedEl.remove();
@@ -67,6 +70,7 @@ const BackToTop = /*@__PURE__*/ proxyCustomElement(class BackToTop extends HTMLE
             //insert a new 0px height element before specified target that can be used to determine when page is scrolled
             const objBackToTopTargetEl = document.createElement("div");
             objBackToTopTargetEl.setAttribute("id", "ic-back-to-top-target");
+            objBackToTopTargetEl.setAttribute("tabindex", "-1"); // Needed for virtual cursor behaviour to work
             objParent.insertBefore(objBackToTopTargetEl, this.targetEl);
             // resize observer needs to factor in any top margin on the target el
             const marginTop = getComputedStyle(this.targetEl).marginTop;
@@ -83,6 +87,8 @@ const BackToTop = /*@__PURE__*/ proxyCustomElement(class BackToTop extends HTMLE
             else {
                 this.targetEl.scrollIntoView();
             }
+            // Get virtual cursor to move
+            this.getObservedEl().focus();
         };
         this.checkForClassificationBanner = () => {
             //adjust position for classification banner at bottom

package/dist/components/ic-back-to-top.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-back-to-top.js","mappings":"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","names":[],"sources":["src/components/ic-back-to-top/ic-back-to-top.css?tag=ic-back-to-top&encapsulation=shadow","src/components/ic-back-to-top/ic-back-to-top.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/*\n @prop --ic-z-index-back-to-top: z-index of back to top\n /\n\n:host {\n display: block;\n position: absolute;\n right: 0;\n}\n\n.positioning {\n position: fixed;\n right: var(--ic-space-md);\n bottom: var(--ic-space-md);\n transition: visibility 0s linear var(--ic-transition-duration-slow),\n opacity var(--ic-transition-duration-slow);\n z-index: var(--ic-z-index-back-to-top);\n}\n\n.icon-only {\n width: 2.5rem;\n padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs)\n var(--ic-space-xs);\n}\n\n.icon-only .ic-back-to-top-icon {\n padding-left: calc(var(--ic-space-xxxs) + var(--ic-space-1px));\n}\n\nbutton {\n height: 2.5rem;\n align-items: center;\n padding: var(--ic-space-xs) var(--ic-space-md) var(--ic-space-xs)\n var(--ic-space-sm);\n margin: 0;\n gap: var(--ic-space-xs);\n display: flex;\n background-color: var(--ic-architectural-white);\n border: var(--ic-border-width) solid var(--ic-action-default);\n outline-width: inherit;\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n border-radius: 5rem;\n text-decoration: none;\n visibility: hidden;\n opacity: 0;\n cursor: pointer;\n}\n\nbutton:hover {\n text-decoration: none;\n background-color: var(--ic-action-default-bg-hover-no-alpha);\n border: var(--ic-border-width) solid var(--ic-action-default-hover);\n}\n\nbutton:active {\n text-decoration: none;\n background-color: var(--ic-action-default-bg-active-no-alpha);\n border: var(--ic-border-width) solid var(--ic-action-default-active);\n}\n\nbutton:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.ic-back-to-top-link.show {\n visibility: visible;\n opacity: 1;\n transition: visibility 0s linear 0s,\n opacity var(--ic-transition-duration-slow),\n box-shadow var(--ic-easing-transition-fast);\n}\n\n.ic-back-to-top-link.by-footer {\n position: relative;\n right: var(--ic-space-md);\n bottom: 3.5rem;\n}\n\n.ic-back-to-top-link.offset-banner {\n margin-bottom: var(--ic-space-lg);\n}\n\n.ic-back-to-top-icon {\n fill: var(--ic-action-default);\n padding-left: var(--ic-space-xxs);\n padding-top: var(--ic-space-xxxs);\n}\n\n.ic-back-to-top-icon > svg {\n height: var(--ic-space-md);\n width: var(--ic-space-md);\n display: inline-block;\n}\n\n.ic-back-to-top-link span {\n color: var(--ic-action-default);\n}\n\n.ic-back-to-top-link:hover .ic-back-to-top-icon {\n fill: var(--ic-action-default-hover);\n}\n\n.ic-back-to-top-link:hover span {\n color: var(--ic-action-default-hover);\n}\n\n@media (forced-colors: active) {\n .ic-back-to-top-icon {\n fill: currentcolor;\n }\n}\n","import { Component, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport ArrowUpward from \"./assets/ArrowUpward.svg\";\nimport {\n onComponentPropUndefinedChange,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcBackToTopVariants } from \"./ic-back-to-top.types\";\n\nconst backToTopLabel = \"Back to top\";\n\n@Component({\n tag: \"ic-back-to-top\",\n styleUrl: \"ic-back-to-top.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BackToTop {\n private isTargetElNull: boolean;\n private targetEl: Element;\n private topObserver: IntersectionObserver = null;\n\n @Element() el: HTMLIcBackToTopElement;\n\n @State() bannerOffset: boolean = false;\n @State() footerVisible: boolean = false;\n @State() targetElVisible: boolean = true;\n\n /\n The ID of the element to jump back to when the link is clicked.\n /\n @Prop() target!: string;\n\n /\n The variant of the button to render\n */\n @Prop() variant: IcBackToTopVariants = \"default\";\n\n @Watch(\"target\")\n watchPropHandler(newValue: string, oldValue: string): void {\n //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n onComponentPropUndefinedChange(oldValue, newValue, () => {\n this.createTopObserver(newValue);\n });\n }\n\n componentWillLoad(): void {\n this.createTopObserver(this.target);\n this.checkForClassificationBanner();\n\n //observer for when footer scrolls into view\n let footers = document.querySelectorAll(\n \"ic-footer\"\n ) as NodeListOf<HTMLElement>;\n if (footers.length === 0) {\n footers = document.querySelectorAll(\"footer\");\n }\n\n if (footers.length) {\n const footerEl = footers[footers.length - 1];\n const threshold = this.bannerOffset ? 0.15 : 0;\n const footerObserver = new IntersectionObserver(\n this.footerObserverCallback,\n { threshold: [threshold] }\n );\n footerObserver.observe(footerEl);\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.target, propName: \"target\" }],\n \"Back to Top\"\n );\n }\n\n private setTargetElVisible = (visible: boolean) => {\n this.targetElVisible = visible;\n };\n\n private setFooterVisible = (visible: boolean) => {\n this.checkForClassificationBanner();\n this.footerVisible =\n typeof window !== \"undefined\" && window.scrollY === 0 ? false : visible;\n };\n\n private targetElObserverCallback = (entries: IntersectionObserverEntry[]) => {\n this.setTargetElVisible(entries[0].isIntersecting);\n };\n\n private footerObserverCallback = (entries: IntersectionObserverEntry[]) => {\n this.setFooterVisible(entries[0].isIntersecting);\n };\n\n private findTargetEl = (target: string): Element => {\n let targetElement: Element = null;\n if (target === null \|\| target === undefined) {\n console.log(\n \"Error: No target ID specified for back to top component - defaulting to top of page\"\n );\n } else {\n targetElement = document.querySelector(\n `${target.startsWith(\"#\") ? \"\" : \"#\"}${target}`\n );\n if (targetElement === null) {\n console.log(\n `Error: Back to top target element '${target}' not found - defaulting to top of page`\n );\n }\n }\n return targetElement;\n };\n\n private createTopObserver = (target: string) => {\n this.targetEl = this.findTargetEl(target);\n let objParent: HTMLElement;\n\n //remove old element & observer\n if (this.topObserver !== null) {\n const observedEl = document.querySelector(\"#ic-back-to-top-target\");\n if (observedEl !== null) {\n this.topObserver.unobserve(observedEl);\n observedEl.remove();\n }\n }\n\n if (this.targetEl === null) {\n objParent = document.body;\n this.targetEl = objParent.firstElementChild;\n this.isTargetElNull = true;\n } else {\n objParent = this.targetEl.parentNode as HTMLElement;\n this.isTargetElNull = false;\n }\n\n //insert a new 0px height element before specified target that can be used to determine when page is scrolled\n const objBackToTopTargetEl = document.createElement(\"div\");\n objBackToTopTargetEl.setAttribute(\"id\", \"ic-back-to-top-target\");\n objParent.insertBefore(objBackToTopTargetEl, this.targetEl);\n\n // resize observer needs to factor in any top margin on the target el\n const marginTop = getComputedStyle(this.targetEl).marginTop;\n this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {\n threshold: [0],\n rootMargin: `${marginTop} 0px 0px 0px`,\n });\n this.topObserver.observe(objBackToTopTargetEl);\n };\n\n private handleClick = () => {\n if (this.isTargetElNull) {\n window.scrollTo(0, 0);\n } else {\n this.targetEl.scrollIntoView();\n }\n };\n\n private checkForClassificationBanner = () => {\n //adjust position for classification banner at bottom\n const banners = document.querySelectorAll(\n \"ic-classification-banner:not([inline='true'])\"\n );\n this.bannerOffset = banners.length > 0;\n };\n\n private buildButton = () => {\n const { bannerOffset, targetElVisible, footerVisible, variant } = this;\n\n return (\n <button\n class={{\n [\"ic-back-to-top-link\"]: true,\n [\"offset-banner\"]: bannerOffset,\n [\"show\"]: !targetElVisible,\n [\"by-footer\"]: footerVisible,\n [\"positioning\"]: variant !== \"icon\",\n [\"icon-only\"]: variant === \"icon\",\n }}\n aria-label={backToTopLabel}\n onClick={this.handleClick}\n >\n <span class=\"ic-back-to-top-icon\" innerHTML={ArrowUpward} />\n\n {this.variant !== \"icon\" && (\n <ic-typography variant=\"subtitle-small\">\n <span>{backToTopLabel}</span>\n </ic-typography>\n )}\n </button>\n );\n };\n\n render() {\n const { variant, buildButton } = this;\n\n return variant === \"icon\" ? (\n <ic-tooltip label={backToTopLabel} placement=\"top\" class=\"positioning\">\n {buildButton()}\n </ic-tooltip>\n ) : (\n buildButton()\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-back-to-top.js","mappings":"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","names":[],"sources":["src/components/ic-back-to-top/ic-back-to-top.css?tag=ic-back-to-top&encapsulation=shadow","src/components/ic-back-to-top/ic-back-to-top.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/*\n @prop --ic-z-index-back-to-top: z-index of back to top\n /\n\n:host {\n display: block;\n position: absolute;\n right: 0;\n}\n\n.positioning {\n position: fixed;\n right: var(--ic-space-md);\n bottom: var(--ic-space-md);\n transition: visibility 0s linear var(--ic-transition-duration-slow),\n opacity var(--ic-transition-duration-slow);\n z-index: var(--ic-z-index-back-to-top);\n}\n\n.icon-only {\n width: 2.5rem;\n padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs)\n var(--ic-space-xs);\n}\n\n.icon-only .ic-back-to-top-icon {\n padding-left: calc(var(--ic-space-xxxs) + var(--ic-space-1px));\n}\n\nbutton {\n height: 2.5rem;\n align-items: center;\n padding: var(--ic-space-xs) var(--ic-space-md) var(--ic-space-xs)\n var(--ic-space-sm);\n margin: 0;\n gap: var(--ic-space-xs);\n display: flex;\n background-color: var(--ic-architectural-white);\n border: var(--ic-border-width) solid var(--ic-action-default);\n outline-width: inherit;\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n border-radius: 5rem;\n text-decoration: none;\n visibility: hidden;\n opacity: 0;\n cursor: pointer;\n}\n\nbutton:hover {\n text-decoration: none;\n background-color: var(--ic-action-default-bg-hover-no-alpha);\n border: var(--ic-border-width) solid var(--ic-action-default-hover);\n}\n\nbutton:active {\n text-decoration: none;\n background-color: var(--ic-action-default-bg-active-no-alpha);\n border: var(--ic-border-width) solid var(--ic-action-default-active);\n}\n\nbutton:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.ic-back-to-top-link.show {\n visibility: visible;\n opacity: 1;\n transition: visibility 0s linear 0s,\n opacity var(--ic-transition-duration-slow),\n box-shadow var(--ic-easing-transition-fast);\n}\n\n.ic-back-to-top-link.by-footer {\n position: relative;\n right: var(--ic-space-md);\n bottom: 3.5rem;\n}\n\n.ic-back-to-top-link.offset-banner {\n margin-bottom: var(--ic-space-lg);\n}\n\n.ic-back-to-top-icon {\n fill: var(--ic-action-default);\n padding-left: var(--ic-space-xxs);\n padding-top: var(--ic-space-xxxs);\n}\n\n.ic-back-to-top-icon > svg {\n height: var(--ic-space-md);\n width: var(--ic-space-md);\n display: inline-block;\n}\n\n.ic-back-to-top-link span {\n color: var(--ic-action-default);\n}\n\n.ic-back-to-top-link:hover .ic-back-to-top-icon {\n fill: var(--ic-action-default-hover);\n}\n\n.ic-back-to-top-link:hover span {\n color: var(--ic-action-default-hover);\n}\n\n@media (forced-colors: active) {\n .ic-back-to-top-icon {\n fill: currentcolor;\n }\n}\n","import { Component, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport ArrowUpward from \"./assets/ArrowUpward.svg\";\nimport {\n onComponentPropUndefinedChange,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcBackToTopVariants } from \"./ic-back-to-top.types\";\n\nconst backToTopLabel = \"Back to top\";\n\n@Component({\n tag: \"ic-back-to-top\",\n styleUrl: \"ic-back-to-top.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BackToTop {\n private isTargetElNull: boolean;\n private targetEl: Element;\n private topObserver: IntersectionObserver = null;\n\n @Element() el: HTMLIcBackToTopElement;\n\n @State() bannerOffset: boolean = false;\n @State() footerVisible: boolean = false;\n @State() targetElVisible: boolean = true;\n\n /\n The ID of the element to jump back to when the link is clicked.\n /\n @Prop() target!: string;\n\n /\n The variant of the button to render\n */\n @Prop() variant: IcBackToTopVariants = \"default\";\n\n @Watch(\"target\")\n watchPropHandler(newValue: string, oldValue: string): void {\n //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n onComponentPropUndefinedChange(oldValue, newValue, () => {\n this.createTopObserver(newValue);\n });\n }\n\n componentWillLoad(): void {\n this.createTopObserver(this.target);\n this.checkForClassificationBanner();\n\n //observer for when footer scrolls into view\n let footers = document.querySelectorAll(\n \"ic-footer\"\n ) as NodeListOf<HTMLElement>;\n if (footers.length === 0) {\n footers = document.querySelectorAll(\"footer\");\n }\n\n if (footers.length) {\n const footerEl = footers[footers.length - 1];\n const threshold = this.bannerOffset ? 0.15 : 0;\n const footerObserver = new IntersectionObserver(\n this.footerObserverCallback,\n { threshold: [threshold] }\n );\n footerObserver.observe(footerEl);\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.target, propName: \"target\" }],\n \"Back to Top\"\n );\n }\n\n private getObservedEl = () => {\n return document.querySelector(\"#ic-back-to-top-target\");\n };\n\n private setTargetElVisible = (visible: boolean) => {\n this.targetElVisible = visible;\n };\n\n private setFooterVisible = (visible: boolean) => {\n this.checkForClassificationBanner();\n this.footerVisible =\n typeof window !== \"undefined\" && window.scrollY === 0 ? false : visible;\n };\n\n private targetElObserverCallback = (entries: IntersectionObserverEntry[]) => {\n this.setTargetElVisible(entries[0].isIntersecting);\n };\n\n private footerObserverCallback = (entries: IntersectionObserverEntry[]) => {\n this.setFooterVisible(entries[0].isIntersecting);\n };\n\n private findTargetEl = (target: string): Element => {\n let targetElement: Element = null;\n if (target === null \|\| target === undefined) {\n console.log(\n \"Error: No target ID specified for back to top component - defaulting to top of page\"\n );\n } else {\n targetElement = document.querySelector(\n `${target.startsWith(\"#\") ? \"\" : \"#\"}${target}`\n );\n if (targetElement === null) {\n console.log(\n `Error: Back to top target element '${target}' not found - defaulting to top of page`\n );\n }\n }\n return targetElement;\n };\n\n private createTopObserver = (target: string) => {\n this.targetEl = this.findTargetEl(target);\n let objParent: HTMLElement;\n\n //remove old element & observer\n if (this.topObserver !== null) {\n const observedEl = this.getObservedEl();\n if (observedEl !== null) {\n this.topObserver.unobserve(observedEl);\n observedEl.remove();\n }\n }\n\n if (this.targetEl === null) {\n objParent = document.body;\n this.targetEl = objParent.firstElementChild;\n this.isTargetElNull = true;\n } else {\n objParent = this.targetEl.parentNode as HTMLElement;\n this.isTargetElNull = false;\n }\n\n //insert a new 0px height element before specified target that can be used to determine when page is scrolled\n const objBackToTopTargetEl = document.createElement(\"div\");\n objBackToTopTargetEl.setAttribute(\"id\", \"ic-back-to-top-target\");\n objBackToTopTargetEl.setAttribute(\"tabindex\", \"-1\"); // Needed for virtual cursor behaviour to work\n objParent.insertBefore(objBackToTopTargetEl, this.targetEl);\n\n // resize observer needs to factor in any top margin on the target el\n const marginTop = getComputedStyle(this.targetEl).marginTop;\n this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {\n threshold: [0],\n rootMargin: `${marginTop} 0px 0px 0px`,\n });\n this.topObserver.observe(objBackToTopTargetEl);\n };\n\n private handleClick = () => {\n if (this.isTargetElNull) {\n window.scrollTo(0, 0);\n } else {\n this.targetEl.scrollIntoView();\n }\n // Get virtual cursor to move\n (this.getObservedEl() as HTMLElement).focus();\n };\n\n private checkForClassificationBanner = () => {\n //adjust position for classification banner at bottom\n const banners = document.querySelectorAll(\n \"ic-classification-banner:not([inline='true'])\"\n );\n this.bannerOffset = banners.length > 0;\n };\n\n private buildButton = () => {\n const { bannerOffset, targetElVisible, footerVisible, variant } = this;\n\n return (\n <button\n class={{\n [\"ic-back-to-top-link\"]: true,\n [\"offset-banner\"]: bannerOffset,\n [\"show\"]: !targetElVisible,\n [\"by-footer\"]: footerVisible,\n [\"positioning\"]: variant !== \"icon\",\n [\"icon-only\"]: variant === \"icon\",\n }}\n aria-label={backToTopLabel}\n onClick={this.handleClick}\n >\n <span class=\"ic-back-to-top-icon\" innerHTML={ArrowUpward} />\n\n {this.variant !== \"icon\" && (\n <ic-typography variant=\"subtitle-small\">\n <span>{backToTopLabel}</span>\n </ic-typography>\n )}\n </button>\n );\n };\n\n render() {\n const { variant, buildButton } = this;\n\n return variant === \"icon\" ? (\n <ic-tooltip label={backToTopLabel} placement=\"top\" class=\"positioning\">\n {buildButton()}\n </ic-tooltip>\n ) : (\n buildButton()\n );\n }\n}\n"],"version":3}

package/dist/components/ic-badge.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { f as convertToRGBA, h as hexToRgba, j as getCssProperty, k as rgbaStrToObj, l as getThemeForegroundColor, d as isPropDefined, o as onComponentRequiredPropUndefined } from './helpers.js';
+import { h as convertToRGBA, j as hexToRgba, k as getCssProperty, l as rgbaStrToObj, m as getThemeForegroundColor, d as isPropDefined, o as onComponentRequiredPropUndefined } from './helpers.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 const icBadgeCss = "@media (prefers-reduced-motion: no-preference){:host(.show){animation:expand var(--ic-transition-duration-slow)}:host(.hide){animation:shrink var(--ic-transition-duration-slow)}}:host{display:flex;height:var(--ic-space-md);min-width:var(--ic-space-md);width:-moz-fit-content;width:fit-content;border-radius:calc(2 * var(--ic-space-xxl));position:absolute}:host(.neutral){background-color:var(--ic-architectural-500)}:host(.light){background-color:var(--ic-architectural-40)}:host(.info){background-color:var(--ic-status-info)}:host(.warning){background-color:var(--ic-status-warning-mid)}:host(.error){background-color:var(--ic-status-error)}:host(.success){background-color:var(--ic-status-success)}:host(.small){height:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host(.large){height:calc(var(--ic-space-md) + var(--ic-space-xxs));min-width:calc(var(--ic-space-md) + var(--ic-space-xxs))}:host(.dot.default){height:var(--ic-space-xs);width:var(--ic-space-xs);min-width:var(--ic-space-xs)}:host(.dot.small){height:calc(var(--ic-space-xxs) + var(--ic-space-xxxs));width:calc(var(--ic-space-xxs) + var(--ic-space-xxxs));min-width:calc(var(--ic-space-xxs) + var(--ic-space-xxxs))}:host(.dot.large){height:var(--ic-space-sm);width:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host(.foreground-dark) ::slotted(*){fill:var(--ic-color-primary-text)}:host(.foreground-light) ::slotted(*){fill:white}:host(.foreground-dark) ic-typography{color:var(--ic-color-primary-text)}:host(.foreground-light) ic-typography{color:white}:host(.text) ic-typography{align-self:center;padding:0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.text.small) ic-typography{padding:0 0.2132rem}:host(.text.large) ic-typography{padding:0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.icon) ::slotted(svg){width:var(--ic-space-sm);height:var(--ic-space-sm);padding:var(--ic-space-xxxs)}:host(.icon.small) ::slotted(svg){width:var(--ic-space-xs);height:var(--ic-space-xs)}:host(.icon.large) ::slotted(svg){width:calc(var(--ic-space-sm) + var(--ic-space-xxxs));height:calc(var(--ic-space-sm) + var(--ic-space-xxxs));padding:calc(var(--ic-space-xxxs) + var(--ic-space-1px))}:host(.far){top:calc(-1 * var(--ic-space-xs));right:calc(-1 * var(--ic-space-xs))}:host(.far.small),:host(.dot.far.large){top:calc(-1 * var(--ic-space-xxs));right:calc(-1 * var(--ic-space-xxs))}:host(.dot.far),:host(.dot.far.small){top:calc(-1 * var(--ic-space-xxxs));right:calc(-1 * var(--ic-space-xxxs))}:host(.near){top:calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));right:calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)))}:host(.dot.near){top:calc(-1 * var(--ic-space-1px));right:calc(-1 * var(--ic-space-1px))}:host(.inline){position:static}:host(.hide){visibility:hidden !important;transition:visibility var(--ic-transition-duration-slow)}@keyframes expand{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes shrink{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}";

package/dist/components/ic-breadcrumb-group.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { D as DEVICE_SIZES, m as getCurrentDeviceSize, c as checkResizeObserver } from './helpers.js';
+import { D as DEVICE_SIZES, n as getCurrentDeviceSize, c as checkResizeObserver } from './helpers.js';
 import { d as defineCustomElement$3 } from './ic-breadcrumb2.js';
 import { d as defineCustomElement$2 } from './ic-link2.js';

package/dist/components/ic-breadcrumb2.js CHANGED Viewed

@@ -8,7 +8,7 @@ const backIcon = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/
 </svg>
 `;
-const icBreadcrumbCss = ":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:currentcolor}:host(.back){display:flex;align-items:center}:host(.back) .chevron{display:none}ic-link{--breadcrumb-link-display:inline-flex;--breadcrumb-link-align-items:center;--breadcrumb-link-gap:var(--ic-space-xs)}:host([aria-current=\"page\"]) .current-page-container{display:flex;align-items:center;gap:var(--ic-space-xs)}:host([aria-current=\"page\"]) .current-page-container.dark{color:var(--ic-color-primary-text)}:host([aria-current=\"page\"]) .current-page-container.light{color:var(--ic-color-white-text)}: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);border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none}.hide,:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide){display:none}@media (forced-colors: active){.back-icon svg{color:currentcolor}}@supports (text-decoration-thickness: 25%){ic-link{--breadcrumb-link-display:flex}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus){text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%;border-bottom:0 !important;margin-bottom:0 !important}}";
+const icBreadcrumbCss = ":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:currentcolor}:host(.back){display:flex;align-items:center}:host(.back) .chevron{display:none}ic-link{--breadcrumb-link-display:inline-flex;--breadcrumb-link-align-items:center;--breadcrumb-link-gap:var(--ic-space-xs)}:host([aria-current=\"page\"]) .current-page-container{display:flex;align-items:center;gap:var(--ic-space-xs)}:host([aria-current=\"page\"]) .current-page-container.dark{color:var(--ic-color-primary-text)}:host([aria-current=\"page\"]) .current-page-container.light{color:var(--ic-color-white-text)}: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);border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none}.hide,:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide){display:none}@media (forced-colors: active){.back-icon svg{color:currentcolor}}@supports (text-underline-offset: 25%){ic-link{--breadcrumb-link-display:flex}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus){text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%;border-bottom:0 !important;margin-bottom:0 !important}}";
 const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends HTMLElement {
     constructor() {

package/dist/components/ic-breadcrumb2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-breadcrumb2.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,~~wgEAAwgE~~;;~~MCkBnhE~~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","names":[],"sources":["src/components/ic-breadcrumb/ic-breadcrumb.css?tag=ic-breadcrumb&encapsulation=shadow","src/components/ic-breadcrumb/ic-breadcrumb.tsx"],"sourcesContent":[":host {\n display: block;\n margin: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n:host .breadcrumb {\n display: flex;\n align-items: center;\n white-space: nowrap;\n gap: var(--ic-space-xs);\n min-height: var(--ic-space-lg);\n}\n\n:host .chevron {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n:host .chevron svg {\n color: var(--ic-architectural-400);\n}\n\n:host(:first-child) .chevron {\n display: none;\n}\n\n.back-icon svg {\n color: currentcolor;\n}\n\n:host(.back) {\n display: flex;\n align-items: center;\n}\n\n:host(.back) .chevron {\n display: none;\n}\n\nic-link {\n --breadcrumb-link-display: inline-flex;\n --breadcrumb-link-align-items: center;\n --breadcrumb-link-gap: var(--ic-space-xs);\n}\n\n:host([aria-current=\"page\"]) .current-page-container {\n display: flex;\n align-items: center;\n gap: var(--ic-space-xs);\n}\n\n:host([aria-current=\"page\"]) .current-page-container.dark {\n color: var(--ic-color-primary-text);\n}\n\n:host([aria-current=\"page\"]) .current-page-container.light {\n color: var(--ic-color-white-text);\n}\n\n:host(.collapsed-breadcrumb-wrapper) {\n margin-right: var(--ic-space-xs) !important;\n display: flex;\n align-items: center;\n gap: var(--ic-space-xs);\n}\n\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb) {\n border: none;\n background-color: transparent;\n color: var(--ic-hyperlink);\n text-decoration: underline;\n font-weight: var(--ic-font-weight-bold);\n cursor: pointer;\n}\n\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {\n outline: var(--ic-hc-focus-outline);\n border-bottom: 0.25rem solid !important;\n margin-bottom: -0.25rem !important;\n text-decoration: none;\n}\n\n.hide,\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide) {\n display: none;\n}\n\n@media (forced-colors: active) {\n .back-icon svg {\n color: currentcolor;\n }\n}\n\n@supports (text-~~decoration~~-~~thickness~~: 25%) {\n ic-link {\n --breadcrumb-link-display: flex;\n }\n\n :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),\n :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {\n text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 25%;\n border-bottom: 0 !important;\n margin-bottom: 0 !important;\n }\n}\n","import { Component, Host, Prop, h, Element, Method } from \"@stencil/core\";\nimport { IcBreadcrumbDefault } from \"./ic-breadcrumb.types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport backIcon from \"../../assets/back-icon.svg\";\nimport { isPropDefined, isSlotUsed } from \"../../utils/helpers\";\nimport { IcThemeForeground } from \"../../utils/types\";\n\n/*\n @slot icon - Content will be rendered to the left of the breadcrumb page title.\n /\n@Component({\n tag: \"ic-breadcrumb\",\n styleUrl: \"ic-breadcrumb.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Breadcrumb {\n @Element() el: HTMLIcBreadcrumbElement;\n\n /\n @internal The appearance of the breadcrumb.\n /\n @Prop() appearance: IcThemeForeground = \"default\";\n\n /\n If `true`, aria-current will be set on the breadcrumb.\n /\n @Prop() current?: boolean = false;\n\n /\n The URL that the breadcrumb link points to.\n /\n @Prop() href?: string;\n\n /\n The title of the breadcrumb.\n /\n @Prop() pageTitle!: string;\n\n /\n @internal If `true`, back icon will be displayed.\n /\n @Prop({ reflect: true }) showBackIcon: boolean = false;\n\n componentWillRender(): void {\n this.setSlottedCurrentPageClass();\n }\n\n /\n Sets focus on the breadcrumb.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"ic-link\")) {\n this.el.shadowRoot.querySelector(\"ic-link\").focus();\n }\n }\n\n private renderDefaultBreadcrumb = (\n current: boolean,\n pageTitle: string,\n describedById: string,\n href: string\n ): IcBreadcrumbDefault => {\n const hasPageTitle =\n pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== \"\";\n\n if (current && hasPageTitle) {\n return (\n <span\n class={{\n \"current-page-container\": current,\n [this.appearance]: true,\n }}\n >\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n {pageTitle}\n </span>\n );\n }\n\n return (\n <ic-link\n appearance={this.appearance}\n href={href}\n class=\"breadcrumb-link\"\n aria-describedby={this.showBackIcon && describedById && describedById}\n >\n {this.showBackIcon && (\n <div class=\"back-icon\" innerHTML={backIcon}></div>\n )}\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n {pageTitle}\n </ic-link>\n );\n };\n\n private setSlottedCurrentPageClass = () => {\n const icLink = this.el.querySelector(\"ic-link\");\n const currentPage = \"current-page\";\n if (icLink) {\n icLink.classList.remove(currentPage);\n if (this.current) {\n const hasCurrentPageClass = icLink.classList.contains(currentPage);\n if (!hasCurrentPageClass) {\n icLink.classList.add(\"breadcrumb-link\", currentPage);\n }\n }\n }\n };\n\n render() {\n const { current, href, pageTitle } = this;\n const describedById = `${\n pageTitle && pageTitle.toLowerCase().replace(\" \", \"-\")\n }-describedby`;\n\n const hasPageTitle =\n pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== \"\";\n const hasHref = href !== null && isPropDefined(href) && href !== \"\";\n\n return (\n <Host\n class={{\n back: this.showBackIcon,\n }}\n aria-current={current && \"page\"}\n role=\"listitem\"\n >\n <div class=\"breadcrumb\">\n <span innerHTML={chevronIcon} class=\"chevron\" aria-hidden=\"true\" />\n {this.showBackIcon && describedById && (\n <span\n id={describedById}\n class=\"hide\"\n >{`Back to ${pageTitle}`}</span>\n )}\n {hasPageTitle && hasHref ? (\n this.renderDefaultBreadcrumb(\n current,\n pageTitle,\n describedById,\n href\n )\n ) : (\n <slot />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-breadcrumb2.js","mappings":"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","names":[],"sources":["src/components/ic-breadcrumb/ic-breadcrumb.css?tag=ic-breadcrumb&encapsulation=shadow","src/components/ic-breadcrumb/ic-breadcrumb.tsx"],"sourcesContent":[":host {\n display: block;\n margin: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n:host .breadcrumb {\n display: flex;\n align-items: center;\n white-space: nowrap;\n gap: var(--ic-space-xs);\n min-height: var(--ic-space-lg);\n}\n\n:host .chevron {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n:host .chevron svg {\n color: var(--ic-architectural-400);\n}\n\n:host(:first-child) .chevron {\n display: none;\n}\n\n.back-icon svg {\n color: currentcolor;\n}\n\n:host(.back) {\n display: flex;\n align-items: center;\n}\n\n:host(.back) .chevron {\n display: none;\n}\n\nic-link {\n --breadcrumb-link-display: inline-flex;\n --breadcrumb-link-align-items: center;\n --breadcrumb-link-gap: var(--ic-space-xs);\n}\n\n:host([aria-current=\"page\"]) .current-page-container {\n display: flex;\n align-items: center;\n gap: var(--ic-space-xs);\n}\n\n:host([aria-current=\"page\"]) .current-page-container.dark {\n color: var(--ic-color-primary-text);\n}\n\n:host([aria-current=\"page\"]) .current-page-container.light {\n color: var(--ic-color-white-text);\n}\n\n:host(.collapsed-breadcrumb-wrapper) {\n margin-right: var(--ic-space-xs) !important;\n display: flex;\n align-items: center;\n gap: var(--ic-space-xs);\n}\n\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb) {\n border: none;\n background-color: transparent;\n color: var(--ic-hyperlink);\n text-decoration: underline;\n font-weight: var(--ic-font-weight-bold);\n cursor: pointer;\n}\n\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {\n outline: var(--ic-hc-focus-outline);\n border-bottom: 0.25rem solid !important;\n margin-bottom: -0.25rem !important;\n text-decoration: none;\n}\n\n.hide,\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide) {\n display: none;\n}\n\n@media (forced-colors: active) {\n .back-icon svg {\n color: currentcolor;\n }\n}\n\n@supports (text-underline-offset: 25%) {\n ic-link {\n --breadcrumb-link-display: flex;\n }\n\n :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),\n :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {\n text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 25%;\n border-bottom: 0 !important;\n margin-bottom: 0 !important;\n }\n}\n","import { Component, Host, Prop, h, Element, Method } from \"@stencil/core\";\nimport { IcBreadcrumbDefault } from \"./ic-breadcrumb.types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport backIcon from \"../../assets/back-icon.svg\";\nimport { isPropDefined, isSlotUsed } from \"../../utils/helpers\";\nimport { IcThemeForeground } from \"../../utils/types\";\n\n/*\n @slot icon - Content will be rendered to the left of the breadcrumb page title.\n /\n@Component({\n tag: \"ic-breadcrumb\",\n styleUrl: \"ic-breadcrumb.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Breadcrumb {\n @Element() el: HTMLIcBreadcrumbElement;\n\n /\n @internal The appearance of the breadcrumb.\n /\n @Prop() appearance: IcThemeForeground = \"default\";\n\n /\n If `true`, aria-current will be set on the breadcrumb.\n /\n @Prop() current?: boolean = false;\n\n /\n The URL that the breadcrumb link points to.\n /\n @Prop() href?: string;\n\n /\n The title of the breadcrumb.\n /\n @Prop() pageTitle!: string;\n\n /\n @internal If `true`, back icon will be displayed.\n /\n @Prop({ reflect: true }) showBackIcon: boolean = false;\n\n componentWillRender(): void {\n this.setSlottedCurrentPageClass();\n }\n\n /\n Sets focus on the breadcrumb.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"ic-link\")) {\n this.el.shadowRoot.querySelector(\"ic-link\").focus();\n }\n }\n\n private renderDefaultBreadcrumb = (\n current: boolean,\n pageTitle: string,\n describedById: string,\n href: string\n ): IcBreadcrumbDefault => {\n const hasPageTitle =\n pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== \"\";\n\n if (current && hasPageTitle) {\n return (\n <span\n class={{\n \"current-page-container\": current,\n [this.appearance]: true,\n }}\n >\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n {pageTitle}\n </span>\n );\n }\n\n return (\n <ic-link\n appearance={this.appearance}\n href={href}\n class=\"breadcrumb-link\"\n aria-describedby={this.showBackIcon && describedById && describedById}\n >\n {this.showBackIcon && (\n <div class=\"back-icon\" innerHTML={backIcon}></div>\n )}\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n {pageTitle}\n </ic-link>\n );\n };\n\n private setSlottedCurrentPageClass = () => {\n const icLink = this.el.querySelector(\"ic-link\");\n const currentPage = \"current-page\";\n if (icLink) {\n icLink.classList.remove(currentPage);\n if (this.current) {\n const hasCurrentPageClass = icLink.classList.contains(currentPage);\n if (!hasCurrentPageClass) {\n icLink.classList.add(\"breadcrumb-link\", currentPage);\n }\n }\n }\n };\n\n render() {\n const { current, href, pageTitle } = this;\n const describedById = `${\n pageTitle && pageTitle.toLowerCase().replace(\" \", \"-\")\n }-describedby`;\n\n const hasPageTitle =\n pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== \"\";\n const hasHref = href !== null && isPropDefined(href) && href !== \"\";\n\n return (\n <Host\n class={{\n back: this.showBackIcon,\n }}\n aria-current={current && \"page\"}\n role=\"listitem\"\n >\n <div class=\"breadcrumb\">\n <span innerHTML={chevronIcon} class=\"chevron\" aria-hidden=\"true\" />\n {this.showBackIcon && describedById && (\n <span\n id={describedById}\n class=\"hide\"\n >{`Back to ${pageTitle}`}</span>\n )}\n {hasPageTitle && hasHref ? (\n this.renderDefaultBreadcrumb(\n current,\n pageTitle,\n describedById,\n href\n )\n ) : (\n <slot />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-button2.js CHANGED Viewed

@@ -51,6 +51,11 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
                 hiddenFormButton.remove();
             }
         };
+        this.handleKeyDown = (ev) => {
+            if (ev.key === "Escape" && this.hasTooltip) {
+                this.closeButtonTooltip(ev);
+            }
+        };
         this.onFocus = () => {
             this.icFocus.emit();
         };
@@ -205,6 +210,14 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         var _a;
         (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
+    async closeButtonTooltip(ev) {
+        const tooltip = this.el.shadowRoot.querySelector("ic-tooltip");
+        if (await tooltip.isTooltipVisible()) {
+            tooltip.displayTooltip(false);
+            ev.preventDefault();
+            ev.stopImmediatePropagation();
+        }
+    }
     hasIconSlot(position) {
         const selectorPrefix = position ? `${position}-` : "";
         return this.el.querySelector(`[slot="${selectorPrefix}icon"]`) !== null;
@@ -292,7 +305,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
                 ["white-background"]: this.variant === "secondary" &&
                     !this.transparentBackground &&
                     this.appearance !== "light",
-            }, onClick: this.handleClick, "aria-owns": this.ariaOwnsId, "aria-controls": this.ariaControlsId, "aria-expanded": this.dropdown && `${this.dropdownExpanded}` }, this.hasTooltip && (h("ic-tooltip", { id: describedby, label: title || ariaLabel, target: buttonId, placement: this.tooltipPlacement, silent: this.variant === "icon" && !!ariaLabel }, this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h(ButtonContent, null)))), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" }), !this.hasTooltip &&
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-owns": this.ariaOwnsId, "aria-controls": this.ariaControlsId, "aria-expanded": this.dropdown && `${this.dropdownExpanded}` }, this.hasTooltip && (h("ic-tooltip", { id: describedby, label: title || ariaLabel, target: buttonId, placement: this.tooltipPlacement, silent: this.variant === "icon" && !!ariaLabel }, this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h(ButtonContent, null)))), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" }), !this.hasTooltip &&
             (this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h(ButtonContent, null))), this.describedByContent && (h("span", { id: describedby, class: "ic-button-describedby" }, this.describedByContent))));
     }
     static get delegatesFocus() { return true; }