@ukic/web-components 2.8.0 → 2.10.0

package/dist/cjs/ic-card.cjs.entry.js

@@ -2,122 +2,122 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4f8c900f.js');
-const helpers = require('./helpers-0d63359f.js');
-const types = require('./types-7d67439f.js');
+const index = require('./index-152d1fe5.js');
+const helpers = require('./helpers-3f91f63a.js');
+const types = require('./types-dc22e301.js');
 const chevronIcon = require('./chevron-icon-3bf07531.js');
 
 const icCardCss = "/*! 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:flex}a{text-decoration:none !important;color:var(--ic-architechtural-black) !important}button{border:none;background-color:transparent;outline:var(--ic-hc-focus-outline)}.card,.card.clickable{display:flex;flex-direction:column;border:var(--ic-border-default);border-radius:var(--ic-border-radius);box-sizing:border-box;padding:var(--ic-space-md);text-align:left;color:var(--ic-architechtural-black);transition:var(--ic-easing-transition-fast);width:inherit;position:relative}.dark.card,.dark.card.clickable{border:var(--ic-border-width) solid var(--ic-architectural-700)}.card.clickable:hover{background-color:var(--ic-action-default-bg-hover);border:var(--ic-border-hover);cursor:pointer}.card.clickable:focus,.card.clickable.focussed{background-color:var(--ic-action-default-bg-hover);box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);border:var(--ic-border-pressed)}.card.clickable:active{background-color:var(--ic-action-default-bg-active);box-shadow:var(--ic-border-focus)}.card.disabled{border:var(--ic-border-disabled)}.card.fullwidth{width:100%}.card-header{display:flex;align-items:center}.icon{display:flex;align-items:center;padding-right:var(--ic-space-xs)}.card.disabled ::slotted(svg){fill:var(--ic-color-tertiary-text)}.card.clickable .card-title{color:var(--ic-hyperlink);text-decoration:underline;text-decoration-thickness:var(--ic-space-1px)}.card.clickable:hover .card-title,.card.clickable:focus .card-title,.card.clickable.focussed .card-title{display:inline-block;border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none}@supports (text-decoration-thickness: 25%){.card.clickable:hover .card-title,.card.clickable:focus .card-title,.card.clickable.focussed .card-title{text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%;border-bottom:0 !important;margin-bottom:0 !important}}.card.clickable:active .card-title{text-decoration:none}.card.disabled .card-title{text-decoration:underline;text-decoration-thickness:var(--ic-space-1px);text-decoration-color:var(--ic-color-tertiary-text);color:var(--ic-color-tertiary-text)}.subheading{margin-top:var(--ic-space-xxs)}.adornment{margin-top:var(--ic-space-xxs)}.card-message{margin-top:var(--ic-space-md);align-items:left}.card.disabled .card-message,.card.disabled .subheading{color:var(--ic-color-tertiary-text)}.interaction-button{margin-left:auto}.image-top{margin-bottom:var(--ic-space-md);display:flex;justify-content:center}.image-mid{margin-top:var(--ic-space-md);display:flex;justify-content:center}.interaction-area{display:flex;flex-grow:1;gap:var(--ic-space-md);margin-top:var(--ic-space-md);align-items:flex-end}.interaction-controls{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ic-space-sm)}.toggle-button{margin-left:auto}.toggle-button-closed svg{transform:rotate(90deg)}.toggle-button-expanded svg{transform:rotate(-90deg)}.expanded-content{margin-top:var(--ic-space-md)}@media (forced-colors: active){.card ::slotted(svg){fill:currentcolor}.card.disabled ::slotted(svg){fill:GrayText !important}.card.disabled{border-color:GrayText !important}.card.disabled .card-message,.card.disabled .subheading,.card.disabled .card-title{color:GrayText}}";
 
 const Card = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.parentFocussed = () => {
-      this.isFocussed = true;
-    };
-    this.parentBlurred = () => {
-      this.isFocussed = false;
-    };
-    this.toggleExpanded = () => {
-      this.areaExpanded = !this.areaExpanded;
-    };
-    this.appearance = "default";
-    this.areaExpanded = false;
-    this.isFocussed = false;
-    this.parentEl = null;
-    this.parentIsAnchorTag = false;
-    this.clickable = false;
-    this.disabled = false;
-    this.expandable = false;
-    this.fullWidth = false;
-    this.heading = undefined;
-    this.href = undefined;
-    this.hreflang = "";
-    this.message = "";
-    this.referrerpolicy = undefined;
-    this.rel = undefined;
-    this.subheading = undefined;
-    this.target = undefined;
-  }
-  disconnectedCallback() {
-    if (this.parentIsAnchorTag) {
-      this.parentEl.removeEventListener("focus", this.parentFocussed);
-      this.parentEl.removeEventListener("blur", this.parentBlurred);
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.parentFocussed = () => {
+            this.isFocussed = true;
+        };
+        this.parentBlurred = () => {
+            this.isFocussed = false;
+        };
+        this.toggleExpanded = () => {
+            this.areaExpanded = !this.areaExpanded;
+        };
+        this.appearance = "default";
+        this.areaExpanded = false;
+        this.isFocussed = false;
+        this.parentEl = null;
+        this.parentIsAnchorTag = false;
+        this.clickable = false;
+        this.disabled = false;
+        this.expandable = false;
+        this.fullWidth = false;
+        this.heading = undefined;
+        this.href = undefined;
+        this.hreflang = "";
+        this.message = "";
+        this.referrerpolicy = undefined;
+        this.rel = undefined;
+        this.subheading = undefined;
+        this.target = undefined;
     }
-  }
-  componentWillLoad() {
-    this.parentEl = this.el.parentElement;
-    if (this.parentEl.tagName === "A") {
-      this.clickable = true;
-      this.parentIsAnchorTag = true;
-      this.parentEl.classList.add("ic-card-wrapper-link");
-      this.parentEl.addEventListener("focus", this.parentFocussed);
-      this.parentEl.addEventListener("blur", this.parentBlurred);
+    disconnectedCallback() {
+        if (this.parentIsAnchorTag) {
+            this.parentEl.removeEventListener("focus", this.parentFocussed);
+            this.parentEl.removeEventListener("blur", this.parentBlurred);
+        }
     }
-    helpers.removeDisabledFalse(this.disabled, this.el);
-  }
-  componentDidLoad() {
-    helpers.onComponentRequiredPropUndefined([{ prop: this.heading, propName: "heading" }], "Card");
-    this.updateTheme();
-  }
-  handleHostClick(event) {
-    if (this.disabled) {
-      event.stopImmediatePropagation();
+    componentWillLoad() {
+        this.parentEl = this.el.parentElement;
+        if (this.parentEl.tagName === "A") {
+            this.clickable = true;
+            this.parentIsAnchorTag = true;
+            this.parentEl.classList.add("ic-card-wrapper-link");
+            this.parentEl.addEventListener("focus", this.parentFocussed);
+            this.parentEl.addEventListener("blur", this.parentBlurred);
+        }
+        helpers.removeDisabledFalse(this.disabled, this.el);
     }
-  }
-  themeChangeHandler(ev) {
-    const theme = ev.detail;
-    this.updateTheme(theme.mode);
-  }
-  /**
-   * Sets focus on the card.
-   */
-  async setFocus() {
-    if (this.el.shadowRoot.querySelector("a")) {
-      this.el.shadowRoot.querySelector("a").focus();
+    componentDidLoad() {
+        helpers.onComponentRequiredPropUndefined([{ prop: this.heading, propName: "heading" }], "Card");
+        this.updateTheme();
     }
-    else if (this.el.shadowRoot.querySelector("button")) {
-      this.el.shadowRoot.querySelector("button").focus();
+    handleHostClick(event) {
+        if (this.disabled) {
+            event.stopImmediatePropagation();
+        }
     }
-  }
-  updateTheme(newTheme = null) {
-    const foregroundColor = helpers.getThemeFromContext(this.el, newTheme || null);
-    if (foregroundColor !== types.IcThemeForegroundEnum.Default) {
-      this.appearance = foregroundColor;
+    themeChangeHandler(ev) {
+        const theme = ev.detail;
+        this.updateTheme(theme.mode);
     }
-  }
-  render() {
-    const { clickable, disabled, expandable, heading, message, href, hreflang, referrerpolicy, rel, subheading, target, fullWidth, parentIsAnchorTag, isFocussed, } = this;
-    const Component = parentIsAnchorTag
-      ? "div"
-      : clickable
-        ? this.href === undefined
-          ? "button"
-          : "a"
-        : "div";
-    const attrs = Component == "a" && {
-      href: href,
-      hrefLang: hreflang,
-      referrerPolicy: referrerpolicy,
-      rel: rel,
-      target: target,
-    };
-    return (index.h(Component, Object.assign({ class: {
-        ["card"]: true,
-        ["clickable"]: clickable && !disabled,
-        ["disabled"]: disabled,
-        ["fullwidth"]: fullWidth,
-        ["focussed"]: isFocussed,
-        ["dark"]: this.appearance === types.IcThemeForegroundEnum.Dark,
-      }, tabindex: clickable && !parentIsAnchorTag ? 0 : null, "aria-disabled": disabled ? "true" : null, disabled: disabled ? true : null }, attrs), helpers.isSlotUsed(this.el, "image-top") && (index.h("div", { class: "image-top" }, index.h("slot", { name: "image-top" }))), index.h("div", { class: "card-header" }, helpers.isSlotUsed(this.el, "icon") && (index.h("div", { class: "icon" }, index.h("slot", { name: "icon" }))), index.h("div", { class: "card-title" }, index.h("slot", { name: "heading" }, index.h("ic-typography", { variant: "h4" }, index.h("p", null, heading)))), helpers.isSlotUsed(this.el, "interaction-button") && (index.h("div", { class: "interaction-button" }, index.h("slot", { name: "interaction-button" })))), (subheading || helpers.isSlotUsed(this.el, "subheading")) && (index.h("div", { class: "subheading" }, index.h("slot", { name: "subheading" }, index.h("ic-typography", { variant: "subtitle-small" }, subheading)))), helpers.isSlotUsed(this.el, "adornment") && (index.h("div", { class: "adornment" }, index.h("slot", { name: "adornment" }))), helpers.isSlotUsed(this.el, "image-mid") && (index.h("div", { class: "image-mid" }, index.h("slot", { name: "image-mid" }))), (message || helpers.isSlotUsed(this.el, "message")) && (index.h("div", { class: {
-        ["card-message"]: true,
-      } }, message && index.h("ic-typography", { variant: "body" }, message), helpers.isSlotUsed(this.el, "message") && index.h("slot", { name: "message" }))), (helpers.isSlotUsed(this.el, "interaction-controls") || expandable) && (index.h("div", { class: "interaction-area" }, index.h("div", { class: "interaction-controls" }, index.h("slot", { name: "interaction-controls" })), expandable && (index.h("ic-button", { class: {
-        ["toggle-button"]: true,
-        ["toggle-button-closed"]: !this.areaExpanded,
-        ["toggle-button-expanded"]: this.areaExpanded,
-      }, variant: "icon", size: "large", "aria-label": "Toggle expandable area", "aria-expanded": this.areaExpanded, "aria-controls": "expanded-content-area", onClick: this.toggleExpanded, innerHTML: chevronIcon.Chevron })))), helpers.isSlotUsed(this.el, "expanded-content") && this.areaExpanded && (index.h("div", { class: "expanded-content", id: "expanded-content-area" }, index.h("slot", { name: "expanded-content" }))), helpers.isSlotUsed(this.el, "badge") && index.h("slot", { name: "badge" })));
-  }
-  get el() { return index.getElement(this); }
+    /**
+     * Sets focus on the card.
+     */
+    async setFocus() {
+        if (this.el.shadowRoot.querySelector("a")) {
+            this.el.shadowRoot.querySelector("a").focus();
+        }
+        else if (this.el.shadowRoot.querySelector("button")) {
+            this.el.shadowRoot.querySelector("button").focus();
+        }
+    }
+    updateTheme(newTheme = null) {
+        const foregroundColor = helpers.getThemeFromContext(this.el, newTheme || null);
+        if (foregroundColor !== types.IcThemeForegroundEnum.Default) {
+            this.appearance = foregroundColor;
+        }
+    }
+    render() {
+        const { clickable, disabled, expandable, heading, message, href, hreflang, referrerpolicy, rel, subheading, target, fullWidth, parentIsAnchorTag, isFocussed, } = this;
+        const Component = parentIsAnchorTag
+            ? "div"
+            : clickable
+                ? this.href === undefined
+                    ? "button"
+                    : "a"
+                : "div";
+        const attrs = Component == "a" && {
+            href: href,
+            hrefLang: hreflang,
+            referrerPolicy: referrerpolicy,
+            rel: rel,
+            target: target,
+        };
+        return (index.h(Component, Object.assign({ class: {
+                ["card"]: true,
+                ["clickable"]: clickable && !disabled,
+                ["disabled"]: disabled,
+                ["fullwidth"]: fullWidth,
+                ["focussed"]: isFocussed,
+                ["dark"]: this.appearance === types.IcThemeForegroundEnum.Dark,
+            }, tabindex: clickable && !parentIsAnchorTag ? 0 : null, "aria-disabled": disabled ? "true" : null, disabled: disabled ? true : null }, attrs), helpers.isSlotUsed(this.el, "image-top") && (index.h("div", { class: "image-top" }, index.h("slot", { name: "image-top" }))), index.h("div", { class: "card-header" }, helpers.isSlotUsed(this.el, "icon") && (index.h("div", { class: "icon" }, index.h("slot", { name: "icon" }))), index.h("div", { class: "card-title" }, index.h("slot", { name: "heading" }, index.h("ic-typography", { variant: "h4" }, index.h("p", null, heading)))), helpers.isSlotUsed(this.el, "interaction-button") && (index.h("div", { class: "interaction-button" }, index.h("slot", { name: "interaction-button" })))), (subheading || helpers.isSlotUsed(this.el, "subheading")) && (index.h("div", { class: "subheading" }, index.h("slot", { name: "subheading" }, index.h("ic-typography", { variant: "subtitle-small" }, subheading)))), helpers.isSlotUsed(this.el, "adornment") && (index.h("div", { class: "adornment" }, index.h("slot", { name: "adornment" }))), helpers.isSlotUsed(this.el, "image-mid") && (index.h("div", { class: "image-mid" }, index.h("slot", { name: "image-mid" }))), (message || helpers.isSlotUsed(this.el, "message")) && (index.h("div", { class: {
+                ["card-message"]: true,
+            } }, message && index.h("ic-typography", { variant: "body" }, message), helpers.isSlotUsed(this.el, "message") && index.h("slot", { name: "message" }))), (helpers.isSlotUsed(this.el, "interaction-controls") || expandable) && (index.h("div", { class: "interaction-area" }, index.h("div", { class: "interaction-controls" }, index.h("slot", { name: "interaction-controls" })), expandable && (index.h("ic-button", { class: {
+                ["toggle-button"]: true,
+                ["toggle-button-closed"]: !this.areaExpanded,
+                ["toggle-button-expanded"]: this.areaExpanded,
+            }, variant: "icon", size: "large", "aria-label": "Toggle expandable area", "aria-expanded": this.areaExpanded, "aria-controls": "expanded-content-area", onClick: this.toggleExpanded, innerHTML: chevronIcon.Chevron })))), helpers.isSlotUsed(this.el, "expanded-content") && this.areaExpanded && (index.h("div", { class: "expanded-content", id: "expanded-content-area" }, index.h("slot", { name: "expanded-content" }))), helpers.isSlotUsed(this.el, "badge") && index.h("slot", { name: "badge" })));
+    }
+    get el() { return index.getElement(this); }
 };
 Card.style = icCardCss;
 

package/dist/cjs/ic-card.cjs.entry.js.map

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

package/dist/cjs/ic-checkbox-group.cjs.entry.js

@@ -2,72 +2,72 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4f8c900f.js');
-const helpers = require('./helpers-0d63359f.js');
-require('./types-7d67439f.js');
+const index = require('./index-152d1fe5.js');
+const helpers = require('./helpers-3f91f63a.js');
+require('./types-dc22e301.js');
 
 const icCheckboxGroupCss = "/*! 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}ic-input-label.error{color:var(--ic-status-error)}ic-input-label ic-typography{margin-bottom:var(--ic-space-sm)}:host(.small) ic-input-label ic-typography{margin-bottom:calc(var(--ic-space-sm) / 2)}ic-input-validation{margin-top:var(--ic-space-sm)}:host(.small) ic-input-validation{margin-top:calc(var(--ic-space-sm) / 2)}.checkboxes-container{margin-bottom:calc(-1 * var(--ic-space-xxs))}:host(.small) .checkboxes-container{margin-bottom:calc(-1 * var(--ic-space-xxxs))}.screen-reader-only-text{position:absolute;left:-9999px;background-color:#fff;color:#000;text-transform:none}";
 
 const CheckboxGroup = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.icChange = index.createEvent(this, "icChange", 7);
-    this.disabled = false;
-    this.helperText = "";
-    this.hideLabel = false;
-    this.label = undefined;
-    this.name = undefined;
-    this.required = false;
-    this.size = "default";
-    this.small = false;
-    this.validationStatus = "";
-    this.validationText = "";
-  }
-  handleChange(ev) {
-    //don't pass on the event if it has come from slotted text field
-    //otherwise any icChange handler bound to the checkbox group will also run
-    if (ev.target.tagName === "IC-TEXT-FIELD") {
-      ev.stopImmediatePropagation();
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.icChange = index.createEvent(this, "icChange", 7);
+        this.disabled = false;
+        this.helperText = "";
+        this.hideLabel = false;
+        this.label = undefined;
+        this.name = undefined;
+        this.required = false;
+        this.size = "default";
+        this.small = false;
+        this.validationStatus = "";
+        this.validationText = "";
     }
-  }
-  componentWillLoad() {
-    helpers.removeDisabledFalse(this.disabled, this.el);
-  }
-  componentDidLoad() {
-    Array.from(this.el.querySelectorAll("ic-checkbox")).forEach((checkbox) => {
-      if (!checkbox.name)
-        checkbox.name = this.name;
-      checkbox.groupLabel = this.label;
-    });
-    helpers.onComponentRequiredPropUndefined([
-      { prop: this.label, propName: "label" },
-      { prop: this.name, propName: "name" },
-    ], "Checkbox Group");
-  }
-  selectHandler(ev) {
-    const checkedOptions = Array.from(this.el.querySelectorAll("ic-checkbox")).filter((checkbox) => checkbox.checked && !checkbox.disabled);
-    this.icChange.emit({
-      value: checkedOptions.map((opt) => opt.value),
-      checkedOptions: checkedOptions.map((opt) => {
-        var _a;
-        return ({
-          checkbox: opt,
-          textFieldValue: (_a = opt.querySelector("ic-text-field")) === null || _a === void 0 ? void 0 : _a.value,
+    handleChange(ev) {
+        //don't pass on the event if it has come from slotted text field
+        //otherwise any icChange handler bound to the checkbox group will also run
+        if (ev.target.tagName === "IC-TEXT-FIELD") {
+            ev.stopImmediatePropagation();
+        }
+    }
+    componentWillLoad() {
+        helpers.removeDisabledFalse(this.disabled, this.el);
+    }
+    componentDidLoad() {
+        Array.from(this.el.querySelectorAll("ic-checkbox")).forEach((checkbox) => {
+            if (!checkbox.name)
+                checkbox.name = this.name;
+            checkbox.groupLabel = this.label;
+        });
+        helpers.onComponentRequiredPropUndefined([
+            { prop: this.label, propName: "label" },
+            { prop: this.name, propName: "name" },
+        ], "Checkbox Group");
+    }
+    selectHandler(ev) {
+        const checkedOptions = Array.from(this.el.querySelectorAll("ic-checkbox")).filter((checkbox) => checkbox.checked && !checkbox.disabled);
+        this.icChange.emit({
+            value: checkedOptions.map((opt) => opt.value),
+            checkedOptions: checkedOptions.map((opt) => {
+                var _a;
+                return ({
+                    checkbox: opt,
+                    textFieldValue: (_a = opt.querySelector("ic-text-field")) === null || _a === void 0 ? void 0 : _a.value,
+                });
+            }),
+            selectedOption: ev.target,
         });
-      }),
-      selectedOption: ev.target,
-    });
-  }
-  render() {
-    const describedBy = helpers.getInputDescribedByText(this.name, this.helperText !== "", this.validationStatus !== "");
-    const hadValidationStatus = helpers.hasValidationStatus(this.validationStatus, this.disabled);
-    return (index.h(index.Host, { class: { ["small"]: this.small, [`${this.size}`]: true } }, (this.validationStatus === "error" ||
-      this.required ||
-      this.hideLabel) && (index.h("span", { id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, this.label, " ", this.validationStatus === "error" ? "invalid data " : null, " ", this.required ? "required" : null)), index.h("fieldset", { id: this.name, "aria-labelledby": `${this.validationStatus === "error" || this.required || this.hideLabel
-        ? "screenReaderOnlyText"
-        : ""} ${describedBy}`.trim(), disabled: this.disabled }, !this.hideLabel && (index.h("legend", null, index.h("ic-input-label", { class: { [`${this.validationStatus}`]: true }, label: this.label, helperText: this.helperText, required: this.required, disabled: this.disabled, for: this.name }))), index.h("div", { class: "checkboxes-container" }, index.h("slot", null))), hadValidationStatus && (index.h("ic-input-validation", { for: this.name, ariaLiveMode: "polite", status: this.validationStatus, message: this.validationText }))));
-  }
-  get el() { return index.getElement(this); }
+    }
+    render() {
+        const describedBy = helpers.getInputDescribedByText(this.name, this.helperText !== "", this.validationStatus !== "");
+        const hadValidationStatus = helpers.hasValidationStatus(this.validationStatus, this.disabled);
+        return (index.h(index.Host, { class: { ["small"]: this.small, [`${this.size}`]: true } }, (this.validationStatus === "error" ||
+            this.required ||
+            this.hideLabel) && (index.h("span", { id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, this.label, " ", this.validationStatus === "error" ? "invalid data " : null, " ", this.required ? "required" : null)), index.h("fieldset", { id: this.name, "aria-labelledby": `${this.validationStatus === "error" || this.required || this.hideLabel
+                ? "screenReaderOnlyText"
+                : ""} ${describedBy}`.trim(), disabled: this.disabled }, !this.hideLabel && (index.h("legend", null, index.h("ic-input-label", { class: { [`${this.validationStatus}`]: true }, label: this.label, helperText: this.helperText, required: this.required, disabled: this.disabled, for: this.name }))), index.h("div", { class: "checkboxes-container" }, index.h("slot", null))), hadValidationStatus && (index.h("ic-input-validation", { for: this.name, ariaLiveMode: "polite", status: this.validationStatus, message: this.validationText }))));
+    }
+    get el() { return index.getElement(this); }
 };
 CheckboxGroup.style = icCheckboxGroupCss;
 

package/dist/cjs/ic-checkbox-group.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-checkbox-group.entry.cjs.js","mappings":"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","names":["removeDisabledFalse","onComponentRequiredPropUndefined","getInputDescribedByText","hasValidationStatus","h","Host"],"sources":["src/components/ic-checkbox-group/ic-checkbox-group.css?tag=ic-checkbox-group&encapsulation=shadow","src/components/ic-checkbox-group/ic-checkbox-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n}\n\nic-input-label.error {\n  color: var(--ic-status-error);\n}\n\nic-input-label ic-typography {\n  margin-bottom: var(--ic-space-sm);\n}\n\n:host(.small) ic-input-label ic-typography {\n  margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\nic-input-validation {\n  margin-top: var(--ic-space-sm);\n}\n\n:host(.small) ic-input-validation {\n  margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n.checkboxes-container {\n  margin-bottom: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.small) .checkboxes-container {\n  margin-bottom: calc(-1 * var(--ic-space-xxxs));\n}\n\n.screen-reader-only-text {\n  position: absolute;\n  left: -9999px;\n  background-color: #fff;\n  color: #000;\n  text-transform: none;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  hasValidationStatus,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty, IcSizes } from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-checkbox-group.types\";\n\n@Component({\n  tag: \"ic-checkbox-group\",\n  styleUrl: \"ic-checkbox-group.css\",\n  shadow: true,\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class CheckboxGroup {\n  @Element() el: HTMLIcCheckboxGroupElement;\n\n  /**\n   * If `true`, the checkbox group will be set to the disabled state.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The label for the checkbox group to be displayed.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name for the checkbox group to differentiate from other groups.\n   */\n  @Prop() name!: string;\n\n  /**\n   * If `true`, the checkbox group will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The size of the checkboxes to be displayed. This does not affect the font size of the label.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n   */\n  @Prop() small: boolean = false;\n\n  /**\n   * The validation status - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n  /**\n   * The validation text - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationText: string = \"\";\n\n  /**\n   * Emitted when a checkbox is checked.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  @Listen(\"icChange\")\n  handleChange(ev: CustomEvent): void {\n    //don't pass on the event if it has come from slotted text field\n    //otherwise any icChange handler bound to the checkbox group will also run\n    if ((ev.target as HTMLElement).tagName === \"IC-TEXT-FIELD\") {\n      ev.stopImmediatePropagation();\n    }\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    Array.from(this.el.querySelectorAll(\"ic-checkbox\")).forEach((checkbox) => {\n      if (!checkbox.name) checkbox.name = this.name;\n      checkbox.groupLabel = this.label;\n    });\n\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Checkbox Group\"\n    );\n  }\n\n  @Listen(\"icCheck\")\n  selectHandler(ev: CustomEvent): void {\n    const checkedOptions = Array.from(\n      this.el.querySelectorAll(\"ic-checkbox\")\n    ).filter((checkbox) => checkbox.checked && !checkbox.disabled);\n    this.icChange.emit({\n      value: checkedOptions.map((opt) => opt.value),\n      checkedOptions: checkedOptions.map((opt) => ({\n        checkbox: opt,\n        textFieldValue: opt.querySelector(\"ic-text-field\")?.value,\n      })),\n      selectedOption: ev.target as HTMLIcCheckboxElement,\n    });\n  }\n\n  render() {\n    const describedBy = getInputDescribedByText(\n      this.name,\n      this.helperText !== \"\",\n      this.validationStatus !== \"\"\n    );\n    const hadValidationStatus = hasValidationStatus(\n      this.validationStatus,\n      this.disabled\n    );\n\n    return (\n      <Host class={{ [\"small\"]: this.small, [`${this.size}`]: true }}>\n        {(this.validationStatus === \"error\" ||\n          this.required ||\n          this.hideLabel) && (\n          <span\n            id=\"screenReaderOnlyText\"\n            class=\"screen-reader-only-text\"\n            aria-hidden=\"true\"\n          >\n            {this.label}{\" \"}\n            {this.validationStatus === \"error\" ? \"invalid data \" : null}{\" \"}\n            {this.required ? \"required\" : null}\n          </span>\n        )}\n        <fieldset\n          id={this.name}\n          aria-labelledby={`${\n            this.validationStatus === \"error\" || this.required || this.hideLabel\n              ? \"screenReaderOnlyText\"\n              : \"\"\n          } ${describedBy}`.trim()}\n          disabled={this.disabled}\n        >\n          {!this.hideLabel && (\n            <legend>\n              <ic-input-label\n                class={{ [`${this.validationStatus}`]: true }}\n                label={this.label}\n                helperText={this.helperText}\n                required={this.required}\n                disabled={this.disabled}\n                for={this.name}\n              ></ic-input-label>\n            </legend>\n          )}\n          <div class=\"checkboxes-container\">\n            <slot></slot>\n          </div>\n        </fieldset>\n        {hadValidationStatus && (\n          <ic-input-validation\n            for={this.name}\n            ariaLiveMode=\"polite\"\n            status={this.validationStatus}\n            message={this.validationText}\n          ></ic-input-validation>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-checkbox-group.entry.cjs.js","mappings":"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","names":["removeDisabledFalse","onComponentRequiredPropUndefined","getInputDescribedByText","hasValidationStatus","h","Host"],"sources":["src/components/ic-checkbox-group/ic-checkbox-group.css?tag=ic-checkbox-group&encapsulation=shadow","src/components/ic-checkbox-group/ic-checkbox-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n}\n\nic-input-label.error {\n  color: var(--ic-status-error);\n}\n\nic-input-label ic-typography {\n  margin-bottom: var(--ic-space-sm);\n}\n\n:host(.small) ic-input-label ic-typography {\n  margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\nic-input-validation {\n  margin-top: var(--ic-space-sm);\n}\n\n:host(.small) ic-input-validation {\n  margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n.checkboxes-container {\n  margin-bottom: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.small) .checkboxes-container {\n  margin-bottom: calc(-1 * var(--ic-space-xxxs));\n}\n\n.screen-reader-only-text {\n  position: absolute;\n  left: -9999px;\n  background-color: #fff;\n  color: #000;\n  text-transform: none;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  hasValidationStatus,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty, IcSizes } from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-checkbox-group.types\";\n\n@Component({\n  tag: \"ic-checkbox-group\",\n  styleUrl: \"ic-checkbox-group.css\",\n  shadow: true,\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class CheckboxGroup {\n  @Element() el: HTMLIcCheckboxGroupElement;\n\n  /**\n   * If `true`, the checkbox group will be set to the disabled state.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The label for the checkbox group to be displayed.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name for the checkbox group to differentiate from other groups.\n   */\n  @Prop() name!: string;\n\n  /**\n   * If `true`, the checkbox group will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The size of the checkboxes to be displayed. This does not affect the font size of the label.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n   */\n  @Prop() small: boolean = false;\n\n  /**\n   * The validation status - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n  /**\n   * The validation text - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationText: string = \"\";\n\n  /**\n   * Emitted when a checkbox is checked.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  @Listen(\"icChange\")\n  handleChange(ev: CustomEvent): void {\n    //don't pass on the event if it has come from slotted text field\n    //otherwise any icChange handler bound to the checkbox group will also run\n    if ((ev.target as HTMLElement).tagName === \"IC-TEXT-FIELD\") {\n      ev.stopImmediatePropagation();\n    }\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    Array.from(this.el.querySelectorAll(\"ic-checkbox\")).forEach((checkbox) => {\n      if (!checkbox.name) checkbox.name = this.name;\n      checkbox.groupLabel = this.label;\n    });\n\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Checkbox Group\"\n    );\n  }\n\n  @Listen(\"icCheck\")\n  selectHandler(ev: CustomEvent): void {\n    const checkedOptions = Array.from(\n      this.el.querySelectorAll(\"ic-checkbox\")\n    ).filter((checkbox) => checkbox.checked && !checkbox.disabled);\n    this.icChange.emit({\n      value: checkedOptions.map((opt) => opt.value),\n      checkedOptions: checkedOptions.map((opt) => ({\n        checkbox: opt,\n        textFieldValue: opt.querySelector(\"ic-text-field\")?.value,\n      })),\n      selectedOption: ev.target as HTMLIcCheckboxElement,\n    });\n  }\n\n  render() {\n    const describedBy = getInputDescribedByText(\n      this.name,\n      this.helperText !== \"\",\n      this.validationStatus !== \"\"\n    );\n    const hadValidationStatus = hasValidationStatus(\n      this.validationStatus,\n      this.disabled\n    );\n\n    return (\n      <Host class={{ [\"small\"]: this.small, [`${this.size}`]: true }}>\n        {(this.validationStatus === \"error\" ||\n          this.required ||\n          this.hideLabel) && (\n          <span\n            id=\"screenReaderOnlyText\"\n            class=\"screen-reader-only-text\"\n            aria-hidden=\"true\"\n          >\n            {this.label}{\" \"}\n            {this.validationStatus === \"error\" ? \"invalid data \" : null}{\" \"}\n            {this.required ? \"required\" : null}\n          </span>\n        )}\n        <fieldset\n          id={this.name}\n          aria-labelledby={`${\n            this.validationStatus === \"error\" || this.required || this.hideLabel\n              ? \"screenReaderOnlyText\"\n              : \"\"\n          } ${describedBy}`.trim()}\n          disabled={this.disabled}\n        >\n          {!this.hideLabel && (\n            <legend>\n              <ic-input-label\n                class={{ [`${this.validationStatus}`]: true }}\n                label={this.label}\n                helperText={this.helperText}\n                required={this.required}\n                disabled={this.disabled}\n                for={this.name}\n              ></ic-input-label>\n            </legend>\n          )}\n          <div class=\"checkboxes-container\">\n            <slot></slot>\n          </div>\n        </fieldset>\n        {hadValidationStatus && (\n          <ic-input-validation\n            for={this.name}\n            ariaLiveMode=\"polite\"\n            status={this.validationStatus}\n            message={this.validationText}\n          ></ic-input-validation>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}