npm - @ukic/web-components - Versions diffs - 2.1.0-beta.11 → 2.1.0-beta.12 - Mend

@ukic/web-components 2.1.0-beta.11 → 2.1.0-beta.12

Files changed (443) hide show

package/dist/collection/components/ic-button/ic-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-button.js","sourceRoot":"","sources":["../../../src/components/ic-button/ic-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Method,\n Prop,\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: {\n delegatesFocus: true,\n },\n})\nexport class Button {\n @Element() el: HTMLIcButtonElement;\n /\n If `true`, the button will be in disabled state.\n /\n @Prop() disabled?: boolean = false;\n /\n If `true`, the button will 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 The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: string;\n /\n The relationship of the linked URL as space-separated link types.\n /\n @Prop() rel?: string;\n /\n If `true`, the user can save the linked URL instead of navigating to it.\n /\n @Prop() download?: string \| boolean = false;\n /\n 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 variant of the button 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 If `true`, the button will fill the width of the container.\n /\n @Prop() fullWidth?: boolean = false;\n /\n If `true`, the ic-tooltip which is shown for icon variant will be disabled. 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 The appearance of the button, e.g. 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 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 @Listen(\"click\", { capture: true })\n handleHostClick(event: Event): void {\n if (this.disabled \|\| this.loading) {\n event.stopImmediatePropagation();\n }\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.updateTheme(theme.mode);\n }\n\n /\n Sets focus on the 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 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 this.el.setAttribute(\"exportparts\", \"button\");\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.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 part=\"button\"\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\">\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\"]: 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"]}
1	+ {"version":3,"file":"ic-button.js","sourceRoot":"","sources":["../../../src/components/ic-button/ic-button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EACJ,CAAC,GACF,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAO1D,OAAO,EAGL,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAE3B,IAAI,SAAS,GAAG,CAAC,CAAC;AAElB;;GAEG;AAQH,MAAM,OAAO,MAAM;;IA+FT,wBAAmB,GAA6B,EAAE,CAAC;IAEnD,eAAU,GAAY,KAAK,CAAC;IAC5B,gBAAW,GAAG,SAAS,EAAE,CAAC;IA0D1B,gBAAW,GAAG,GAAS,EAAE;MAC/B,IACE,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,EAAE,CAAC,IAAI,KAAK,OAAO,CAAC;QACvD,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,EACzB;QACA,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;OAC3D;IACH,CAAC,CAAC;IAEM,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACtB,CAAC,CAAC;IAEM,WAAM,GAAG,GAAG,EAAE;MACpB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC,CAAC;oBAtK2B,KAAK;mBAIN,KAAK;gBAIF,QAAQ;;;;oBAgBD,KAAK;;;mBAYN,SAAS;gBAIf,SAAS;qBAIV,KAAK;0BAIA,KAAK;4BAIc,QAAQ;sBAIJ,SAAS;;;;;;;;EA0CnE,eAAe,CAAC,KAAY;IAC1B,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAE;MACjC,KAAK,CAAC,wBAAwB,EAAE,CAAC;KAClC;EACH,CAAC;EAGD,kBAAkB,CAAC,EAAe;IAChC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;IACjC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;EAC/B,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,QAAQ;IACZ,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;KACvB;EACH,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,eAAe,CAAC,QAAgB;IACpC,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,QAAQ,CAAC;MAChC,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;KACpD;EACH,CAAC;EAEO,WAAW;IACjB,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACtD,IAAI,MAAM,IAAI,IAAI,EAAE;MAClB,OAAO,IAAI,CAAC;KACb;IACD,OAAO,KAAK,CAAC;EACf,CAAC;EAEO,2BAA2B,CAAC,IAAqB;IACvD,MAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAE1D,gBAAgB,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;IACpD,gBAAgB,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IAExC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC;IAEnC,gBAAgB,CAAC,KAAK,EAAE,CAAC;IACzB,gBAAgB,CAAC,MAAM,EAAE,CAAC;EAC5B,CAAC;EAmBO,WAAW,CAAC,WAA8B,IAAI;IACpD,MAAM,eAAe,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,IAAI,IAAI,CAAC,CAAC;IAEvE,IAAI,eAAe,KAAK,qBAAqB,CAAC,OAAO,EAAE;MACrD,IAAI,CAAC,UAAU,GAAG,eAAe,CAAC;KACnC;EACH,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE;MACpD,GAAG,iBAAiB;MACpB,eAAe;MACf,OAAO;KACR,CAAC,CAAC;IAEH,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;IAE9C,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;IACtB,IAAI,CAAC,EAAE,GAAG,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACvC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC;EAC5C,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,WAAW,EAAE,CAAC;EACrB,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,GAAG,CAAC,IAAI,QAAQ,CAAC;IAC/C,MAAM,KAIF,IAAI,CAAC,mBAAmB,EAJtB,EACJ,KAAK,EACL,YAAY,EAAE,SAAS,OAEG,EADvB,uBAAuB,cAHtB,uBAIL,CAA2B,CAAC;IAC7B,MAAM,WAAW,GACf,OAAO,KAAK,QAAQ;MAClB,CAAC,CAAC;QACE,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,UAAU,EAAE,IAAI,CAAC,UAAU;QAC3B,WAAW,EAAE,IAAI,CAAC,WAAW;QAC7B,UAAU,EAAE,IAAI,CAAC,UAAU;QAC3B,cAAc,EAAE,IAAI,CAAC,cAAc;QACnC,UAAU,EAAE,IAAI,CAAC,UAAU;OAC5B;MACH,CAAC,CAAC;QACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI;QACxD,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,GAAG,EAAE,IAAI,CAAC,GAAG;QACb,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,cAAc,EAAE,IAAI,CAAC,cAAc;QACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,CAAC;IACR,MAAM,QAAQ,GAAG,KAAK,IAAK,KAAgB,CAAC;IAC5C,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;IAC7D,IAAI,WAAW,GAAG,EAAE,CAAC;IACrB,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,IAAI,QAAQ,KAAK,SAAS,EAAE;QAC1B,WAAW,GAAG,QAAQ,CAAC;OACxB;WAAM,IAAI,SAAS,KAAK,IAAI,EAAE;QAC7B,WAAW,GAAG,SAAmB,CAAC;OACnC;KACF;IAED,IAAI,WAAW,GAAW,IAAI,CAAC;IAC/B,IAAI,QAAQ,GAAW,IAAI,CAAC;IAC5B,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,QAAQ;QACN,IAAI,CAAC,EAAE,KAAK,IAAI;UACd,CAAC,CAAC,0BAA0B,IAAI,CAAC,EAAE,EAAE;UACrC,CAAC,CAAC,0BAA0B,IAAI,CAAC,WAAW,EAAE,CAAC;MACnD,WAAW,GAAG,cAAc,QAAQ,EAAE,CAAC;KACxC;IAED,MAAM,aAAa,GAAG,GAAG,EAAE;MACzB,OAAO,CACL,EAAC,OAAO,kBACN,KAAK,EAAC,QAAQ,mBACC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,gBAChD,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IAC5C,WAAW,EACX,uBAAuB,EACvB,SAAS,IACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,EACjC,EAAE,EAAE,QAAQ,sBACM,WAAW,EAC7B,IAAI,EAAC,QAAQ;QAEZ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CACtC,WAAK,KAAK,EAAC,gBAAgB;UACzB,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP;QACA,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,WAAK,KAAK,EAAC,mBAAmB;UAC5B,4BACE,IAAI,EAAC,QAAQ,EACb,UAAU,EACR,IAAI,CAAC,OAAO,KAAK,SAAS;cAC1B,IAAI,CAAC,OAAO,KAAK,aAAa;cAC9B,IAAI,CAAC,UAAU,KAAK,qBAAqB,CAAC,IAAI;cAC9C,IAAI,CAAC,UAAU,KAAK,qBAAqB,CAAC,KAAK;cAC7C,CAAC,CAAC,OAAO;cACT,CAAC,CAAC,MAAM,GAEU,CACpB,CACP,CAAC,CAAC,CAAC,CACF,eAAQ,CACT,CACO,CACX,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO;QAC5C,CAAC,kBAAkB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;QACxC,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;QAClC,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO;QACzB,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,UAAU,KAAK,qBAAqB,CAAC,IAAI;QACxD,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,UAAU,KAAK,qBAAqB,CAAC,KAAK;QAC1D,CAAC,YAAY,CAAC,EAAE,IAAI,CAAC,SAAS;OAC/B,EACD,OAAO,EAAE,IAAI,CAAC,WAAW;MAExB,IAAI,CAAC,UAAU,IAAI,CAClB,kBACE,KAAK,EAAE,EAAE,CAAC,kBAAkB,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,EACpD,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAClC,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,QAAQ,EAChB,SAAS,EAAE,IAAI,CAAC,gBAAgB;QAEhC,EAAC,aAAa,OAAG,CACN,CACd;MAEA,CAAC,IAAI,CAAC,UAAU,IAAI,EAAC,aAAa,OAAG,CACjC,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Method,\n Prop,\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: {\n delegatesFocus: true,\n },\n})\nexport class Button {\n @Element() el: HTMLIcButtonElement;\n /\n If `true`, the button will be in disabled state.\n /\n @Prop() disabled?: boolean = false;\n /\n If `true`, the button will 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 The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: string;\n /\n The relationship of the linked URL as space-separated link types.\n /\n @Prop() rel?: string;\n /\n If `true`, the user can save the linked URL instead of navigating to it.\n /\n @Prop() download?: string \| boolean = false;\n /\n 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 variant of the button 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 If `true`, the button will fill the width of the container.\n /\n @Prop() fullWidth?: boolean = false;\n /\n If `true`, the ic-tooltip which is shown for icon variant will be disabled. 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 The appearance of the button, e.g. dark, light, or the default.\n /\n @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n /\n The <form> element to associate the button with.\n /\n @Prop() form?: string;\n /\n The URL that processes the information submitted by the button. It overrides the action attribute of the button's form owner. Does nothing if there is no form owner.\n /\n @Prop() formaction?: string;\n /\n The way the submitted form data is encoded.\n /\n @Prop() formenctype?: string;\n /\n The HTTP method used to submit the form.\n /\n @Prop() formmethod?: string;\n /\n If `true`, the form will not be validated when submitted.\n /\n @Prop() formnovalidate?: boolean;\n /\n The place to display the response from submitting the form. It overrides the target attribute of the button's form owner.\n /\n @Prop() formtarget?: string;\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 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 @Listen(\"click\", { capture: true })\n handleHostClick(event: Event): void {\n if (this.disabled \|\| this.loading) {\n event.stopImmediatePropagation();\n }\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.updateTheme(theme.mode);\n }\n\n /\n Sets focus on the 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 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 this.el.setAttribute(\"exportparts\", \"button\");\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.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 ? {\n type: this.type,\n disabled: this.disabled,\n form: this.form,\n formaction: this.formaction,\n formenctype: this.formenctype,\n formmethod: this.formmethod,\n formnovalidate: this.formnovalidate,\n formtarget: this.formtarget,\n }\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 part=\"button\"\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\">\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\"]: 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"]}

