@ukic/web-components 2.0.0-alpha.124 → 2.0.0

package/dist/components/ic-button2.js

@@ -1,10 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { C as getThemeFromContext, I as IcThemeForegroundEnum, k as inheritAttributes, l as IC_INHERITED_ARIA } from './helpers.js';
+import { B as getThemeFromContext, j as inheritAttributes, k as IC_INHERITED_ARIA } from './helpers.js';
+import { I as IcThemeForegroundEnum } from './types.js';
 import { d as defineCustomElement$3 } from './ic-loading-indicator2.js';
 import { d as defineCustomElement$2 } from './ic-tooltip2.js';
 import { d as defineCustomElement$1 } from './ic-typography2.js';
 
-const icButtonCss = "/*! 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:inline-block;--button-default:var(--ic-action-default);--button-default-hover:var(--ic-action-default-hover);--button-default-active:var(--ic-action-default-active);--button-default-background-hover:var(--ic-action-default-bg-hover);--button-default-background-active:var(--ic-action-default-bg-active);--icon-width:100%;--icon-height:100%}.button{font-family:var(--ic-font-body-family);text-decoration:none;font-weight:600;font-size:14px;transition:var(--ic-easing-transition-fast);border-radius:var(--ic-border-radius);min-width:100px;display:inline-flex;gap:var(--ic-space-xs);flex-direction:row;justify-content:center;align-items:center;background:none;border:none;box-sizing:border-box;white-space:nowrap;vertical-align:middle}.button:hover{cursor:pointer}.button:focus,:host .button:focus{box-shadow:var(--ic-border-focus)}:host(.light) .button:focus{box-shadow:var(--ic-border-focus)}.button:focus-visible{outline:none}:host(.dark) .button{--button-default:var(--ic-action-dark);--button-default-hover:var(--ic-action-dark);--button-default-active:var(--ic-action-dark);--button-default-background-hover:var(--ic-action-dark-bg-hover);--button-default-background-active:var(--ic-action-dark-bg-active)}:host(.light) .button{--button-default:var(--ic-action-light);--button-default-hover:var(--ic-action-light);--button-default-active:var(--ic-action-light);--button-default-background-hover:var(--ic-action-light-bg-hover);--button-default-background-active:var(--ic-action-light-bg-active)}:host(.button-variant-primary.light) .button{color:var(--ic-color-primary-text);--button-default-hover:var(--ic-action-light-hover);--button-default-active:var(--ic-action-light-active)}:host(.button-variant-primary.dark) .button{--button-default-hover:var(--ic-action-dark-hover);--button-default-active:var(--ic-action-dark-active)}:host(.disabled),:host(.disabled) .button,:host(.loading),:host(.loading) .button{pointer-events:none}:host(.button-variant-primary) .button{color:var(--ic-architectural-white);background-color:var(--button-default)}:host(.button-variant-primary) .button:hover:not(:focus){background-color:var(--button-default-hover)}:host(.button-variant-primary) .button:active:not(:focus),:host(.button-variant-primary.loading) .button{background-color:var(--button-default-active)}:host(.button-variant-primary.disabled) .button{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.button-variant-primary.light.disabled) .button{background:var(--ic-architectural-600);color:var(--ic-architectural-500)}:host(.button-variant-secondary) .button{border:1px solid var(--button-default);color:var(--button-default)}:host(.button-variant-secondary) .button:hover:not(:focus){background-color:var(--button-default-background-hover);border-color:var(--button-default-hover);color:var(--button-default-hover)}:host(.button-variant-secondary) .button:active:not(:focus){border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-secondary.loading) .button{border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-secondary.disabled) .button,:host(.button-variant-secondary.disabled) .button:hover,:host(.button-variant-secondary.disabled) .button:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.button-variant-secondary.light.disabled) .button,:host(.button-variant-secondary.light.disabled) .button:hover,:host(.button-variant-secondary.light.disabled) .button:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}:host(.button-variant-tertiary) .button{color:var(--button-default)}:host(.button-variant-tertiary) .button:hover:not(:focus){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-tertiary) .button:active:not(:focus),:host(.button-variant-tertiary.loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-tertiary.disabled) .button,:host(.button-variant-tertiary.disabled) .button:hover,:host(.button-variant-tertiary.disabled) .button:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.button-variant-tertiary.light.disabled) .button,:host(.button-variant-tertiary.light.disabled) .button:hover,:host(.button-variant-tertiary.light.disabled) .button:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}:host(.button-variant-icon) .button{color:var(--button-default);min-width:0}:host(.button-variant-icon) .button:hover:not(:focus){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-icon) .button:active:not(:focus),:host(.button-variant-icon.loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-icon.disabled) .button,:host(.button-variant-icon.disabled) .button:hover,:host(.button-variant-icon.disabled) .button:active{color:var(--ic-architectural-300);background:none}:host(.button-variant-destructive) .button{color:var(--ic-architectural-white);background-color:var(--ic-action-destructive);text-transform:uppercase}:host(.button-variant-destructive) .button:hover:not(:focus){background-color:var(--ic-action-destructive-hover)}:host(.button-variant-destructive) .button:active:not(:focus),:host(.button-variant-destructive.loading) .button{background-color:var(--ic-action-destructive-active)}:host(.button-variant-destructive.disabled) .button{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.button-size-default) .button{height:40px;padding:var(--ic-space-xs) var(--ic-space-md)}:host(.button-size-dense) .button{height:var(--ic-space-xl);padding:var(--ic-space-xxs) var(--ic-space-md)}:host(.button-size-emphasis) .button{height:var(--ic-space-xxl);padding:var(--ic-space-sm) var(--ic-space-md)}:host(.button-size-default.button-variant-icon) .button{height:var(--ic-space-xl);width:var(--ic-space-xl);padding:6px}:host(.button-size-dense.button-variant-icon) .button{height:var(--ic-space-lg);width:var(--ic-space-lg);padding:var(--ic-space-xxs)}:host(.button-size-emphasis.button-variant-icon) .button{height:40px;width:40px;padding:var(--ic-space-xs)}:host(.full-width),:host(.full-width) .button{width:100%}div.loading-container{position:relative;align-items:center}@keyframes loading-animation{0%{width:0%;left:0%}25%{width:0%;left:0%;opacity:0}50%{width:100%;left:0%;opacity:1}75%{width:0%;left:100%}100%{width:0%;left:100%;opacity:0}}div.icon-container{box-sizing:border-box;width:var(--ic-space-lg);height:var(--ic-space-lg);display:flex;justify-content:center;align-items:center}::slotted(svg){width:var(--icon-width) !important;height:var(--icon-height) !important;fill:currentcolor !important;pointer-events:none}:host(.button-variant-icon) .button .icon-container{margin:0;pointer-events:none}:host(.search-submit-button) ::slotted(svg){--icon-height:20px;--icon-width:20px}:host(.search-submit-button-dense) ::slotted(svg){--icon-height:16px;--icon-width:16px}:host(.clear-button){margin:0 var(--ic-space-xxs)}:host(.clear-button) .button:focus{box-shadow:none;background-color:var(--ic-action-dark-bg-hover)}:host(.clear-button) .button:not(:active):focus{box-shadow:none;background-color:var(--ic-action-dark-bg-hover)}:host(.search-submit-button) .button:focus{box-shadow:none}:host(.search-submit-button) .button:not(:active):focus{box-shadow:none;background-color:var(--ic-action-default-bg-hover)}:host(.search-submit-button){display:flex;align-items:center;margin:0 var(--ic-space-xxs)}:host(.menu-close-button) ::slotted(svg){--icon-height:14px;--icon-width:14px}:host(.popout-menu-button) .button{justify-content:left;border-radius:0;white-space:pre-line;text-align:start}:host(.popout-menu-button) div.icon-container{flex:none}:host(.popout-menu-button) .button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}.ic-button-describedby{display:none}:host .ic-tooltip{display:block}";
+const icButtonCss = "/*! 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:inline-block;--button-default:var(--ic-action-default);--button-default-hover:var(--ic-action-default-hover);--button-default-active:var(--ic-action-default-active);--button-default-background-hover:var(--ic-action-default-bg-hover);--button-default-background-active:var(--ic-action-default-bg-active);--icon-width:100%;--icon-height:100%}.button{font-family:var(--ic-font-body-family);text-decoration:none;font-weight:600;font-size:14px;transition:var(--ic-easing-transition-fast);border-radius:var(--ic-border-radius);min-width:100px;display:inline-flex;gap:var(--ic-space-xs);flex-direction:row;justify-content:center;align-items:center;background:none;border:none;box-sizing:border-box;white-space:nowrap;vertical-align:middle}.button:hover{cursor:pointer}.button:focus,:host .button:focus{box-shadow:var(--ic-border-focus)}:host(.light) .button:focus{box-shadow:var(--ic-border-focus)}.button:focus-visible{outline:none}:host(.dark) .button{--button-default:var(--ic-action-dark);--button-default-hover:var(--ic-action-dark);--button-default-active:var(--ic-action-dark);--button-default-background-hover:var(--ic-action-dark-bg-hover);--button-default-background-active:var(--ic-action-dark-bg-active)}:host(.light) .button{--button-default:var(--ic-action-light);--button-default-hover:var(--ic-action-light);--button-default-active:var(--ic-action-light);--button-default-background-hover:var(--ic-action-light-bg-hover);--button-default-background-active:var(--ic-action-light-bg-active)}:host(.button-variant-primary.light) .button{color:var(--ic-color-primary-text);--button-default-hover:var(--ic-action-light-hover);--button-default-active:var(--ic-action-light-active)}:host(.button-variant-primary.dark) .button{--button-default-hover:var(--ic-action-dark-hover);--button-default-active:var(--ic-action-dark-active)}:host(.disabled),:host(.disabled) .button,:host(.loading),:host(.loading) .button{pointer-events:none}:host(.button-variant-primary) .button{color:var(--ic-architectural-white);background-color:var(--button-default)}:host(.button-variant-primary) .button:hover:not(:focus){background-color:var(--button-default-hover)}:host(.button-variant-primary) .button:active:not(:focus),:host(.button-variant-primary.loading) .button{background-color:var(--button-default-active)}:host(.button-variant-primary.disabled) .button{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.button-variant-primary.light.disabled) .button{background:var(--ic-architectural-600);color:var(--ic-architectural-500)}:host(.button-variant-secondary) .button{border:1px solid var(--button-default);color:var(--button-default)}:host(.button-variant-secondary) .button:hover:not(:focus){background-color:var(--button-default-background-hover);border-color:var(--button-default-hover);color:var(--button-default-hover)}:host(.button-variant-secondary) .button:active:not(:focus){border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-secondary.loading) .button{border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-secondary.disabled) .button,:host(.button-variant-secondary.disabled) .button:hover,:host(.button-variant-secondary.disabled) .button:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.button-variant-secondary.light.disabled) .button,:host(.button-variant-secondary.light.disabled) .button:hover,:host(.button-variant-secondary.light.disabled) .button:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}:host(.button-variant-tertiary) .button{color:var(--button-default)}:host(.button-variant-tertiary) .button:hover:not(:focus){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-tertiary) .button:active:not(:focus),:host(.button-variant-tertiary.loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-tertiary.disabled) .button,:host(.button-variant-tertiary.disabled) .button:hover,:host(.button-variant-tertiary.disabled) .button:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.button-variant-tertiary.light.disabled) .button,:host(.button-variant-tertiary.light.disabled) .button:hover,:host(.button-variant-tertiary.light.disabled) .button:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}:host(.button-variant-icon) .button{color:var(--button-default);min-width:0}:host(.button-variant-icon) .button:hover:not(:focus){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-icon) .button:active:not(:focus),:host(.button-variant-icon.loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-icon.disabled) .button,:host(.button-variant-icon.disabled) .button:hover,:host(.button-variant-icon.disabled) .button:active{color:var(--ic-architectural-300);background:none}:host(.button-variant-destructive) .button{color:var(--ic-architectural-white);background-color:var(--ic-action-destructive);text-transform:uppercase}:host(.button-variant-destructive) .button:hover:not(:focus){background-color:var(--ic-action-destructive-hover)}:host(.button-variant-destructive) .button:active:not(:focus),:host(.button-variant-destructive.loading) .button{background-color:var(--ic-action-destructive-active)}:host(.button-variant-destructive.disabled) .button{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.button-size-default) .button{height:40px;padding:var(--ic-space-xs) var(--ic-space-md)}:host(.button-size-small) .button{height:var(--ic-space-xl);padding:var(--ic-space-xxs) var(--ic-space-md)}:host(.button-size-large) .button{height:var(--ic-space-xxl);padding:var(--ic-space-sm) var(--ic-space-md)}:host(.button-size-default.button-variant-icon) .button{height:var(--ic-space-xl);width:var(--ic-space-xl);padding:6px}:host(.button-size-small.button-variant-icon) .button{height:var(--ic-space-lg);width:var(--ic-space-lg);padding:var(--ic-space-xxs)}:host(.button-size-large.button-variant-icon) .button{height:40px;width:40px;padding:var(--ic-space-xs)}:host(.full-width),:host(.full-width) .button{width:100%}div.loading-container{position:relative;align-items:center}@keyframes loading-animation{0%{width:0%;left:0%}25%{width:0%;left:0%;opacity:0}50%{width:100%;left:0%;opacity:1}75%{width:0%;left:100%}100%{width:0%;left:100%;opacity:0}}div.icon-container{box-sizing:border-box;width:var(--ic-space-lg);height:var(--ic-space-lg);display:flex;justify-content:center;align-items:center}::slotted(svg){width:var(--icon-width) !important;height:var(--icon-height) !important;fill:currentcolor !important;pointer-events:none}:host(.button-variant-icon) .button .icon-container{margin:0;pointer-events:none}:host(.search-submit-button) ::slotted(svg){--icon-height:20px;--icon-width:20px}:host(.search-submit-button-small) ::slotted(svg){--icon-height:16px;--icon-width:16px}:host(.clear-button){margin:0 var(--ic-space-xxs)}:host(.clear-button) .button:focus{box-shadow:none}:host(.search-submit-button) .button:focus{box-shadow:none}:host(.search-submit-button) .button:not(:active):focus{box-shadow:none;background-color:var(--ic-action-default-bg-hover)}:host(.search-submit-button){display:flex;align-items:center;margin:0 var(--ic-space-xxs)}:host(.menu-close-button) ::slotted(svg){--icon-height:14px;--icon-width:14px}:host(.popout-menu-button) .button{justify-content:left;border-radius:0;white-space:pre-line;text-align:start}:host(.popout-menu-button) div.icon-container{flex:none}:host(.popout-menu-button) .button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}.ic-button-describedby{display:none}:host .ic-tooltip{display:block}";
 
 var __rest = (undefined && undefined.__rest) || function (s, e) {
   var t = {};
@@ -45,7 +46,6 @@ const Button = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     this.disabled = false;
     this.loading = false;
-    this.iconRight = false;
     this.type = "button";
     this.href = undefined;
     this.target = undefined;
@@ -56,13 +56,9 @@ const Button = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.variant = "primary";
     this.size = "default";
     this.fullWidth = false;
-    this.withIcTooltip = false;
-    this.IcTooltipPlacement = "bottom";
-    this.buttonStyle = "default";
-    this.iconRightState = false;
-  }
-  setIconRightState() {
-    this.iconRightState = this.iconRight;
+    this.disableTooltip = false;
+    this.tooltipPlacement = "bottom";
+    this.appearance = "default";
   }
   calculateWidth() {
     // Assume even padding on left and right
@@ -115,7 +111,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   updateTheme(newTheme = null) {
     const foregroundColor = getThemeFromContext(this.el, newTheme || null);
     if (foregroundColor !== IcThemeForegroundEnum.Default) {
-      this.buttonStyle = foregroundColor;
+      this.appearance = foregroundColor;
     }
   }
   componentWillLoad() {
@@ -126,11 +122,10 @@ const Button = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     ]);
     const id = this.el.id;
     this.id = id !== undefined ? id : null;
