npm - @ukic/web-components - Versions diffs - 3.0.0-alpha.11 → 3.0.0-alpha.13 - Mend

@ukic/web-components 3.0.0-alpha.11 → 3.0.0-alpha.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (985) hide show

package/dist/cjs/ic-footer.cjs.entry.js CHANGED Viewed

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-f982899d.js');
-const helpers = require('./helpers-eca4c27e.js');
+const index = require('./index-d337cd8a.js');
+const helpers = require('./helpers-08a9ec1c.js');
 const icFooterCss = "/*! 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;--footer-compliance-padding:1rem 0}:host(.ic-footer-sparse){--footer-links-padding:1.5rem 0;--footer-logo-margin-bottom:calc(var(--ic-space-md) + var(--ic-space-xxs));--footer-link-inner-flex-direction:row}:host(.ic-footer-small){--footer-links-padding:0 0;--footer-logo-margin-bottom:var(--ic-space-md);--footer-link-inner-flex-direction:column}:host(.ic-footer-foreground-dark){--ic-footer-background:var(--ic-brand-color-secondary-light);--ic-footer-bottom-background:var(--ic-brand-color-tertiary-light);--ic-footer-keyline:var(--ic-state-layer-darken-20);--ic-footer-text:var(--ic-color-text-primary-light);--ic-footer-link:var(--ic-color-text-primary-light);--ic-footer-icon:var(--ic-color-icon-neutral);--ic-footer-chevron-icon:var(--ic-color-icon-neutral);--ic-footer-logo:var(--ic-color-icon-neutral);--ic-footer-hover:var(--ic-architectural-700-state-layer-10);--ic-footer-pressed:var(--ic-architectural-700-state-layer-20)}:host(.ic-footer-small.ic-footer-ungrouped){--footer-links-padding:var(--ic-space-md) 0 0 0}footer{display:flex;flex-direction:column;width:100%}.footer-description{background-color:var(--ic-footer-background);color:var(--ic-footer-text);--ic-typography-color:var(--ic-footer-text);border-bottom:var(--ic-space-1px) solid var(--ic-footer-keyline)}.footer-description-inner{padding:1rem 0}.footer-links{padding:var(--footer-links-padding);background-color:var(--ic-footer-background);color:var(--ic-footer-link);--ic-typography-color:var(--ic-footer-link)}.footer-links-inner{display:flex;flex-direction:var(--footer-link-inner-flex-direction)}.footer-compliance{background-color:var(--ic-footer-bottom-background);color:var(--ic-footer-text);--ic-typography-color:var(--ic-footer-text)}.footer-compliance-inner{padding:var(--footer-compliance-padding)}.footer-logo{margin-bottom:var(--footer-logo-margin-bottom);display:flex;gap:var(--ic-space-xxl)}.footer-logo>::slotted(){margin-right:var(--ic-space-md)}.footer-caption{margin-bottom:var(--ic-space-md)}.classification-spacing{margin-bottom:var(--ic-space-lg)}@media (forced-colors: active){footer{border-top:var(--ic-border-hc)}}";