package/dist/collection/components/ic-card/ic-card.css CHANGED Viewed

@@ -458,7 +458,7 @@ button {
 .card,
 .card.clickable {
-  border: 0.063rem solid var(--ic-architectural-300);
+  border: var(--ic-space-1px) solid var(--ic-architectural-300);
   border-radius: var(--ic-border-radius);
   box-sizing: border-box;
   padding: var(--ic-space-md);
@@ -469,7 +469,7 @@ button {
 .dark.card,
 .dark.card.clickable {
-  border: 0.063rem solid var(--ic-architectural-700);
+  border: var(--ic-space-1px) solid var(--ic-architectural-700);
 }
 .card.clickable:hover {
@@ -494,8 +494,7 @@ button {
   border: var(--ic-border-disabled);
 }
-.card.fullwidth,
-:host([full-width="true"]) {
+.card.fullwidth {
   width: 100%;
 }
@@ -517,7 +516,7 @@ button {
 .card.clickable .card-title {
   color: var(--ic-hyperlink);
   text-decoration: underline;
-  text-decoration-thickness: 0.063rem;
+  text-decoration-thickness: var(--ic-space-1px);
 }
 .card.clickable:hover .card-title,
@@ -547,7 +546,7 @@ button {
 .card.disabled .card-title {
   text-decoration: underline;
-  text-decoration-thickness: 0.063rem;
+  text-decoration-thickness: var(--ic-space-1px);
   text-decoration-color: var(--ic-color-tertiary-text);
   color: var(--ic-color-tertiary-text);
 }
@@ -586,10 +585,18 @@ button {
   justify-content: center;
 }
-.interaction-controls {
+.interaction-area {
+  display: flex;
+  gap: var(--ic-space-md);
   margin-top: var(--ic-space-md);
+  align-items: flex-end;
+}
+.interaction-controls {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
+  gap: var(--ic-space-sm);
 }
 .toggle-button {

package/dist/collection/components/ic-card/ic-card.js CHANGED Viewed

@@ -114,11 +114,11 @@ export class Card {
         ["dark"]: this.appearance === IcThemeForegroundEnum.Dark,
       }, tabindex: clickable && !parentIsAnchorTag ? 0 : null, "aria-disabled": disabled ? "true" : null, disabled: disabled ? true : null }, attrs), isSlotUsed(this.el, "image-top") && (h("div", { class: "image-top" }, h("slot", { name: "image-top" }))), 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)))), isSlotUsed(this.el, "interaction-button") && (h("div", { class: "interaction-button" }, h("slot", { name: "interaction-button" })))), (subheading || isSlotUsed(this.el, "subheading")) && (h("div", { class: "subheading" }, h("slot", { name: "subheading" }, h("ic-typography", { variant: "subtitle-small" }, subheading)))), isSlotUsed(this.el, "adornment") && (h("div", { class: "adornment" }, h("slot", { name: "adornment" }))), isSlotUsed(this.el, "image-mid") && (h("div", { class: "image-mid" }, h("slot", { name: "image-mid" }))), (message || isSlotUsed(this.el, "message")) && (h("div", { class: {
         ["card-message"]: true,
-      } }, h("slot", { name: "message" }, h("ic-typography", { variant: "body" }, message)))), (isSlotUsed(this.el, "interaction-controls") || expandable) && (h("div", { class: "interaction-controls" }, h("slot", { name: "interaction-controls" }), expandable && (h("ic-button", { class: {
+      } }, h("slot", { name: "message" }, h("ic-typography", { variant: "body" }, message)))), (isSlotUsed(this.el, "interaction-controls") || expandable) && (h("div", { class: "interaction-area" }, h("div", { class: "interaction-controls" }, h("slot", { name: "interaction-controls" })), expandable && (h("ic-button", { class: {
         ["toggle-button"]: true,
         ["toggle-button-closed"]: !this.areaExpanded,
         ["toggle-button-expanded"]: this.areaExpanded,
-      }, variant: "icon", disableTooltip: true, "aria-label": "Toggle expandable area", "aria-expanded": this.areaExpanded, "aria-controls": "expanded-content-area", onClick: this.toggleExpanded, innerHTML: chevronIcon })))), isSlotUsed(this.el, "expanded-content") && this.areaExpanded && (h("div", { class: "expanded-content", id: "expanded-content-area" }, h("slot", { name: "expanded-content" })))));
+      }, variant: "icon", size: "large", disableTooltip: true, "aria-label": "Toggle expandable area", "aria-expanded": this.areaExpanded, "aria-controls": "expanded-content-area", onClick: this.toggleExpanded, innerHTML: chevronIcon })))), isSlotUsed(this.el, "expanded-content") && this.areaExpanded && (h("div", { class: "expanded-content", id: "expanded-content-area" }, h("slot", { name: "expanded-content" })))));
   }
   static get is() { return "ic-card"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-card/ic-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-card.js","sourceRoot":"","sources":["../../../src/components/ic-card/ic-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Listen,\n Prop,\n State,\n h,\n Method,\n} from \"@stencil/core\";\nimport {\n onComponentRequiredPropUndefined,\n isSlotUsed,\n getThemeFromContext,\n} from \"../../utils/helpers\";\nimport {\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\n/*\n @slot heading - Content will be placed at the top of the card to the right of the icon.\n * @slot message - Content will be placed in the main body of the card.\n * @slot subheading - Content will be placed below the card heading.\n * @slot adornment - Content will be placed below the card subheading.\n * @slot image-top - Content will be placed at the top of the card above all other content.\n * @slot image-mid - Content will be placed below the card heading section.\n * @slot icon - Content will be placed to the left of the card heading.\n * @slot interaction-button - Content will be placed in the top right corner of the heading section.\n * @slot interaction-controls - Content will be placed below the card message.\n * @slot expanded-content - Content will be placed below the interaction controls but will not initially be rendered.\n /\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 If `true`, the card will be a clickable variant, instead of static.\n /\n @Prop({ mutable: true }) clickable?: boolean = false;\n /\n The URL that the clickable card link points to. If set, the clickable card will render as an \"a\" tag, otherwise it will render as a button.\n /\n @Prop() href?: string \| undefined;\n /\n 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 relationship of the linked URL as space-separated link types.\n /\n @Prop() rel?: string;\n /\n The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: string;\n /\n The heading for the card.\n /\n @Prop() heading!: string;\n /\n The subheading for the card.\n /\n @Prop() subheading?: string;\n /\n The main body message of the card.\n /\n @Prop() message?: string = \"\";\n /\n If `true`, the card will be disabled if it is clickable.\n /\n @Prop() disabled?: boolean = false;\n /\n If `true`, the card will fill the width of the container.\n /\n @Prop() fullWidth?: boolean = false;\n /\n If `true`, the card will have an expandable area and expansion toggle button.\n /\n @Prop() expandable?: boolean = false;\n\n @State() parentIsAnchorTag: boolean = false;\n\n @State() isFocussed: boolean = false;\n\n @State() parentEl: HTMLElement \| null = null;\n\n @State() appearance?: IcThemeForeground = \"default\";\n\n @State() areaExpanded: boolean = false;\n\n /\n Sets focus on the card.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"a\")) {\n this.el.shadowRoot.querySelector(\"a\").focus();\n } else if (this.el.shadowRoot.querySelector(\"button\")) {\n this.el.shadowRoot.querySelector(\"button\").focus();\n }\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(event: Event): void {\n if (this.disabled) {\n event.stopImmediatePropagation();\n }\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.updateTheme(theme.mode);\n }\n\n private parentFocussed = (): void => {\n this.isFocussed = true;\n };\n\n private parentBlurred = (): void => {\n this.isFocussed = false;\n };\n\n private updateTheme(newTheme: IcThemeForeground = null): void {\n const foregroundColor = getThemeFromContext(this.el, newTheme \|\| null);\n\n if (foregroundColor !== IcThemeForegroundEnum.Default) {\n this.appearance = foregroundColor;\n }\n }\n\n private toggleExpanded = (): void => {\n this.areaExpanded = !this.areaExpanded;\n };\n\n 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 this.updateTheme();\n }\n\n render() {\n const {\n clickable,\n disabled,\n expandable,\n heading,\n message,\n href,\n hreflang,\n referrerpolicy,\n rel,\n subheading,\n target,\n fullWidth,\n parentIsAnchorTag,\n isFocussed,\n } = this;\n\n const Component = parentIsAnchorTag\n ? \"div\"\n : clickable\n ? this.href === undefined\n ? \"button\"\n : \"a\"\n : \"div\";\n\n const attrs = Component == \"a\" && {\n href: href,\n hrefLang: hreflang,\n referrerPolicy: referrerpolicy,\n rel: rel,\n target: target,\n };\n\n return (\n <Component\n class={{\n [\"card\"]: true,\n [\"clickable\"]: clickable && !disabled,\n [\"disabled\"]: disabled,\n [\"fullwidth\"]: fullWidth,\n [\"focussed\"]: isFocussed,\n [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n }}\n tabindex={clickable && !parentIsAnchorTag ? 0 : null}\n aria-disabled={disabled ? \"true\" : null}\n disabled={disabled ? true : null}\n {...attrs}\n >\n {isSlotUsed(this.el, \"image-top\") && (\n <div class=\"image-top\">\n <slot name=\"image-top\"></slot>\n </div>\n )}\n <div class=\"card-header\">\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon\">\n <slot name=\"icon\" />\n </div>\n )}\n <div class=\"card-title\">\n <slot name=\"heading\">\n <ic-typography variant=\"h4\">\n <p>{heading}</p>\n </ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"interaction-button\") && (\n <div class=\"interaction-button\">\n <slot name=\"interaction-button\"></slot>\n </div>\n )}\n </div>\n {(subheading \|\| isSlotUsed(this.el, \"subheading\")) && (\n <div class=\"subheading\">\n <slot name=\"subheading\">\n <ic-typography variant=\"subtitle-small\">\n {subheading}\n </ic-typography>\n </slot>\n </div>\n )}\n {isSlotUsed(this.el, \"adornment\") && (\n <div class=\"adornment\">\n <slot name=\"adornment\"></slot>\n </div>\n )}\n {isSlotUsed(this.el, \"image-mid\") && (\n <div class=\"image-mid\">\n <slot name=\"image-mid\"></slot>\n </div>\n )}\n {(message \|\| isSlotUsed(this.el, \"message\")) && (\n <div\n class={{\n [\"card-message\"]: true,\n }}\n >\n <slot name=\"message\">\n <ic-typography variant=\"body\">{message}</ic-typography>\n </slot>\n </div>\n )}\n {(isSlotUsed(this.el, \"interaction-controls\") \|\| expandable) && (\n <div class=\"interaction-controls\">\n <slot name=\"interaction-controls\"></slot>\n {expandable && (\n <ic-button\n class={{\n [\"toggle-button\"]: true,\n [\"toggle-button-closed\"]: !this.areaExpanded,\n [\"toggle-button-expanded\"]: this.areaExpanded,\n }}\n variant=\"icon\"\n disableTooltip\n aria-label=\"Toggle expandable area\"\n aria-expanded={this.areaExpanded}\n aria-controls=\"expanded-content-area\"\n onClick={this.toggleExpanded}\n innerHTML={chevronIcon}\n ></ic-button>\n )}\n </div>\n )}\n {isSlotUsed(this.el, \"expanded-content\") && this.areaExpanded && (\n <div class=\"expanded-content\" id=\"expanded-content-area\">\n <slot name=\"expanded-content\"></slot>\n </div>\n )}\n </Component>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-card.js","sourceRoot":"","sources":["../../../src/components/ic-card/ic-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Listen,\n Prop,\n State,\n h,\n Method,\n} from \"@stencil/core\";\nimport {\n onComponentRequiredPropUndefined,\n isSlotUsed,\n getThemeFromContext,\n} from \"../../utils/helpers\";\nimport {\n IcTheme,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\n/*\n @slot heading - Content will be placed at the top of the card to the right of the icon.\n * @slot message - Content will be placed in the main body of the card.\n * @slot subheading - Content will be placed below the card heading.\n * @slot adornment - Content will be placed below the card subheading.\n * @slot image-top - Content will be placed at the top of the card above all other content.\n * @slot image-mid - Content will be placed below the card heading section.\n * @slot icon - Content will be placed to the left of the card heading.\n * @slot interaction-button - Content will be placed in the top right corner of the heading section.\n * @slot interaction-controls - Content will be placed below the card message.\n * @slot expanded-content - Content will be placed below the interaction controls but will not initially be rendered.\n /\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 If `true`, the card will be a clickable variant, instead of static.\n /\n @Prop({ mutable: true }) clickable?: boolean = false;\n /\n The URL that the clickable card link points to. If set, the clickable card will render as an \"a\" tag, otherwise it will render as a button.\n /\n @Prop() href?: string \| undefined;\n /\n 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 relationship of the linked URL as space-separated link types.\n /\n @Prop() rel?: string;\n /\n The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: string;\n /\n The heading for the card.\n /\n @Prop() heading!: string;\n /\n The subheading for the card.\n /\n @Prop() subheading?: string;\n /\n The main body message of the card.\n /\n @Prop() message?: string = \"\";\n /\n If `true`, the card will be disabled if it is clickable.\n /\n @Prop() disabled?: boolean = false;\n /\n If `true`, the card will fill the width of the container.\n /\n @Prop() fullWidth?: boolean = false;\n /\n If `true`, the card will have an expandable area and expansion toggle button.\n /\n @Prop() expandable?: boolean = false;\n\n @State() parentIsAnchorTag: boolean = false;\n\n @State() isFocussed: boolean = false;\n\n @State() parentEl: HTMLElement \| null = null;\n\n @State() appearance?: IcThemeForeground = \"default\";\n\n @State() areaExpanded: boolean = false;\n\n /\n Sets focus on the card.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"a\")) {\n this.el.shadowRoot.querySelector(\"a\").focus();\n } else if (this.el.shadowRoot.querySelector(\"button\")) {\n this.el.shadowRoot.querySelector(\"button\").focus();\n }\n }\n\n @Listen(\"click\", { capture: true })\n handleHostClick(event: Event): void {\n if (this.disabled) {\n event.stopImmediatePropagation();\n }\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.updateTheme(theme.mode);\n }\n\n private parentFocussed = (): void => {\n this.isFocussed = true;\n };\n\n private parentBlurred = (): void => {\n this.isFocussed = false;\n };\n\n private updateTheme(newTheme: IcThemeForeground = null): void {\n const foregroundColor = getThemeFromContext(this.el, newTheme \|\| null);\n\n if (foregroundColor !== IcThemeForegroundEnum.Default) {\n this.appearance = foregroundColor;\n }\n }\n\n private toggleExpanded = (): void => {\n this.areaExpanded = !this.areaExpanded;\n };\n\n 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 this.updateTheme();\n }\n\n render() {\n const {\n clickable,\n disabled,\n expandable,\n heading,\n message,\n href,\n hreflang,\n referrerpolicy,\n rel,\n subheading,\n target,\n fullWidth,\n parentIsAnchorTag,\n isFocussed,\n } = this;\n\n const Component = parentIsAnchorTag\n ? \"div\"\n : clickable\n ? this.href === undefined\n ? \"button\"\n : \"a\"\n : \"div\";\n\n const attrs = Component == \"a\" && {\n href: href,\n hrefLang: hreflang,\n referrerPolicy: referrerpolicy,\n rel: rel,\n target: target,\n };\n\n return (\n <Component\n class={{\n [\"card\"]: true,\n [\"clickable\"]: clickable && !disabled,\n [\"disabled\"]: disabled,\n [\"fullwidth\"]: fullWidth,\n [\"focussed\"]: isFocussed,\n [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n }}\n tabindex={clickable && !parentIsAnchorTag ? 0 : null}\n aria-disabled={disabled ? \"true\" : null}\n disabled={disabled ? true : null}\n {...attrs}\n >\n {isSlotUsed(this.el, \"image-top\") && (\n <div class=\"image-top\">\n <slot name=\"image-top\"></slot>\n </div>\n )}\n <div class=\"card-header\">\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon\">\n <slot name=\"icon\" />\n </div>\n )}\n <div class=\"card-title\">\n <slot name=\"heading\">\n <ic-typography variant=\"h4\">\n <p>{heading}</p>\n </ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"interaction-button\") && (\n <div class=\"interaction-button\">\n <slot name=\"interaction-button\"></slot>\n </div>\n )}\n </div>\n {(subheading \|\| isSlotUsed(this.el, \"subheading\")) && (\n <div class=\"subheading\">\n <slot name=\"subheading\">\n <ic-typography variant=\"subtitle-small\">\n {subheading}\n </ic-typography>\n </slot>\n </div>\n )}\n {isSlotUsed(this.el, \"adornment\") && (\n <div class=\"adornment\">\n <slot name=\"adornment\"></slot>\n </div>\n )}\n {isSlotUsed(this.el, \"image-mid\") && (\n <div class=\"image-mid\">\n <slot name=\"image-mid\"></slot>\n </div>\n )}\n {(message \|\| isSlotUsed(this.el, \"message\")) && (\n <div\n class={{\n [\"card-message\"]: true,\n }}\n >\n <slot name=\"message\">\n <ic-typography variant=\"body\">{message}</ic-typography>\n </slot>\n </div>\n )}\n {(isSlotUsed(this.el, \"interaction-controls\") \|\| expandable) && (\n <div class=\"interaction-area\">\n <div class=\"interaction-controls\">\n <slot name=\"interaction-controls\"></slot>\n </div>\n {expandable && (\n <ic-button\n class={{\n [\"toggle-button\"]: true,\n [\"toggle-button-closed\"]: !this.areaExpanded,\n [\"toggle-button-expanded\"]: this.areaExpanded,\n }}\n variant=\"icon\"\n size=\"large\"\n disableTooltip\n aria-label=\"Toggle expandable area\"\n aria-expanded={this.areaExpanded}\n aria-controls=\"expanded-content-area\"\n onClick={this.toggleExpanded}\n innerHTML={chevronIcon}\n ></ic-button>\n )}\n </div>\n )}\n {isSlotUsed(this.el, \"expanded-content\") && this.areaExpanded && (\n <div class=\"expanded-content\" id=\"expanded-content-area\">\n <slot name=\"expanded-content\"></slot>\n </div>\n )}\n </Component>\n );\n }\n}\n"]}