-    this.hasTooltip = this.variant === "icon" || this.withIcTooltip;
+    this.hasTooltip = this.variant === "icon";
   }
   componentDidLoad() {
     this.calculateWidth();
-    this.setIconRightState();
     this.updateTheme();
   }
   render() {
@@ -167,31 +162,31 @@ const Button = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       describedBy = `ic-tooltip-${buttonId}`;
     }
     const ButtonContent = () => {
-      return (h(TagType, Object.assign({ class: "button", "aria-disabled": this.loading || this.disabled ? "true" : null, "aria-label": this.loading ? "Loading" : ariaLabel }, buttonAttrs, restInheritedAttributes, titleAttr, { onFocus: this.onFocus, onBlur: this.onBlur, ref: (el) => (this.buttonEl = el), id: buttonId, "aria-describedby": describedBy }), this.hasIconSlot() && !this.iconRightState && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "icon" }))), this.loading ? (h("div", { class: "loading-container", style: this.getLoadingBarWidth() }, h("ic-loading-indicator", { type: "linear", dark: this.variant === "primary" ||
+      return (h(TagType, Object.assign({ class: "button", "aria-disabled": this.loading || this.disabled ? "true" : null, "aria-label": this.loading ? "Loading" : ariaLabel }, buttonAttrs, restInheritedAttributes, titleAttr, { onFocus: this.onFocus, onBlur: this.onBlur, ref: (el) => (this.buttonEl = el), id: buttonId, "aria-describedby": describedBy }), this.hasIconSlot() && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "icon" }))), this.loading ? (h("div", { class: "loading-container", style: this.getLoadingBarWidth() }, h("ic-loading-indicator", { type: "linear", appearance: this.variant === "primary" ||
           this.variant === "destructive" ||
-          this.buttonStyle === IcThemeForegroundEnum.Dark ||
-          this.buttonStyle === IcThemeForegroundEnum.Light }))) : (h("slot", null)), this.hasIconSlot() && this.iconRightState && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "icon" })))));
+          this.appearance === IcThemeForegroundEnum.Dark ||
+          this.appearance === IcThemeForegroundEnum.Light
+          ? "light"
+          : "dark" }))) : (h("slot", null))));
     };
     return (h(Host, { class: {
         ["disabled"]: this.disabled && !this.loading,
         [`button-variant-${this.variant}`]: true,
         [`button-size-${this.size}`]: true,
         ["loading"]: this.loading,
-        ["dark"]: this.buttonStyle === IcThemeForegroundEnum.Dark,
-        ["light"]: this.buttonStyle === IcThemeForegroundEnum.Light,
+        ["dark"]: this.appearance === IcThemeForegroundEnum.Dark,
+        ["light"]: this.appearance === IcThemeForegroundEnum.Light,
         ["full-width"]: this.fullWidth,
-      }, onClick: this.handleClick }, this.hasTooltip && (h("ic-tooltip", { ref: (el) => (this.tooltipEl = el), label: tooltipText, "element-id": buttonId, placement: this.IcTooltipPlacement }, h(ButtonContent, null))), !this.hasTooltip && h(ButtonContent, null)));
+      }, onClick: this.handleClick }, this.hasTooltip && (h("ic-tooltip", { class: { ["tooltip-disabled-button"]: this.disableTooltip }, ref: (el) => (this.tooltipEl = el), label: tooltipText, target: buttonId, placement: this.tooltipPlacement }, h(ButtonContent, null))), !this.hasTooltip && h(ButtonContent, null)));
   }
   get el() { return this; }
   static get watchers() { return {
-    "iconRight": ["setIconRightState"],
     "loading": ["calculateWidth"]
   }; }
   static get style() { return icButtonCss; }
 }, [1, "ic-button", {
     "disabled": [4],
     "loading": [4],
-    "iconRight": [4, "icon-right"],
     "type": [1],
     "href": [1],
     "target": [1],
@@ -202,10 +197,9 @@ const Button = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "variant": [1],
     "size": [1],
     "fullWidth": [4, "full-width"],
-    "withIcTooltip": [4, "with-ic-tooltip"],
-    "IcTooltipPlacement": [1, "ic-tooltip-placement"],
-    "buttonStyle": [1025, "button-style"],
-    "iconRightState": [32],
+    "disableTooltip": [4, "disable-tooltip"],
+    "tooltipPlacement": [1, "tooltip-placement"],
+    "appearance": [1025],
     "setFocus": [64],
     "updateAriaLabel": [64]
   }, [[2, "click", "handleHostClick"], [4, "icThemeChange", "themeChangeHandler"]]]);

package/dist/components/ic-button2.js.map

