npm - @ukic/web-components - Versions diffs - 2.1.0-beta.16 → 2.1.0-beta.18 - Mend

@ukic/web-components 2.1.0-beta.16 → 2.1.0-beta.18

Files changed (1033) hide show

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

	@@ -1 +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/normalize.css\";\n\n:host(.disabled) {\n color: var(--ic-architectural-200);\n pointer-events: none;\n}\n\n.container {\n display: flex;\n width: fit-content;\n padding: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n margin-bottom: var(--ic-space-xxs);\n align-items: center;\n}\n\n:host(.small) .container {\n margin-bottom: var(--ic-space-xxxs);\n}\n\n.checkbox {\n -webkit-appearance: none;\n -moz-appearance: none;\n 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: var(--ic-space-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 flex-shrink: 0;\n}\n\n.checkbox:checked {\n background-color: var(--ic-action-default);\n border: var(--ic-space-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,\n.checkbox.indeterminate:checked {\n background-color: transparent;\n border: 0.125rem solid var(--ic-action-default);\n}\n\n.checkbox:checked:hover {\n background-color: var(--ic-action-default-hover);\n}\n\n.checkbox:indeterminate:hover,\n.checkbox.indeterminate:checked:hover {\n background-color: var(--ic-action-default-bg-hover);\n border: 0.125rem 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:active,\n.checkbox.indeterminate:checked:active {\n background-color: var(--ic-action-default-bg-active);\n border: 0.125rem 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 0.25rem var(--ic-action-default-bg-hover);\n border: var(--ic-space-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 0.25rem var(--ic-action-default-bg-active);\n border: var(--ic-space-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: var(--ic-space-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 flex-shrink: 0;\n}\n\n.indeterminate-symbol {\n position: relative;\n width: 0.875rem;\n height: var(--ic-space-xxxs);\n right: -1.188rem;\n margin-left: -0.875rem;\n z-index: 1;\n background-color: var(--ic-action-default);\n pointer-events: none;\n flex-shrink: 0;\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: calc(var(--ic-space-md) + var(--ic-space-lg));\n margin-top: calc(var(--ic-space-sm) / 2);\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 0.188rem;\n border-bottom: 0.125rem solid var(--ic-action-default);\n border-left: 0.125rem solid var(--ic-action-default);\n}\n\n.dynamic-container {\n display: flex;\n position: relative;\n margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n gap: var(--ic-space-xs);\n}\n\n.dynamic-text {\n color: var(--ic-action-default);\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-bottom: var(--ic-space-xs);\n border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n ::slotted(ic-text-field) {\n --input-width: 100%;\n }\n}\n\n@media (forced-colors: active) {\n /* Styles here only apply to Forced Colors Mode /\n .checkbox {\n appearance: revert;\n transition: none;\n }\n\n .checkbox:checked {\n transition: none;\n }\n\n .checkbox:focus-visible {\n outline: 0.125rem solid highlight;\n }\n\n .checkbox:disabled:not(:checked) {\n appearance: none;\n border-color: GrayText;\n }\n\n .checkmark {\n fill: none;\n }\n\n .indeterminate-symbol {\n display: none;\n }\n}\n","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 removeDisabledFalse,\n} from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-checkbox\",\n styleUrl: \"ic-checkbox.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\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 private IC_TEXT_FIELD: string = \"ic-text-field\";\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n const textfield = this.host.querySelector(this.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 removeDisabledFalse(this.disabled, this.host);\n\n addFormResetListener(this.host, this.handleFormReset);\n this.host\n .querySelector(this.IC_TEXT_FIELD)\n ?.addEventListener(\"icChange\", (e) => e.stopImmediatePropagation());\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 this.host\n .querySelector(this.IC_TEXT_FIELD)\n ?.removeEventListener(\"icChange\", (e) => e.stopImmediatePropagation());\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 class=\"checkbox-label\" variant=\"body\">\n <label htmlFor={id}>{this.label}</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}
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/normalize.css\";\n\n:host(.disabled) {\n color: var(--ic-architectural-200);\n pointer-events: none;\n}\n\n.container {\n display: flex;\n width: fit-content;\n padding: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n margin-bottom: var(--ic-space-xxs);\n align-items: center;\n}\n\n:host(.small) .container {\n margin-bottom: var(--ic-space-xxxs);\n}\n\n.checkbox {\n -webkit-appearance: none;\n -moz-appearance: none;\n 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: var(--ic-space-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 flex-shrink: 0;\n}\n\n.checkbox:checked {\n background-color: var(--ic-action-default);\n border: var(--ic-space-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,\n.checkbox.indeterminate:checked {\n background-color: transparent;\n border: 0.125rem solid var(--ic-action-default);\n}\n\n.checkbox:checked:hover {\n background-color: var(--ic-action-default-hover);\n}\n\n.checkbox:indeterminate:hover,\n.checkbox.indeterminate:checked:hover {\n background-color: var(--ic-action-default-bg-hover);\n border: 0.125rem 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:active,\n.checkbox.indeterminate:checked:active {\n background-color: var(--ic-action-default-bg-active);\n border: 0.125rem 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 0.25rem var(--ic-action-default-bg-hover);\n border: var(--ic-space-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 0.25rem var(--ic-action-default-bg-active);\n border: var(--ic-space-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: var(--ic-space-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 flex-shrink: 0;\n}\n\n.indeterminate-symbol {\n position: relative;\n width: 0.875rem;\n height: var(--ic-space-xxxs);\n right: -1.188rem;\n margin-left: -0.875rem;\n z-index: 1;\n background-color: var(--ic-action-default);\n pointer-events: none;\n flex-shrink: 0;\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: calc(var(--ic-space-md) + var(--ic-space-lg));\n margin-top: calc(var(--ic-space-sm) / 2);\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 0.188rem;\n border-bottom: 0.125rem solid var(--ic-action-default);\n border-left: 0.125rem solid var(--ic-action-default);\n}\n\n.dynamic-container {\n display: flex;\n position: relative;\n margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n gap: var(--ic-space-xs);\n}\n\n.dynamic-text {\n color: var(--ic-action-default);\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-bottom: var(--ic-space-xs);\n border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n ::slotted(ic-text-field) {\n --input-width: 100%;\n }\n}\n\n@media (forced-colors: active) {\n /* Styles here only apply to Forced Colors Mode /\n .checkbox {\n appearance: revert;\n transition: none;\n }\n\n .checkbox:checked {\n transition: none;\n }\n\n .checkbox:focus-visible {\n outline: 0.125rem solid highlight;\n }\n\n .checkbox:disabled:not(:checked) {\n appearance: none;\n border-color: GrayText;\n }\n\n .checkmark {\n fill: none;\n }\n\n .indeterminate-symbol {\n display: none;\n }\n}\n","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 removeDisabledFalse,\n} from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-checkbox\",\n styleUrl: \"ic-checkbox.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class Checkbox {\n private additionalFieldContainer: HTMLDivElement;\n private IC_TEXT_FIELD: string = \"ic-text-field\";\n\n @Element() host: HTMLIcCheckboxElement;\n\n /\n The style of additionalField that will be displayed if used.\n /\n @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n \"static\";\n\n /\n If `true`, the checkbox will be set to the checked state.\n /\n @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n @State() initiallyChecked = this.checked;\n\n /\n If `true`, the checkbox will be set to the disabled state.\n /\n @Prop() disabled?: boolean = false;\n\n /\n The text to be displayed when dynamic.\n /\n @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n /\n The group label for the checkbox.\n /\n @Prop() groupLabel: string;\n\n /\n If `true`, the indeterminate state will be displayed when checked.\n /\n @Prop() indeterminate: boolean = false;\n\n /\n The label for the checkbox.\n /\n @Prop() label!: string;\n\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 /\n If true, the small styling will be applied to the checkbox.\n /\n @Prop() small?: boolean = false;\n\n /\n The value for the checkbox.\n /\n @Prop() value!: string;\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 componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.host);\n\n addFormResetListener(this.host, this.handleFormReset);\n this.host\n .querySelector(this.IC_TEXT_FIELD)\n ?.addEventListener(\"icChange\", this.eventHandler);\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 componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n const textfield = this.host.querySelector(this.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 disconnectedCallback(): void {\n removeFormResetListener(this.host, this.handleFormReset);\n this.host\n .querySelector(this.IC_TEXT_FIELD)\n ?.removeEventListener(\"icChange\", this.eventHandler);\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 private eventHandler = (event: CustomEvent) => {\n event.stopImmediatePropagation();\n };\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 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 class=\"checkbox-label\" variant=\"body\">\n <label htmlFor={id}>{this.label}</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-chip.js CHANGED Viewed