package/dist/collection/components/ic-checkbox/ic-checkbox.css CHANGED Viewed

@@ -441,7 +441,7 @@ video {
 }
-:host([disabled]) {
+:host(.disabled) {
   color: var(--ic-architectural-200);
   pointer-events: none;
 }
@@ -454,7 +454,7 @@ video {
   margin-bottom: var(--ic-space-xxs);
 }
-:host([small]) .container {
+:host(.small) .container {
   margin-bottom: var(--ic-space-xxxs);
 }
@@ -469,7 +469,7 @@ video {
   height: var(--ic-space-lg);
   width: var(--ic-space-lg);
   background-color: transparent;
-  border: 0.063rem solid var(--ic-architectural-300);
+  border: var(--ic-space-1px) solid var(--ic-architectural-300);
   border-radius: var(--ic-border-radius);
   outline: none;
   cursor: pointer;
@@ -478,7 +478,7 @@ video {
 .checkbox:checked {
   background-color: var(--ic-action-default);
-  border: 0.063rem solid var(--ic-action-default);
+  border: var(--ic-space-1px) solid var(--ic-action-default);
   transition: var(--ic-easing-transition-slow);
 }
@@ -515,13 +515,13 @@ video {
 .checkbox:hover {
   background-color: var(--ic-action-default-bg-hover);
   box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);
-  border: 0.063rem solid var(--ic-action-default-hover);
+  border: var(--ic-space-1px) solid var(--ic-action-default-hover);
 }
 .checkbox:active {
   background-color: var(--ic-action-default-bg-active);
   box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);
-  border: 0.063rem solid var(--ic-action-default-active);
+  border: var(--ic-space-1px) solid var(--ic-action-default-active);
 }
 .checkbox:focus {
@@ -529,7 +529,7 @@ video {
 }
 .checkbox:disabled {
-  border: 0.063rem dashed var(--ic-architectural-200);
+  border: var(--ic-space-1px) dashed var(--ic-architectural-200);
 }
 .checkbox-label {

package/dist/collection/components/ic-checkbox/ic-checkbox.js CHANGED Viewed

@@ -19,6 +19,7 @@ export class Checkbox {
     this.dynamicText = "This selection requires additional answers";
     this.additionalFieldDisplay = "static";
     this.indeterminate = false;
+    this.small = false;
     this.initiallyChecked = this.checked;
   }
   /**
@@ -67,7 +68,7 @@ export class Checkbox {
     this.checked
       ? renderHiddenInput(true, this.host, this.name, this.checked && this.value, this.disabled)
       : removeHiddenInput(this.host);
-    return (h(Host, null, h("div", { class: { ["container"]: true, ["disabled"]: this.disabled } }, this.checked && !this.indeterminate && (h("svg", { class: "checkmark", width: "1.5rem", height: "1.5rem", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, h("title", null, "checkmark icon"), h("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" }))), this.checked && this.indeterminate && (h("div", { class: "indeterminate-symbol" })), h("input", { role: "checkbox", class: {
+    return (h(Host, { class: { ["disabled"]: this.disabled, ["small"]: this.small } }, h("div", { class: "container" }, this.checked && !this.indeterminate && (h("svg", { class: "checkmark", width: "1.5rem", height: "1.5rem", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, h("title", null, "checkmark icon"), h("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" }))), this.checked && this.indeterminate && (h("div", { class: "indeterminate-symbol" })), h("input", { role: "checkbox", class: {
         ["checkbox"]: true,
         ["checked"]: this.checked,
         ["indeterminate"]: this.indeterminate,
@@ -252,6 +253,24 @@ export class Checkbox {
         "attribute": "indeterminate",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "small": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If true, the small styling will be applied to the checkbox."
+        },
+        "attribute": "small",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/ic-checkbox/ic-checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-checkbox.js","sourceRoot":"","sources":["../../../src/components/ic-checkbox/ic-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n State,\n Method,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n removeHiddenInput,\n addFormResetListener,\n removeFormResetListener,\n} from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-checkbox\",\n styleUrl: \"ic-checkbox.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Checkbox {\n /*\n If `true`, the checkbox will be set to the checked state.\n /\n @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n /\n If `true`, the checkbox will be set to the disabled state.\n /\n @Prop() disabled?: boolean = false;\n /\n The label for the checkbox.\n /\n @Prop() label!: string;\n /\n The value for the checkbox.\n /\n @Prop() value!: string;\n /\n The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n /\n @Prop() name: string;\n /\n The group label for the checkbox.\n /\n @Prop() groupLabel: string;\n /\n The text to be displayed when dynamic.\n /\n @Prop() dynamicText: string = \"This selection requires additional answers\";\n /\n The style of additionalField that will be displayed if used.\n /\n @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n \"static\";\n /\n If `true`, the indeterminate state will be displayed when checked.\n /\n @Prop() indeterminate: boolean = false;\n\n @State() initiallyChecked = this.checked;\n\n @Element() host: HTMLIcCheckboxElement;\n\n /\n @deprecated This event should not be used anymore. Use icCheck instead.\n /\n @Event() checkboxChecked: EventEmitter<void>;\n\n /\n Emitted when a checkbox has been checked.\n /\n @Event() icCheck: EventEmitter<void>;\n\n private additionalFieldContainer: HTMLDivElement;\n\n private handleClick = () => {\n this.checked = !this.checked;\n this.icCheck.emit();\n this.checkboxChecked.emit();\n };\n\n private handleFormReset = (): void => {\n this.checked = this.initiallyChecked;\n };\n\n /\n Sets focus on the checkbox.\n */\n @Method()\n async setFocus(): Promise<void> {\n const checkboxEl: HTMLElement =\n this.host.shadowRoot.querySelector(\".checkbox\");\n if (checkboxEl) {\n checkboxEl.focus();\n }\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 componentWillLoad(): void {\n addFormResetListener(this.host, this.handleFormReset);\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 disconnectedCallback(): void {\n removeFormResetListener(this.host, this.handleFormReset);\n }\n\n render() {\n let id = `ic-checkbox-${\n this.label !== undefined ? this.label : this.value\n }-${this.groupLabel}`;\n\n id = id.replace(/ /g, \"-\");\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=\"1.5rem\"\n height=\"1.5rem\"\n viewBox=\"0 0 24 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 indeterminate={this.indeterminate}\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"]}
1	+ {"version":3,"file":"ic-checkbox.js","sourceRoot":"","sources":["../../../src/components/ic-checkbox/ic-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,OAAO,EACP,KAAK,EAEL,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,UAAU,EACV,gCAAgC,EAChC,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,uBAAuB,GACxB,MAAM,qBAAqB,CAAC;AAS7B,MAAM,OAAO,QAAQ;;IA4DX,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;MAC7B,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;MACpB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;IAC9B,CAAC,CAAC;IAEM,oBAAe,GAAG,GAAS,EAAE;MACnC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC;IACvC,CAAC,CAAC;mBAhE0D,KAAK;oBAIpC,KAAK;;;;;uBAoBJ,4CAA4C;kCAKxE,QAAQ;yBAIuB,KAAK;iBAKZ,KAAK;4BAEH,IAAI,CAAC,OAAO;;EA0BxC;;KAEG;EAEH,KAAK,CAAC,QAAQ;IACZ,MAAM,UAAU,GACd,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAClD,IAAI,UAAU,EAAE;MACd,UAAU,CAAC,KAAK,EAAE,CAAC;KACpB;EACH,CAAC;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,sBAAsB,KAAK,QAAQ,EAAE;MAC5C,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;MAC3D,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACjB,SAAS,IAAI,SAAS,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;OACrD;WAAM;QACL,SAAS,IAAI,SAAS,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;OACpD;KACF;SAAM;MACL,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACjB,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;OACtD;WAAM;QACL,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;OACtD;KACF;EACH,CAAC;EAED,iBAAiB;IACf,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;EACxD,CAAC;EAED,gBAAgB;IACd,gCAAgC,CAC9B;MACE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE;MACvC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE;KACxC,EACD,UAAU,CACX,CAAC;EACJ,CAAC;EAED,oBAAoB;IAClB,uBAAuB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;EAC3D,CAAC;EAED,MAAM;IACJ,IAAI,EAAE,GAAG,eACP,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAC/C,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;IAEtB,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAE3B,IAAI,CAAC,OAAO;MACV,CAAC,CAAC,iBAAiB,CACf,IAAI,EACJ,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,EAC1B,IAAI,CAAC,QAAQ,CACd;MACH,CAAC,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEjC,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE;MACjE,WAAK,KAAK,EAAC,WAAW;QACnB,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,CACtC,WACE,KAAK,EAAC,WAAW,EACjB,KAAK,EAAC,QAAQ,EACd,MAAM,EAAC,QAAQ,EACf,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,eACxB,SAAS,eACT,SAAS;UAEnB,kCAA6B;UAC7B,YAAM,CAAC,EAAC,qFAAqF,GAAG,CAC5F,CACP;QACA,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,IAAI,CACrC,WAAK,KAAK,EAAC,sBAAsB,GAAG,CACrC;QACD,aACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE;YACL,CAAC,UAAU,CAAC,EAAE,IAAI;YAClB,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO;YACzB,CAAC,eAAe,CAAC,EAAE,IAAI,CAAC,aAAa;WACtC,EACD,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EACrC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,GAClB;QACT,qBAAe,OAAO,EAAC,MAAM;UAC3B,aAAO,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,EAAE,IACtC,IAAI,CAAC,KAAK,CACL,CACM,CACZ;MACL,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,kBAAkB,CAAC,IAAI,CAC5C,WACE,KAAK,EAAC,mBAAmB,EACzB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,wBAAwB,GAAG,EAAE,CAAC;QAEhD,IAAI,CAAC,sBAAsB,KAAK,SAAS,IAAI,CAC5C,WAAK,KAAK,EAAC,eAAe,GAAO,CAClC;QACD;UACG,IAAI,CAAC,sBAAsB,KAAK,SAAS,IAAI,CAC5C,qBAAe,OAAO,EAAC,SAAS;YAC9B,SAAG,KAAK,EAAC,cAAc,eAAW,QAAQ,IACvC,IAAI,CAAC,WAAW,CACf,CACU,CACjB;UACD,WACE,KAAK,EAAE;cACL,0BAA0B,EACxB,IAAI,CAAC,sBAAsB,KAAK,QAAQ;aAC3C;YAED,YAAM,IAAI,EAAC,kBAAkB,GAAQ,CACjC,CACF,CACF,CACP,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n State,\n Method,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n removeHiddenInput,\n addFormResetListener,\n removeFormResetListener,\n} from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-checkbox\",\n styleUrl: \"ic-checkbox.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Checkbox {\n /*\n If `true`, the checkbox will be set to the checked state.\n /\n @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n /\n If `true`, the checkbox will be set to the disabled state.\n /\n @Prop() disabled?: boolean = false;\n /\n The label for the checkbox.\n /\n @Prop() label!: string;\n /\n The value for the checkbox.\n /\n @Prop() value!: string;\n /\n The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n /\n @Prop() name: string;\n /\n The group label for the checkbox.\n /\n @Prop() groupLabel: string;\n /\n The text to be displayed when dynamic.\n /\n @Prop() dynamicText: string = \"This selection requires additional answers\";\n /\n The style of additionalField that will be displayed if used.\n /\n @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n \"static\";\n /\n If `true`, the indeterminate state will be displayed when checked.\n /\n @Prop() indeterminate: boolean = false;\n\n /\n If true, the small styling will be applied to the checkbox.\n /\n @Prop() small?: boolean = false;\n\n @State() initiallyChecked = this.checked;\n\n @Element() host: HTMLIcCheckboxElement;\n\n /\n @deprecated This event should not be used anymore. Use icCheck instead.\n /\n @Event() checkboxChecked: EventEmitter<void>;\n\n /\n Emitted when a checkbox has been checked.\n /\n @Event() icCheck: EventEmitter<void>;\n\n private additionalFieldContainer: HTMLDivElement;\n\n private handleClick = () => {\n this.checked = !this.checked;\n this.icCheck.emit();\n this.checkboxChecked.emit();\n };\n\n private handleFormReset = (): void => {\n this.checked = this.initiallyChecked;\n };\n\n /\n Sets focus on the checkbox.\n */\n @Method()\n async setFocus(): Promise<void> {\n const checkboxEl: HTMLElement =\n this.host.shadowRoot.querySelector(\".checkbox\");\n if (checkboxEl) {\n checkboxEl.focus();\n }\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 componentWillLoad(): void {\n addFormResetListener(this.host, this.handleFormReset);\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 disconnectedCallback(): void {\n removeFormResetListener(this.host, this.handleFormReset);\n }\n\n render() {\n let id = `ic-checkbox-${\n this.label !== undefined ? this.label : this.value\n }-${this.groupLabel}`;\n\n id = id.replace(/ /g, \"-\");\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 class={{ [\"disabled\"]: this.disabled, [\"small\"]: this.small }}>\n <div class=\"container\">\n {this.checked && !this.indeterminate && (\n <svg\n class=\"checkmark\"\n width=\"1.5rem\"\n height=\"1.5rem\"\n viewBox=\"0 0 24 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 indeterminate={this.indeterminate}\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"]}

package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.css CHANGED Viewed

@@ -453,7 +453,7 @@ ic-input-label ic-typography {
   margin-bottom: var(--ic-space-sm);
 }
-:host([small]) ic-input-label ic-typography {
+:host(.small) ic-input-label ic-typography {
   margin-bottom: calc(var(--ic-space-sm) / 2);
 }
@@ -461,7 +461,7 @@ ic-input-validation {
   margin-top: var(--ic-space-sm);
 }
-:host([small]) ic-input-validation {
+:host(.small) ic-input-validation {
   margin-top: calc(var(--ic-space-sm) / 2);
 }
@@ -469,7 +469,7 @@ ic-input-validation {
   margin-bottom: calc(-1 * var(--ic-space-xxs));
 }
-:host([small]) .checkboxes-container {
+:host(.small) .checkboxes-container {
   margin-bottom: calc(-1 * var(--ic-space-xxxs));
 }

package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js CHANGED Viewed

@@ -42,7 +42,7 @@ export class CheckboxGroup {
   render() {
     const describedBy = getInputDescribedByText(this.name, this.helperText !== "", this.validationStatus !== "");
     const hadValidationStatus = hasValidationStatus(this.validationStatus, this.disabled);
-    return (h(Host, null, (this.validationStatus === "error" ||
+    return (h(Host, { class: { ["small"]: this.small } }, (this.validationStatus === "error" ||
       this.required ||
       this.hideLabel) && (h("span", { id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, this.label, " ", this.validationStatus === "error" ? "invalid data " : null, " ", this.required ? "required" : null)), h("fieldset", { id: this.name, "aria-labelledby": `${this.validationStatus === "error" || this.required || this.hideLabel
         ? "screenReaderOnlyText"

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-checkbox-group.js","sourceRoot":"","sources":["../../../src/components/ic-checkbox-group/ic-checkbox-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,MAAM,EACN,OAAO,EACP,KAAK,EAEL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,uBAAuB,EACvB,mBAAmB,EACnB,gCAAgC,GACjC,MAAM,qBAAqB,CAAC;AAS7B,MAAM,OAAO,aAAa;;;;oBAgBI,KAAK;qBAKJ,KAAK;oBAKN,KAAK;sBAKJ,EAAE;iBAKN,KAAK;4BAIyB,EAAE;0BAIxB,EAAE;0BASC,EAAE;;EAGtC,aAAa;IACX,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,IAAI,CAC/B,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAC1C,CAAC;IACF,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;MACxC,IACE,QAAQ,CAAC,OAAO;QAChB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAClD;QACA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;OAC1C;IACH,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;EACrD,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,IAAI,CAC/B,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAC1C,CAAC;IACF,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;MACxC,IACE,QAAQ,CAAC,OAAO;QAChB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAClD;QACA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;OAC1C;MACD,IAAI,CAAC,QAAQ,CAAC,IAAI;QAAE,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;MAC9C,QAAQ,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,gCAAgC,CAC9B;MACE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE;MACvC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE;KACtC,EACD,gBAAgB,CACjB,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,WAAW,GAAG,uBAAuB,CACzC,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,UAAU,KAAK,EAAE,EACtB,IAAI,CAAC,gBAAgB,KAAK,EAAE,CAC7B,CAAC;IACF,MAAM,mBAAmB,GAAG,mBAAmB,CAC7C,IAAI,CAAC,gBAAgB,EACrB,IAAI,CAAC,QAAQ,CACd,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;~~MACF~~,CAAC,IAAI,CAAC,gBAAgB,KAAK,OAAO;QACjC,IAAI,CAAC,QAAQ;QACb,IAAI,CAAC,SAAS,CAAC,IAAI,CACnB,YACE,EAAE,EAAC,sBAAsB,EACzB,KAAK,EAAC,yBAAyB,iBACnB,MAAM;QAEjB,IAAI,CAAC,KAAK;QAAE,GAAG;QACf,IAAI,CAAC,gBAAgB,KAAK,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI;QAAE,GAAG;QAC/D,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAC7B,CACR;MACD,gBACE,EAAE,EAAE,IAAI,CAAC,IAAI,qBACI,GACf,IAAI,CAAC,gBAAgB,KAAK,OAAO,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS;UAClE,CAAC,CAAC,sBAAsB;UACxB,CAAC,CAAC,EACN,IAAI,WAAW,EAAE,CAAC,IAAI,EAAE,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QAEtB,CAAC,IAAI,CAAC,SAAS,IAAI,CAClB;UACE,sBACE,KAAK,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,EAAE,IAAI,EAAE,EAC7C,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,IAAI,CAAC,IAAI,GACE,CACX,CACV;QACD,WAAK,KAAK,EAAC,sBAAsB;UAC/B,eAAa,CACT,CACG;MACV,mBAAmB,IAAI,CACtB,2BACE,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,YAAY,EAAC,QAAQ,EACrB,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAC7B,OAAO,EAAE,IAAI,CAAC,cAAc,GACP,CACxB,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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 The label for the checkbox group to be displayed.\n /\n @Prop() label!: string;\n\n /\n The name for the checkbox group to differentiate from other groups.\n /\n @Prop() name!: string;\n\n /\n If `true`, the checkbox group will require a value.\n /\n @Prop() required: boolean = false;\n\n /\n If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n /\n @Prop() hideLabel: boolean = false;\n\n /\n If `true`, the checkbox group will be set to the disabled state.\n /\n @Prop() disabled: boolean = false;\n\n /\n The helper text that will be displayed for additional field guidance.\n /\n @Prop() helperText: string = \"\";\n\n /\n If `true`, the small styling will be applied to the checkbox group.\n /\n @Prop() small: boolean = false;\n /\n The validation status - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n /\n The validation text - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationText: string = \"\";\n\n /\n Emitted when a checkbox is checked.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n private checkboxOptions: HTMLIcCheckboxElement[];\n\n @State() checkedOptions: string[] = [];\n\n @Listen(\"icCheck\")\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=\"checkboxes-container\">\n <slot></slot>\n </div>\n </fieldset>\n {hadValidationStatus && (\n <ic-input-validation\n for={this.name}\n ariaLiveMode=\"polite\"\n status={this.validationStatus}\n message={this.validationText}\n ></ic-input-validation>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-checkbox-group.js","sourceRoot":"","sources":["../../../src/components/ic-checkbox-group/ic-checkbox-group.tsx"],"names":[],"mappings":"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","sourcesContent":["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 The label for the checkbox group to be displayed.\n /\n @Prop() label!: string;\n\n /\n The name for the checkbox group to differentiate from other groups.\n /\n @Prop() name!: string;\n\n /\n If `true`, the checkbox group will require a value.\n /\n @Prop() required: boolean = false;\n\n /\n If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n /\n @Prop() hideLabel: boolean = false;\n\n /\n If `true`, the checkbox group will be set to the disabled state.\n /\n @Prop() disabled: boolean = false;\n\n /\n The helper text that will be displayed for additional field guidance.\n /\n @Prop() helperText: string = \"\";\n\n /\n If `true`, the small styling will be applied to the checkbox group.\n /\n @Prop() small: boolean = false;\n /\n The validation status - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n /\n The validation text - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationText: string = \"\";\n\n /\n Emitted when a checkbox is checked.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n private checkboxOptions: HTMLIcCheckboxElement[];\n\n @State() checkedOptions: string[] = [];\n\n @Listen(\"icCheck\")\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 class={{ [\"small\"]: this.small }}>\n {(this.validationStatus === \"error\" \|\|\n this.required \|\|\n this.hideLabel) && (\n <span\n id=\"screenReaderOnlyText\"\n class=\"screen-reader-only-text\"\n aria-hidden=\"true\"\n >\n {this.label}{\" \"}\n {this.validationStatus === \"error\" ? \"invalid data \" : null}{\" \"}\n {this.required ? \"required\" : null}\n </span>\n )}\n <fieldset\n id={this.name}\n aria-labelledby={`${\n this.validationStatus === \"error\" \|\| this.required \|\| this.hideLabel\n ? \"screenReaderOnlyText\"\n : \"\"\n } ${describedBy}`.trim()}\n disabled={this.disabled}\n >\n {!this.hideLabel && (\n <legend>\n <ic-input-label\n class={{ [`${this.validationStatus}`]: true }}\n label={this.label}\n helperText={this.helperText}\n required={this.required}\n disabled={this.disabled}\n for={this.name}\n ></ic-input-label>\n </legend>\n )}\n <div class=\"checkboxes-container\">\n <slot></slot>\n </div>\n </fieldset>\n {hadValidationStatus && (\n <ic-input-validation\n for={this.name}\n ariaLiveMode=\"polite\"\n status={this.validationStatus}\n message={this.validationText}\n ></ic-input-validation>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-chip/ic-chip.css CHANGED Viewed

@@ -449,9 +449,8 @@ video {
   display: flex;
   padding: var(--ic-space-xxs);
   font-size: 0.875rem;
-  border-radius: 5rem;
-  text-align: center;
-  align-items: center;
+  border-radius: var(--ic-space-md);
+  text-align: left;
   text-decoration: none;
   transition: var(--ic-easing-transition-fast);
   position: relative;
@@ -459,10 +458,12 @@ video {
 .chip.small {
   padding: var(--ic-space-xxxs);
+  border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));
 }
 .chip.large {
   padding: var(--ic-space-xs);
+  border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));
 }
 .label {
@@ -499,16 +500,16 @@ ic-tooltip:focus-within {
 .outline {
   color: var(--ic-architectural-900);
-  border: 0.063rem solid var(--ic-architectural-900);
-  padding: calc(var(--ic-space-xxs) - 0.063rem);
+  border: var(--ic-space-1px) solid var(--ic-architectural-900);
+  padding: calc(var(--ic-space-xxs) - var(--ic-space-1px));
 }
 .outline.small {
-  padding: calc(var(--ic-space-xxxs) - 0.063rem);
+  padding: calc(var(--ic-space-xxxs) - var(--ic-space-1px));
 }
 .outline.large {
-  padding: calc(var(--ic-space-xs) - 0.063rem);
+  padding: calc(var(--ic-space-xs) - var(--ic-space-1px));
 }
 .outline.disabled {
@@ -562,15 +563,15 @@ ic-tooltip {
   }
   .filled.small {
-    padding: calc(var(--ic-space-xxxs) - 0.063rem);
+    padding: calc(var(--ic-space-xxxs) - var(--ic-space-1px));
   }
   .filled {
-    padding: calc(var(--ic-space-xxxs) + 0.063rem);
+    padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));
   }
   .filled.large {
-    padding: calc(var(--ic-space-xs) - 0.063rem);
+    padding: calc(var(--ic-space-xs) - var(--ic-space-1px));
   }
   .chip.disabled {

package/dist/collection/components/ic-data-entity/ic-data-entity.css CHANGED Viewed

@@ -458,7 +458,7 @@ video {
 .divider {
   margin-top: var(--ic-space-lg);
   margin-bottom: var(--ic-space-md);
-  height: 0.063rem;
+  height: var(--ic-space-1px);
   background-color: var(--ic-architectural-300);
 }

package/dist/collection/components/ic-data-row/ic-data-row.css CHANGED Viewed

@@ -488,7 +488,7 @@ slot[name="value"]::slotted(ic-text-field[readonly][hide-label][rows]) {
 .divider {
   margin-top: var(--ic-space-md);
-  height: 0.063rem;
+  height: var(--ic-space-1px);
   background-color: var(--ic-architectural-300);
 }

package/dist/collection/components/ic-divider/ic-divider.css CHANGED Viewed

@@ -2,7 +2,7 @@ hr {
   padding: 0;
   margin: 0;
   border: none;
-  height: 0.063rem;
+  height: var(--ic-space-1px);
   background-color: var(--ic-keyline-darken-rgb);
 }