@@ -1 +1 @@
-{"file":"ic-button2.js","mappings":"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","names":[],"sources":["./src/components/ic-button/ic-button.css?tag=ic-button&encapsulation=shadow","./src/components/ic-button/ic-button.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: inline-block;\n\n  --button-default: var(--ic-action-default);\n  --button-default-hover: var(--ic-action-default-hover);\n  --button-default-active: var(--ic-action-default-active);\n  --button-default-background-hover: var(--ic-action-default-bg-hover);\n  --button-default-background-active: var(--ic-action-default-bg-active);\n  --icon-width: 100%;\n  --icon-height: 100%;\n}\n\n.button {\n  font-family: var(--ic-font-body-family);\n  text-decoration: none;\n  font-weight: 600;\n  font-size: 14px;\n  transition: var(--ic-easing-transition-fast);\n  border-radius: var(--ic-border-radius);\n  min-width: 100px;\n  display: inline-flex;\n  gap: var(--ic-space-xs);\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  background: none;\n  border: none;\n  box-sizing: border-box;\n  white-space: nowrap;\n  vertical-align: middle;\n}\n\n.button:hover {\n  cursor: pointer;\n}\n\n.button:focus,\n:host .button:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n:host(.light) .button:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n.button:focus-visible {\n  outline: none;\n}\n\n:host(.dark) .button {\n  --button-default: var(--ic-action-dark);\n  --button-default-hover: var(--ic-action-dark);\n  --button-default-active: var(--ic-action-dark);\n  --button-default-background-hover: var(--ic-action-dark-bg-hover);\n  --button-default-background-active: var(--ic-action-dark-bg-active);\n}\n\n:host(.light) .button {\n  --button-default: var(--ic-action-light);\n  --button-default-hover: var(--ic-action-light);\n  --button-default-active: var(--ic-action-light);\n  --button-default-background-hover: var(--ic-action-light-bg-hover);\n  --button-default-background-active: var(--ic-action-light-bg-active);\n}\n\n:host(.button-variant-primary.light) .button {\n  color: var(--ic-color-primary-text);\n\n  --button-default-hover: var(--ic-action-light-hover);\n  --button-default-active: var(--ic-action-light-active);\n}\n\n:host(.button-variant-primary.dark) .button {\n  --button-default-hover: var(--ic-action-dark-hover);\n  --button-default-active: var(--ic-action-dark-active);\n}\n\n:host(.disabled),\n:host(.disabled) .button,\n:host(.loading),\n:host(.loading) .button {\n  pointer-events: none;\n}\n\n/* Variants */\n\n/* Primary */\n\n:host(.button-variant-primary) .button {\n  color: var(--ic-architectural-white);\n  background-color: var(--button-default);\n}\n\n:host(.button-variant-primary) .button:hover:not(:focus) {\n  background-color: var(--button-default-hover);\n}\n\n:host(.button-variant-primary) .button:active:not(:focus),\n:host(.button-variant-primary.loading) .button {\n  background-color: var(--button-default-active);\n}\n\n:host(.button-variant-primary.disabled) .button {\n  background: var(--ic-architectural-200);\n  color: var(--ic-architectural-300);\n}\n\n:host(.button-variant-primary.light.disabled) .button {\n  background: var(--ic-architectural-600);\n  color: var(--ic-architectural-500);\n}\n\n/* Secondary */\n\n:host(.button-variant-secondary) .button {\n  border: 1px solid var(--button-default);\n  color: var(--button-default);\n}\n\n:host(.button-variant-secondary) .button:hover:not(:focus) {\n  background-color: var(--button-default-background-hover);\n  border-color: var(--button-default-hover);\n  color: var(--button-default-hover);\n}\n\n:host(.button-variant-secondary) .button:active:not(:focus) {\n  border-color: var(--button-default-active);\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-secondary.loading) .button {\n  border-color: var(--button-default-active);\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-secondary.disabled) .button,\n:host(.button-variant-secondary.disabled) .button:hover,\n:host(.button-variant-secondary.disabled) .button:active {\n  border-color: var(--ic-architectural-300);\n  color: var(--ic-architectural-300);\n  background: none;\n}\n\n:host(.button-variant-secondary.light.disabled) .button,\n:host(.button-variant-secondary.light.disabled) .button:hover,\n:host(.button-variant-secondary.light.disabled) .button:active {\n  border-color: var(--ic-architectural-500);\n  color: var(--ic-architectural-500);\n  background: none;\n}\n\n/* Tertiary */\n\n:host(.button-variant-tertiary) .button {\n  color: var(--button-default);\n}\n\n:host(.button-variant-tertiary) .button:hover:not(:focus) {\n  background-color: var(--button-default-background-hover);\n  color: var(--button-default-hover);\n}\n\n:host(.button-variant-tertiary) .button:active:not(:focus),\n:host(.button-variant-tertiary.loading) .button {\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-tertiary.disabled) .button,\n:host(.button-variant-tertiary.disabled) .button:hover,\n:host(.button-variant-tertiary.disabled) .button:active {\n  border-color: var(--ic-architectural-300);\n  color: var(--ic-architectural-300);\n  background: none;\n}\n\n:host(.button-variant-tertiary.light.disabled) .button,\n:host(.button-variant-tertiary.light.disabled) .button:hover,\n:host(.button-variant-tertiary.light.disabled) .button:active {\n  border-color: var(--ic-architectural-500);\n  color: var(--ic-architectural-500);\n  background: none;\n}\n\n/* Icon */\n\n:host(.button-variant-icon) .button {\n  color: var(--button-default);\n  min-width: 0;\n}\n\n:host(.button-variant-icon) .button:hover:not(:focus) {\n  background-color: var(--button-default-background-hover);\n  color: var(--button-default-hover);\n}\n\n:host(.button-variant-icon) .button:active:not(:focus),\n:host(.button-variant-icon.loading) .button {\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-icon.disabled) .button,\n:host(.button-variant-icon.disabled) .button:hover,\n:host(.button-variant-icon.disabled) .button:active {\n  color: var(--ic-architectural-300);\n  background: none;\n}\n\n/* Destructive */\n\n:host(.button-variant-destructive) .button {\n  color: var(--ic-architectural-white);\n  background-color: var(--ic-action-destructive);\n  text-transform: uppercase;\n}\n\n:host(.button-variant-destructive) .button:hover:not(:focus) {\n  background-color: var(--ic-action-destructive-hover);\n}\n\n:host(.button-variant-destructive) .button:active:not(:focus),\n:host(.button-variant-destructive.loading) .button {\n  background-color: var(--ic-action-destructive-active);\n}\n\n:host(.button-variant-destructive.disabled) .button {\n  background: var(--ic-architectural-200);\n  color: var(--ic-architectural-300);\n}\n\n/* Sizing */\n\n:host(.button-size-default) .button {\n  height: 40px;\n  padding: var(--ic-space-xs) var(--ic-space-md);\n}\n\n:host(.button-size-dense) .button {\n  height: var(--ic-space-xl);\n  padding: var(--ic-space-xxs) var(--ic-space-md);\n}\n\n:host(.button-size-emphasis) .button {\n  height: var(--ic-space-xxl);\n  padding: var(--ic-space-sm) var(--ic-space-md);\n}\n\n:host(.button-size-default.button-variant-icon) .button {\n  height: var(--ic-space-xl);\n  width: var(--ic-space-xl);\n  padding: 6px;\n}\n\n:host(.button-size-dense.button-variant-icon) .button {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  padding: var(--ic-space-xxs);\n}\n\n:host(.button-size-emphasis.button-variant-icon) .button {\n  height: 40px;\n  width: 40px;\n  padding: var(--ic-space-xs);\n}\n\n/* Width */\n:host(.full-width),\n:host(.full-width) .button {\n  width: 100%;\n}\n\n/* Loading */\n\ndiv.loading-container {\n  position: relative;\n  align-items: center;\n}\n\n@keyframes loading-animation {\n  0% {\n    width: 0%;\n    left: 0%;\n  }\n\n  25% {\n    width: 0%;\n    left: 0%;\n    opacity: 0;\n  }\n\n  50% {\n    width: 100%;\n    left: 0%;\n    opacity: 1;\n  }\n\n  75% {\n    width: 0%;\n    left: 100%;\n  }\n\n  100% {\n    width: 0%;\n    left: 100%;\n    opacity: 0;\n  }\n}\n\n/* Icons */\n\ndiv.icon-container {\n  box-sizing: border-box;\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n::slotted(svg) {\n  width: var(--icon-width) !important;\n  height: var(--icon-height) !important;\n  fill: currentcolor !important;\n  pointer-events: none;\n}\n\n:host(.button-variant-icon) .button .icon-container {\n  margin: 0;\n  pointer-events: none;\n}\n\n/** SEARCH **/\n\n:host(.search-submit-button) ::slotted(svg) {\n  --icon-height: 20px;\n  --icon-width: 20px;\n}\n\n:host(.search-submit-button-dense) ::slotted(svg) {\n  --icon-height: 16px;\n  --icon-width: 16px;\n}\n\n:host(.clear-button) {\n  margin: 0 var(--ic-space-xxs);\n}\n\n:host(.clear-button) .button:focus {\n  box-shadow: none;\n  background-color: var(--ic-action-dark-bg-hover);\n}\n\n:host(.clear-button) .button:not(:active):focus {\n  box-shadow: none;\n  background-color: var(--ic-action-dark-bg-hover);\n}\n\n:host(.search-submit-button) .button:focus {\n  box-shadow: none;\n}\n\n:host(.search-submit-button) .button:not(:active):focus {\n  box-shadow: none;\n  background-color: var(--ic-action-default-bg-hover);\n}\n\n:host(.search-submit-button) {\n  display: flex;\n  align-items: center;\n  margin: 0 var(--ic-space-xxs);\n}\n\n:host(.menu-close-button) ::slotted(svg) {\n  --icon-height: 14px;\n  --icon-width: 14px;\n}\n\n:host(.popout-menu-button) .button {\n  justify-content: left;\n  border-radius: 0;\n  white-space: pre-line;\n  text-align: start;\n}\n\n:host(.popout-menu-button) div.icon-container {\n  flex: none;\n}\n\n:host(.popout-menu-button) .button:focus {\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n}\n\n.ic-button-describedby {\n  display: none;\n}\n\n:host .ic-tooltip {\n  display: block;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\n\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcButtonSizes,\n  IcButtonTypes,\n  IcButtonVariants,\n  IcButtonTooltipPlacement,\n} from \"./ic-button.types\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nlet buttonIds = 0;\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n */\n@Component({\n  tag: \"ic-button\",\n  styleUrl: \"ic-button.css\",\n  shadow: true,\n})\nexport class Button {\n  @Element() el: HTMLIcButtonElement;\n  /**\n   * Determines whether the button should be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * Determines whether the button should be in loading state.\n   */\n  @Prop() loading?: boolean = false;\n  /**\n   * Determines whether the icon should appear on the right hand side of the button.\n   */\n  @Prop() iconRight?: boolean = false;\n  /**\n   * The type of the button.\n   */\n  @Prop() type?: IcButtonTypes = \"button\";\n  /**\n   * The URL that the link points to. This will render the button as an \"a\" tag.\n   */\n  @Prop() href?: string;\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n  /**\n   * Prompts the user to save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n  /**\n   * Hints at the human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n  /**\n   * The button variant to be displayed.\n   */\n  @Prop() variant?: IcButtonVariants = \"primary\";\n  /**\n   * The size of the button to be displayed.\n   */\n  @Prop() size?: IcButtonSizes = \"default\";\n  /**\n   * Fill the width of the container if true.\n   */\n  @Prop() fullWidth?: boolean = false;\n  /**\n   * Show an ic-tooltip displaying title or aria-label. Will always be shown for icon variant, so title or aria-label must be set.\n   */\n  @Prop() withIcTooltip?: boolean = false;\n  /**\n   * The position of the tooltip in relation to the button.\n   */\n  @Prop() IcTooltipPlacement?: IcButtonTooltipPlacement = \"bottom\";\n  /**\n   * Determines the style of button to be displayed.\n   */\n  @Prop({ mutable: true }) buttonStyle?: IcThemeForeground = \"default\";\n  /**\n   * Emitted when button has focus\n   */\n  @Event() icFocus!: EventEmitter<void>;\n  /**\n   * Emitted when button has blur\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  // @State forces re-render of component on change.\n  @State() iconRightState: boolean = false;\n\n  // CalculatedWidth must have a default value, since width is only calculated once button is rendered (with text).\n  private calculatedWidth: number = 68;\n  private inheritedAttributes: { [k: string]: unknown } = {};\n  private buttonEl: HTMLElement;\n  private hasTooltip: boolean = false;\n  private buttonIdNum = buttonIds++;\n  private tooltipEl: HTMLIcTooltipElement;\n  private id: string;\n\n  @Watch(\"iconRight\")\n  setIconRightState(): void {\n    this.iconRightState = this.iconRight;\n  }\n\n  @Watch(\"loading\")\n  calculateWidth(): void {\n    // Assume even padding on left and right\n    this.calculatedWidth = this.el.offsetWidth - 2 * this.el.offsetLeft;\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled || this.loading) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Listen(\"icThemeChange\", { 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 native `button`\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.buttonEl) {\n      this.buttonEl.focus();\n    }\n  }\n\n  /**\n   * @internal Updates tooltip/aria-label text - needed as can't watch an aria attribute change.\n   */\n  @Method()\n  async updateAriaLabel(newValue: string): Promise<void> {\n    if (this.hasTooltip) {\n      this.tooltipEl.label = newValue;\n      this.buttonEl.setAttribute(\"aria-label\", newValue);\n    }\n  }\n\n  private getLoadingBarWidth(): { [key: string]: string } {\n    return { width: `${this.calculatedWidth.toString()}px` };\n  }\n\n  private hasIconSlot(): boolean {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    if (iconEl != null) {\n      return true;\n    }\n    return false;\n  }\n\n  private handleHiddenFormButtonClick(form: HTMLFormElement): void {\n    const hiddenFormButton = document.createElement(\"button\");\n\n    hiddenFormButton.setAttribute(\"type\", this.el.type);\n    hiddenFormButton.style.display = \"none\";\n\n    form.appendChild(hiddenFormButton);\n\n    hiddenFormButton.click();\n    hiddenFormButton.remove();\n  }\n\n  private handleClick = (): void => {\n    if (\n      (this.el.type === \"submit\" || this.el.type === \"reset\") &&\n      !!this.el.closest(\"FORM\")\n    ) {\n      this.handleHiddenFormButtonClick(this.el.closest(\"FORM\"));\n    }\n  };\n\n  private onFocus = () => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.icBlur.emit();\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.buttonStyle = foregroundColor;\n    }\n  }\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"aria-expanded\",\n      \"title\",\n    ]);\n\n    const id = this.el.id;\n    this.id = id !== undefined ? id : null;\n    this.hasTooltip = this.variant === \"icon\" || this.withIcTooltip;\n  }\n\n  componentDidLoad(): void {\n    this.calculateWidth();\n    this.setIconRightState();\n    this.updateTheme();\n  }\n\n  render() {\n    const TagType = (this.href && \"a\") || \"button\";\n    const {\n      title,\n      \"aria-label\": ariaLabel,\n      ...restInheritedAttributes\n    } = this.inheritedAttributes;\n    const buttonAttrs =\n      TagType === \"button\"\n        ? { type: this.type, disabled: this.disabled }\n        : {\n            download: this.download !== false ? this.download : null,\n            href: this.href,\n            rel: this.rel,\n            target: this.target,\n            referrerpolicy: this.referrerpolicy,\n            hreflang: this.hreflang,\n          };\n    const newTitle = title && (title as string);\n    const titleAttr = this.hasTooltip ? {} : { title: newTitle };\n    let tooltipText = \"\";\n    if (this.hasTooltip) {\n      if (newTitle !== undefined) {\n        tooltipText = newTitle;\n      } else if (ariaLabel !== null) {\n        tooltipText = ariaLabel as string;\n      }\n    }\n\n    let describedBy: string = null;\n    let buttonId: string = null;\n    if (this.hasTooltip) {\n      buttonId =\n        this.id !== null\n          ? `ic-button-with-tooltip-${this.id}`\n          : `ic-button-with-tooltip-${this.buttonIdNum}`;\n      describedBy = `ic-tooltip-${buttonId}`;\n    }\n\n    const ButtonContent = () => {\n      return (\n        <TagType\n          class=\"button\"\n          aria-disabled={this.loading || this.disabled ? \"true\" : null}\n          aria-label={this.loading ? \"Loading\" : ariaLabel}\n          {...buttonAttrs}\n          {...restInheritedAttributes}\n          {...titleAttr}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n          ref={(el) => (this.buttonEl = el)}\n          id={buttonId}\n          aria-describedby={describedBy}\n        >\n          {this.hasIconSlot() && !this.iconRightState && !this.loading && (\n            <div class=\"icon-container\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          {this.loading ? (\n            <div class=\"loading-container\" style={this.getLoadingBarWidth()}>\n              <ic-loading-indicator\n                type=\"linear\"\n                dark={\n                  this.variant === \"primary\" ||\n                  this.variant === \"destructive\" ||\n                  this.buttonStyle === IcThemeForegroundEnum.Dark ||\n                  this.buttonStyle === IcThemeForegroundEnum.Light\n                }\n              ></ic-loading-indicator>\n            </div>\n          ) : (\n            <slot />\n          )}\n\n          {this.hasIconSlot() && this.iconRightState && !this.loading && (\n            <div class=\"icon-container\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n        </TagType>\n      );\n    };\n\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: this.disabled && !this.loading,\n          [`button-variant-${this.variant}`]: true,\n          [`button-size-${this.size}`]: true,\n          [\"loading\"]: this.loading,\n          [\"dark\"]: this.buttonStyle === IcThemeForegroundEnum.Dark,\n          [\"light\"]: this.buttonStyle === IcThemeForegroundEnum.Light,\n          [\"full-width\"]: this.fullWidth,\n        }}\n        onClick={this.handleClick}\n      >\n        {this.hasTooltip && (\n          <ic-tooltip\n            ref={(el) => (this.tooltipEl = el)}\n            label={tooltipText}\n            element-id={buttonId}\n            placement={this.IcTooltipPlacement}\n          >\n            <ButtonContent />\n          </ic-tooltip>\n        )}\n\n        {!this.hasTooltip && <ButtonContent />}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-button2.js","mappings":"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","names":[],"sources":["./src/components/ic-button/ic-button.css?tag=ic-button&encapsulation=shadow","./src/components/ic-button/ic-button.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: inline-block;\n\n  --button-default: var(--ic-action-default);\n  --button-default-hover: var(--ic-action-default-hover);\n  --button-default-active: var(--ic-action-default-active);\n  --button-default-background-hover: var(--ic-action-default-bg-hover);\n  --button-default-background-active: var(--ic-action-default-bg-active);\n  --icon-width: 100%;\n  --icon-height: 100%;\n}\n\n.button {\n  font-family: var(--ic-font-body-family);\n  text-decoration: none;\n  font-weight: 600;\n  font-size: 14px;\n  transition: var(--ic-easing-transition-fast);\n  border-radius: var(--ic-border-radius);\n  min-width: 100px;\n  display: inline-flex;\n  gap: var(--ic-space-xs);\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  background: none;\n  border: none;\n  box-sizing: border-box;\n  white-space: nowrap;\n  vertical-align: middle;\n}\n\n.button:hover {\n  cursor: pointer;\n}\n\n.button:focus,\n:host .button:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n:host(.light) .button:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n.button:focus-visible {\n  outline: none;\n}\n\n:host(.dark) .button {\n  --button-default: var(--ic-action-dark);\n  --button-default-hover: var(--ic-action-dark);\n  --button-default-active: var(--ic-action-dark);\n  --button-default-background-hover: var(--ic-action-dark-bg-hover);\n  --button-default-background-active: var(--ic-action-dark-bg-active);\n}\n\n:host(.light) .button {\n  --button-default: var(--ic-action-light);\n  --button-default-hover: var(--ic-action-light);\n  --button-default-active: var(--ic-action-light);\n  --button-default-background-hover: var(--ic-action-light-bg-hover);\n  --button-default-background-active: var(--ic-action-light-bg-active);\n}\n\n:host(.button-variant-primary.light) .button {\n  color: var(--ic-color-primary-text);\n\n  --button-default-hover: var(--ic-action-light-hover);\n  --button-default-active: var(--ic-action-light-active);\n}\n\n:host(.button-variant-primary.dark) .button {\n  --button-default-hover: var(--ic-action-dark-hover);\n  --button-default-active: var(--ic-action-dark-active);\n}\n\n:host(.disabled),\n:host(.disabled) .button,\n:host(.loading),\n:host(.loading) .button {\n  pointer-events: none;\n}\n\n/* Variants */\n\n/* Primary */\n\n:host(.button-variant-primary) .button {\n  color: var(--ic-architectural-white);\n  background-color: var(--button-default);\n}\n\n:host(.button-variant-primary) .button:hover:not(:focus) {\n  background-color: var(--button-default-hover);\n}\n\n:host(.button-variant-primary) .button:active:not(:focus),\n:host(.button-variant-primary.loading) .button {\n  background-color: var(--button-default-active);\n}\n\n:host(.button-variant-primary.disabled) .button {\n  background: var(--ic-architectural-200);\n  color: var(--ic-architectural-300);\n}\n\n:host(.button-variant-primary.light.disabled) .button {\n  background: var(--ic-architectural-600);\n  color: var(--ic-architectural-500);\n}\n\n/* Secondary */\n\n:host(.button-variant-secondary) .button {\n  border: 1px solid var(--button-default);\n  color: var(--button-default);\n}\n\n:host(.button-variant-secondary) .button:hover:not(:focus) {\n  background-color: var(--button-default-background-hover);\n  border-color: var(--button-default-hover);\n  color: var(--button-default-hover);\n}\n\n:host(.button-variant-secondary) .button:active:not(:focus) {\n  border-color: var(--button-default-active);\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-secondary.loading) .button {\n  border-color: var(--button-default-active);\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-secondary.disabled) .button,\n:host(.button-variant-secondary.disabled) .button:hover,\n:host(.button-variant-secondary.disabled) .button:active {\n  border-color: var(--ic-architectural-300);\n  color: var(--ic-architectural-300);\n  background: none;\n}\n\n:host(.button-variant-secondary.light.disabled) .button,\n:host(.button-variant-secondary.light.disabled) .button:hover,\n:host(.button-variant-secondary.light.disabled) .button:active {\n  border-color: var(--ic-architectural-500);\n  color: var(--ic-architectural-500);\n  background: none;\n}\n\n/* Tertiary */\n\n:host(.button-variant-tertiary) .button {\n  color: var(--button-default);\n}\n\n:host(.button-variant-tertiary) .button:hover:not(:focus) {\n  background-color: var(--button-default-background-hover);\n  color: var(--button-default-hover);\n}\n\n:host(.button-variant-tertiary) .button:active:not(:focus),\n:host(.button-variant-tertiary.loading) .button {\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-tertiary.disabled) .button,\n:host(.button-variant-tertiary.disabled) .button:hover,\n:host(.button-variant-tertiary.disabled) .button:active {\n  border-color: var(--ic-architectural-300);\n  color: var(--ic-architectural-300);\n  background: none;\n}\n\n:host(.button-variant-tertiary.light.disabled) .button,\n:host(.button-variant-tertiary.light.disabled) .button:hover,\n:host(.button-variant-tertiary.light.disabled) .button:active {\n  border-color: var(--ic-architectural-500);\n  color: var(--ic-architectural-500);\n  background: none;\n}\n\n/* Icon */\n\n:host(.button-variant-icon) .button {\n  color: var(--button-default);\n  min-width: 0;\n}\n\n:host(.button-variant-icon) .button:hover:not(:focus) {\n  background-color: var(--button-default-background-hover);\n  color: var(--button-default-hover);\n}\n\n:host(.button-variant-icon) .button:active:not(:focus),\n:host(.button-variant-icon.loading) .button {\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-icon.disabled) .button,\n:host(.button-variant-icon.disabled) .button:hover,\n:host(.button-variant-icon.disabled) .button:active {\n  color: var(--ic-architectural-300);\n  background: none;\n}\n\n/* Destructive */\n\n:host(.button-variant-destructive) .button {\n  color: var(--ic-architectural-white);\n  background-color: var(--ic-action-destructive);\n  text-transform: uppercase;\n}\n\n:host(.button-variant-destructive) .button:hover:not(:focus) {\n  background-color: var(--ic-action-destructive-hover);\n}\n\n:host(.button-variant-destructive) .button:active:not(:focus),\n:host(.button-variant-destructive.loading) .button {\n  background-color: var(--ic-action-destructive-active);\n}\n\n:host(.button-variant-destructive.disabled) .button {\n  background: var(--ic-architectural-200);\n  color: var(--ic-architectural-300);\n}\n\n/* Sizing */\n\n:host(.button-size-default) .button {\n  height: 40px;\n  padding: var(--ic-space-xs) var(--ic-space-md);\n}\n\n:host(.button-size-small) .button {\n  height: var(--ic-space-xl);\n  padding: var(--ic-space-xxs) var(--ic-space-md);\n}\n\n:host(.button-size-large) .button {\n  height: var(--ic-space-xxl);\n  padding: var(--ic-space-sm) var(--ic-space-md);\n}\n\n:host(.button-size-default.button-variant-icon) .button {\n  height: var(--ic-space-xl);\n  width: var(--ic-space-xl);\n  padding: 6px;\n}\n\n:host(.button-size-small.button-variant-icon) .button {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  padding: var(--ic-space-xxs);\n}\n\n:host(.button-size-large.button-variant-icon) .button {\n  height: 40px;\n  width: 40px;\n  padding: var(--ic-space-xs);\n}\n\n/* Width */\n:host(.full-width),\n:host(.full-width) .button {\n  width: 100%;\n}\n\n/* Loading */\n\ndiv.loading-container {\n  position: relative;\n  align-items: center;\n}\n\n@keyframes loading-animation {\n  0% {\n    width: 0%;\n    left: 0%;\n  }\n\n  25% {\n    width: 0%;\n    left: 0%;\n    opacity: 0;\n  }\n\n  50% {\n    width: 100%;\n    left: 0%;\n    opacity: 1;\n  }\n\n  75% {\n    width: 0%;\n    left: 100%;\n  }\n\n  100% {\n    width: 0%;\n    left: 100%;\n    opacity: 0;\n  }\n}\n\n/* Icons */\n\ndiv.icon-container {\n  box-sizing: border-box;\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n::slotted(svg) {\n  width: var(--icon-width) !important;\n  height: var(--icon-height) !important;\n  fill: currentcolor !important;\n  pointer-events: none;\n}\n\n:host(.button-variant-icon) .button .icon-container {\n  margin: 0;\n  pointer-events: none;\n}\n\n/** SEARCH **/\n\n:host(.search-submit-button) ::slotted(svg) {\n  --icon-height: 20px;\n  --icon-width: 20px;\n}\n\n:host(.search-submit-button-small) ::slotted(svg) {\n  --icon-height: 16px;\n  --icon-width: 16px;\n}\n\n:host(.clear-button) {\n  margin: 0 var(--ic-space-xxs);\n}\n\n:host(.clear-button) .button:focus {\n  box-shadow: none;\n}\n\n:host(.search-submit-button) .button:focus {\n  box-shadow: none;\n}\n\n:host(.search-submit-button) .button:not(:active):focus {\n  box-shadow: none;\n  background-color: var(--ic-action-default-bg-hover);\n}\n\n:host(.search-submit-button) {\n  display: flex;\n  align-items: center;\n  margin: 0 var(--ic-space-xxs);\n}\n\n:host(.menu-close-button) ::slotted(svg) {\n  --icon-height: 14px;\n  --icon-width: 14px;\n}\n\n:host(.popout-menu-button) .button {\n  justify-content: left;\n  border-radius: 0;\n  white-space: pre-line;\n  text-align: start;\n}\n\n:host(.popout-menu-button) div.icon-container {\n  flex: none;\n}\n\n:host(.popout-menu-button) .button:focus {\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n}\n\n.ic-button-describedby {\n  display: none;\n}\n\n:host .ic-tooltip {\n  display: block;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n  h,\n} from \"@stencil/core\";\n\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcButtonSizes,\n  IcButtonTypes,\n  IcButtonVariants,\n  IcButtonTooltipPlacement,\n} from \"./ic-button.types\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nlet buttonIds = 0;\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n */\n@Component({\n  tag: \"ic-button\",\n  styleUrl: \"ic-button.css\",\n  shadow: true,\n})\nexport class Button {\n  @Element() el: HTMLIcButtonElement;\n  /**\n   * Determines whether the button should be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * Determines whether the button should be in loading state.\n   */\n  @Prop() loading?: boolean = false;\n  /**\n   * The type of the button.\n   */\n  @Prop() type?: IcButtonTypes = \"button\";\n  /**\n   * The URL that the link points to. This will render the button as an \"a\" tag.\n   */\n  @Prop() href?: string;\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n  /**\n   * Prompts the user to save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n  /**\n   * Hints at the human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n  /**\n   * The button variant to be displayed.\n   */\n  @Prop() variant?: IcButtonVariants = \"primary\";\n  /**\n   * The size of the button to be displayed.\n   */\n  @Prop() size?: IcButtonSizes = \"default\";\n  /**\n   * Fill the width of the container if true.\n   */\n  @Prop() fullWidth?: boolean = false;\n  /**\n   * Disable ic-tooltip which is shown for icon variant. Title or aria-label must be set if this prop is not applied.\n   */\n  @Prop() disableTooltip?: boolean = false;\n  /**\n   * The position of the tooltip in relation to the button.\n   */\n  @Prop() tooltipPlacement?: IcButtonTooltipPlacement = \"bottom\";\n  /**\n   * Determines the whether the appearance of the button is dark, light, or the default.\n   */\n  @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n  /**\n   * Emitted when button has focus\n   */\n  @Event() icFocus!: EventEmitter<void>;\n  /**\n   * Emitted when button has blur\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  // CalculatedWidth must have a default value, since width is only calculated once button is rendered (with text).\n  private calculatedWidth: number = 68;\n  private inheritedAttributes: { [k: string]: unknown } = {};\n  private buttonEl: HTMLElement;\n  private hasTooltip: boolean = false;\n  private buttonIdNum = buttonIds++;\n  private tooltipEl: HTMLIcTooltipElement;\n  private id: string;\n\n  @Watch(\"loading\")\n  calculateWidth(): void {\n    // Assume even padding on left and right\n    this.calculatedWidth = this.el.offsetWidth - 2 * this.el.offsetLeft;\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled || this.loading) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Listen(\"icThemeChange\", { 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 native `button`\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.buttonEl) {\n      this.buttonEl.focus();\n    }\n  }\n\n  /**\n   * @internal Updates tooltip/aria-label text - needed as can't watch an aria attribute change.\n   */\n  @Method()\n  async updateAriaLabel(newValue: string): Promise<void> {\n    if (this.hasTooltip) {\n      this.tooltipEl.label = newValue;\n      this.buttonEl.setAttribute(\"aria-label\", newValue);\n    }\n  }\n\n  private getLoadingBarWidth(): { [key: string]: string } {\n    return { width: `${this.calculatedWidth.toString()}px` };\n  }\n\n  private hasIconSlot(): boolean {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    if (iconEl != null) {\n      return true;\n    }\n    return false;\n  }\n\n  private handleHiddenFormButtonClick(form: HTMLFormElement): void {\n    const hiddenFormButton = document.createElement(\"button\");\n\n    hiddenFormButton.setAttribute(\"type\", this.el.type);\n    hiddenFormButton.style.display = \"none\";\n\n    form.appendChild(hiddenFormButton);\n\n    hiddenFormButton.click();\n    hiddenFormButton.remove();\n  }\n\n  private handleClick = (): void => {\n    if (\n      (this.el.type === \"submit\" || this.el.type === \"reset\") &&\n      !!this.el.closest(\"FORM\")\n    ) {\n      this.handleHiddenFormButtonClick(this.el.closest(\"FORM\"));\n    }\n  };\n\n  private onFocus = () => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.icBlur.emit();\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  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"aria-expanded\",\n      \"title\",\n    ]);\n\n    const id = this.el.id;\n    this.id = id !== undefined ? id : null;\n    this.hasTooltip = this.variant === \"icon\";\n  }\n\n  componentDidLoad(): void {\n    this.calculateWidth();\n    this.updateTheme();\n  }\n\n  render() {\n    const TagType = (this.href && \"a\") || \"button\";\n    const {\n      title,\n      \"aria-label\": ariaLabel,\n      ...restInheritedAttributes\n    } = this.inheritedAttributes;\n    const buttonAttrs =\n      TagType === \"button\"\n        ? { type: this.type, disabled: this.disabled }\n        : {\n            download: this.download !== false ? this.download : null,\n            href: this.href,\n            rel: this.rel,\n            target: this.target,\n            referrerpolicy: this.referrerpolicy,\n            hreflang: this.hreflang,\n          };\n    const newTitle = title && (title as string);\n    const titleAttr = this.hasTooltip ? {} : { title: newTitle };\n    let tooltipText = \"\";\n    if (this.hasTooltip) {\n      if (newTitle !== undefined) {\n        tooltipText = newTitle;\n      } else if (ariaLabel !== null) {\n        tooltipText = ariaLabel as string;\n      }\n    }\n\n    let describedBy: string = null;\n    let buttonId: string = null;\n    if (this.hasTooltip) {\n      buttonId =\n        this.id !== null\n          ? `ic-button-with-tooltip-${this.id}`\n          : `ic-button-with-tooltip-${this.buttonIdNum}`;\n      describedBy = `ic-tooltip-${buttonId}`;\n    }\n\n    const ButtonContent = () => {\n      return (\n        <TagType\n          class=\"button\"\n          aria-disabled={this.loading || this.disabled ? \"true\" : null}\n          aria-label={this.loading ? \"Loading\" : ariaLabel}\n          {...buttonAttrs}\n          {...restInheritedAttributes}\n          {...titleAttr}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n          ref={(el) => (this.buttonEl = el)}\n          id={buttonId}\n          aria-describedby={describedBy}\n        >\n          {this.hasIconSlot() && !this.loading && (\n            <div class=\"icon-container\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          {this.loading ? (\n            <div class=\"loading-container\" style={this.getLoadingBarWidth()}>\n              <ic-loading-indicator\n                type=\"linear\"\n                appearance={\n                  this.variant === \"primary\" ||\n                  this.variant === \"destructive\" ||\n                  this.appearance === IcThemeForegroundEnum.Dark ||\n                  this.appearance === IcThemeForegroundEnum.Light\n                    ? \"light\"\n                    : \"dark\"\n                }\n              ></ic-loading-indicator>\n            </div>\n          ) : (\n            <slot />\n          )}\n        </TagType>\n      );\n    };\n\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: this.disabled && !this.loading,\n          [`button-variant-${this.variant}`]: true,\n          [`button-size-${this.size}`]: true,\n          [\"loading\"]: this.loading,\n          [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n          [\"light\"]: this.appearance === IcThemeForegroundEnum.Light,\n          [\"full-width\"]: this.fullWidth,\n        }}\n        onClick={this.handleClick}\n      >\n        {this.hasTooltip && (\n          <ic-tooltip\n            class={{ [\"tooltip-disabled-button\"]: this.disableTooltip }}\n            ref={(el) => (this.tooltipEl = el)}\n            label={tooltipText}\n            target={buttonId}\n            placement={this.tooltipPlacement}\n          >\n            <ButtonContent />\n          </ic-tooltip>\n        )}\n\n        {!this.hasTooltip && <ButtonContent />}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-card.js

@@ -75,7 +75,7 @@ const Card = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         ["disabled"]: disabled,
         ["fullwidth"]: fullWidth,
         ["focussed"]: isFocussed,
-      }, tabindex: clickable && !parentIsAnchorTag ? 0 : null, "aria-disabled": disabled ? "true" : null, disabled: disabled ? true : null }, attrs), h("div", { class: "card-header" }, isSlotUsed(this.el, "icon") && (h("div", { class: "icon" }, h("slot", { name: "icon" }))), h("div", { class: "card-title" }, h("slot", { name: "heading" }, h("ic-typography", { variant: "h4" }, h("p", null, heading))))), (message || isSlotUsed(this.el, "message")) && (h("div", { class: "card-message" }, h("slot", { name: "message" }, h("ic-typography", { variant: "subtitle-small" }, message))))));
+      }, tabindex: clickable && !parentIsAnchorTag ? 0 : null, "aria-disabled": disabled ? "true" : null, disabled: disabled ? true : null }, attrs), h("div", { class: "card-header" }, isSlotUsed(this.el, "icon") && (h("div", { class: "icon" }, h("slot", { name: "icon" }))), h("div", { class: "card-title" }, h("slot", { name: "heading" }, h("ic-typography", { variant: "h4" }, h("p", null, heading))))), (message || isSlotUsed(this.el, "message")) && (h("div", { class: "card-message" }, h("slot", { name: "message" }, h("ic-typography", { variant: "body" }, message))))));
   }
   get el() { return this; }
   static get style() { return icCardCss; }