@@ -27,13 +27,23 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
     this.mouseLeaveHandler = () => {
       this.isHovered = false;
     };
-    this.label = undefined;
+    this.isHovered = false;
+    this.visible = true;
     this.appearance = "filled";
-    this.size = "default";
-    this.dismissible = false;
     this.disabled = false;
-    this.visible = true;
-    this.isHovered = false;
+    this.dismissible = false;
+    this.label = undefined;
+    this.size = "default";
+  }
+  componentWillLoad() {
+    removeDisabledFalse(this.disabled, this.el);
+  }
+  componentDidLoad() {
+    var _a;
+    this.dismissible &&
+      ((_a = this.el.shadowRoot
+        .querySelector("span.ic-tooltip-label")) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-hidden", "true"));
+    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Chip");
   }
   handleClick() {
     this.visible = !this.visible;
@@ -46,16 +56,6 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
       this.el.shadowRoot.querySelector("button").focus();
     }
   }
-  componentWillLoad() {
-    removeDisabledFalse(this.disabled, this.el);
-  }
-  componentDidLoad() {
-    var _a;
-    this.dismissible &&
-      ((_a = this.el.shadowRoot
-        .querySelector("span.ic-tooltip-label")) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-hidden", "true"));
-    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Chip");
-  }
   render() {
     const { label, appearance, size, dismissible, visible, disabled, isHovered, } = this;
     return (visible && (h("div", { class: {
@@ -73,13 +73,13 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
   get el() { return this; }
   static get style() { return icChipCss; }
 }, [17, "ic-chip", {
-    "label": [1],
     "appearance": [1],
-    "size": [1],
-    "dismissible": [4],
     "disabled": [4],
-    "visible": [32],
+    "dismissible": [4],
+    "label": [1],
+    "size": [1],
     "isHovered": [32],
+    "visible": [32],
     "setFocus": [64]
   }, [[2, "icDismiss", "handleClick"]]]);
 function defineCustomElement$1() {

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

	@@ -1 +1 @@
1	- {"file":"ic-chip.js","mappings":";;;;;;;;;;AAAA,MAAM,SAAS,GAAG,2vJAA2vJ;;MC6BhwJ,IAAI;;;;;;;~~IA2CP~~,kBAAa,GAAG;MACtB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;MACpB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,sBAAiB,GAAG;MAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;KACvB,CAAC;IAEM,sBAAiB,GAAG;MAC1B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KACxB,CAAC~~;;sBA5CsC~~,~~QAAQ~~;~~gBAInB~~,~~SAAS~~;~~uBAIN~~,~~KAAK~~;~~oBAIR~~,KAAK;~~mBAEN~~,~~IAAI;qBAEF,~~KAAK;;~~EAGnC~~,~~WAAW~~;~~IACT~~,IAAI,CAAC,~~OAAO~~,~~GAAG~~,~~CAAC,~~IAAI,CAAC,~~OAAO~~,CAAC;~~GAC9B;;;;EA6BD~~,~~MAAM~~,~~QAAQ~~;~~IACZ~~,~~IAAI~~,IAAI,CAAC,EAAE,CAAC,UAAU,~~CAAC,~~aAAa,CAAC,~~QAAQ~~,CAAC,~~EAAE;MAC9C~~,~~IAAI~~,CAAC,EAAE,~~CAAC~~,~~UAAU,~~CAAC,~~aAAa~~,CAAC,~~QAAQ~~,~~CAAC~~,CAAC,~~KAAK,~~EAAE,~~CAAC;KACpD;GACF;EAED~~,~~iBAAiB;IACf~~,~~mBAAmB~~,CAAC,~~IAAI~~,~~CAAC~~,QAAQ,EAAE,~~IAAI~~,~~CAAC,~~EAAE,CAAC,CAAC;~~GAC7C~~;~~EAED~~,~~gBAAgB;;IACd~~,IAAI,CAAC,~~WAAW;OACd~~,~~MAAA~~,IAAI,CAAC,~~EAAE~~,CAAC,~~UAAU~~;~~SACf~~,~~aAAa~~,CAAC,~~uBAAuB~~,CAAC,~~0CACrC~~,~~YAAY,~~CAAC,aAAa,~~EAAE~~,~~MAAM~~,CAAC,~~CAAA,CAAC~~;~~IAC1C~~,~~gCAAgC~~,~~CAC9B,~~CAAC,EAAE,~~IAAI~~,~~EAAE~~,~~IAAI,~~CAAC,~~KAAK~~,~~EAAE~~,QAAQ,~~EAAE~~,~~OAAO,EAAE,~~CAAC,~~EACzC~~,~~MAAM~~,~~CACP,~~CAAC;~~GACH~~;~~EAED~~,MAAM;IACJ,MAAM,EACJ,KAAK,EACL,UAAU,EACV,IAAI,EACJ,WAAW,EACX,OAAO,EACP,QAAQ,EACR,SAAS,GACV,GAAG,IAAI,CAAC;IAET,QACE,OAAO,KACL,WACE,KAAK,EAAE;QACL,CAAC,MAAM,GAAG,IAAI;QACd,CAAC,GAAG,UAAU,EAAE,GAAG,IAAI;QACvB,CAAC,GAAG,IAAI,EAAE,GAAG,IAAI;QACjB,CAAC,UAAU,GAAG,QAAQ;QACtB,CAAC,aAAa,GAAG,WAAW;QAC5B,CAAC,SAAS,GAAG,SAAS;OACvB,IAEA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,KAC1B,WAAK,KAAK,EAAC,MAAM,IACf,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP,EACD,qBACE,OAAO,EAAC,OAAO,4BACS,KAAK,EAC7B,KAAK,EAAC,OAAO,IAEb,gBAAO,KAAK,CAAQ,CACN,EACf,WAAW,KACV,kBACE,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,cAAc,EACrB,KAAK,EAAE,EAAE,CAAC,kBAAkB,GAAG,QAAQ,EAAE,IAEzC,cACE,EAAE,EAAC,cAAc,EACjB,KAAK,EAAE;QACL,CAAC,cAAc,GAAG,IAAI;OACvB,gBACW,WAAW,KAAK,OAAO,EACnC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAC3B,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,YAAY,EAAE,IAAI,CAAC,iBAAiB,EACpC,YAAY,EAAE,IAAI,CAAC,iBAAiB,EACpC,SAAS,EAAE,WAAW,GACd,CACC,CACd,CACG,CACP,EACD;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/ic-chip/ic-chip.css?tag=ic-chip&encapsulation=shadow","./src/components/ic-chip/ic-chip.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: inline-block;\n}\n\n.chip {\n display: flex;\n padding: var(--ic-space-xxs);\n font-size: 0.875rem;\n border-radius: var(--ic-space-md);\n text-align: left;\n text-decoration: none;\n transition: var(--ic-easing-transition-fast);\n position: relative;\n}\n\n.chip.small {\n padding: var(--ic-space-xxxs);\n border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n}\n\n.chip.large {\n padding: var(--ic-space-xs);\n border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n.label {\n padding: 0 var(--ic-space-xs);\n}\n\n.chip.hovered:not(:focus-within) {\n background-color: var(--ic-architectural-300);\n}\n\n.chip:focus-within {\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n z-index: 1;\n}\n\n.chip.outline.hovered:not(:focus-within) {\n background-color: var(--ic-action-dark-bg-hover);\n}\n\nic-tooltip:focus-within {\n z-index: 1;\n}\n\n.filled {\n background-color: var(--ic-architectural-200);\n color: black;\n border: none;\n}\n\n.filled.disabled {\n background-color: var(--ic-architectural-100);\n}\n\n.outline {\n color: var(--ic-architectural-900);\n border: var(--ic-space-1px) solid var(--ic-architectural-900);\n padding: calc(var(--ic-space-xxs) - var(--ic-space-1px));\n}\n\n.outline.small {\n padding: calc(var(--ic-space-xxxs) - var(--ic-space-1px));\n}\n\n.outline.large {\n padding: calc(var(--ic-space-xs) - var(--ic-space-1px));\n}\n\n.outline.disabled {\n border: var(--ic-border-disabled);\n background: none;\n}\n\n.chip.disabled ic-typography {\n color: var(--ic-architectural-200);\n}\n\n.dismiss-icon {\n border: none;\n border-radius: 50%;\n padding: 0;\n background: none;\n cursor: pointer;\n margin: var(--ic-space-xxxs);\n height: calc(var(--ic-space-lg) - var(--ic-space-xxs));\n width: calc(var(--ic-space-lg) - var(--ic-space-xxs));\n}\n\n.dismiss-icon:focus {\n outline: var(--ic-hc-focus-outline);\n}\n\n.dismiss-icon[disabled] {\n pointer-events: none;\n color: var(--ic-architectural-200);\n}\n\n.icon {\n padding: var(--ic-space-xxxs);\n box-sizing: border-box;\n}\n\n.icon,\nic-tooltip {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n.chip.disabled path,\n.chip.disabled ::slotted(svg) {\n fill: var(--ic-architectural-200);\n}\n\n@media (forced-colors: active) {\n .chip {\n border: var(--ic-hc-border);\n }\n\n .filled.small {\n padding: calc(var(--ic-space-xxxs) - var(--ic-space-1px));\n }\n\n .filled {\n padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));\n }\n\n .filled.large {\n padding: calc(var(--ic-space-xs) - var(--ic-space-1px));\n }\n\n .chip.disabled {\n appearance: none;\n border-color: GrayText;\n }\n\n .chip.disabled ic-typography {\n color: GrayText;\n }\n\n .chip.disabled path,\n .chip.disabled ::slotted(svg) {\n fill: GrayText;\n }\n\n .chip:focus-within {\n outline: none;\n border-color: Highlight;\n }\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Listen,\n Event,\n EventEmitter,\n Element,\n Method,\n} from \"@stencil/core\";\nimport {\n onComponentRequiredPropUndefined,\n isSlotUsed,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcChipAppearance, IcChipSizes } from \"./ic-chip.types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/*\n @slot icon - Content will be rendered at the start of the chip.\n /\n@Component({\n tag: \"ic-chip\",\n styleUrl: \"ic-chip.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Chip {\n @Element() el: HTMLIcChipElement;\n\n /\n ~~The~~ ~~text~~ ~~rendered~~ ~~within the chip.\~~n /\n @~~Prop~~() ~~label!:~~ ~~string~~;\n /\n The emphasis of the chip.\n /\n @Prop() appearance?: IcChipAppearance = \"filled\";\n /\n ~~The~~ ~~size~~ of the chip.\n /\n @Prop() ~~size~~?: ~~IcChipSizes~~ = ~~\"default\"~~;\n /\n If `true`, the chip will have a close button at the end to dismiss it.\n /\n @Prop() dismissible?: boolean = false;\n /\n If ~~`true`,~~ the chip ~~will appear disabled~~.\n /\n @Prop() ~~disabled?:~~ ~~boolean = false~~;\n\n ~~@State()~~ ~~visible:~~ ~~boolean~~ = ~~true;\~~n\n @~~State~~() ~~isHovered:~~ ~~boolean~~ = ~~false;\n~~\~~n @Listen(\~~"~~icDismiss~~\"~~, { capture: true })\n handleClick(): void {\n this.visible = !this.visible~~;\n }\n\n /\n @deprecated This event should not be used anymore. Use icDismiss instead.\n /\n @Event() dismiss: EventEmitter<void>;\n\n /\n Is emitted when the user dismisses the chip.\n /\n @Event() icDismiss: EventEmitter<void>;\n\n ~~private dismissAction =~~ (): void => {\n this.~~dismiss.emit();\n~~ this.~~icDismiss.emit(~~);\n };\n\n ~~private mouseEnterHandler =~~ (): void => {\n this.~~isHovered~~ = true;\n };\n\n ~~private~~ ~~mouseLeaveHandler~~ = (): void => {\n this.~~isHovered~~ = ~~false~~;\n };\n\n /\n Sets focus on the chip.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"button\")) {\n this.el.shadowRoot.querySelector(\"button\").focus();\n }\n }\n\n ~~componentWillLoad~~(): void {\n ~~removeDisabledFalse(~~this.~~disabled,~~ this.el);\n }\n\n ~~componentDidLoad~~(): void {\n this.~~dismissible~~ ~~&&\n this.el.shadowRoot\n .querySelector(\"span.ic-tooltip-label\")\n ?.setAttribute(\"aria-hidden\",~~ \"true~~\")~~;\n ~~onComponentRequiredPropUndefined(~~\n [{ ~~prop:~~ ~~this.label,~~ ~~propName~~: ~~\"label\"~~ ~~}],\n~~ \~~"Chip\"\~~n );\n }\n\n render() {\n const {\n label,\n appearance,\n size,\n dismissible,\n visible,\n disabled,\n isHovered,\n } = this;\n\n return (\n visible && (\n <div\n class={{\n [\"chip\"]: true,\n [`${appearance}`]: true,\n [`${size}`]: true,\n [\"disabled\"]: disabled,\n [\"dismissible\"]: dismissible,\n [\"hovered\"]: isHovered,\n }}\n >\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography\n variant=\"label\"\n apply-vertical-margins={false}\n class=\"label\"\n >\n <span>{label}</span>\n </ic-typography>\n {dismissible && (\n <ic-tooltip\n label=\"Dismiss\"\n target=\"dismiss-icon\"\n class={{ [\"tooltip-disabled\"]: disabled }}\n >\n <button\n id=\"dismiss-icon\"\n class={{\n [\"dismiss-icon\"]: true,\n }}\n aria-label={`Dismiss ${label} chip`}\n disabled={disabled}\n tabindex={disabled ? -1 : 0}\n onClick={this.dismissAction}\n onMouseEnter={this.mouseEnterHandler}\n onMouseLeave={this.mouseLeaveHandler}\n innerHTML={dismissIcon}\n ></button>\n </ic-tooltip>\n )}\n </div>\n )\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-chip.js","mappings":";;;;;;;;;;AAAA,MAAM,SAAS,GAAG,2vJAA2vJ;;MC6BhwJ,IAAI;;;;;;;IAuEP,kBAAa,GAAG;MACtB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;MACpB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,sBAAiB,GAAG;MAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;KACvB,CAAC;IAEM,sBAAiB,GAAG;MAC1B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KACxB,CAAC;qBA/E4B,KAAK;mBACP,IAAI;sBAKQ,QAAQ;oBAKnB,KAAK;uBAKF,KAAK;;gBAUR,SAAS;;EAYtC,iBAAiB;IACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;GAC7C;EAED,gBAAgB;;IACd,IAAI,CAAC,WAAW;OACd,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU;SACf,aAAa,CAAC,uBAAuB,CAAC,0CACrC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA,CAAC;IAC1C,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,MAAM,CACP,CAAC;GACH;EAGD,WAAW;IACT,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;GAC9B;;;;EAMD,MAAM,QAAQ;IACZ,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;MAC9C,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;KACpD;GACF;EAeD,MAAM;IACJ,MAAM,EACJ,KAAK,EACL,UAAU,EACV,IAAI,EACJ,WAAW,EACX,OAAO,EACP,QAAQ,EACR,SAAS,GACV,GAAG,IAAI,CAAC;IAET,QACE,OAAO,KACL,WACE,KAAK,EAAE;QACL,CAAC,MAAM,GAAG,IAAI;QACd,CAAC,GAAG,UAAU,EAAE,GAAG,IAAI;QACvB,CAAC,GAAG,IAAI,EAAE,GAAG,IAAI;QACjB,CAAC,UAAU,GAAG,QAAQ;QACtB,CAAC,aAAa,GAAG,WAAW;QAC5B,CAAC,SAAS,GAAG,SAAS;OACvB,IAEA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,KAC1B,WAAK,KAAK,EAAC,MAAM,IACf,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP,EACD,qBACE,OAAO,EAAC,OAAO,4BACS,KAAK,EAC7B,KAAK,EAAC,OAAO,IAEb,gBAAO,KAAK,CAAQ,CACN,EACf,WAAW,KACV,kBACE,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,cAAc,EACrB,KAAK,EAAE,EAAE,CAAC,kBAAkB,GAAG,QAAQ,EAAE,IAEzC,cACE,EAAE,EAAC,cAAc,EACjB,KAAK,EAAE;QACL,CAAC,cAAc,GAAG,IAAI;OACvB,gBACW,WAAW,KAAK,OAAO,EACnC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAC3B,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,YAAY,EAAE,IAAI,CAAC,iBAAiB,EACpC,YAAY,EAAE,IAAI,CAAC,iBAAiB,EACpC,SAAS,EAAE,WAAW,GACd,CACC,CACd,CACG,CACP,EACD;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/ic-chip/ic-chip.css?tag=ic-chip&encapsulation=shadow","./src/components/ic-chip/ic-chip.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: inline-block;\n}\n\n.chip {\n display: flex;\n padding: var(--ic-space-xxs);\n font-size: 0.875rem;\n border-radius: var(--ic-space-md);\n text-align: left;\n text-decoration: none;\n transition: var(--ic-easing-transition-fast);\n position: relative;\n}\n\n.chip.small {\n padding: var(--ic-space-xxxs);\n border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n}\n\n.chip.large {\n padding: var(--ic-space-xs);\n border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n.label {\n padding: 0 var(--ic-space-xs);\n}\n\n.chip.hovered:not(:focus-within) {\n background-color: var(--ic-architectural-300);\n}\n\n.chip:focus-within {\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n z-index: 1;\n}\n\n.chip.outline.hovered:not(:focus-within) {\n background-color: var(--ic-action-dark-bg-hover);\n}\n\nic-tooltip:focus-within {\n z-index: 1;\n}\n\n.filled {\n background-color: var(--ic-architectural-200);\n color: black;\n border: none;\n}\n\n.filled.disabled {\n background-color: var(--ic-architectural-100);\n}\n\n.outline {\n color: var(--ic-architectural-900);\n border: var(--ic-space-1px) solid var(--ic-architectural-900);\n padding: calc(var(--ic-space-xxs) - var(--ic-space-1px));\n}\n\n.outline.small {\n padding: calc(var(--ic-space-xxxs) - var(--ic-space-1px));\n}\n\n.outline.large {\n padding: calc(var(--ic-space-xs) - var(--ic-space-1px));\n}\n\n.outline.disabled {\n border: var(--ic-border-disabled);\n background: none;\n}\n\n.chip.disabled ic-typography {\n color: var(--ic-architectural-200);\n}\n\n.dismiss-icon {\n border: none;\n border-radius: 50%;\n padding: 0;\n background: none;\n cursor: pointer;\n margin: var(--ic-space-xxxs);\n height: calc(var(--ic-space-lg) - var(--ic-space-xxs));\n width: calc(var(--ic-space-lg) - var(--ic-space-xxs));\n}\n\n.dismiss-icon:focus {\n outline: var(--ic-hc-focus-outline);\n}\n\n.dismiss-icon[disabled] {\n pointer-events: none;\n color: var(--ic-architectural-200);\n}\n\n.icon {\n padding: var(--ic-space-xxxs);\n box-sizing: border-box;\n}\n\n.icon,\nic-tooltip {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n.chip.disabled path,\n.chip.disabled ::slotted(svg) {\n fill: var(--ic-architectural-200);\n}\n\n@media (forced-colors: active) {\n .chip {\n border: var(--ic-hc-border);\n }\n\n .filled.small {\n padding: calc(var(--ic-space-xxxs) - var(--ic-space-1px));\n }\n\n .filled {\n padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));\n }\n\n .filled.large {\n padding: calc(var(--ic-space-xs) - var(--ic-space-1px));\n }\n\n .chip.disabled {\n appearance: none;\n border-color: GrayText;\n }\n\n .chip.disabled ic-typography {\n color: GrayText;\n }\n\n .chip.disabled path,\n .chip.disabled ::slotted(svg) {\n fill: GrayText;\n }\n\n .chip:focus-within {\n outline: none;\n border-color: Highlight;\n }\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Listen,\n Event,\n EventEmitter,\n Element,\n Method,\n} from \"@stencil/core\";\nimport {\n onComponentRequiredPropUndefined,\n isSlotUsed,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcChipAppearance, IcChipSizes } from \"./ic-chip.types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/*\n @slot icon - Content will be rendered at the start of the chip.\n /\n@Component({\n tag: \"ic-chip\",\n styleUrl: \"ic-chip.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Chip {\n @Element() el: HTMLIcChipElement;\n\n @State() isHovered: boolean = false;\n @State() visible: boolean = true;\n\n /\n The emphasis of the chip.\n /\n @Prop() appearance?: IcChipAppearance = \"filled\";\n\n /\n If `true`, the chip will appear disabled.\n /\n @Prop() disabled?: boolean = false;\n\n /\n If `true`, the chip will have a close button at the end to dismiss it.\n /\n @Prop() dismissible?: boolean = false;\n\n /\n The text rendered within the chip.\n /\n @Prop() label!: string;\n\n /\n The size of the chip.\n /\n @Prop() size?: IcChipSizes = \"default\";\n\n /\n @deprecated This event should not be used anymore. Use icDismiss instead.\n /\n @Event() dismiss: EventEmitter<void>;\n\n /\n Is emitted when the user dismisses the chip.\n /\n @Event() icDismiss: EventEmitter<void>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n this.dismissible &&\n this.el.shadowRoot\n .querySelector(\"span.ic-tooltip-label\")\n ?.setAttribute(\"aria-hidden\", \"true\");\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Chip\"\n );\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleClick(): void {\n this.visible = !this.visible;\n }\n\n /\n Sets focus on the chip.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"button\")) {\n this.el.shadowRoot.querySelector(\"button\").focus();\n }\n }\n\n private dismissAction = (): void => {\n this.dismiss.emit();\n this.icDismiss.emit();\n };\n\n private mouseEnterHandler = (): void => {\n this.isHovered = true;\n };\n\n private mouseLeaveHandler = (): void => {\n this.isHovered = false;\n };\n\n render() {\n const {\n label,\n appearance,\n size,\n dismissible,\n visible,\n disabled,\n isHovered,\n } = this;\n\n return (\n visible && (\n <div\n class={{\n [\"chip\"]: true,\n [`${appearance}`]: true,\n [`${size}`]: true,\n [\"disabled\"]: disabled,\n [\"dismissible\"]: dismissible,\n [\"hovered\"]: isHovered,\n }}\n >\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography\n variant=\"label\"\n apply-vertical-margins={false}\n class=\"label\"\n >\n <span>{label}</span>\n </ic-typography>\n {dismissible && (\n <ic-tooltip\n label=\"Dismiss\"\n target=\"dismiss-icon\"\n class={{ [\"tooltip-disabled\"]: disabled }}\n >\n <button\n id=\"dismiss-icon\"\n class={{\n [\"dismiss-icon\"]: true,\n }}\n aria-label={`Dismiss ${label} chip`}\n disabled={disabled}\n tabindex={disabled ? -1 : 0}\n onClick={this.dismissAction}\n onMouseEnter={this.mouseEnterHandler}\n onMouseLeave={this.mouseLeaveHandler}\n innerHTML={dismissIcon}\n ></button>\n </ic-tooltip>\n )}\n </div>\n )\n );\n }\n}\n"],"version":3}

package/dist/components/ic-data-row.js CHANGED Viewed

@@ -9,19 +9,35 @@ const DataRow = /*@__PURE__*/ proxyCustomElement(class DataRow extends HTMLEleme
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.resizeObserver = null;
     this.hasEndComponent = false;
+    this.resizeObserver = null;
     this.runResizeObserver = () => {
       this.resizeObserver = new ResizeObserver(() => {
         this.checkLabelAbove();
       });
       this.resizeObserver.observe(this.el);
     };
-    this.label = undefined;
-    this.value = undefined;
-    this.small = false;
     this.deviceSize = DEVICE_SIZES.XL;
     this.entitySize = undefined;
+    this.label = undefined;
+    this.small = false;
+    this.value = undefined;
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver !== null) {
+      this.resizeObserver.disconnect();
+    }
+  }
+  componentWillLoad() {
+    this.deviceSize = getCurrentDeviceSize();
+    this.hasEndComponent = slotHasContent(this.el, "end-component");
+    this.checkLabelAbove();
+  }
+  componentDidLoad() {
+    checkResizeObserver(this.runResizeObserver);
+    if (this.hasEndComponent) {
+      this.labelEndComponent();
+    }
   }
   checkLabelAbove() {
     var _a;
@@ -42,22 +58,6 @@ const DataRow = /*@__PURE__*/ proxyCustomElement(class DataRow extends HTMLEleme
     const component = this.el.shadowRoot.querySelectorAll("slot[name=end-component]");
     component.forEach((child) => child.setAttribute("aria-label", "for " + this.label + " row"));
   }
-  componentWillLoad() {
-    this.deviceSize = getCurrentDeviceSize();
-    this.hasEndComponent = slotHasContent(this.el, "end-component");
-    this.checkLabelAbove();
-  }
-  componentDidLoad() {
-    checkResizeObserver(this.runResizeObserver);
-    if (this.hasEndComponent) {
-      this.labelEndComponent();
-    }
-  }
-  disconnectedCallback() {
-    if (this.resizeObserver !== null) {
-      this.resizeObserver.disconnect();
-    }
-  }
   render() {
     const { label, value, small } = this;
     return (h(Host, { class: {
@@ -70,8 +70,8 @@ const DataRow = /*@__PURE__*/ proxyCustomElement(class DataRow extends HTMLEleme
   static get style() { return icDataRowCss; }
 }, [1, "ic-data-row", {
     "label": [1],
-    "value": [1],
     "small": [4],
+    "value": [1],
     "deviceSize": [32],
     "entitySize": [32]
   }]);

package/dist/components/ic-data-row.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-data-row.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,sjHAAsjH;;MCkB9jH,OAAO;;;;;~~IAsBV~~,~~mBAAc~~,~~GAAmB~~,~~IAAI~~,CAAC;~~IAEtC~~,~~oBAAe~~,~~GAAY~~,~~KAAK~~,CAAC;~~IAEjC~~,sBAAiB,GAAG;MAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC;QACvC,IAAI,CAAC,eAAe,EAAE,CAAC;OACxB,CAAC,CAAC;MAEH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KACtC,CAAC;;;~~iBAhBuB~~,KAAK;~~sBAEA~~,~~YAAY~~,CAAC,EAAE~~;;;EAgBrC~~,eAAe;;IACrB,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,0CAAE,WAAW,CAAC;IACvE,IAAI,OAAO,EAAE;MACX,IAAI,OAAO,GAAG,EAAE,GAAG,YAAY,CAAC,CAAC,EAAE;QACjC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;OACxB;WAAM,IAAI,OAAO,GAAG,EAAE,GAAG,YAAY,CAAC,CAAC,EAAE;QACxC,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC;OACvB;WAAM;QACL,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;OACxB;KACF;GACF;EAEO,iBAAiB;IACvB,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,gBAAgB,CACnD,0BAA0B,CAC3B,CAAC;IAEF,SAAS,CAAC,OAAO,CAAC,CAAC,KAAkB,KACnC,KAAK,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,CAC/D,CAAC;GACH;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,oBAAoB,EAAE,CAAC;IACzC,IAAI,CAAC,eAAe,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,eAAe,CAAC,CAAC;IAChE,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAED,gBAAgB;IACd,mBAAmB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAC5C,IAAI,IAAI,CAAC,eAAe,EAAE;MACxB,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;GACF;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,cAAc,KAAK,IAAI,EAAE;MAChC,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;KAClC;GACF;EAED,MAAM;IACJ,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAErC,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,OAAO,GAAG,KAAK;QAChB,CAAC,mBAAmB,GAAG,IAAI,CAAC,UAAU,KAAK,GAAG;QAC9C,CAAC,eAAe,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI;OAC5C,EACD,IAAI,EAAC,UAAU,IAEf,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,YAAY,IACrB,WAAK,KAAK,EAAC,OAAO,IAChB,YAAM,IAAI,EAAC,OAAO,IAChB,qBACE,OAAO,EACL,IAAI,CAAC,UAAU,KAAK,IAAI,GAAG,OAAO,GAAG,gBAAgB,IAGtD,KAAK,CACQ,CACX,CACH,EACN,WAAK,KAAK,EAAC,OAAO,IAChB,YAAM,IAAI,EAAC,OAAO,IAChB,qBAAe,OAAO,EAAC,MAAM,IAAE,KAAK,CAAiB,CAChD,CACH,CACF,EACL,IAAI,CAAC,eAAe,KACnB,WAAK,KAAK,EAAC,eAAe,IACxB,WAAK,IAAI,EAAC,MAAM,IACd,YAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACF,CACP,CACG,EACN,WAAK,KAAK,EAAC,SAAS,GAAG,CAClB,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/ic-data-row/ic-data-row.css?tag=ic-data-row&encapsulation=shadow","./src/components/ic-data-row/ic-data-row.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n position: relative;\n display: block;\n}\n\n.data {\n display: flex;\n align-items: center;\n}\n\n.text-cells {\n display: flex;\n flex-grow: 1;\n min-width: 0;\n}\n\n.label {\n width: 12.5rem;\n min-width: 12.5rem;\n margin-right: var(--ic-space-md);\n color: var(--ic-color-tertiary-text);\n}\n\n.value {\n flex-grow: 1;\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label]) {\n margin-top: calc(var(--ic-space-xs) * -1);\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[small][readonly][hide-label]) {\n margin-top: calc(var(--ic-space-xxs) * -1);\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label][rows]) {\n margin-top: calc(var(--ic-space-xxs) * -1 - var(--ic-space-xxxs));\n}\n\n.end-component {\n width: fit-content;\n margin-left: 3.5rem;\n}\n\n.divider {\n margin-top: var(--ic-space-md);\n height: var(--ic-space-1px);\n background-color: var(--ic-architectural-300);\n}\n\n:host(.small) .divider {\n margin-top: var(--ic-space-xs);\n}\n\n:host(.breakpoint-medium) .label {\n width: 10rem;\n min-width: 10rem;\n}\n\n:host(.breakpoint-xs) .text-cells {\n flex-direction: column;\n}\n\n:host(.breakpoint-xs) .label {\n width: 8rem;\n margin-bottom: var(--ic-space-xs);\n}\n\n:host(.breakpoint-xs) .value {\n max-width: 95%;\n}\n\n:host(.breakpoint-xs) .end-component {\n margin-left: 0;\n}\n\n@media (forced-colors: active) {\n .divider {\n background-color: canvastext;\n }\n}\n","import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n slotHasContent,\n} from \"../../utils/helpers\";\n\n/*\n @slot label - Content will be rendered in the leftmost cell.\n * @slot value - Content will be rendered to the right of the label.\n * @slot end-component - Content will be displayed in the rightmost cell.\n /\n@Component({\n tag: \"ic-data-row\",\n styleUrl: \"ic-data-row.css\",\n shadow: true,\n})\nexport class DataRow {\n @Element() el: HTMLIcDataRowElement;\n\n /\n ~~The~~ ~~label~~ in ~~the leftmost cell of the row.\~~n /\n @~~Prop~~() ~~label~~: ~~string~~;\n\n /\n The ~~value~~ of the ~~middle~~ ~~(right if no end-component supplied)~~ cell of the row.\n /\n @Prop() ~~value~~: string;\n\n /\n If `true`, the small styling will be applied to the row. This is automatically applied if small is set on the parent data heading.\n */\n @Prop() small: boolean = false;\n\n ~~@State~~() ~~deviceSize:~~ ~~number~~ = ~~DEVICE_SIZES.XL;\~~n\n @~~State~~() ~~entitySize~~: \~~"xl\"~~ \| \~~"m\"~~ \| \~~"xs\"~~;\n\n ~~private resizeObserver~~: ~~ResizeObserver~~ = ~~null~~;\n\n ~~private hasEndComponent~~: ~~boolean~~ = ~~false~~;\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.checkLabelAbove();\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n private checkLabelAbove() {\n const rowSize = this.el.shadowRoot.querySelector(\".data\")?.clientWidth;\n if (rowSize) {\n if (rowSize + 46 < DEVICE_SIZES.S) {\n this.entitySize = \"xs\";\n } else if (rowSize + 46 < DEVICE_SIZES.M) {\n this.entitySize = \"m\";\n } else {\n this.entitySize = \"xl\";\n }\n }\n }\n\n private labelEndComponent(): void {\n const component = this.el.shadowRoot.querySelectorAll(\n \"slot[name=end-component]\"\n );\n\n component.forEach((child: HTMLElement) =>\n child.setAttribute(\"aria-label\", \"for \" + this.label + \" row\")\n );\n }\n\n componentWillLoad(): void {\n this.deviceSize = getCurrentDeviceSize();\n this.hasEndComponent = slotHasContent(this.el, \"end-component\");\n this.checkLabelAbove();\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n if (this.hasEndComponent) {\n this.labelEndComponent();\n }\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const { label, value, small } = this;\n\n return (\n <Host\n class={{\n [\"small\"]: small,\n [\"breakpoint-medium\"]: this.entitySize === \"m\",\n [\"breakpoint-xs\"]: this.entitySize === \"xs\",\n }}\n role=\"listitem\"\n >\n <div class=\"data\">\n <div class=\"text-cells\">\n <div class=\"label\">\n <slot name=\"label\">\n <ic-typography\n variant={\n this.entitySize === \"xs\" ? \"label\" : \"subtitle-large\"\n }\n >\n {label}\n </ic-typography>\n </slot>\n </div>\n <div class=\"value\">\n <slot name=\"value\">\n <ic-typography variant=\"body\">{value}</ic-typography>\n </slot>\n </div>\n </div>\n {this.hasEndComponent && (\n <div class=\"end-component\">\n <div role=\"cell\">\n <slot name=\"end-component\"></slot>\n </div>\n </div>\n )}\n </div>\n <div class=\"divider\" />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-data-row.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,sjHAAsjH;;MCkB9jH,OAAO;;;;;IACV,oBAAe,GAAY,KAAK,CAAC;IACjC,mBAAc,GAAmB,IAAI,CAAC;IAyCtC,sBAAiB,GAAG;MAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC;QACvC,IAAI,CAAC,eAAe,EAAE,CAAC;OACxB,CAAC,CAAC;MAEH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KACtC,CAAC;sBA3C4B,YAAY,CAAC,EAAE;;;iBAWpB,KAAK;;;EAO9B,oBAAoB;IAClB,IAAI,IAAI,CAAC,cAAc,KAAK,IAAI,EAAE;MAChC,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;KAClC;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,oBAAoB,EAAE,CAAC;IACzC,IAAI,CAAC,eAAe,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,eAAe,CAAC,CAAC;IAChE,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAED,gBAAgB;IACd,mBAAmB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAC5C,IAAI,IAAI,CAAC,eAAe,EAAE;MACxB,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;GACF;EAUO,eAAe;;IACrB,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,0CAAE,WAAW,CAAC;IACvE,IAAI,OAAO,EAAE;MACX,IAAI,OAAO,GAAG,EAAE,GAAG,YAAY,CAAC,CAAC,EAAE;QACjC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;OACxB;WAAM,IAAI,OAAO,GAAG,EAAE,GAAG,YAAY,CAAC,CAAC,EAAE;QACxC,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC;OACvB;WAAM;QACL,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;OACxB;KACF;GACF;EAEO,iBAAiB;IACvB,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,gBAAgB,CACnD,0BAA0B,CAC3B,CAAC;IAEF,SAAS,CAAC,OAAO,CAAC,CAAC,KAAkB,KACnC,KAAK,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,CAC/D,CAAC;GACH;EAED,MAAM;IACJ,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAErC,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,OAAO,GAAG,KAAK;QAChB,CAAC,mBAAmB,GAAG,IAAI,CAAC,UAAU,KAAK,GAAG;QAC9C,CAAC,eAAe,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI;OAC5C,EACD,IAAI,EAAC,UAAU,IAEf,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,YAAY,IACrB,WAAK,KAAK,EAAC,OAAO,IAChB,YAAM,IAAI,EAAC,OAAO,IAChB,qBACE,OAAO,EACL,IAAI,CAAC,UAAU,KAAK,IAAI,GAAG,OAAO,GAAG,gBAAgB,IAGtD,KAAK,CACQ,CACX,CACH,EACN,WAAK,KAAK,EAAC,OAAO,IAChB,YAAM,IAAI,EAAC,OAAO,IAChB,qBAAe,OAAO,EAAC,MAAM,IAAE,KAAK,CAAiB,CAChD,CACH,CACF,EACL,IAAI,CAAC,eAAe,KACnB,WAAK,KAAK,EAAC,eAAe,IACxB,WAAK,IAAI,EAAC,MAAM,IACd,YAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACF,CACP,CACG,EACN,WAAK,KAAK,EAAC,SAAS,GAAG,CAClB,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/ic-data-row/ic-data-row.css?tag=ic-data-row&encapsulation=shadow","./src/components/ic-data-row/ic-data-row.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n position: relative;\n display: block;\n}\n\n.data {\n display: flex;\n align-items: center;\n}\n\n.text-cells {\n display: flex;\n flex-grow: 1;\n min-width: 0;\n}\n\n.label {\n width: 12.5rem;\n min-width: 12.5rem;\n margin-right: var(--ic-space-md);\n color: var(--ic-color-tertiary-text);\n}\n\n.value {\n flex-grow: 1;\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label]) {\n margin-top: calc(var(--ic-space-xs) * -1);\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[small][readonly][hide-label]) {\n margin-top: calc(var(--ic-space-xxs) * -1);\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label][rows]) {\n margin-top: calc(var(--ic-space-xxs) * -1 - var(--ic-space-xxxs));\n}\n\n.end-component {\n width: fit-content;\n margin-left: 3.5rem;\n}\n\n.divider {\n margin-top: var(--ic-space-md);\n height: var(--ic-space-1px);\n background-color: var(--ic-architectural-300);\n}\n\n:host(.small) .divider {\n margin-top: var(--ic-space-xs);\n}\n\n:host(.breakpoint-medium) .label {\n width: 10rem;\n min-width: 10rem;\n}\n\n:host(.breakpoint-xs) .text-cells {\n flex-direction: column;\n}\n\n:host(.breakpoint-xs) .label {\n width: 8rem;\n margin-bottom: var(--ic-space-xs);\n}\n\n:host(.breakpoint-xs) .value {\n max-width: 95%;\n}\n\n:host(.breakpoint-xs) .end-component {\n margin-left: 0;\n}\n\n@media (forced-colors: active) {\n .divider {\n background-color: canvastext;\n }\n}\n","import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n slotHasContent,\n} from \"../../utils/helpers\";\n\n/*\n @slot label - Content will be rendered in the leftmost cell.\n * @slot value - Content will be rendered to the right of the label.\n * @slot end-component - Content will be displayed in the rightmost cell.\n /\n@Component({\n tag: \"ic-data-row\",\n styleUrl: \"ic-data-row.css\",\n shadow: true,\n})\nexport class DataRow {\n private hasEndComponent: boolean = false;\n private resizeObserver: ResizeObserver = null;\n\n @Element() el: HTMLIcDataRowElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() entitySize: \"xl\" \| \"m\" \| \"xs\";\n\n /\n The label in the leftmost cell of the row.\n /\n @Prop() label: string;\n\n /\n If `true`, the small styling will be applied to the row. This is automatically applied if small is set on the parent data heading.\n /\n @Prop() small: boolean = false;\n\n /\n The value of the middle (right if no end-component supplied) cell of the row.\n */\n @Prop() value: string;\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n componentWillLoad(): void {\n this.deviceSize = getCurrentDeviceSize();\n this.hasEndComponent = slotHasContent(this.el, \"end-component\");\n this.checkLabelAbove();\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n if (this.hasEndComponent) {\n this.labelEndComponent();\n }\n }\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.checkLabelAbove();\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n private checkLabelAbove() {\n const rowSize = this.el.shadowRoot.querySelector(\".data\")?.clientWidth;\n if (rowSize) {\n if (rowSize + 46 < DEVICE_SIZES.S) {\n this.entitySize = \"xs\";\n } else if (rowSize + 46 < DEVICE_SIZES.M) {\n this.entitySize = \"m\";\n } else {\n this.entitySize = \"xl\";\n }\n }\n }\n\n private labelEndComponent(): void {\n const component = this.el.shadowRoot.querySelectorAll(\n \"slot[name=end-component]\"\n );\n\n component.forEach((child: HTMLElement) =>\n child.setAttribute(\"aria-label\", \"for \" + this.label + \" row\")\n );\n }\n\n render() {\n const { label, value, small } = this;\n\n return (\n <Host\n class={{\n [\"small\"]: small,\n [\"breakpoint-medium\"]: this.entitySize === \"m\",\n [\"breakpoint-xs\"]: this.entitySize === \"xs\",\n }}\n role=\"listitem\"\n >\n <div class=\"data\">\n <div class=\"text-cells\">\n <div class=\"label\">\n <slot name=\"label\">\n <ic-typography\n variant={\n this.entitySize === \"xs\" ? \"label\" : \"subtitle-large\"\n }\n >\n {label}\n </ic-typography>\n </slot>\n </div>\n <div class=\"value\">\n <slot name=\"value\">\n <ic-typography variant=\"body\">{value}</ic-typography>\n </slot>\n </div>\n </div>\n {this.hasEndComponent && (\n <div class=\"end-component\">\n <div role=\"cell\">\n <slot name=\"end-component\"></slot>\n </div>\n </div>\n )}\n </div>\n <div class=\"divider\" />\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -7,25 +7,25 @@ import { d as defineCustomElement$4 } from './ic-loading-indicator2.js';
 import { d as defineCustomElement$3 } from './ic-tooltip2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
-const icDialogCss = "/*! 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{position:fixed;top:0;left:0;bottom:0;right:0;display:flex;align-items:center;justify-content:center;min-height:100% !important;background:rgb(0 0 0 / 60%);z-index:var(--ic-z-index-dialog);opacity:0;transition:opacity var(--ic-easing-transition-slow)}:host(.fade-in){opacity:1;transition:opacity var(--ic-easing-transition-slow)}:host(.hidden){display:none}.dialog{background-color:var(--ic-architectural-white);border:var(--ic-border-default);border-radius:var(--ic-border-radius);padding:var(--ic-space-xs) var(--ic-space-md);transform:translateY(-3rem);transition:transform 1000s;display:flex;flex-direction:column;box-sizing:border-box}:host(.fade-in) .dialog{transform:translateY(0);transition:transform var(--ic-easing-transition-slow)}.small{width:50%;max-width:25rem;min-height:11rem;max-height:70vh}.medium{width:70vw;max-width:44rem;min-height:12.5rem;max-height:70vh}.large{width:90vw;max-width:62.5rem;min-height:12.5rem;max-height:90vh}.heading-area{display:flex;margin-bottom:var(--ic-space-xs)}.close-icon{margin-left:auto}.close-icon-svg{display:flex;align-items:center}.content-area{-ms-overflow-style:none;scrollbar-width:none;padding:0 var(--ic-space-xs);margin:0 calc(-1 * var(--ic-space-xs))}:host([data-overflow=\"false\"]) .content-area{overflow-y:visible}:host([data-overflow=\"true\"]) .content-area{overflow-y:scroll}:host([data-overflow=\"false\"]) .dialog{overflow:visible}.content-area::-webkit-scrollbar{display:none}#dialog-content{margin-bottom:var(--ic-space-sm)}.status-alert{margin-bottom:var(--ic-space-xs)}.dialog-controls{margin-top:auto;padding-top:var(--ic-space-xs);display:flex;justify-content:flex-end;gap:var(--ic-space-md)}.dialog-control-button{width:-moz-fit-content;width:fit-content}@media (min-width: 800px){:host([size=\"large\"]) .content-area{width:75%}}@media (max-width: 576px){.dialog{width:100vw;height:100vh;transform:translateY(-5rem);max-width:none;max-height:none;box-sizing:border-box}}@media (max-width: 364px){.triple-button{flex-direction:column;gap:var(--ic-space-xs)}.dialog-control-button{width:unset}}";
+const icDialogCss = "/*! 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{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;min-height:100% !important;background:rgb(0 0 0 / 60%);z-index:var(--ic-z-index-dialog);opacity:0;transition:opacity var(--ic-easing-transition-slow)}:host(.fade-in){opacity:1;transition:opacity var(--ic-easing-transition-slow)}:host(.hidden){display:none}.dialog{background-color:var(--ic-architectural-white);border:var(--ic-border-default);border-radius:var(--ic-border-radius);padding:var(--ic-space-xs) var(--ic-space-md);transform:translateY(-3rem);transition:transform 1000s;display:flex;flex-direction:column;box-sizing:border-box}:host(.fade-in) .dialog{transform:translateY(0);transition:transform var(--ic-easing-transition-slow)}.small{width:50%;max-width:25rem;min-height:11rem;max-height:70vh}.medium{width:70vw;max-width:44rem;min-height:12.5rem;max-height:70vh}.large{width:90vw;max-width:62.5rem;min-height:12.5rem;max-height:90vh}.heading-area{display:flex;margin-bottom:var(--ic-space-xs)}.close-icon{margin-left:auto}.close-icon-svg{display:flex;align-items:center}.content-area{-ms-overflow-style:none;scrollbar-width:none;padding:0 var(--ic-space-xs);margin:0 calc(-1 * var(--ic-space-xs))}:host([data-overflow=\"false\"]) .content-area{overflow-y:visible}:host([data-overflow=\"true\"]) .content-area{overflow-y:scroll}:host([data-overflow=\"false\"]) .dialog{overflow:visible}.content-area::-webkit-scrollbar{display:none}#dialog-content{margin-bottom:var(--ic-space-sm)}.status-alert{margin-bottom:var(--ic-space-xs)}.dialog-controls{margin-top:auto;padding-top:var(--ic-space-xs);display:flex;justify-content:flex-end;gap:var(--ic-space-md)}.dialog-control-button{width:-moz-fit-content;width:fit-content}@media (min-width: 800px){:host([size=\"large\"]) .content-area{width:75%}}@media (max-width: 576px){.dialog{width:100vw;height:100vh;transform:translateY(-5rem);max-width:none;max-height:none;box-sizing:border-box}}@media (max-width: 364px){.triple-button{flex-direction:column;gap:var(--ic-space-xs)}.dialog-control-button{width:unset}}";
 const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.icDialogOpened = createEvent(this, "icDialogOpened", 7);
+    this.icDialogCancelled = createEvent(this, "icDialogCancelled", 7);
     this.icDialogClosed = createEvent(this, "icDialogClosed", 7);
     this.icDialogConfirmed = createEvent(this, "icDialogConfirmed", 7);
-    this.icDialogCancelled = createEvent(this, "icDialogCancelled", 7);
-    this.focusedElementIndex = 0;
+    this.icDialogOpened = createEvent(this, "icDialogOpened", 7);
     this.DATA_OVERFLOW = "data-overflow";
     this.DATA_GETS_FOCUS = "data-gets-focus";
     this.DATA_GETS_FOCUS_SELECTOR = "[data-gets-focus]";
     this.DIALOG_CONTROLS = "dialog-controls";
+    this.dialogHeight = 0;
+    this.focusedElementIndex = 0;
     this.IC_TEXT_FIELD = "IC-TEXT-FIELD";
     this.resizeObserver = null;
-    this.dialogHeight = 0;
     this.setContentOverflow = () => {
       if (this.dialogEl.clientHeight < this.dialogEl.scrollHeight) {
         this.el.setAttribute(this.DATA_OVERFLOW, "true");
@@ -84,9 +84,9 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement
     this.getInteractiveElements = () => {
       this.interactiveElementList = Array.from(this.el.shadowRoot.querySelectorAll("ic-button"));
       const slottedInteractiveElements = Array.from(this.el.querySelectorAll(`a[href], button, input:not(.ic-input), textarea, select, details, [tabindex]:not([tabindex="-1"]),
-        ic-button, ic-checkbox, ic-select, ic-search-bar, ic-tab-group, ic-radio-group,
-        ic-back-to-top, ic-breadcrumb, ic-chip[dismissible="true"], ic-footer-link, ic-link, ic-navigation-button,
-        ic-navigation-item, ic-switch, ic-text-field`));
+          ic-button, ic-checkbox, ic-select, ic-search-bar, ic-tab-group, ic-radio-group,
+          ic-back-to-top, ic-breadcrumb, ic-chip[dismissible="true"], ic-footer-link, ic-link, ic-navigation-button,
+          ic-navigation-item, ic-switch, ic-text-field`));
       if (slottedInteractiveElements.length > 0) {
         if (slottedInteractiveElements[0].slot !== this.DIALOG_CONTROLS) {
           slottedInteractiveElements[0].setAttribute(this.DATA_GETS_FOCUS, "");
@@ -161,16 +161,18 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement
         }
       }
     };
-    this.size = "small";
-    this.heading = undefined;
-    this.label = undefined;
-    this.dismissLabel = "Dismiss";
-    this.status = undefined;
+    this.dialogRendered = false;
+    this.fadeIn = false;
     this.alertHeading = undefined;
     this.alertMessage = undefined;
     this.buttons = true;
-    this.destructive = false;
     this.closeOnBackdropClick = true;
+    this.destructive = false;
+    this.dismissLabel = "Dismiss";
+    this.heading = undefined;
+    this.label = undefined;
+    this.size = "small";
+    this.status = undefined;
     this.buttonProps = [
       {
         label: "Cancel",
@@ -178,10 +180,45 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement
       },
       { label: "Confirm", onclick: "this.confirmDialog();" },
     ];
-    this.dialogRendered = false;
-    this.fadeIn = false;
   }
-  /* eslint-enable */
+  watchPropHandler() {
+    this.setButtonOnClick();
+  }
+  componentWillLoad() {
+    this.setButtonOnClick();
+  }
+  componentDidLoad() {
+    this.getInteractiveElements();
+    this.setAlertVariant();
+  }
+  handleKeyboard(ev) {
+    if (this.dialogRendered) {
+      switch (ev.key) {
+        case "Tab":
+          ev.preventDefault();
+          this.focusNextInteractiveElement(ev.shiftKey);
+          break;
+        case "Escape":
+          !ev.repeat && this.hideDialog();
+          ev.stopImmediatePropagation();
+          break;
+      }
+    }
+  }
+  handleClick(ev) {
+    const dialogElement = this.el.shadowRoot.querySelector("dialog");
+    if (this.closeOnBackdropClick &&
+      ev.composedPath().indexOf(dialogElement) <= 0) {
+      const rect = this.dialogEl.getBoundingClientRect();
+      const isInDialog = rect.top <= ev.clientY &&
+        ev.clientY <= rect.top + rect.height &&
+        rect.left <= ev.clientX &&
+        ev.clientX <= rect.left + rect.width;
+      if (!isInDialog) {
+        this.hideDialog();
+      }
+    }
+  }
   /**
    * Use to show the dialog.
    */
@@ -231,44 +268,6 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement
   async confirmDialog() {
     this.icDialogConfirmed.emit();
   }
-  watchPropHandler() {
-    this.setButtonOnClick();
-  }
-  handleKeyboard(ev) {
-    if (this.dialogRendered) {
-      switch (ev.key) {
-        case "Tab":
-          ev.preventDefault();
-          this.focusNextInteractiveElement(ev.shiftKey);
-          break;
-        case "Escape":
-          !ev.repeat && this.hideDialog();
-          ev.stopImmediatePropagation();
-          break;
-      }
-    }
-  }
-  handleClick(ev) {
-    const dialogElement = this.el.shadowRoot.querySelector("dialog");
-    if (this.closeOnBackdropClick &&
-      ev.composedPath().indexOf(dialogElement) <= 0) {
-      const rect = this.dialogEl.getBoundingClientRect();
-      const isInDialog = rect.top <= ev.clientY &&
-        ev.clientY <= rect.top + rect.height &&
-        rect.left <= ev.clientX &&
-        ev.clientX <= rect.left + rect.width;
-      if (!isInDialog) {
-        this.hideDialog();
-      }
-    }
-  }
-  componentWillLoad() {
-    this.setButtonOnClick();
-  }
-  componentDidLoad() {
-    this.getInteractiveElements();
-    this.setAlertVariant();
-  }
   render() {
     const { alertHeading, alertMessage, buttons, buttonProps, size, heading, label, status, destructive, dismissLabel, } = this;
     return (h(Host, { class: { ["hidden"]: !this.dialogRendered, ["fade-in"]: this.fadeIn } }, h("dialog", { class: { ["dialog"]: true, [`${size}`]: true }, "aria-labelledby": "dialog-label dialog-heading", "aria-describedby": "dialog-alert dialog-content", ref: (el) => (this.dialogEl = el) }, h("div", { class: "heading-area" }, h("div", { class: "heading-content" }, h("div", { class: "label" }, h("slot", { name: "label" }, h("ic-typography", { variant: "label", id: "dialog-label" }, label))), h("div", { class: "heading" }, h("slot", { name: "heading" }, h("ic-typography", { variant: "h4", id: "dialog-heading" }, heading)))), h("ic-button", { class: "close-icon", variant: "icon", "aria-label": dismissLabel, onClick: this.closeIconClick, "data-gets-focus": destructive || !buttons ? "" : null }, h("span", { class: "close-icon-svg", slot: "icon", innerHTML: closeIcon }))), h("div", { class: "content-area" }, status && (h("ic-alert", { variant: status, heading: alertHeading, message: alertMessage, "title-above": true, class: "status-alert", id: "dialog-alert" })), h("div", { id: "dialog-content" }, h("slot", null))), (buttons || isSlotUsed(this.el, this.DIALOG_CONTROLS)) && (h("div", { class: {
@@ -292,16 +291,16 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement
   }; }
   static get style() { return icDialogCss; }
 }, [1, "ic-dialog", {
-    "size": [1],
-    "heading": [1],
-    "label": [1],
-    "dismissLabel": [1, "dismiss-label"],
-    "status": [1],
     "alertHeading": [1, "alert-heading"],
     "alertMessage": [1, "alert-message"],
     "buttons": [4],
-    "destructive": [4],
     "closeOnBackdropClick": [4, "close-on-backdrop-click"],
+    "destructive": [4],
+    "dismissLabel": [1, "dismiss-label"],
+    "heading": [1],
+    "label": [1],
+    "size": [1],
+    "status": [1],
     "buttonProps": [16],
     "dialogRendered": [32],
     "fadeIn": [32],