+const IcFooterStyle0 = icFooterCss;
 const Footer = class {
     constructor(hostRef) {
@@ -13,6 +14,24 @@ const Footer = class {
         this.footerResized = index.createEvent(this, "footerResized", 7);
         this.resizeObserver = null;
         this.hostMutationObserver = null;
+        this.deviceSize = helpers.IC_DEVICE_SIZES.XL;
+        this.foregroundColor = helpers.getBrandForegroundAppearance();
+        /**
+         * The alignment of the section containers used within the footer.
+         */
+        this.aligned = "left";
+        /**
+         * The screen size breakpoint at which to switch to the small layout.
+         */
+        this.breakpoint = "medium";
+        /**
+         * If `true`, the footer will display the crown copyright at the bottom.
+         */
+        this.copyright = true;
+        /**
+         * If `true`, the footer will be set up to handle link groups instead of standalone links.
+         */
+        this.groupLinks = false;
         this.resizeObserverCallback = (currSize) => {
             if (currSize !== this.deviceSize) {
                 this.deviceSize = currSize;
@@ -20,20 +39,14 @@ const Footer = class {
             this.footerResized.emit();
         };
         this.runResizeObserver = () => {
-            this.resizeObserver = new ResizeObserver(() => {
-                const currSize = helpers.getCurrentDeviceSize();
-                this.resizeObserverCallback(currSize);
-            });
-            this.resizeObserver.observe(this.footerEl);
+            if (this.footerEl) {
+                this.resizeObserver = new ResizeObserver(() => {
+                    const currSize = helpers.getCurrentDeviceSize();
+                    this.resizeObserverCallback(currSize);
+                });
+                this.resizeObserver.observe(this.footerEl);
+            }
         };
-        this.deviceSize = helpers.IC_DEVICE_SIZES.XL;
-        this.foregroundColor = helpers.getBrandForegroundAppearance();
-        this.aligned = "left";
-        this.breakpoint = "medium";
-        this.caption = undefined;
-        this.copyright = true;
-        this.description = undefined;
-        this.groupLinks = false;
     }
     disconnectedCallback() {
         var _a;
@@ -78,7 +91,7 @@ const Footer = class {
             helpers.isSlotUsed(el, "caption") ||
             caption ||
             copyright;
-        return (index.h(index.Host, { class: {
+        return (index.h(index.Host, { key: 'd7802c150c67f71e0f1028b1516a5f17d08df237', class: {
                 ["ic-footer"]: true,
                 [`ic-footer-${small ? "small" : "sparse"}`]: true,
                 [`ic-footer-${groupLinks ? "grouped" : "ungrouped"}`]: true,
@@ -86,16 +99,16 @@ const Footer = class {
                 // Slots will be able to infer their own color
                 [`ic-footer-${helpers.IcBrandForegroundEnum.Dark}`]: foregroundColor === helpers.IcBrandForegroundEnum.Dark,
                 [`ic-footer-${helpers.IcBrandForegroundEnum.Light}`]: foregroundColor === helpers.IcBrandForegroundEnum.Light,
-            } }, index.h("footer", { ref: (footerEl) => (this.footerEl = footerEl) }, (helpers.isSlotUsed(el, "description") || description) && (index.h("div", { class: "footer-description" }, index.h("ic-section-container", { aligned: aligned, fullHeight: true }, index.h("div", { class: "footer-description-inner" }, index.h("ic-typography", { variant: "body" }, index.h("slot", { name: "description" }, description)))))), helpers.isSlotUsed(el, "link") && (index.h("div", { class: "footer-links" }, groupLinks && small ? (index.h("div", { class: "footer-links-inner", role: "list" }, index.h("slot", { name: "link" }))) : (index.h("ic-section-container", { fullHeight: true, aligned: aligned }, index.h("div", { class: "footer-links-inner", role: "list" }, index.h("slot", { name: "link" })))))), showComplianceSection && (index.h("div", { class: "footer-compliance" }, index.h("ic-section-container", { aligned: aligned, fullHeight: true }, index.h("div", { class: "footer-compliance-inner" }, helpers.isSlotUsed(el, "logo") && (index.h("div", { class: "footer-logo" }, index.h("slot", { name: "logo" }))), (helpers.isSlotUsed(el, "caption") || caption) && (index.h("div", { class: "footer-caption" }, index.h("ic-typography", { variant: deviceSize <= helpers.IC_DEVICE_SIZES.M ? "caption" : "body" }, index.h("slot", { name: "caption" }, caption)))), copyright && (index.h("div", { class: {
+            } }, index.h("footer", { key: 'bf30d0015a1732313db8d4d04aa14c14b10015f6', ref: (el) => (this.footerEl = el) }, (helpers.isSlotUsed(el, "description") || description) && (index.h("div", { key: 'b283e7729023c3ff75f8d0a017cd9f39ce968318', class: "footer-description" }, index.h("ic-section-container", { key: 'daccd54f6f9a659a9559ec0b1d77142884300a35', aligned: aligned, fullHeight: true }, index.h("div", { key: '72cee4f778bb51065706f6a9694b7a96a37a248c', class: "footer-description-inner" }, index.h("ic-typography", { key: '6893f61de603419f356a6c8cd632e9a12980d2d7', variant: "body" }, index.h("slot", { key: 'ff10f4b4408fe9d4afedcc1d34f82a3dd42595bc', name: "description" }, description)))))), helpers.isSlotUsed(el, "link") && (index.h("div", { key: '2386ae3e8434cd00a8e37b9baf9956108e20baef', class: "footer-links" }, groupLinks && small ? (index.h("div", { class: "footer-links-inner", role: "list" }, index.h("slot", { name: "link" }))) : (index.h("ic-section-container", { fullHeight: true, aligned: aligned }, index.h("div", { class: "footer-links-inner", role: "list" }, index.h("slot", { name: "link" })))))), showComplianceSection && (index.h("div", { key: 'b09e28618c6a1a9b9183425e0732887fcfac7877', class: "footer-compliance" }, index.h("ic-section-container", { key: '24504e13bec8036f326697782e79027689db77d8', aligned: aligned, fullHeight: true }, index.h("div", { key: '560ef8300cc517104f5cd7af6eb5441b788f36b5', class: "footer-compliance-inner" }, helpers.isSlotUsed(el, "logo") && (index.h("div", { key: '54e207b1c8c83f385dd0e0cabae6ba00523e2eda', class: "footer-logo" }, index.h("slot", { key: 'cfc3acc0279e81ea2f34b8876c73c8222b426ff5', name: "logo" }))), (helpers.isSlotUsed(el, "caption") || caption) && (index.h("div", { key: 'b5edcb7d044fe277aeca68544205335fceabf0da', class: "footer-caption" }, index.h("ic-typography", { key: '2b81a3c1af57f8799a7cfdb10ba7f5d22c788487', variant: deviceSize <= helpers.IC_DEVICE_SIZES.M ? "caption" : "body" }, index.h("slot", { key: 'f404e47c0c9f9d67f6024c7cb69eaa8488a1bb78', name: "caption" }, caption)))), copyright && (index.h("div", { key: '9c7939d1011a22520f76220b4bd1687aa1c6b319', class: {
                 ["footer-copyright"]: true,
                 ["classification-spacing"]: helpers.hasClassificationBanner(),
-            } }, index.h("ic-typography", { variant: deviceSize <= helpers.IC_DEVICE_SIZES.M
+            } }, index.h("ic-typography", { key: '10a7ca6941be1d02f2207c8aeca0c37d57f58566', variant: deviceSize <= helpers.IC_DEVICE_SIZES.M
                 ? "caption-uppercase"
                 : "label-uppercase" }, "\u00A9 Crown Copyright"))))))))));
     }
     get el() { return index.getElement(this); }
 };
-Footer.style = icFooterCss;
+Footer.style = IcFooterStyle0;
 exports.ic_footer = Footer;

package/dist/cjs/ic-footer.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-footer.entry.cjs.js","mappings":"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","names":["getCurrentDeviceSize","IC_DEVICE_SIZES","getBrandForegroundAppearance","checkResizeObserver","renderDynamicChildSlots","isSlotUsed","h","Host","IcBrandForegroundEnum","hasClassificationBanner"],"sources":["src/components/ic-footer/ic-footer.css?tag=ic-footer&encapsulation=shadow","src/components/ic-footer/ic-footer.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n\n --footer-compliance-padding: 1rem 0;\n}\n\n:host(.ic-footer-sparse) {\n --footer-links-padding: 1.5rem 0;\n --footer-logo-margin-bottom: calc(var(--ic-space-md) + var(--ic-space-xxs));\n --footer-link-inner-flex-direction: row;\n}\n\n:host(.ic-footer-small) {\n --footer-links-padding: 0 0;\n --footer-logo-margin-bottom: var(--ic-space-md);\n --footer-link-inner-flex-direction: column;\n}\n\n:host(.ic-footer-foreground-dark) {\n --ic-footer-background: var(--ic-brand-color-secondary-light);\n --ic-footer-bottom-background: var(--ic-brand-color-tertiary-light);\n --ic-footer-keyline: var(--ic-state-layer-darken-20);\n --ic-footer-text: var(--ic-color-text-primary-light);\n --ic-footer-link: var(--ic-color-text-primary-light);\n --ic-footer-icon: var(--ic-color-icon-neutral);\n --ic-footer-chevron-icon: var(--ic-color-icon-neutral);\n --ic-footer-logo: var(--ic-color-icon-neutral);\n --ic-footer-hover: var(--ic-architectural-700-state-layer-10);\n --ic-footer-pressed: var(--ic-architectural-700-state-layer-20);\n}\n\n:host(.ic-footer-small.ic-footer-ungrouped) {\n --footer-links-padding: var(--ic-space-md) 0 0 0;\n}\n\n/* Main inner footer element /\nfooter {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n/ Description /\n\n.footer-description {\n background-color: var(--ic-footer-background);\n color: var(--ic-footer-text);\n\n --ic-typography-color: var(--ic-footer-text);\n\n border-bottom: var(--ic-space-1px) solid var(--ic-footer-keyline);\n}\n\n.footer-description-inner {\n padding: 1rem 0;\n}\n\n/ Links /\n\n.footer-links {\n padding: var(--footer-links-padding);\n background-color: var(--ic-footer-background);\n color: var(--ic-footer-link);\n\n --ic-typography-color: var(--ic-footer-link);\n}\n\n.footer-links-inner {\n display: flex;\n flex-direction: var(--footer-link-inner-flex-direction);\n}\n\n/ Compliance /\n\n.footer-compliance {\n background-color: var(--ic-footer-bottom-background);\n color: var(--ic-footer-text);\n\n --ic-typography-color: var(--ic-footer-text);\n}\n\n.footer-compliance-inner {\n padding: var(--footer-compliance-padding);\n}\n\n.footer-logo {\n margin-bottom: var(--footer-logo-margin-bottom);\n display: flex;\n gap: var(--ic-space-xxl);\n}\n\n.footer-logo > ::slotted() {\n margin-right: var(--ic-space-md);\n}\n\n.footer-caption {\n margin-bottom: var(--ic-space-md);\n}\n\n.classification-spacing {\n margin-bottom: var(--ic-space-lg);\n}\n\n@media (forced-colors: active) {\n footer {\n border-top: var(--ic-border-hc);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from \"@stencil/core\";\nimport { IC_DEVICE_SIZES } from \"../../utils/constants\";\nimport {\n getCurrentDeviceSize,\n getBrandForegroundAppearance,\n checkResizeObserver,\n hasClassificationBanner,\n isSlotUsed,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport {\n IcAlignment,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n} from \"../../utils/types\";\nimport { IcFooterBreakpoints } from \"./ic-footer.types\";\n\n/\n @slot description - Content will be rendered at the top of the footer.\n * @slot link - Content will be rendered between description and logos.\n * @slot logo - Content will be rendered underneath footer links.\n * @slot caption - Content will be rendered above Crown Copyright.\n /\n\n@Component({\n tag: \"ic-footer\",\n styleUrl: \"ic-footer.css\",\n shadow: true,\n})\nexport class Footer {\n private footerEl: HTMLElement;\n private resizeObserver: ResizeObserver = null;\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcFooterElement;\n\n @State() deviceSize: number = IC_DEVICE_SIZES.XL;\n @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n\n /\n The alignment of the section containers used within the footer.\n /\n @Prop() aligned?: IcAlignment = \"left\";\n\n /\n The screen size breakpoint at which to switch to the small layout.\n /\n @Prop() breakpoint?: IcFooterBreakpoints = \"medium\";\n\n /\n The caption displayed at the bottom of the footer.\n /\n @Prop() caption: string;\n\n /\n If `true`, the footer will display the crown copyright at the bottom.\n /\n @Prop() copyright: boolean = true;\n\n /\n The description displayed at the top of the footer.\n /\n @Prop() description: string;\n\n /\n If `true`, the footer will be set up to handle link groups instead of standalone links.\n /\n @Prop() groupLinks?: boolean = false;\n\n /\n @internal Triggers on page resize and triggers style changes in footer links and link groups\n /\n @Event() footerResized: EventEmitter<void>;\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n this.deviceSize = getCurrentDeviceSize();\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n\n this.hostMutationObserver = new MutationObserver((mutationList) => {\n return renderDynamicChildSlots(mutationList, \"link\", this);\n });\n\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n this.foregroundColor = ev.detail.mode;\n }\n\n private isSmall() {\n const bp = this.breakpoint;\n\n return bp === \"extra small\"\n ? this.deviceSize < IC_DEVICE_SIZES.XS\n : bp === \"small\"\n ? this.deviceSize < IC_DEVICE_SIZES.S\n : bp === \"medium\"\n ? this.deviceSize < IC_DEVICE_SIZES.M\n : bp === \"large\"\n ? this.deviceSize < IC_DEVICE_SIZES.L\n : bp === \"extra large\"\n ? this.deviceSize < IC_DEVICE_SIZES.XL\n : false;\n }\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n }\n this.footerResized.emit();\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n const currSize = getCurrentDeviceSize();\n this.resizeObserverCallback(currSize);\n });\n\n this.resizeObserver.observe(this.footerEl);\n };\n\n render() {\n const {\n aligned,\n caption,\n copyright,\n description,\n deviceSize,\n el,\n foregroundColor,\n groupLinks,\n } = this;\n const small = this.isSmall();\n\n const showComplianceSection =\n isSlotUsed(el, \"logo\") \|\|\n isSlotUsed(el, \"caption\") \|\|\n caption \|\|\n copyright;\n\n return (\n <Host\n class={{\n [\"ic-footer\"]: true,\n [`ic-footer-${small ? \"small\" : \"sparse\"}`]: true,\n [`ic-footer-${groupLinks ? \"grouped\" : \"ungrouped\"}`]: true,\n [`ic-footer-foreground-${foregroundColor}`]: true,\n // Slots will be able to infer their own color\n [`ic-footer-${IcBrandForegroundEnum.Dark}`]:\n foregroundColor === IcBrandForegroundEnum.Dark,\n [`ic-footer-${IcBrandForegroundEnum.Light}`]:\n foregroundColor === IcBrandForegroundEnum.Light,\n }}\n >\n <footer ref={(footerEl) => (this.footerEl = footerEl)}>\n {/ Description /}\n {(isSlotUsed(el, \"description\") \|\| description) && (\n <div class=\"footer-description\">\n <ic-section-container aligned={aligned} fullHeight={true}>\n <div class=\"footer-description-inner\">\n <ic-typography variant=\"body\">\n <slot name=\"description\">{description}</slot>\n </ic-typography>\n </div>\n </ic-section-container>\n </div>\n )}\n\n {/ Links /}\n {isSlotUsed(el, \"link\") && (\n <div class=\"footer-links\">\n {groupLinks && small ? (\n <div class=\"footer-links-inner\" role=\"list\">\n <slot name=\"link\" />\n </div>\n ) : (\n <ic-section-container fullHeight aligned={aligned}>\n <div class=\"footer-links-inner\" role=\"list\">\n <slot name=\"link\" />\n </div>\n </ic-section-container>\n )}\n </div>\n )}\n\n {/ Compliance (logo, caption, copyright) */}\n {showComplianceSection && (\n <div class=\"footer-compliance\">\n <ic-section-container aligned={aligned} fullHeight={true}>\n <div class=\"footer-compliance-inner\">\n {isSlotUsed(el, \"logo\") && (\n <div class=\"footer-logo\">\n <slot name=\"logo\" />\n </div>\n )}\n {(isSlotUsed(el, \"caption\") \|\| caption) && (\n <div class=\"footer-caption\">\n <ic-typography\n variant={\n deviceSize <= IC_DEVICE_SIZES.M ? \"caption\" : \"body\"\n }\n >\n <slot name=\"caption\">{caption}</slot>\n </ic-typography>\n </div>\n )}\n {copyright && (\n <div\n class={{\n [\"footer-copyright\"]: true,\n [\"classification-spacing\"]: hasClassificationBanner(),\n }}\n >\n <ic-typography\n variant={\n deviceSize <= IC_DEVICE_SIZES.M\n ? \"caption-uppercase\"\n : \"label-uppercase\"\n }\n >\n © Crown Copyright\n </ic-typography>\n </div>\n )}\n </div>\n </ic-section-container>\n </div>\n )}\n </footer>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-footer.entry.cjs.js","mappings":"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","names":["IC_DEVICE_SIZES","getBrandForegroundAppearance","getCurrentDeviceSize","checkResizeObserver","renderDynamicChildSlots","isSlotUsed","h","Host","IcBrandForegroundEnum","hasClassificationBanner"],"sources":["src/components/ic-footer/ic-footer.css?tag=ic-footer&encapsulation=shadow","src/components/ic-footer/ic-footer.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n\n --footer-compliance-padding: 1rem 0;\n}\n\n:host(.ic-footer-sparse) {\n --footer-links-padding: 1.5rem 0;\n --footer-logo-margin-bottom: calc(var(--ic-space-md) + var(--ic-space-xxs));\n --footer-link-inner-flex-direction: row;\n}\n\n:host(.ic-footer-small) {\n --footer-links-padding: 0 0;\n --footer-logo-margin-bottom: var(--ic-space-md);\n --footer-link-inner-flex-direction: column;\n}\n\n:host(.ic-footer-foreground-dark) {\n --ic-footer-background: var(--ic-brand-color-secondary-light);\n --ic-footer-bottom-background: var(--ic-brand-color-tertiary-light);\n --ic-footer-keyline: var(--ic-state-layer-darken-20);\n --ic-footer-text: var(--ic-color-text-primary-light);\n --ic-footer-link: var(--ic-color-text-primary-light);\n --ic-footer-icon: var(--ic-color-icon-neutral);\n --ic-footer-chevron-icon: var(--ic-color-icon-neutral);\n --ic-footer-logo: var(--ic-color-icon-neutral);\n --ic-footer-hover: var(--ic-architectural-700-state-layer-10);\n --ic-footer-pressed: var(--ic-architectural-700-state-layer-20);\n}\n\n:host(.ic-footer-small.ic-footer-ungrouped) {\n --footer-links-padding: var(--ic-space-md) 0 0 0;\n}\n\n/* Main inner footer element /\nfooter {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n/ Description /\n\n.footer-description {\n background-color: var(--ic-footer-background);\n color: var(--ic-footer-text);\n\n --ic-typography-color: var(--ic-footer-text);\n\n border-bottom: var(--ic-space-1px) solid var(--ic-footer-keyline);\n}\n\n.footer-description-inner {\n padding: 1rem 0;\n}\n\n/ Links /\n\n.footer-links {\n padding: var(--footer-links-padding);\n background-color: var(--ic-footer-background);\n color: var(--ic-footer-link);\n\n --ic-typography-color: var(--ic-footer-link);\n}\n\n.footer-links-inner {\n display: flex;\n flex-direction: var(--footer-link-inner-flex-direction);\n}\n\n/ Compliance /\n\n.footer-compliance {\n background-color: var(--ic-footer-bottom-background);\n color: var(--ic-footer-text);\n\n --ic-typography-color: var(--ic-footer-text);\n}\n\n.footer-compliance-inner {\n padding: var(--footer-compliance-padding);\n}\n\n.footer-logo {\n margin-bottom: var(--footer-logo-margin-bottom);\n display: flex;\n gap: var(--ic-space-xxl);\n}\n\n.footer-logo > ::slotted() {\n margin-right: var(--ic-space-md);\n}\n\n.footer-caption {\n margin-bottom: var(--ic-space-md);\n}\n\n.classification-spacing {\n margin-bottom: var(--ic-space-lg);\n}\n\n@media (forced-colors: active) {\n footer {\n border-top: var(--ic-border-hc);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from \"@stencil/core\";\nimport { IC_DEVICE_SIZES } from \"../../utils/constants\";\nimport {\n getCurrentDeviceSize,\n getBrandForegroundAppearance,\n checkResizeObserver,\n hasClassificationBanner,\n isSlotUsed,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport {\n IcAlignment,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n} from \"../../utils/types\";\nimport { IcFooterBreakpoints } from \"./ic-footer.types\";\n\n/\n @slot description - Content will be rendered at the top of the footer.\n * @slot link - Content will be rendered between description and logos.\n * @slot logo - Content will be rendered underneath footer links.\n * @slot caption - Content will be rendered above Crown Copyright.\n /\n\n@Component({\n tag: \"ic-footer\",\n styleUrl: \"ic-footer.css\",\n shadow: true,\n})\nexport class Footer {\n private footerEl?: HTMLElement;\n private resizeObserver: ResizeObserver \| null = null;\n private hostMutationObserver: MutationObserver \| null = null;\n\n @Element() el: HTMLIcFooterElement;\n\n @State() deviceSize: number = IC_DEVICE_SIZES.XL;\n @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n\n /\n The alignment of the section containers used within the footer.\n /\n @Prop() aligned?: IcAlignment = \"left\";\n\n /\n The screen size breakpoint at which to switch to the small layout.\n /\n @Prop() breakpoint?: IcFooterBreakpoints = \"medium\";\n\n /\n The caption displayed at the bottom of the footer.\n /\n @Prop() caption?: string;\n\n /\n If `true`, the footer will display the crown copyright at the bottom.\n /\n @Prop() copyright?: boolean = true;\n\n /\n The description displayed at the top of the footer.\n /\n @Prop() description?: string;\n\n /\n If `true`, the footer will be set up to handle link groups instead of standalone links.\n /\n @Prop() groupLinks?: boolean = false;\n\n /\n @internal Triggers on page resize and triggers style changes in footer links and link groups\n /\n @Event() footerResized: EventEmitter<void>;\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n this.deviceSize = getCurrentDeviceSize();\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n\n this.hostMutationObserver = new MutationObserver((mutationList) => {\n return renderDynamicChildSlots(mutationList, \"link\", this);\n });\n\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n this.foregroundColor = ev.detail.mode;\n }\n\n private isSmall() {\n const bp = this.breakpoint;\n\n return bp === \"extra small\"\n ? this.deviceSize < IC_DEVICE_SIZES.XS\n : bp === \"small\"\n ? this.deviceSize < IC_DEVICE_SIZES.S\n : bp === \"medium\"\n ? this.deviceSize < IC_DEVICE_SIZES.M\n : bp === \"large\"\n ? this.deviceSize < IC_DEVICE_SIZES.L\n : bp === \"extra large\"\n ? this.deviceSize < IC_DEVICE_SIZES.XL\n : false;\n }\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n }\n this.footerResized.emit();\n };\n\n private runResizeObserver = () => {\n if (this.footerEl) {\n this.resizeObserver = new ResizeObserver(() => {\n const currSize = getCurrentDeviceSize();\n this.resizeObserverCallback(currSize);\n });\n\n this.resizeObserver.observe(this.footerEl);\n }\n };\n\n render() {\n const {\n aligned,\n caption,\n copyright,\n description,\n deviceSize,\n el,\n foregroundColor,\n groupLinks,\n } = this;\n const small = this.isSmall();\n\n const showComplianceSection =\n isSlotUsed(el, \"logo\") \|\|\n isSlotUsed(el, \"caption\") \|\|\n caption \|\|\n copyright;\n\n return (\n <Host\n class={{\n [\"ic-footer\"]: true,\n [`ic-footer-${small ? \"small\" : \"sparse\"}`]: true,\n [`ic-footer-${groupLinks ? \"grouped\" : \"ungrouped\"}`]: true,\n [`ic-footer-foreground-${foregroundColor}`]: true,\n // Slots will be able to infer their own color\n [`ic-footer-${IcBrandForegroundEnum.Dark}`]:\n foregroundColor === IcBrandForegroundEnum.Dark,\n [`ic-footer-${IcBrandForegroundEnum.Light}`]:\n foregroundColor === IcBrandForegroundEnum.Light,\n }}\n >\n <footer ref={(el) => (this.footerEl = el)}>\n {/ Description /}\n {(isSlotUsed(el, \"description\") \|\| description) && (\n <div class=\"footer-description\">\n <ic-section-container aligned={aligned} fullHeight={true}>\n <div class=\"footer-description-inner\">\n <ic-typography variant=\"body\">\n <slot name=\"description\">{description}</slot>\n </ic-typography>\n </div>\n </ic-section-container>\n </div>\n )}\n\n {/ Links /}\n {isSlotUsed(el, \"link\") && (\n <div class=\"footer-links\">\n {groupLinks && small ? (\n <div class=\"footer-links-inner\" role=\"list\">\n <slot name=\"link\" />\n </div>\n ) : (\n <ic-section-container fullHeight aligned={aligned}>\n <div class=\"footer-links-inner\" role=\"list\">\n <slot name=\"link\" />\n </div>\n </ic-section-container>\n )}\n </div>\n )}\n\n {/ Compliance (logo, caption, copyright) */}\n {showComplianceSection && (\n <div class=\"footer-compliance\">\n <ic-section-container aligned={aligned} fullHeight={true}>\n <div class=\"footer-compliance-inner\">\n {isSlotUsed(el, \"logo\") && (\n <div class=\"footer-logo\">\n <slot name=\"logo\" />\n </div>\n )}\n {(isSlotUsed(el, \"caption\") \|\| caption) && (\n <div class=\"footer-caption\">\n <ic-typography\n variant={\n deviceSize <= IC_DEVICE_SIZES.M ? \"caption\" : \"body\"\n }\n >\n <slot name=\"caption\">{caption}</slot>\n </ic-typography>\n </div>\n )}\n {copyright && (\n <div\n class={{\n [\"footer-copyright\"]: true,\n [\"classification-spacing\"]: hasClassificationBanner(),\n }}\n >\n <ic-typography\n variant={\n deviceSize <= IC_DEVICE_SIZES.M\n ? \"caption-uppercase\"\n : \"label-uppercase\"\n }\n >\n © Crown Copyright\n </ic-typography>\n </div>\n )}\n </div>\n </ic-section-container>\n </div>\n )}\n </footer>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ic-hero.cjs.entry.js CHANGED Viewed

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-f982899d.js');
-const helpers = require('./helpers-eca4c27e.js');
+const index = require('./index-d337cd8a.js');
+const helpers = require('./helpers-08a9ec1c.js');
-const icHeroCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;background-color:var(--ic-brand-color-tertiary);--hero-heading-bottom-margin:var(--ic-space-md);--hero-keyline:var(--ic-hero-keyline)}:host(.ic-hero-dark){background-color:var(--ic-brand-color-secondary);--ic-hero-heading:var(--ic-color-text-primary-light);--ic-hero-body:var(--ic-color-text-primary-light);--ic-hero-secondary-heading:var(--ic-color-text-primary-light);--hero-keyline:var(--ic-brand-text-color)}.heading{--ic-typography-color:var(--ic-hero-heading)}.subheading{--ic-typography-color:var(--ic-hero-body)}.secondary-container{--ic-typography-color:var(--ic-hero-secondary-heading);display:flex;flex-direction:column;justify-content:center;border-left:var(--ic-space-xxxs) solid var(--hero-keyline)}:host(.has-background-image){background-repeat:no-repeat;background-position:right -6.25rem;background-size:auto calc(100% + 6.25rem);box-shadow:var(--ic-elevation-inset)}@media (prefers-reduced-motion){:host(.has-background-image){background-position:right -6.25rem !important}}ic-typography.heading-bottom-spacing{margin-bottom:var(--hero-heading-bottom-margin)}.section-container{display:flex;align-items:center;height:100%}.left-container{padding:var(--ic-space-xl) 0}.left-container:not(.left-container-full-width){flex-basis:50%}.left-container-full-width{width:100%}.right-container{flex-basis:50%}.interaction-container{display:flex;gap:var(--ic-space-md);margin-top:var(--ic-space-lg);flex-wrap:wrap}.secondary-subheading{margin-top:var(--ic-space-xxs)}:host([content-aligned=\"left\"]) .left-container,:host([content-aligned=\"left\"]) .interaction-container{justify-content:flex-start;text-align:left}:host([content-aligned=\"center\"]) .left-container,:host([content-aligned=\"center\"]) .interaction-container{justify-content:center;text-align:center}@media (min-width: 992px){.left-container-full-width{width:66.6%}}@media (min-width: 1044px){:host,.section-container{min-height:13rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:10.813rem}.left-container:not(.left-container-full-width){flex-basis:66.6%}.left-container{min-height:9rem}.right-container{flex-basis:33.3%;margin-left:3.125rem}.secondary-container{min-height:9rem}.secondary-heading,.secondary-subheading{margin-left:3.938rem}}@media (min-width: 801px) and (max-width: 1043px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:5.922rem}.right-container{margin-left:3.125rem}}@media (min-width: 641px) and (max-width: 800px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:2.125rem}.right-container{margin-left:3.125rem}}@media (min-width: 481px) and (max-width: 640px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:13rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:17.5rem}:host(.secondary-heading) .section-container,:host(.ic-hero-small) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}.right-container{margin-bottom:2.5rem}}@media (max-width: 480px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:12rem}:host,.right-container{margin-bottom:var(--ic-space-md)}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:16.5rem}:host(.secondary-heading) .section-container,:host(.ic-hero-small) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}}";
+const icHeroCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;background-color:var(--ic-hero-background);--hero-heading-bottom-margin:var(--ic-space-md);--hero-keyline:var(--ic-hero-keyline)}:host(.ic-hero-dark){background-color:var(--ic-brand-color-secondary);--ic-hero-heading:var(--ic-color-text-primary-light);--ic-hero-body:var(--ic-color-text-primary-light);--ic-hero-secondary-heading:var(--ic-color-text-primary-light);--hero-keyline:var(--ic-brand-text-color)}.heading{--ic-typography-color:var(--ic-hero-heading)}.subheading{--ic-typography-color:var(--ic-hero-body)}.secondary-container{--ic-typography-color:var(--ic-hero-secondary-heading);display:flex;flex-direction:column;justify-content:center;border-left:var(--ic-space-xxxs) solid var(--hero-keyline)}:host(.has-background-image){background-repeat:no-repeat;background-position:right -6.25rem;background-size:auto calc(100% + 6.25rem);box-shadow:var(--ic-elevation-inset)}@media (prefers-reduced-motion){:host(.has-background-image){background-position:right -6.25rem !important}}ic-typography.heading-bottom-spacing{margin-bottom:var(--hero-heading-bottom-margin)}.section-container{display:flex;align-items:center;height:100%}.left-container{padding:var(--ic-space-xl) 0}.left-container:not(.left-container-full-width){flex-basis:50%}.left-container-full-width{width:100%}.right-container{flex-basis:50%}.interaction-container{display:flex;gap:var(--ic-space-md);margin-top:var(--ic-space-lg);flex-wrap:wrap}.secondary-subheading{margin-top:var(--ic-space-xxs)}:host([content-aligned=\"left\"]) .left-container,:host([content-aligned=\"left\"]) .interaction-container{justify-content:flex-start;text-align:left}:host([content-aligned=\"center\"]) .left-container,:host([content-aligned=\"center\"]) .interaction-container{justify-content:center;text-align:center}@media (min-width: 992px){.left-container-full-width{width:66.6%}}@media (min-width: 1044px){:host,.section-container{min-height:13rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:10.813rem}.left-container:not(.left-container-full-width){flex-basis:66.6%}.left-container{min-height:9rem}.right-container{flex-basis:33.3%;margin-left:3.125rem}.secondary-container{min-height:9rem}.secondary-heading,.secondary-subheading{margin-left:3.938rem}}@media (min-width: 801px) and (max-width: 1043px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:5.922rem}.right-container{margin-left:3.125rem}}@media (min-width: 641px) and (max-width: 800px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:2.125rem}.right-container{margin-left:3.125rem}}@media (min-width: 481px) and (max-width: 640px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:13rem}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:17.5rem}:host(.secondary-heading) .section-container,:host(.ic-hero-small) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}.right-container{margin-bottom:2.5rem}}@media (max-width: 480px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:12rem}:host,.right-container{margin-bottom:var(--ic-space-md)}:host(.ic-hero-small),:host(.ic-hero-small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:16.5rem}:host(.secondary-heading) .section-container,:host(.ic-hero-small) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}}";
+const IcHeroStyle0 = icHeroCss;
 const Hero = class {
     constructor(hostRef) {
@@ -13,17 +14,25 @@ const Hero = class {
         this.hostMutationObserver = null;
         this.foregroundColor = helpers.getBrandForegroundAppearance();
         this.rightContent = false;
+        // set by above state
         this.leftContentFullWidth = !this.rightContent && this.secondaryHeading === undefined;
         this.scrollFactor = "right -100px";
+        /**
+         * The alignment of the hero.
+         */
         this.aligned = "left";
-        this.backgroundImage = undefined;
+        /**
+         * The alignment of the hero content.
+         */
         this.contentAligned = "left";
+        /**
+         * If `true`, the background image (if set) will not scroll using a parallax effect.
+         */
         this.disableBackgroundParallax = false;
-        this.heading = undefined;
-        this.secondaryHeading = undefined;
-        this.secondarySubheading = undefined;
+        /**
+         * The size of the hero component.
+         */
         this.size = "medium";
-        this.subheading = undefined;
     }
     disconnectedCallback() {
         var _a;
@@ -47,13 +56,16 @@ const Hero = class {
         this.foregroundColor = ev.detail.mode;
     }
     doScroll() {
+        var _a;
         if (this.disableBackgroundParallax) {
             return;
         }
-        const scrolltotop = document.scrollingElement.scrollTop;
-        const factor = 0.4;
-        const y = -100 + scrolltotop * factor;
-        this.scrollFactor = "right " + y + "px";
+        const scrolltotop = (_a = document.scrollingElement) === null || _a === void 0 ? void 0 : _a.scrollTop;
+        if (scrolltotop) {
+            const factor = 0.4;
+            const y = -100 + scrolltotop * factor;
+            this.scrollFactor = "right " + y + "px";
+        }
     }
     render() {
         const { aligned, size, heading, subheading, secondaryHeading, secondarySubheading, foregroundColor, backgroundImage, scrollFactor, } = this;
@@ -64,21 +76,21 @@ const Hero = class {
                 "background-position": scrollFactor,
             };
         }
-        return (index.h(index.Host, { class: {
+        return (index.h(index.Host, { key: '025f10796ee1f493c75179d3f44291195f8cd7e6', class: {
                 [`ic-hero-${helpers.IcBrandForegroundEnum.Dark}`]: foregroundColor === helpers.IcBrandForegroundEnum.Dark,
                 ["has-background-image"]: backgroundImage !== undefined,
                 ["ic-hero-small"]: size === "small",
                 ["secondary-heading"]: !!secondaryHeading,
-            }, style: style }, index.h("ic-section-container", { aligned: aligned, fullHeight: true, class: "section-container" }, index.h("div", { class: {
+            }, style: style }, index.h("ic-section-container", { key: '03c2a138f992eab49508b2b25bd6cc2e6036ad64', aligned: aligned, fullHeight: true, class: "section-container" }, index.h("div", { key: 'e671ce077bee4fab293ee44de2d19160c82701c1', class: {
                 ["left-container"]: true,
                 ["left-container-full-width"]: this.leftContentFullWidth,
-            } }, index.h("div", { class: "heading" }, index.h("slot", { name: "heading" }, index.h("ic-typography", { variant: size === "small" ? "h2" : "h1", class: {
+            } }, index.h("div", { key: '9fee1b8572cc7b8e99f1be00570fe4d1905cafc2', class: "heading" }, index.h("slot", { key: '72993e1aabdda5ad6db5de27cf89c74d2d254418', name: "heading" }, index.h("ic-typography", { key: 'aa6ad11b1d49fa1fd042a5825a79499ccb0acc95', variant: size === "small" ? "h2" : "h1", class: {
                 ["heading-bottom-spacing"]: size !== "small",
-            } }, index.h("h2", null, heading)))), index.h("div", { class: "subheading" }, index.h("slot", { name: "subheading" }, index.h("ic-typography", { variant: "body" }, subheading))), index.h("div", { class: "interaction-container" }, index.h("slot", { name: "interaction" }))), (helpers.isPropDefined(secondaryHeading) || this.rightContent) && (index.h("div", { class: "right-container" }, index.h("slot", { name: "secondary" }, secondaryHeading && (index.h("div", { class: "secondary-container" }, index.h("div", { class: "secondary-heading" }, index.h("ic-typography", { variant: "h4" }, index.h("h3", null, secondaryHeading))), index.h("div", { class: "secondary-subheading" }, index.h("ic-typography", { variant: "subtitle-small" }, secondarySubheading))))))))));
+            } }, index.h("h2", { key: '773143c28c7d78876d4fc173f0d9ce75cecbb92c' }, heading)))), index.h("div", { key: '1fffa3cb85d2aabc0a06449419e022e210f24eab', class: "subheading" }, index.h("slot", { key: '26d6e2610813f88428885e2e3cc053a0fef0cb63', name: "subheading" }, index.h("ic-typography", { key: 'e6f8449e57333ac57fc6bdf0ff6b99925d2a3b6a', variant: "body" }, subheading))), index.h("div", { key: 'ebc67935aac7acec588706ed956d78147070671c', class: "interaction-container" }, index.h("slot", { key: '9828f858f145eeffa603e93a721f3713b101bc46', name: "interaction" }))), (helpers.isPropDefined(secondaryHeading) || this.rightContent) && (index.h("div", { key: 'bec8bf0ed7853f1cd825a4212ffc96776c39f89e', class: "right-container" }, index.h("slot", { key: '18f0e14732bb293b1b4b6be8d035770872db2064', name: "secondary" }, secondaryHeading && (index.h("div", { key: '798f817bd69f0d3f8d4840c7ae51ce8d7134bdeb', class: "secondary-container" }, index.h("div", { key: 'e4d793df63b1b40b76118d30e0fbf12e1c6ce574', class: "secondary-heading" }, index.h("ic-typography", { key: '3cd81b498b2e8b650b4528a3c337b332068bce07', variant: "h4" }, index.h("h3", { key: '1229f8e36d95d616df293f7159b53352a98aba0b' }, secondaryHeading))), index.h("div", { key: '83921d272c1124759b638d855d1837567bb325d1', class: "secondary-subheading" }, index.h("ic-typography", { key: '47f59d905e74e3bf43648cd97d696138985fe640', variant: "subtitle-small" }, secondarySubheading))))))))));
     }
     get el() { return index.getElement(this); }
 };
-Hero.style = icHeroCss;
+Hero.style = IcHeroStyle0;
 exports.ic_hero = Hero;

package/dist/cjs/ic-hero.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-hero.entry.cjs.js","mappings":"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","names":["getBrandForegroundAppearance","slotHasContent","isSlotUsed","onComponentRequiredPropUndefined","renderDynamicChildSlots","isPropDefined","h","Host","IcBrandForegroundEnum"],"sources":["src/components/ic-hero/ic-hero.css?tag=ic-hero&encapsulation=shadow","src/components/ic-hero/ic-hero.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n background-color: var(--ic-brand-color-tertiary);\n\n --hero-heading-bottom-margin: var(--ic-space-md);\n --hero-keyline: var(--ic-hero-keyline);\n}\n\n:host(.ic-hero-dark) {\n background-color: var(--ic-brand-color-secondary);\n\n --ic-hero-heading: var(--ic-color-text-primary-light);\n --ic-hero-body: var(--ic-color-text-primary-light);\n --ic-hero-secondary-heading: var(--ic-color-text-primary-light);\n --hero-keyline: var(--ic-brand-text-color);\n}\n\n.heading {\n --ic-typography-color: var(--ic-hero-heading);\n}\n\n.subheading {\n --ic-typography-color: var(--ic-hero-body);\n}\n\n.secondary-container {\n --ic-typography-color: var(--ic-hero-secondary-heading);\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n border-left: var(--ic-space-xxxs) solid var(--hero-keyline);\n}\n\n:host(.has-background-image) {\n background-repeat: no-repeat;\n background-position: right -6.25rem;\n background-size: auto calc(100% + 6.25rem);\n box-shadow: var(--ic-elevation-inset);\n}\n\n@media (prefers-reduced-motion) {\n :host(.has-background-image) {\n background-position: right -6.25rem !important;\n }\n}\n\nic-typography.heading-bottom-spacing {\n margin-bottom: var(--hero-heading-bottom-margin);\n}\n\n.section-container {\n display: flex;\n align-items: center;\n height: 100%;\n}\n\n.left-container {\n padding: var(--ic-space-xl) 0;\n}\n\n.left-container:not(.left-container-full-width) {\n flex-basis: 50%;\n}\n\n.left-container-full-width {\n width: 100%;\n}\n\n.right-container {\n flex-basis: 50%;\n}\n\n.interaction-container {\n display: flex;\n gap: var(--ic-space-md);\n margin-top: var(--ic-space-lg);\n flex-wrap: wrap;\n}\n\n.secondary-subheading {\n margin-top: var(--ic-space-xxs);\n}\n\n:host([content-aligned=\"left\"]) .left-container,\n:host([content-aligned=\"left\"]) .interaction-container {\n justify-content: flex-start;\n text-align: left;\n}\n\n:host([content-aligned=\"center\"]) .left-container,\n:host([content-aligned=\"center\"]) .interaction-container {\n justify-content: center;\n text-align: center;\n}\n\n@media (min-width: 992px) {\n .left-container-full-width {\n width: 66.6%;\n }\n}\n\n@media (min-width: 1044px) {\n :host,\n .section-container {\n min-height: 13rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 10.813rem;\n }\n\n .left-container:not(.left-container-full-width) {\n flex-basis: 66.6%;\n }\n\n .left-container {\n min-height: 9rem;\n }\n\n .right-container {\n flex-basis: 33.3%;\n margin-left: 3.125rem;\n }\n\n .secondary-container {\n min-height: 9rem;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 3.938rem;\n }\n}\n\n@media (min-width: 801px) and (max-width: 1043px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 16rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 15rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 14rem;\n }\n\n .left-container {\n min-height: 10rem;\n }\n\n .secondary-container {\n min-height: 10rem;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 5.922rem;\n }\n\n .right-container {\n margin-left: 3.125rem;\n }\n}\n\n@media (min-width: 641px) and (max-width: 800px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 16rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 15rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 14rem;\n }\n\n .left-container {\n min-height: 10rem;\n }\n\n .secondary-container {\n min-height: 10rem;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 2.125rem;\n }\n\n .right-container {\n margin-left: 3.125rem;\n }\n}\n\n@media (min-width: 481px) and (max-width: 640px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 13rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 10.813rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 17.5rem;\n }\n\n :host(.secondary-heading) .section-container,\n :host(.ic-hero-small) .section-container,\n .section-container {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .left-container {\n height: fit-content;\n }\n\n .secondary-container {\n height: fit-content;\n border: none;\n }\n\n .right-container {\n margin-bottom: 2.5rem;\n }\n}\n\n@media (max-width: 480px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 12rem;\n }\n\n :host,\n .right-container {\n margin-bottom: var(--ic-space-md);\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 10.813rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 16.5rem;\n }\n\n :host(.secondary-heading) .section-container,\n :host(.ic-hero-small) .section-container,\n .section-container {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .left-container {\n height: fit-content;\n }\n\n .secondary-container {\n height: fit-content;\n border: none;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Listen,\n} from \"@stencil/core\";\nimport {\n IcAlignment,\n IcSizesNoLarge,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n} from \"../../utils/types\";\nimport {\n slotHasContent,\n getBrandForegroundAppearance,\n onComponentRequiredPropUndefined,\n isPropDefined,\n isSlotUsed,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/*\n @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n /\n\n@Component({\n tag: \"ic-hero\",\n styleUrl: \"ic-hero.css\",\n shadow: true,\n})\nexport class Hero {\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcHeroElement;\n\n @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n @State() rightContent: boolean = false;\n // set by above state\n @State() leftContentFullWidth: boolean =\n !this.rightContent && this.secondaryHeading === undefined;\n @State() scrollFactor: string = \"right -100px\";\n\n /\n The alignment of the hero.\n /\n @Prop() aligned: IcAlignment = \"left\";\n\n /\n The optional background image.\n /\n @Prop() backgroundImage?: string;\n\n /\n The alignment of the hero content.\n /\n @Prop() contentAligned: IcHeroContentAlignments = \"left\";\n\n /\n If `true`, the background image (if set) will not scroll using a parallax effect.\n /\n @Prop() disableBackgroundParallax?: boolean = false;\n\n /\n The heading of the hero. An <h2> level heading.\n /\n @Prop() heading: string;\n\n /\n The optional secondary heading, an <h3> level heading. Replaced by slotted right content.\n /\n @Prop() secondaryHeading?: string;\n\n /\n The optional secondary subheading, replaced by slotted right content.\n /\n @Prop() secondarySubheading?: string;\n\n /\n The size of the hero component.\n /\n @Prop() size?: IcSizesNoLarge = \"medium\";\n\n /\n The description for the hero.\n /\n @Prop() subheading?: string;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n this.rightContent = slotHasContent(this.el, \"secondary\");\n }\n\n componentDidLoad(): void {\n !isSlotUsed(this.el, \"heading\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Hero\"\n );\n\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, \"secondary\", this)\n );\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n componentWillRender(): void {\n this.rightContent = slotHasContent(this.el, \"secondary\");\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n this.foregroundColor = ev.detail.mode;\n }\n\n @Listen(\"scroll\", { target: \"document\" })\n doScroll(): void {\n if (this.disableBackgroundParallax) {\n return;\n }\n\n const scrolltotop = document.scrollingElement.scrollTop;\n const factor = 0.4;\n const y = -100 + scrolltotop factor;\n this.scrollFactor = \"right \" + y + \"px\";\n }\n\n render() {\n const {\n aligned,\n size,\n heading,\n subheading,\n secondaryHeading,\n secondarySubheading,\n foregroundColor,\n backgroundImage,\n scrollFactor,\n } = this;\n\n let style = {};\n\n if (isPropDefined(backgroundImage)) {\n style = {\n \"background-image\": \"url(\" + backgroundImage + \")\",\n \"background-position\": scrollFactor,\n };\n }\n\n return (\n <Host\n class={{\n [`ic-hero-${IcBrandForegroundEnum.Dark}`]:\n foregroundColor === IcBrandForegroundEnum.Dark,\n [\"has-background-image\"]: backgroundImage !== undefined,\n [\"ic-hero-small\"]: size === \"small\",\n [\"secondary-heading\"]: !!secondaryHeading,\n }}\n style={style}\n >\n <ic-section-container\n aligned={aligned}\n fullHeight\n class=\"section-container\"\n >\n <div\n class={{\n [\"left-container\"]: true,\n [\"left-container-full-width\"]: this.leftContentFullWidth,\n }}\n >\n <div class=\"heading\">\n <slot name=\"heading\">\n <ic-typography\n variant={size === \"small\" ? \"h2\" : \"h1\"}\n class={{\n [\"heading-bottom-spacing\"]: size !== \"small\",\n }}\n >\n <h2>{heading}</h2>\n </ic-typography>\n </slot>\n </div>\n <div class=\"subheading\">\n <slot name=\"subheading\">\n <ic-typography variant=\"body\">{subheading}</ic-typography>\n </slot>\n </div>\n <div class=\"interaction-container\">\n <slot name=\"interaction\"></slot>\n </div>\n </div>\n {(isPropDefined(secondaryHeading) \|\| this.rightContent) && (\n <div class=\"right-container\">\n <slot name=\"secondary\">\n {secondaryHeading && (\n <div class=\"secondary-container\">\n <div class=\"secondary-heading\">\n <ic-typography variant=\"h4\">\n <h3>{secondaryHeading}</h3>\n </ic-typography>\n </div>\n <div class=\"secondary-subheading\">\n <ic-typography variant=\"subtitle-small\">\n {secondarySubheading}\n </ic-typography>\n </div>\n </div>\n )}\n </slot>\n </div>\n )}\n </ic-section-container>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-hero.entry.cjs.js","mappings":"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","names":["getBrandForegroundAppearance","slotHasContent","isSlotUsed","onComponentRequiredPropUndefined","renderDynamicChildSlots","isPropDefined","h","Host","IcBrandForegroundEnum"],"sources":["src/components/ic-hero/ic-hero.css?tag=ic-hero&encapsulation=shadow","src/components/ic-hero/ic-hero.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n background-color: var(--ic-hero-background);\n\n --hero-heading-bottom-margin: var(--ic-space-md);\n --hero-keyline: var(--ic-hero-keyline);\n}\n\n:host(.ic-hero-dark) {\n background-color: var(--ic-brand-color-secondary);\n\n --ic-hero-heading: var(--ic-color-text-primary-light);\n --ic-hero-body: var(--ic-color-text-primary-light);\n --ic-hero-secondary-heading: var(--ic-color-text-primary-light);\n --hero-keyline: var(--ic-brand-text-color);\n}\n\n.heading {\n --ic-typography-color: var(--ic-hero-heading);\n}\n\n.subheading {\n --ic-typography-color: var(--ic-hero-body);\n}\n\n.secondary-container {\n --ic-typography-color: var(--ic-hero-secondary-heading);\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n border-left: var(--ic-space-xxxs) solid var(--hero-keyline);\n}\n\n:host(.has-background-image) {\n background-repeat: no-repeat;\n background-position: right -6.25rem;\n background-size: auto calc(100% + 6.25rem);\n box-shadow: var(--ic-elevation-inset);\n}\n\n@media (prefers-reduced-motion) {\n :host(.has-background-image) {\n background-position: right -6.25rem !important;\n }\n}\n\nic-typography.heading-bottom-spacing {\n margin-bottom: var(--hero-heading-bottom-margin);\n}\n\n.section-container {\n display: flex;\n align-items: center;\n height: 100%;\n}\n\n.left-container {\n padding: var(--ic-space-xl) 0;\n}\n\n.left-container:not(.left-container-full-width) {\n flex-basis: 50%;\n}\n\n.left-container-full-width {\n width: 100%;\n}\n\n.right-container {\n flex-basis: 50%;\n}\n\n.interaction-container {\n display: flex;\n gap: var(--ic-space-md);\n margin-top: var(--ic-space-lg);\n flex-wrap: wrap;\n}\n\n.secondary-subheading {\n margin-top: var(--ic-space-xxs);\n}\n\n:host([content-aligned=\"left\"]) .left-container,\n:host([content-aligned=\"left\"]) .interaction-container {\n justify-content: flex-start;\n text-align: left;\n}\n\n:host([content-aligned=\"center\"]) .left-container,\n:host([content-aligned=\"center\"]) .interaction-container {\n justify-content: center;\n text-align: center;\n}\n\n@media (min-width: 992px) {\n .left-container-full-width {\n width: 66.6%;\n }\n}\n\n@media (min-width: 1044px) {\n :host,\n .section-container {\n min-height: 13rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 10.813rem;\n }\n\n .left-container:not(.left-container-full-width) {\n flex-basis: 66.6%;\n }\n\n .left-container {\n min-height: 9rem;\n }\n\n .right-container {\n flex-basis: 33.3%;\n margin-left: 3.125rem;\n }\n\n .secondary-container {\n min-height: 9rem;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 3.938rem;\n }\n}\n\n@media (min-width: 801px) and (max-width: 1043px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 16rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 15rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 14rem;\n }\n\n .left-container {\n min-height: 10rem;\n }\n\n .secondary-container {\n min-height: 10rem;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 5.922rem;\n }\n\n .right-container {\n margin-left: 3.125rem;\n }\n}\n\n@media (min-width: 641px) and (max-width: 800px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 16rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 15rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 14rem;\n }\n\n .left-container {\n min-height: 10rem;\n }\n\n .secondary-container {\n min-height: 10rem;\n }\n\n .secondary-heading,\n .secondary-subheading {\n margin-left: 2.125rem;\n }\n\n .right-container {\n margin-left: 3.125rem;\n }\n}\n\n@media (min-width: 481px) and (max-width: 640px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 13rem;\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 10.813rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 17.5rem;\n }\n\n :host(.secondary-heading) .section-container,\n :host(.ic-hero-small) .section-container,\n .section-container {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .left-container {\n height: fit-content;\n }\n\n .secondary-container {\n height: fit-content;\n border: none;\n }\n\n .right-container {\n margin-bottom: 2.5rem;\n }\n}\n\n@media (max-width: 480px) {\n :host(.has-background-image) {\n background-image: none !important;\n }\n\n :host,\n .section-container {\n min-height: 12rem;\n }\n\n :host,\n .right-container {\n margin-bottom: var(--ic-space-md);\n }\n\n :host(.ic-hero-small),\n :host(.ic-hero-small) .section-container {\n min-height: 10.813rem;\n }\n\n :host(.secondary-heading),\n :host(.secondary-heading) .section-container {\n min-height: 16.5rem;\n }\n\n :host(.secondary-heading) .section-container,\n :host(.ic-hero-small) .section-container,\n .section-container {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .left-container {\n height: fit-content;\n }\n\n .secondary-container {\n height: fit-content;\n border: none;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Listen,\n} from \"@stencil/core\";\nimport {\n IcAlignment,\n IcSizesNoLarge,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n} from \"../../utils/types\";\nimport {\n slotHasContent,\n getBrandForegroundAppearance,\n onComponentRequiredPropUndefined,\n isPropDefined,\n isSlotUsed,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/*\n @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n /\n\n@Component({\n tag: \"ic-hero\",\n styleUrl: \"ic-hero.css\",\n shadow: true,\n})\nexport class Hero {\n private hostMutationObserver: MutationObserver \| null = null;\n\n @Element() el: HTMLIcHeroElement;\n\n @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n @State() rightContent: boolean = false;\n // set by above state\n @State() leftContentFullWidth: boolean =\n !this.rightContent && this.secondaryHeading === undefined;\n @State() scrollFactor: string = \"right -100px\";\n\n /\n The alignment of the hero.\n /\n @Prop() aligned?: IcAlignment = \"left\";\n\n /\n The optional background image.\n /\n @Prop() backgroundImage?: string;\n\n /\n The alignment of the hero content.\n /\n @Prop() contentAligned?: IcHeroContentAlignments = \"left\";\n\n /\n If `true`, the background image (if set) will not scroll using a parallax effect.\n /\n @Prop() disableBackgroundParallax?: boolean = false;\n\n /\n The heading of the hero. An <h2> level heading.\n /\n @Prop() heading?: string;\n\n /\n The optional secondary heading, an <h3> level heading. Replaced by slotted right content.\n /\n @Prop() secondaryHeading?: string;\n\n /\n The optional secondary subheading, replaced by slotted right content.\n /\n @Prop() secondarySubheading?: string;\n\n /\n The size of the hero component.\n /\n @Prop() size?: IcSizesNoLarge = \"medium\";\n\n /\n The description for the hero.\n /\n @Prop() subheading?: string;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n this.rightContent = slotHasContent(this.el, \"secondary\");\n }\n\n componentDidLoad(): void {\n !isSlotUsed(this.el, \"heading\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Hero\"\n );\n\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, \"secondary\", this)\n );\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n componentWillRender(): void {\n this.rightContent = slotHasContent(this.el, \"secondary\");\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n this.foregroundColor = ev.detail.mode;\n }\n\n @Listen(\"scroll\", { target: \"document\" })\n doScroll(): void {\n if (this.disableBackgroundParallax) {\n return;\n }\n\n const scrolltotop = document.scrollingElement?.scrollTop;\n if (scrolltotop) {\n const factor = 0.4;\n const y = -100 + scrolltotop factor;\n this.scrollFactor = \"right \" + y + \"px\";\n }\n }\n\n render() {\n const {\n aligned,\n size,\n heading,\n subheading,\n secondaryHeading,\n secondarySubheading,\n foregroundColor,\n backgroundImage,\n scrollFactor,\n } = this;\n\n let style = {};\n\n if (isPropDefined(backgroundImage)) {\n style = {\n \"background-image\": \"url(\" + backgroundImage + \")\",\n \"background-position\": scrollFactor,\n };\n }\n\n return (\n <Host\n class={{\n [`ic-hero-${IcBrandForegroundEnum.Dark}`]:\n foregroundColor === IcBrandForegroundEnum.Dark,\n [\"has-background-image\"]: backgroundImage !== undefined,\n [\"ic-hero-small\"]: size === \"small\",\n [\"secondary-heading\"]: !!secondaryHeading,\n }}\n style={style}\n >\n <ic-section-container\n aligned={aligned}\n fullHeight\n class=\"section-container\"\n >\n <div\n class={{\n [\"left-container\"]: true,\n [\"left-container-full-width\"]: this.leftContentFullWidth,\n }}\n >\n <div class=\"heading\">\n <slot name=\"heading\">\n <ic-typography\n variant={size === \"small\" ? \"h2\" : \"h1\"}\n class={{\n [\"heading-bottom-spacing\"]: size !== \"small\",\n }}\n >\n <h2>{heading}</h2>\n </ic-typography>\n </slot>\n </div>\n <div class=\"subheading\">\n <slot name=\"subheading\">\n <ic-typography variant=\"body\">{subheading}</ic-typography>\n </slot>\n </div>\n <div class=\"interaction-container\">\n <slot name=\"interaction\"></slot>\n </div>\n </div>\n {(isPropDefined(secondaryHeading) \|\| this.rightContent) && (\n <div class=\"right-container\">\n <slot name=\"secondary\">\n {secondaryHeading && (\n <div class=\"secondary-container\">\n <div class=\"secondary-heading\">\n <ic-typography variant=\"h4\">\n <h3>{secondaryHeading}</h3>\n </ic-typography>\n </div>\n <div class=\"secondary-subheading\">\n <ic-typography variant=\"subtitle-small\">\n {secondarySubheading}\n </ic-typography>\n </div>\n </div>\n )}\n </slot>\n </div>\n )}\n </ic-section-container>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ic-horizontal-scroll.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-f982899d.js');
-const helpers = require('./helpers-eca4c27e.js');
+const index = require('./index-d337cd8a.js');
+const helpers = require('./helpers-08a9ec1c.js');
 const LeftArrow = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
   <path d="M13.0875 6.175L11.9125 5L6.91251 10L11.9125 15L13.0875 13.825L9.27084 10L13.0875 6.175Z"/>
@@ -14,12 +14,30 @@ const RightArrow = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="2
 </svg>`;
 const icHorizontalScrollCss = "/*! 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{--border-bottom-color:var(--ic-architectural-300);--splitter-color:var(--ic-architectural-100);display:flex;max-width:100%}:host(.ic-horizontal-scroll-light){--splitter-color:var(--ic-color-keyline-lighten)}:host(.ic-horizontal-scroll-dark){--splitter-color:var(--ic-color-keyline-darken)}::slotted(*){overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;margin:calc(var(--ic-space-xs) * -1) !important;padding:var(--ic-space-xs) !important}:host(.ic-horizontal-scroll-visible) ::slotted(*){margin:calc(var(--ic-space-xs) * -1) 0 !important;padding:var(--ic-space-xs) !important}.tabs-container::-webkit-scrollbar{display:none}.scroll-container-left,.scroll-container-right{display:flex}.scroll-container-left{margin-left:var(--ic-space-xxs)}.scroll-container-right{margin-right:var(--ic-space-xxs)}.hidden{display:none}.scroll-arrow{margin:var(--ic-space-xxs) 0}.disabled .ic-tooltip-container{display:none !important}.scroll-splitter-left,.scroll-splitter-right{display:flex;height:var(--ic-space-lg);width:var(--ic-space-1px);margin-top:var(--ic-space-xs);border-radius:var(--ic-space-1px);background-color:var(--splitter-color)}.scroll-splitter-left{margin-left:calc(var(--ic-space-xxs) - var(--ic-space-1px))}.scroll-splitter-right{margin-right:calc(var(--ic-space-xxs) - var(--ic-space-1px))}.disabled .scroll-splitter-left,.disabled .scroll-splitter-right{background-color:transparent}:host(.ic-horizontal-scroll-dark) .disabled ic-button>svg,:host(.ic-horizontal-scroll-light) .disabled ic-button>svg{color:var(--splitter-color) !important}";
+const IcHorizontalScrollStyle0 = icHorizontalScrollCss;
 const SCROLL_DELAY_MS = 200;
 const HorizontalScroll = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.buttonStateSet = false;
+        this.firstItemVisible = true;
+        this.itemOverflow = false;
+        this.lastItemVisible = false;
+        /**
+         * The appearance of the horizontal scroll, e.g. dark, light or the default.
+         */
+        this.appearance = "default";
+        /** @internal Determines whether black variant of the tabs should be displayed. */
+        this.monochrome = false;
+        /**
+         * @internal  Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
+        /**
+         * @internal The name of the event that triggers focus handler logic.
+         */
+        this.focusTrigger = "focus";
         this.focusHandler = (event) => {
             this.itemFocusHandler(Array.from(this.items).indexOf(event.target));
         };
@@ -88,13 +106,6 @@ const HorizontalScroll = class {
             }
             this.buttonStateSet = false;
         };
-        this.firstItemVisible = true;
-        this.itemOverflow = false;
-        this.lastItemVisible = false;
-        this.appearance = "default";
-        this.monochrome = false;
-        this.theme = "inherit";
-        this.focusTrigger = "focus";
     }
     componentWillLoad() {
         this.itemsContainerEl = this.el.children[0];
@@ -107,6 +118,7 @@ const HorizontalScroll = class {
         });
     }
     componentDidLoad() {
+        var _a;
         let runningTotal = 0;
         this.itemOffsets = this.items.map((item) => {
             runningTotal += item.offsetWidth;
@@ -116,26 +128,26 @@ const HorizontalScroll = class {
         // Add event listener to scroll containers as mouse events are not fired on disabled elements (ic-button's <button>)
         // 'mouseleave' needed in case the user moves their mouse while holding the arrow buttons
         // - 'mouseup' otherwise not detected and scrolling not stopped
-        const scrollArrows = Array.from(this.el.shadowRoot.querySelectorAll("div"));
+        const scrollArrows = Array.from(((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("div")) || []);
         ["mouseup", "mouseleave"].forEach((event) => {
             scrollArrows.forEach((arrow) => arrow.addEventListener(event, this.arrowMouseUpHandler));
         });
     }
     disconnectedCallback() {
-        var _a, _b;
+        var _a, _b, _c;
         if (this.resizeObserver !== undefined) {
             this.resizeObserver.disconnect();
         }
-        const scrollArrows = Array.from(this.el.shadowRoot.querySelectorAll("div"));
+        const scrollArrows = Array.from(((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("div")) || []);
         ["mouseup", "mouseleave"].forEach((event) => {
             scrollArrows.forEach((arrow) => arrow.removeEventListener(event, this.arrowMouseUpHandler));
         });
-        (_a = this.items) === null || _a === void 0 ? void 0 : _a.forEach((item) => {
+        (_b = this.items) === null || _b === void 0 ? void 0 : _b.forEach((item) => {
             if (item.removeEventListener) {
                 item.removeEventListener(this.focusTrigger, this.focusHandler);
             }
         });
-        (_b = this.itemsContainerEl) === null || _b === void 0 ? void 0 : _b.removeEventListener("scroll", this.scrollHandler);
+        (_c = this.itemsContainerEl) === null || _c === void 0 ? void 0 : _c.removeEventListener("scroll", this.scrollHandler);
     }
     /**
      * @internal if side scrolling enabled, scrolls the specified item into view.
@@ -156,28 +168,28 @@ const HorizontalScroll = class {
     }
     render() {
         const { firstItemVisible, lastItemVisible, itemOverflow } = this;
-        return (index.h(index.Host, { class: {
+        return (index.h(index.Host, { key: '66144a5088edf38f0c3ed6f7778d636c15ffe8cb', class: {
                 ["ic-horizontal-scroll-visible"]: itemOverflow,
                 ["ic-horizontal-scroll-dark"]: this.appearance === helpers.IcBrandForegroundEnum.Dark,
                 ["ic-horizontal-scroll-light"]: this.appearance === helpers.IcBrandForegroundEnum.Light,
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, index.h("div", { "aria-hidden": "true", class: {
+            } }, index.h("div", { key: '905ca2842a4d4de15c8a9c7cae4a9feceaa99e28', "aria-hidden": "true", class: {
                 ["scroll-container-left"]: true,
                 ["hidden"]: !itemOverflow,
                 ["disabled"]: firstItemVisible,
-            }, role: "tab" }, index.h("ic-button", { class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll left", theme: this.theme === "light" || this.theme === "inherit"
+            }, role: "tab" }, index.h("ic-button", { key: '4f395c74ccd5bebef7263448761959d9bd8aedf0', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll left", theme: this.theme === "light" || this.theme === "inherit"
                 ? "dark"
-                : "light", monochrome: this.monochrome, innerHTML: LeftArrow, disabled: firstItemVisible, tabindex: "-1", onClick: this.scrollLeft, onMouseDown: this.leftArrowMouseDownHandler }), index.h("span", { class: "scroll-splitter-left" })), index.h("slot", null), index.h("div", { "aria-hidden": "true", class: {
+                : "light", monochrome: this.monochrome, innerHTML: LeftArrow, disabled: firstItemVisible, tabindex: "-1", onClick: this.scrollLeft, onMouseDown: this.leftArrowMouseDownHandler }), index.h("span", { key: 'b40a0bac23d87acf17880e488d93a2df6cb6ab39', class: "scroll-splitter-left" })), index.h("slot", { key: 'c99b76e7ff9b22b340bdefbd018db4a3f7d88307' }), index.h("div", { key: '9db134cc1449592ebc34d22999ab7d030464fc6f', "aria-hidden": "true", class: {
                 ["scroll-container-right"]: true,
                 ["hidden"]: !itemOverflow,
                 ["disabled"]: lastItemVisible,
-            }, role: "tab" }, index.h("span", { class: "scroll-splitter-right" }), index.h("ic-button", { class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll right", theme: this.theme === "light" || this.theme === "inherit"
+            }, role: "tab" }, index.h("span", { key: '552499a981a450ba3e75f498ba5a01b134f5252d', class: "scroll-splitter-right" }), index.h("ic-button", { key: '8eba5e488232737d3ccb61ee07e84c0fcaf511d7', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll right", theme: this.theme === "light" || this.theme === "inherit"
                 ? "dark"
                 : "light", monochrome: this.monochrome, innerHTML: RightArrow, disabled: lastItemVisible, tabindex: "-1", onClick: this.scrollRight, onMouseDown: this.rightArrowMouseDownHandler }))));
     }
     get el() { return index.getElement(this); }
 };
-HorizontalScroll.style = icHorizontalScrollCss;
+HorizontalScroll.style = IcHorizontalScrollStyle0;
 exports.ic_horizontal_scroll = HorizontalScroll;