package/dist/components/ic-card.js.map

@@ -1 +1 @@
-{"file":"ic-card.js","mappings":"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","names":[],"sources":["./src/components/ic-card/ic-card.css?tag=ic-card&encapsulation=shadow","./src/components/ic-card/ic-card.tsx"],"sourcesContent":["@import \"../../global/normalise.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: none;\n}\n\n.card,\n.card.clickable {\n  border: 1px solid var(--ic-architectural-300);\n  border-radius: var(--ic-border-radius);\n  padding: var(--ic-space-md);\n  text-align: left;\n  color: var(--ic-architechtural-black);\n  transition: var(--ic-easing-transition-fast);\n}\n\n.card.clickable:hover {\n  background-color: var(--ic-action-default-bg-hover);\n  border-color: var(--ic-action-default-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: none;\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  padding-right: var(--ic-space-xs);\n}\n\n.card.clickable ::slotted(svg) {\n  fill: var(--ic-action-default);\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: 1px;\n}\n\n.card.clickable:hover .card-title {\n  color: var(--ic-hyperlink-hover) !important;\n  text-decoration: none;\n}\n\n.card.clickable:focus .card-title,\n.card.clickable.focussed .card-title {\n  color: var(--ic-hyperlink-hover);\n}\n\n.card.clickable:active .card-title {\n  color: var(--ic-hyperlink-hover);\n}\n\n.card.disabled .card-title {\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n  text-decoration-color: var(--ic-color-tertiary-text);\n  color: var(--ic-color-tertiary-text);\n}\n\n.card-message {\n  margin-top: var(--ic-space-xxs);\n  align-items: left;\n}\n\n.card.disabled .card-message {\n  color: var(--ic-color-tertiary-text);\n}\n","import { Component, Element, Listen, Prop, State, h } from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\n\n/**\n * @slot icon - Content will be placed to the left of the card title.\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 */\n@Component({\n  tag: \"ic-card\",\n  styleUrl: \"ic-card.css\",\n  shadow: true,\n})\nexport class Card {\n  @Element() el: HTMLIcCardElement;\n\n  /**\n   * Set the variant to static or clickable\n   */\n  @Prop({ mutable: true }) clickable?: boolean = false;\n  /**\n   * URL for clickable cards\n   */\n  @Prop() href?: string | undefined;\n  /**\n   * Human readable explanation of the URL\n   */\n  @Prop() hreflang?: string = \"\";\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n  /**\n   * Title for the card\n   */\n  @Prop() heading!: string;\n  /**\n   * Main body message of the card\n   */\n  @Prop() message?: string = \"\";\n  /**\n   * Whether the card is disabled if it is clickable\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   *  If true then fill width of container\n   */\n  @Prop() fullWidth: boolean = false;\n\n  @State() parentIsAnchorTag: boolean = false;\n\n  @State() isFocussed: boolean = false;\n\n  @State() parentEl: HTMLElement | null = null;\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  private parentFocussed = (): void => {\n    this.isFocussed = true;\n  };\n\n  private parentBlurred = (): void => {\n    this.isFocussed = false;\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  }\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  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Card\"\n    );\n  }\n\n  render() {\n    const {\n      clickable,\n      disabled,\n      heading,\n      message,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\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        }}\n        tabindex={clickable && !parentIsAnchorTag ? 0 : null}\n        aria-disabled={disabled ? \"true\" : null}\n        disabled={disabled ? true : null}\n        {...attrs}\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        </div>\n        {(message || isSlotUsed(this.el, \"message\")) && (\n          <div class=\"card-message\">\n            <slot name=\"message\">\n              <ic-typography variant=\"subtitle-small\">{message}</ic-typography>\n            </slot>\n          </div>\n        )}\n      </Component>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-card.js","mappings":"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","names":[],"sources":["./src/components/ic-card/ic-card.css?tag=ic-card&encapsulation=shadow","./src/components/ic-card/ic-card.tsx"],"sourcesContent":["@import \"../../global/normalise.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: none;\n}\n\n.card,\n.card.clickable {\n  border: 1px solid var(--ic-architectural-300);\n  border-radius: var(--ic-border-radius);\n  padding: var(--ic-space-md);\n  text-align: left;\n  color: var(--ic-architechtural-black);\n  transition: var(--ic-easing-transition-fast);\n}\n\n.card.clickable:hover {\n  background-color: var(--ic-action-default-bg-hover);\n  border-color: var(--ic-action-default-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: none;\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  padding-right: var(--ic-space-xs);\n}\n\n.card.clickable ::slotted(svg) {\n  fill: var(--ic-action-default);\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: 1px;\n}\n\n.card.clickable:hover .card-title {\n  color: var(--ic-hyperlink-hover) !important;\n  text-decoration: none;\n}\n\n.card.clickable:focus .card-title,\n.card.clickable.focussed .card-title {\n  color: var(--ic-hyperlink-hover);\n}\n\n.card.clickable:active .card-title {\n  color: var(--ic-hyperlink-hover);\n}\n\n.card.disabled .card-title {\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n  text-decoration-color: var(--ic-color-tertiary-text);\n  color: var(--ic-color-tertiary-text);\n}\n\n.card-message {\n  margin-top: var(--ic-space-xxs);\n  align-items: left;\n}\n\n.card.disabled .card-message {\n  color: var(--ic-color-tertiary-text);\n}\n","import { Component, Element, Listen, Prop, State, h } from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\n\n/**\n * @slot icon - Content will be placed to the left of the card title.\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 */\n@Component({\n  tag: \"ic-card\",\n  styleUrl: \"ic-card.css\",\n  shadow: true,\n})\nexport class Card {\n  @Element() el: HTMLIcCardElement;\n\n  /**\n   * Set the variant to static or clickable\n   */\n  @Prop({ mutable: true }) clickable?: boolean = false;\n  /**\n   * URL for clickable cards\n   */\n  @Prop() href?: string | undefined;\n  /**\n   * Human readable explanation of the URL\n   */\n  @Prop() hreflang?: string = \"\";\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n  /**\n   * Title for the card\n   */\n  @Prop() heading!: string;\n  /**\n   * Main body message of the card\n   */\n  @Prop() message?: string = \"\";\n  /**\n   * Whether the card is disabled if it is clickable\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   *  If true then fill width of container\n   */\n  @Prop() fullWidth: boolean = false;\n\n  @State() parentIsAnchorTag: boolean = false;\n\n  @State() isFocussed: boolean = false;\n\n  @State() parentEl: HTMLElement | null = null;\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  private parentFocussed = (): void => {\n    this.isFocussed = true;\n  };\n\n  private parentBlurred = (): void => {\n    this.isFocussed = false;\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  }\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  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Card\"\n    );\n  }\n\n  render() {\n    const {\n      clickable,\n      disabled,\n      heading,\n      message,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\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        }}\n        tabindex={clickable && !parentIsAnchorTag ? 0 : null}\n        aria-disabled={disabled ? \"true\" : null}\n        disabled={disabled ? true : null}\n        {...attrs}\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        </div>\n        {(message || isSlotUsed(this.el, \"message\")) && (\n          <div class=\"card-message\">\n            <slot name=\"message\">\n              <ic-typography variant=\"body\">{message}</ic-typography>\n            </slot>\n          </div>\n        )}\n      </Component>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-checkbox-group.js

@@ -18,7 +18,7 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.hideLabel = false;
     this.disabled = false;
     this.helperText = "";
-    this.dense = false;
+    this.small = false;
     this.validationStatus = "";
     this.validationText = "";
     this.checkedOptions = [];
@@ -67,7 +67,7 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "hideLabel": [4, "hide-label"],
     "disabled": [4],
     "helperText": [1, "helper-text"],
-    "dense": [4],
+    "small": [4],
     "validationStatus": [1, "validation-status"],
     "validationText": [1, "validation-text"],
     "checkedOptions": [32]

package/dist/components/ic-checkbox-group.js.map

@@ -1 +1 @@
-{"file":"ic-checkbox-group.js","mappings":"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","names":[],"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/normalise.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.list-items {\n  list-style: none;\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  State,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  hasValidationStatus,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty } 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})\nexport class CheckboxGroup {\n  @Element() host: HTMLIcCheckboxGroupElement;\n\n  /**\n   * Provide a label for the input.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Provide a name for the input.\n   */\n  @Prop() name!: string;\n\n  /**\n   * Specify if the input requires a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Hides the label and applies the required label value as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * Specify whether the input is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Provide helper text to display additional field guidance.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * Specify whether dense styling to be applied to element.\n   */\n  @Prop() dense: boolean = false;\n  /**\n   * Provide validation status - 'error'\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n  /**\n   * Provide validation text - 'error'\n   */\n  @Prop() validationText: string = \"\";\n\n  /**\n   * Emitted when a checkbox is checked.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  private checkboxOptions: HTMLIcCheckboxElement[];\n\n  @State() checkedOptions: string[] = [];\n\n  @Listen(\"checkboxChecked\")\n  selectHandler(): void {\n    this.checkboxOptions = Array.from(\n      this.host.querySelectorAll(\"ic-checkbox\")\n    );\n    this.checkboxOptions.forEach((checkbox) => {\n      if (\n        checkbox.checked &&\n        this.checkedOptions.indexOf(checkbox.value) === -1\n      ) {\n        this.checkedOptions.push(checkbox.value);\n      }\n    });\n    this.icChange.emit({ value: this.checkedOptions });\n  }\n\n  componentDidLoad(): void {\n    this.checkboxOptions = Array.from(\n      this.host.querySelectorAll(\"ic-checkbox\")\n    );\n    this.checkboxOptions.forEach((checkbox) => {\n      if (\n        checkbox.checked &&\n        this.checkedOptions.indexOf(checkbox.value) === -1\n      ) {\n        this.checkedOptions.push(checkbox.value);\n      }\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  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>\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=\"list-items\">\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.js","mappings":"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","names":[],"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/normalise.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.list-items {\n  list-style: none;\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  State,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  hasValidationStatus,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty } 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})\nexport class CheckboxGroup {\n  @Element() host: HTMLIcCheckboxGroupElement;\n\n  /**\n   * Provide a label for the input.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Provide a name for the input.\n   */\n  @Prop() name!: string;\n\n  /**\n   * Specify if the input requires a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Hides the label and applies the required label value as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * Specify whether the input is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Provide helper text to display additional field guidance.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * Specify whether small styling to be applied to element.\n   */\n  @Prop() small: boolean = false;\n  /**\n   * Provide validation status - 'error'\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n  /**\n   * Provide validation text - 'error'\n   */\n  @Prop() validationText: string = \"\";\n\n  /**\n   * Emitted when a checkbox is checked.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  private checkboxOptions: HTMLIcCheckboxElement[];\n\n  @State() checkedOptions: string[] = [];\n\n  @Listen(\"checkboxChecked\")\n  selectHandler(): void {\n    this.checkboxOptions = Array.from(\n      this.host.querySelectorAll(\"ic-checkbox\")\n    );\n    this.checkboxOptions.forEach((checkbox) => {\n      if (\n        checkbox.checked &&\n        this.checkedOptions.indexOf(checkbox.value) === -1\n      ) {\n        this.checkedOptions.push(checkbox.value);\n      }\n    });\n    this.icChange.emit({ value: this.checkedOptions });\n  }\n\n  componentDidLoad(): void {\n    this.checkboxOptions = Array.from(\n      this.host.querySelectorAll(\"ic-checkbox\")\n    );\n    this.checkboxOptions.forEach((checkbox) => {\n      if (\n        checkbox.checked &&\n        this.checkedOptions.indexOf(checkbox.value) === -1\n      ) {\n        this.checkedOptions.push(checkbox.value);\n      }\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  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>\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=\"list-items\">\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}

package/dist/components/ic-checkbox.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { a as onComponentRequiredPropUndefined, r as renderHiddenInput, b as removeHiddenInput, i as isSlotUsed } from './helpers.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 
-const icCheckboxCss = "/*! 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([disabled]){color:var(--ic-architectural-200);pointer-events:none}:host([dense]) .container{margin-bottom:10px}.container{display:flex;width:-moz-fit-content;width:fit-content;margin-bottom:var(--ic-space-sm);margin-left:var(--ic-space-xxs)}.checkbox{-webkit-appearance:none;-moz-appearance:none;display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:transparent;border:1px solid var(--ic-architectural-300);border-radius:var(--ic-border-radius);outline:none;cursor:pointer;transition:var(--ic-easing-transition-fast)}.checkbox:checked{background-color:var(--ic-action-default);border:1px solid var(--ic-action-default);transition:var(--ic-easing-transition-slow)}.checkbox:checked:disabled{background-color:var(--ic-architectural-200)}.checkbox.indeterminate:checked{background-color:transparent;border:2px solid var(--ic-action-default)}.checkbox:checked:hover{background-color:var(--ic-action-default-hover)}.checkbox.indeterminate:checked:hover{background-color:var(--ic-action-default-bg-hover);border:2px solid var(--ic-action-default-hover)}.checkbox:checked:active{background-color:var(--ic-action-default-active)}.checkbox.indeterminate:checked:active{background-color:var(--ic-action-default-bg-active);border:2px solid var(--ic-action-default-active)}.checkbox:hover{background-color:var(--ic-action-default-bg-hover);box-shadow:0 0 0 4px var(--ic-action-default-bg-hover);border:1px solid var(--ic-action-default-hover)}.checkbox:active{background-color:var(--ic-action-default-bg-active);box-shadow:0 0 0 4px var(--ic-action-default-bg-active);border:1px solid var(--ic-action-default-active)}.checkbox:focus{box-shadow:var(--ic-border-focus)}.checkbox:disabled{border:1px dashed var(--ic-architectural-200)}.checkbox-label{padding-left:var(--ic-space-sm)}.checkbox-label:hover{cursor:pointer}.checkmark{position:relative;right:calc(-1 * var(--ic-space-lg));margin-left:calc(-1 * var(--ic-space-lg));fill:white;z-index:1;background-color:transparent;pointer-events:none}.indeterminate-symbol{position:relative;width:14px;height:var(--ic-space-xxxs);top:11px;right:-19px;margin-left:-14px;z-index:1;background-color:var(--ic-action-default);pointer-events:none}.container:hover .indeterminate-symbol{background-color:var(--ic-action-default-hover)}.container:active .indeterminate-symbol{background-color:var(--ic-action-default-active)}.additional-field-wrapper{margin-left:44px;margin-top:var(--ic-space-xs)}.branch-corner{color:var(--ic-action-default);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 3px;border-bottom:2px solid var(--ic-action-default);border-left:2px solid var(--ic-action-default)}.dynamic-container{display:flex;position:relative;margin-left:15px;margin-top:-6px;margin-bottom:var(--ic-space-md);gap:var(--ic-space-xs)}.dynamic-text{color:var(--ic-action-default);margin-top:7px;margin-bottom:var(--ic-space-xs);border-radius:2%}";
+const icCheckboxCss = "/*! 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([disabled]){color:var(--ic-architectural-200);pointer-events:none}:host([small]) .container{margin-bottom:10px}.container{display:flex;width:-moz-fit-content;width:fit-content;margin-bottom:var(--ic-space-sm);margin-left:var(--ic-space-xxs)}.checkbox{-webkit-appearance:none;-moz-appearance:none;display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:transparent;border:1px solid var(--ic-architectural-300);border-radius:var(--ic-border-radius);outline:none;cursor:pointer;transition:var(--ic-easing-transition-fast)}.checkbox:checked{background-color:var(--ic-action-default);border:1px solid var(--ic-action-default);transition:var(--ic-easing-transition-slow)}.checkbox:checked:disabled{background-color:var(--ic-architectural-200)}.checkbox.indeterminate:checked{background-color:transparent;border:2px solid var(--ic-action-default)}.checkbox:checked:hover{background-color:var(--ic-action-default-hover)}.checkbox.indeterminate:checked:hover{background-color:var(--ic-action-default-bg-hover);border:2px solid var(--ic-action-default-hover)}.checkbox:checked:active{background-color:var(--ic-action-default-active)}.checkbox.indeterminate:checked:active{background-color:var(--ic-action-default-bg-active);border:2px solid var(--ic-action-default-active)}.checkbox:hover{background-color:var(--ic-action-default-bg-hover);box-shadow:0 0 0 4px var(--ic-action-default-bg-hover);border:1px solid var(--ic-action-default-hover)}.checkbox:active{background-color:var(--ic-action-default-bg-active);box-shadow:0 0 0 4px var(--ic-action-default-bg-active);border:1px solid var(--ic-action-default-active)}.checkbox:focus{box-shadow:var(--ic-border-focus)}.checkbox:disabled{border:1px dashed var(--ic-architectural-200)}.checkbox-label{padding-left:var(--ic-space-sm)}.checkbox-label:hover{cursor:pointer}.checkmark{position:relative;right:calc(-1 * var(--ic-space-lg));margin-left:calc(-1 * var(--ic-space-lg));fill:white;z-index:1;background-color:transparent;pointer-events:none}.indeterminate-symbol{position:relative;width:14px;height:var(--ic-space-xxxs);top:11px;right:-19px;margin-left:-14px;z-index:1;background-color:var(--ic-action-default);pointer-events:none}.container:hover .indeterminate-symbol{background-color:var(--ic-action-default-hover)}.container:active .indeterminate-symbol{background-color:var(--ic-action-default-active)}.additional-field-wrapper{margin-left:44px;margin-top:var(--ic-space-xs)}.branch-corner{color:var(--ic-action-default);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 3px;border-bottom:2px solid var(--ic-action-default);border-left:2px solid var(--ic-action-default)}.dynamic-container{display:flex;position:relative;margin-left:15px;margin-top:-6px;margin-bottom:var(--ic-space-md);gap:var(--ic-space-xs)}.dynamic-text{color:var(--ic-action-default);margin-top:7px;margin-bottom:var(--ic-space-xs);border-radius:2%}";
 
 const Checkbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/ic-checkbox.js.map

@@ -1 +1 @@
-{"file":"ic-checkbox.js","mappings":"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","names":[],"sources":["./src/components/ic-checkbox/ic-checkbox.css?tag=ic-checkbox&encapsulation=shadow","./src/components/ic-checkbox/ic-checkbox.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host([disabled]) {\n  color: var(--ic-architectural-200);\n  pointer-events: none;\n}\n\n:host([dense]) .container {\n  margin-bottom: 10px;\n}\n\n.container {\n  display: flex;\n  width: fit-content;\n  margin-bottom: var(--ic-space-sm);\n  margin-left: var(--ic-space-xxs);\n}\n\n.checkbox {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  background-color: transparent;\n  border: 1px solid var(--ic-architectural-300);\n  border-radius: var(--ic-border-radius);\n  outline: none;\n  cursor: pointer;\n  transition: var(--ic-easing-transition-fast);\n}\n\n.checkbox:checked {\n  background-color: var(--ic-action-default);\n  border: 1px solid var(--ic-action-default);\n  transition: var(--ic-easing-transition-slow);\n}\n\n.checkbox:checked:disabled {\n  background-color: var(--ic-architectural-200);\n}\n\n.checkbox.indeterminate:checked {\n  background-color: transparent;\n  border: 2px solid var(--ic-action-default);\n}\n\n.checkbox:checked:hover {\n  background-color: var(--ic-action-default-hover);\n}\n\n.checkbox.indeterminate:checked:hover {\n  background-color: var(--ic-action-default-bg-hover);\n  border: 2px solid var(--ic-action-default-hover);\n}\n\n.checkbox:checked:active {\n  background-color: var(--ic-action-default-active);\n}\n\n.checkbox.indeterminate:checked:active {\n  background-color: var(--ic-action-default-bg-active);\n  border: 2px solid var(--ic-action-default-active);\n}\n\n.checkbox:hover {\n  background-color: var(--ic-action-default-bg-hover);\n  box-shadow: 0 0 0 4px var(--ic-action-default-bg-hover);\n  border: 1px solid var(--ic-action-default-hover);\n}\n\n.checkbox:active {\n  background-color: var(--ic-action-default-bg-active);\n  box-shadow: 0 0 0 4px var(--ic-action-default-bg-active);\n  border: 1px solid var(--ic-action-default-active);\n}\n\n.checkbox:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n.checkbox:disabled {\n  border: 1px dashed var(--ic-architectural-200);\n}\n\n.checkbox-label {\n  padding-left: var(--ic-space-sm);\n}\n\n.checkbox-label:hover {\n  cursor: pointer;\n}\n\n.checkmark {\n  position: relative;\n  right: calc(-1 * var(--ic-space-lg));\n  margin-left: calc(-1 * var(--ic-space-lg));\n  fill: white;\n  z-index: 1;\n  background-color: transparent;\n  pointer-events: none;\n}\n\n.indeterminate-symbol {\n  position: relative;\n  width: 14px;\n  height: var(--ic-space-xxxs);\n  top: 11px;\n  right: -19px;\n  margin-left: -14px;\n  z-index: 1;\n  background-color: var(--ic-action-default);\n  pointer-events: none;\n}\n\n.container:hover .indeterminate-symbol {\n  background-color: var(--ic-action-default-hover);\n}\n\n.container:active .indeterminate-symbol {\n  background-color: var(--ic-action-default-active);\n}\n\n.additional-field-wrapper {\n  margin-left: 44px;\n  margin-top: var(--ic-space-xs);\n}\n\n.branch-corner {\n  color: var(--ic-action-default);\n  height: var(--ic-space-md);\n  width: var(--ic-space-xl);\n  border-radius: 0 0 0 3px;\n  border-bottom: 2px solid var(--ic-action-default);\n  border-left: 2px solid var(--ic-action-default);\n}\n\n.dynamic-container {\n  display: flex;\n  position: relative;\n  margin-left: 15px;\n  margin-top: -6px;\n  margin-bottom: var(--ic-space-md);\n  gap: var(--ic-space-xs);\n}\n\n.dynamic-text {\n  color: var(--ic-action-default);\n  margin-top: 7px;\n  margin-bottom: var(--ic-space-xs);\n  border-radius: 2%;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  removeHiddenInput,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-checkbox\",\n  styleUrl: \"ic-checkbox.css\",\n  shadow: true,\n})\nexport class Checkbox {\n  /**\n   * Set the checkbox to the checked state\n   */\n  @Prop({ reflect: true }) checked?: boolean = false;\n  /**\n   * Set the checkbox to the disabled state\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * Provide a label for the input\n   */\n  @Prop() label!: string;\n  /**\n   * Provide a value for the input\n   */\n  @Prop() value!: string;\n  /**\n   * Provide a name for the input\n   */\n  @Prop() name: string;\n  /**\n   * Provide a group label for the input\n   */\n  @Prop() groupLabel: string;\n  /**\n   * Provide a text prop for the dynamic text\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n  /**\n   * Set which style of additionalField will be displayed if used\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n  /**\n   * Display the indeterminate state when checked\n   */\n  @Prop() indeterminate: boolean = false;\n\n  @Element() host: HTMLIcCheckboxElement;\n\n  /**\n   * Emitted when a checkbox has been checked\n   */\n  @Event() checkboxChecked: EventEmitter<void>;\n\n  private additionalFieldContainer: HTMLDivElement;\n\n  private handleClick = () => {\n    this.checked = !this.checked;\n    this.checkboxChecked.emit();\n  };\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.host.querySelector(\"ic-text-field\");\n      if (!this.checked) {\n        textfield && textfield.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield && textfield.removeAttribute(\"disabled\");\n      }\n    } else {\n      if (!this.checked) {\n        this.additionalFieldContainer.style.display = \"none\";\n      } else {\n        this.additionalFieldContainer.style.display = \"flex\";\n      }\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.value, propName: \"value\" },\n      ],\n      \"Checkbox\"\n    );\n  }\n\n  render() {\n    const id = `ic-checkbox-${\n      this.label !== undefined ? this.label : this.value\n    }-${this.groupLabel}`;\n\n    this.checked\n      ? renderHiddenInput(\n          true,\n          this.host,\n          this.name,\n          this.checked && this.value,\n          this.disabled\n        )\n      : removeHiddenInput(this.host);\n\n    return (\n      <Host>\n        <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n          {this.checked && !this.indeterminate && (\n            <svg\n              class=\"checkmark\"\n              width=\"24\"\n              height=\"24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n            >\n              <title>checkmark icon</title>\n              <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n            </svg>\n          )}\n          {this.checked && this.indeterminate && (\n            <div class=\"indeterminate-symbol\" />\n          )}\n          <input\n            role=\"checkbox\"\n            class={{\n              [\"checkbox\"]: true,\n              [\"checked\"]: this.checked,\n              [\"indeterminate\"]: this.indeterminate,\n            }}\n            type=\"checkbox\"\n            name={this.name}\n            id={id}\n            value={this.value}\n            disabled={this.disabled ? true : null}\n            checked={this.checked}\n            onClick={this.handleClick}\n          ></input>\n          <ic-typography variant=\"body\">\n            <label class=\"checkbox-label\" htmlFor={id}>\n              {this.label}\n            </label>\n          </ic-typography>\n        </div>\n        {isSlotUsed(this.host, \"additional-field\") && (\n          <div\n            class=\"dynamic-container\"\n            ref={(el) => (this.additionalFieldContainer = el)}\n          >\n            {this.additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {this.additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\" aria-live=\"polite\">\n                    {this.dynamicText}\n                  </p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\":\n                    this.additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name=\"additional-field\"></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-checkbox.js","mappings":"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","names":[],"sources":["./src/components/ic-checkbox/ic-checkbox.css?tag=ic-checkbox&encapsulation=shadow","./src/components/ic-checkbox/ic-checkbox.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host([disabled]) {\n  color: var(--ic-architectural-200);\n  pointer-events: none;\n}\n\n:host([small]) .container {\n  margin-bottom: 10px;\n}\n\n.container {\n  display: flex;\n  width: fit-content;\n  margin-bottom: var(--ic-space-sm);\n  margin-left: var(--ic-space-xxs);\n}\n\n.checkbox {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  background-color: transparent;\n  border: 1px solid var(--ic-architectural-300);\n  border-radius: var(--ic-border-radius);\n  outline: none;\n  cursor: pointer;\n  transition: var(--ic-easing-transition-fast);\n}\n\n.checkbox:checked {\n  background-color: var(--ic-action-default);\n  border: 1px solid var(--ic-action-default);\n  transition: var(--ic-easing-transition-slow);\n}\n\n.checkbox:checked:disabled {\n  background-color: var(--ic-architectural-200);\n}\n\n.checkbox.indeterminate:checked {\n  background-color: transparent;\n  border: 2px solid var(--ic-action-default);\n}\n\n.checkbox:checked:hover {\n  background-color: var(--ic-action-default-hover);\n}\n\n.checkbox.indeterminate:checked:hover {\n  background-color: var(--ic-action-default-bg-hover);\n  border: 2px solid var(--ic-action-default-hover);\n}\n\n.checkbox:checked:active {\n  background-color: var(--ic-action-default-active);\n}\n\n.checkbox.indeterminate:checked:active {\n  background-color: var(--ic-action-default-bg-active);\n  border: 2px solid var(--ic-action-default-active);\n}\n\n.checkbox:hover {\n  background-color: var(--ic-action-default-bg-hover);\n  box-shadow: 0 0 0 4px var(--ic-action-default-bg-hover);\n  border: 1px solid var(--ic-action-default-hover);\n}\n\n.checkbox:active {\n  background-color: var(--ic-action-default-bg-active);\n  box-shadow: 0 0 0 4px var(--ic-action-default-bg-active);\n  border: 1px solid var(--ic-action-default-active);\n}\n\n.checkbox:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n.checkbox:disabled {\n  border: 1px dashed var(--ic-architectural-200);\n}\n\n.checkbox-label {\n  padding-left: var(--ic-space-sm);\n}\n\n.checkbox-label:hover {\n  cursor: pointer;\n}\n\n.checkmark {\n  position: relative;\n  right: calc(-1 * var(--ic-space-lg));\n  margin-left: calc(-1 * var(--ic-space-lg));\n  fill: white;\n  z-index: 1;\n  background-color: transparent;\n  pointer-events: none;\n}\n\n.indeterminate-symbol {\n  position: relative;\n  width: 14px;\n  height: var(--ic-space-xxxs);\n  top: 11px;\n  right: -19px;\n  margin-left: -14px;\n  z-index: 1;\n  background-color: var(--ic-action-default);\n  pointer-events: none;\n}\n\n.container:hover .indeterminate-symbol {\n  background-color: var(--ic-action-default-hover);\n}\n\n.container:active .indeterminate-symbol {\n  background-color: var(--ic-action-default-active);\n}\n\n.additional-field-wrapper {\n  margin-left: 44px;\n  margin-top: var(--ic-space-xs);\n}\n\n.branch-corner {\n  color: var(--ic-action-default);\n  height: var(--ic-space-md);\n  width: var(--ic-space-xl);\n  border-radius: 0 0 0 3px;\n  border-bottom: 2px solid var(--ic-action-default);\n  border-left: 2px solid var(--ic-action-default);\n}\n\n.dynamic-container {\n  display: flex;\n  position: relative;\n  margin-left: 15px;\n  margin-top: -6px;\n  margin-bottom: var(--ic-space-md);\n  gap: var(--ic-space-xs);\n}\n\n.dynamic-text {\n  color: var(--ic-action-default);\n  margin-top: 7px;\n  margin-bottom: var(--ic-space-xs);\n  border-radius: 2%;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  removeHiddenInput,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-checkbox\",\n  styleUrl: \"ic-checkbox.css\",\n  shadow: true,\n})\nexport class Checkbox {\n  /**\n   * Set the checkbox to the checked state\n   */\n  @Prop({ reflect: true }) checked?: boolean = false;\n  /**\n   * Set the checkbox to the disabled state\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * Provide a label for the input\n   */\n  @Prop() label!: string;\n  /**\n   * Provide a value for the input\n   */\n  @Prop() value!: string;\n  /**\n   * Provide a name for the input\n   */\n  @Prop() name: string;\n  /**\n   * Provide a group label for the input\n   */\n  @Prop() groupLabel: string;\n  /**\n   * Provide a text prop for the dynamic text\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n  /**\n   * Set which style of additionalField will be displayed if used\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n  /**\n   * Display the indeterminate state when checked\n   */\n  @Prop() indeterminate: boolean = false;\n\n  @Element() host: HTMLIcCheckboxElement;\n\n  /**\n   * Emitted when a checkbox has been checked\n   */\n  @Event() checkboxChecked: EventEmitter<void>;\n\n  private additionalFieldContainer: HTMLDivElement;\n\n  private handleClick = () => {\n    this.checked = !this.checked;\n    this.checkboxChecked.emit();\n  };\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.host.querySelector(\"ic-text-field\");\n      if (!this.checked) {\n        textfield && textfield.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield && textfield.removeAttribute(\"disabled\");\n      }\n    } else {\n      if (!this.checked) {\n        this.additionalFieldContainer.style.display = \"none\";\n      } else {\n        this.additionalFieldContainer.style.display = \"flex\";\n      }\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.value, propName: \"value\" },\n      ],\n      \"Checkbox\"\n    );\n  }\n\n  render() {\n    const id = `ic-checkbox-${\n      this.label !== undefined ? this.label : this.value\n    }-${this.groupLabel}`;\n\n    this.checked\n      ? renderHiddenInput(\n          true,\n          this.host,\n          this.name,\n          this.checked && this.value,\n          this.disabled\n        )\n      : removeHiddenInput(this.host);\n\n    return (\n      <Host>\n        <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n          {this.checked && !this.indeterminate && (\n            <svg\n              class=\"checkmark\"\n              width=\"24\"\n              height=\"24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n            >\n              <title>checkmark icon</title>\n              <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n            </svg>\n          )}\n          {this.checked && this.indeterminate && (\n            <div class=\"indeterminate-symbol\" />\n          )}\n          <input\n            role=\"checkbox\"\n            class={{\n              [\"checkbox\"]: true,\n              [\"checked\"]: this.checked,\n              [\"indeterminate\"]: this.indeterminate,\n            }}\n            type=\"checkbox\"\n            name={this.name}\n            id={id}\n            value={this.value}\n            disabled={this.disabled ? true : null}\n            checked={this.checked}\n            onClick={this.handleClick}\n          ></input>\n          <ic-typography variant=\"body\">\n            <label class=\"checkbox-label\" htmlFor={id}>\n              {this.label}\n            </label>\n          </ic-typography>\n        </div>\n        {isSlotUsed(this.host, \"additional-field\") && (\n          <div\n            class=\"dynamic-container\"\n            ref={(el) => (this.additionalFieldContainer = el)}\n          >\n            {this.additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {this.additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\" aria-live=\"polite\">\n                    {this.dynamicText}\n                  </p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\":\n                    this.additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name=\"additional-field\"></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-data-entity.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 
-const icDataEntityCss = "/*! 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}.rows{display:flex;flex-direction:column;gap:var(--ic-space-md)}:host(.dense) .rows{gap:var(--ic-space-xs)}.divider{margin-top:var(--ic-space-lg);margin-bottom:var(--ic-space-md);height:1px;background-color:var(--ic-architectural-300)}:host(.dense) .divider{margin-top:var(--ic-space-sm);margin-bottom:var(--ic-space-xs)}";
+const icDataEntityCss = "/*! 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}.rows{display:flex;flex-direction:column;gap:var(--ic-space-md)}:host(.small) .rows{gap:var(--ic-space-xs)}.divider{margin-top:var(--ic-space-lg);margin-bottom:var(--ic-space-md);height:1px;background-color:var(--ic-architectural-300)}:host(.small) .divider{margin-top:var(--ic-space-sm);margin-bottom:var(--ic-space-xs)}";
 
 const DataEntity = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -9,23 +9,23 @@ const DataEntity = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.__attachShadow();
     this.heading = undefined;
-    this.dense = false;
+    this.small = false;
   }
   render() {
-    const { heading, dense } = this;
+    const { heading, small } = this;
     const children = this.el.children;
-    if (dense) {
+    if (small) {
       for (let i = 0; i < children.length; i++) {
-        children[i].setAttribute("dense", "true");
+        children[i].setAttribute("small", "true");
       }
     }
-    return (h(Host, { class: { ["dense"]: dense } }, h("div", { class: "heading", id: "data-entity-heading" }, h("slot", { name: "heading" }, h("ic-typography", { variant: "h3" }, heading))), h("div", { class: "divider" }), h("ul", { "aria-labelledby": "data-entity-heading", class: "rows" }, h("slot", null))));
+    return (h(Host, { class: { ["small"]: small } }, h("div", { class: "heading", id: "data-entity-heading" }, h("slot", { name: "heading" }, h("ic-typography", { variant: "h3" }, heading))), h("div", { class: "divider" }), h("ul", { "aria-labelledby": "data-entity-heading", class: "rows" }, h("slot", null))));
   }
   get el() { return this; }
   static get style() { return icDataEntityCss; }
 }, [1, "ic-data-entity", {
     "heading": [1],
-    "dense": [4]
+    "small": [4]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/ic-data-entity.js.map

@@ -1 +1 @@
-{"file":"ic-data-entity.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,stFAAstF;;MCOjuF,UAAU;;;;;;iBAWI,KAAK;;EAE9B,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEhC,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;IAElC,IAAI,KAAK,EAAE;MACT,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACxC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;OAC3C;KACF;IAED,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,CAAC,OAAO,GAAG,KAAK,EAAE,IAC/B,WAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,qBAAqB,IAC3C,YAAM,IAAI,EAAC,SAAS,IAClB,qBAAe,OAAO,EAAC,IAAI,IAAE,OAAO,CAAiB,CAChD,CACH,EACN,WAAK,KAAK,EAAC,SAAS,GAAG,EACvB,6BAAoB,qBAAqB,EAAC,KAAK,EAAC,MAAM,IACpD,eAAa,CACV,CACA,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/ic-data-entity/ic-data-entity.css?tag=ic-data-entity&encapsulation=shadow","./src/components/ic-data-entity/ic-data-entity.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n}\n\n.rows {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ic-space-md);\n}\n\n:host(.dense) .rows {\n  gap: var(--ic-space-xs);\n}\n\n.divider {\n  margin-top: var(--ic-space-lg);\n  margin-bottom: var(--ic-space-md);\n  height: 1px;\n  background-color: var(--ic-architectural-300);\n}\n\n:host(.dense) .divider {\n  margin-top: var(--ic-space-sm);\n  margin-bottom: var(--ic-space-xs);\n}\n","import { Component, Element, Host, h, Prop } from \"@stencil/core\";\n\n@Component({\n  tag: \"ic-data-entity\",\n  styleUrl: \"ic-data-entity.css\",\n  shadow: true,\n})\nexport class DataEntity {\n  @Element() el: HTMLIcDataEntityElement;\n\n  /**\n   * Title for the data entity\n   */\n  @Prop() heading: string;\n\n  /**\n   * Set the data heading and all child data rows to dense styling\n   */\n  @Prop() dense: boolean = false;\n\n  render() {\n    const { heading, dense } = this;\n\n    const children = this.el.children;\n\n    if (dense) {\n      for (let i = 0; i < children.length; i++) {\n        children[i].setAttribute(\"dense\", \"true\");\n      }\n    }\n\n    return (\n      <Host class={{ [\"dense\"]: dense }}>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">\n            <ic-typography variant=\"h3\">{heading}</ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\" />\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-data-entity.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,stFAAstF;;MCOjuF,UAAU;;;;;;iBAWI,KAAK;;EAE9B,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEhC,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;IAElC,IAAI,KAAK,EAAE;MACT,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACxC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;OAC3C;KACF;IAED,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,CAAC,OAAO,GAAG,KAAK,EAAE,IAC/B,WAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,qBAAqB,IAC3C,YAAM,IAAI,EAAC,SAAS,IAClB,qBAAe,OAAO,EAAC,IAAI,IAAE,OAAO,CAAiB,CAChD,CACH,EACN,WAAK,KAAK,EAAC,SAAS,GAAG,EACvB,6BAAoB,qBAAqB,EAAC,KAAK,EAAC,MAAM,IACpD,eAAa,CACV,CACA,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/ic-data-entity/ic-data-entity.css?tag=ic-data-entity&encapsulation=shadow","./src/components/ic-data-entity/ic-data-entity.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n}\n\n.rows {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ic-space-md);\n}\n\n:host(.small) .rows {\n  gap: var(--ic-space-xs);\n}\n\n.divider {\n  margin-top: var(--ic-space-lg);\n  margin-bottom: var(--ic-space-md);\n  height: 1px;\n  background-color: var(--ic-architectural-300);\n}\n\n:host(.small) .divider {\n  margin-top: var(--ic-space-sm);\n  margin-bottom: var(--ic-space-xs);\n}\n","import { Component, Element, Host, h, Prop } from \"@stencil/core\";\n\n@Component({\n  tag: \"ic-data-entity\",\n  styleUrl: \"ic-data-entity.css\",\n  shadow: true,\n})\nexport class DataEntity {\n  @Element() el: HTMLIcDataEntityElement;\n\n  /**\n   * Title for the data entity\n   */\n  @Prop() heading: string;\n\n  /**\n   * Set the data heading and all child data rows to small styling\n   */\n  @Prop() small: boolean = false;\n\n  render() {\n    const { heading, small } = this;\n\n    const children = this.el.children;\n\n    if (small) {\n      for (let i = 0; i < children.length; i++) {\n        children[i].setAttribute(\"small\", \"true\");\n      }\n    }\n\n    return (\n      <Host class={{ [\"small\"]: small }}>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">\n            <ic-typography variant=\"h3\">{heading}</ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\" />\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"version":3}