@ukic/web-components 2.29.1 → 2.31.0

package/dist/collection/ag-theme-icds.css

@@ -0,0 +1,217 @@
+.ag-theme-icds {
+  --ag-active-color: var(--ic-action-default);
+  --ag-alpine-active-color: var(--ic-action-default);
+  --ag-balham-active-color: var(--ic-action-default);
+  --ag-material-primary-color: var(--ic-action-default);
+  --ag-material-accent-color: var(--ic-action-default);
+  --ag-foreground-color: var(--ic-color-primary-text);
+  --ag-secondary-foreground-color: var(--ic-color-secondary-text);
+  --ag-data-color: var(--ic-color-primary-text);
+  --ag-header-foreground-color: var(--ic-color-primary-text);
+  --ag-header-background-color: var(--ic-architectural-40);
+  --ag-tooltip-background-color: var(--ic-architectural-800);
+  --ag-disabled-foreground-color: var(--ic-color-tertiary-text);
+  --ag-subheader-background-color: var(--ic-architectural-20);
+  --ag-side-button-selected-background-color: var(--ic-action-default);
+  --ag-selected-row-background-color: var(--ic-table-row-selected);
+  --ag-odd-row-background-color: var(--ic-architectural-20);
+  --ag-modal-overlay-background-color: var(--ic-architectural-white);
+  --ag-menu-background-color: var(--ic-architectural-white);
+  --ag-row-hover-color: var(--ic-action-default-bg-hover);
+  --ag-column-hover-color: var(--ic-action-default-bg-hover);
+  --ag-range-selection-border-color: var(--ic-action-default);
+  --ag-range-selection-border-style: solid;
+  --ag-range-selection-background-color: var(--ic-table-row-selected);
+  --ag-selected-tab-underline-color: var(--ic-action-default);
+  --ag-selected-tab-underline-width: var(--ic-space-xxs);
+  --ag-selected-tab-underline-transition-speed: var(
+    --ic-transition-duration-fast
+  );
+  --ag-header-cell-hover-background-color: var(--ic-architectural-80);
+  --ag-header-cell-moving-background-color: var(--ic-architectural-80);
+  --ag-chip-background-color: var(--ic-architectural-200);
+  --ag-borders: solid var(--ic-border-width);
+  --ag-border-color: var(--ic-architectural-200);
+  --ag-borders-critical: solid var(--ic-border-width);
+  --ag-borders-secondary: solid var(--ic-border-width);
+  --ag-secondary-border-color: var(--ic-architectural-100);
+  --ag-row-border-style: solid;
+  --ag-row-border-width: var(--ic-border-width);
+  --ag-row-border-color: var(--ic-architectural-100);
+  --ag-menu-border-color: var(--ic-architectural-400);
+  --ag-panel-border-color: var(--ic-architectural-400);
+  --ag-cell-horizontal-border: solid var(--ic-architectural-100);
+  --ag-borders-input: solid var(--ic-border-width);
+  --ag-input-border-color: var(--ic-architectural-400);
+  --ag-borders-input-invalid: solid var(--ic-space-xxxs);
+  --ag-input-border-color-invalid: var(--ic-status-error);
+  --ag-borders-side-button: solid var(--ic-border-width);
+  --ag-border-radius: var(--ic-border-radius);
+  --ag-invalid-color: var(--ic-status-error);
+  --ag-input-disabled-border-color: var(--ic-architectural-200);
+  --ag-input-disabled-background-color: transparent;
+  --ag-checkbox-background-color: transparent;
+  --ag-checkbox-border-radius: var(--ic-border-radius);
+  --ag-checkbox-checked-color: var(--ic-action-default);
+  --ag-checkbox-unchecked-color: var(--ic-architectural-400);
+  --ag-checkbox-indeterminate-color: var(--ic-action-default);
+  --ag-toggle-button-border-width: var(--ic-border-width);
+  --ag-toggle-button-on-border-color: var(--ic-action-default);
+  --ag-toggle-button-off-border-color: var(--ic-action-default);
+  --ag-toggle-button-on-background-color: var(--ic-action-default);
+  --ag-toggle-button-off-background-color: transparent;
+  --ag-toggle-button-switch-background-color: var(--ic-architectural-200);
+  --ag-toggle-button-switch-border-color: var(--ic-architectural-700);
+  --ag-input-focus-box-shadow: var(--ic-border-focus);
+  --ag-minichart-selected-page-color: var(--ic-action-default);
+  --ag-grid-size: var(--ic-space-xs);
+  --ag-icon-size: var(--ic-space-lg);
+  --ag-icon-font-weight: var(--ic-font-weight-regular);
+  --ag-widget-container-horizontal-padding: var(--ic-space-xs);
+  --ag-widget-container-vertical-padding: var(--ic-space-xs);
+  --ag-widget-horizontal-spacing: var(--ic-space-md);
+  --ag-widget-vertical-spacing: var(--ic-space-md);
+  --ag-cell-horizontal-padding: var(--ic-space-md);
+  --ag-cell-widget-spacing: var(--ic-space-md);
+  --ag-row-height: calc(var(--ag-font-size) + var(--ag-grid-size) * 3.5);
+  --ag-header-height: calc(var(--ag-font-size) + var(--ag-grid-size) * 4.25);
+  --ag-list-item-height: calc(
+    var(--ag-icon-size) + var(--ag-widget-vertical-spacing)
+  );
+  --ag-header-column-separator-display: block;
+  --ag-header-column-separator-width: var(--ic-border-width);
+  --ag-header-column-separator-color: var(--ic-architectural-200);
+  --ag-header-column-resize-handle-width: var(--ic-border-width);
+  --ag-header-column-resize-handle-color: var(--ic-architectural-200);
+  --ag-column-select-indent-size: var(--ic-space-xs);
+  --ag-set-filter-indent-size: var(--ic-space-xs);
+  --ag-advanced-filter-builder-indent-size: var(--ic-space-xs);
+  --ag-row-group-indent-size: var(--ic-space-xs);
+  --ag-filter-tool-panel-group-indent: var(--ic-space-xs);
+  --ag-font-family: var(--ic-font-body-family);
+  --ag-font-size: var(--ic-font-size-regular);
+  --ag-icon-font-family: aggridmaterialdesignicons;
+  --ag-card-radius: var(--ic-border-radius);
+  --ag-card-shadow: var(--ic-border-focus);
+  --ag-advanced-filter-join-pill-color: var(--ic-architectural-200);
+  --ag-row-loading-skeleton-effect-color: var(--ic-architectural-100);
+}
+
+.ag-theme-icds .ag-root-wrapper {
+  border: none;
+}
+
+.ag-theme-icds .ag-header-group-text,
+.ag-theme-icds .ag-header-cell-text {
+  font-weight: var(--ic-font-weight-bold);
+}
+
+.ag-theme-icds .ag-input-field-input {
+  border-radius: var(--ag-border-radius);
+  padding: 0 var(--ic-space-xs);
+}
+
+.ag-theme-icds .ag-text-field-input {
+  height: 2.5rem;
+}
+
+.ag-theme-icds .ag-text-area-input {
+  padding-top: 0.375rem;
+}
+
+.ag-theme-icds .ag-cell:has(.ag-selection-checkbox) {
+  padding-left: 0;
+  padding-right: 0;
+  display: flex;
+  justify-content: center;
+}
+
+.ag-theme-icds .ag-header-cell[col-id="ag-Grid-ControlsColumn"] {
+  padding-left: var(--ic-space-sm);
+  padding-right: 0;
+}
+
+.ag-theme-icds .ag-selection-checkbox,
+.ag-theme-icds .ag-header-select-all {
+  margin-right: 0;
+}
+
+.ag-theme-icds .ag-picker-field-wrapper {
+  border-radius: var(--ag-border-radius);
+}
+
+.ag-theme-icds .ag-cell-inline-editing {
+  box-shadow: none;
+  border: var(--ic-space-1px) solid var(--ic-action-default) !important;
+}
+
+.ag-theme-icds .ag-popup-editor .ag-large-text {
+  border: none;
+  box-shadow: none;
+  background: none;
+}
+
+.ag-theme-icds .ag-popup-editor {
+  box-shadow: none;
+}
+
+.ag-theme-icds .ag-paging-panel .ag-select .ag-picker-field-wrapper {
+  min-height: var(--ic-space-xl);
+}
+
+.ag-theme-icds .ag-paging-panel {
+  background-color: var(--ic-architectural-40);
+}
+
+.ag-theme-icds .ag-paging-row-summary-panel,
+.ag-theme-icds .ag-label,
+.ag-theme-icds .ag-paging-description {
+  font: var(--ic-font-label);
+  letter-spacing: var(--ic-font-letter-spacing-0pt025);
+}
+
+.ag-theme-icds .ag-paging-button {
+  border-radius: var(--ic-border-radius);
+}
+
+.ag-theme-icds .ag-paging-button:not(.ag-disabled):focus {
+  box-shadow: var(--ic-border-focus);
+}
+
+.ag-theme-icds .ag-paging-button.ag-disabled .ag-icon {
+  color: var(--ic-architectural-200);
+}
+
+.ag-theme-icds .ag-paging-button .ag-icon {
+  color: var(--ic-action-default);
+}
+
+.ag-theme-icds .ag-paging-button:not(.ag-disabled):hover {
+  background-color: var(--ic-action-default-bg-hover);
+}
+
+.ag-theme-icds .ag-paging-button:not(.ag-disabled):hover .ag-icon {
+  color: var(--ic-action-default-hover);
+}
+
+.ag-theme-icds .ag-cell {
+  border-right: none;
+}
+
+.ag-theme-icds .ag-tooltip {
+  color: var(--ic-architectural-white);
+  padding: var(--ic-space-xxxs) var(--ic-space-xs);
+  border-radius: var(--ic-border-radius);
+  box-shadow: var(--ic-elevation-overlay);
+  max-width: 20rem;
+  border: var(--ic-border-width) solid var(--ic-architectural-40);
+  font: var(--ic-font-caption);
+  letter-spacing: var(--ic-font-letter-spacing-0pt025);
+}
+
+@font-face {
+  font-family: aggridmaterialdesignicons;
+  src: url("data:font/woff2;charset=utf-8;base64,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");
+  font-weight: normal;
+  font-style: normal;
+}

package/dist/collection/components/ic-alert/ic-alert.css

@@ -524,7 +524,9 @@ video {
 
 /* required for Gatsby as prop does not seem to work when set to false */
 :host([showdefaulticon="false"]) .icon-neutral {
-  display: none;
+  visibility: hidden;
+  width: 0;
+  margin-left: 0.625rem;
 }
 
 .icon-neutral > svg,

package/dist/collection/components/ic-alert/ic-alert.js

@@ -220,7 +220,7 @@ export class Alert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the default icon for the neutral variant will be appear on the left of the alert."
+                    "text": "If `true`, the default icon for the neutral variant will appear on the left of the alert."
                 },
                 "attribute": "show-default-icon",
                 "reflect": false,

package/dist/collection/components/ic-alert/ic-alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-alert.js","sourceRoot":"","sources":["../../../src/components/ic-alert/ic-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  State,\n  Listen,\n  Prop,\n  h,\n  forceUpdate,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { isSlotUsed, checkSlotInChildMutations } from \"../../utils/helpers\";\nimport { IcThemeForegroundEnum, IcStatusVariants } from \"../../utils/types\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\n\n/**\n * @slot message - Content is placed to the right of the title.\n * @slot action - Content is placed to the right of the message.\n * @slot neutral-icon - A custom neutral icon is placed to the left of the title. This will override the default icon if used.\n */\n@Component({\n  tag: \"ic-alert\",\n  styleUrl: \"ic-alert.css\",\n  shadow: true,\n})\nexport class Alert {\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcAlertElement;\n\n  @State() alertTitleWrap: boolean = false;\n  @State() visible: boolean = true;\n\n  /**\n   * If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.\n   */\n  @Prop() announced?: boolean = true;\n\n  /**\n   * If `true`, the alert will have a close icon at the end to dismiss it.\n   */\n  @Prop() dismissible?: boolean = false;\n\n  /**\n   * The optional title to display at the start of the alert.\n   */\n  @Prop() heading?: string = \"\";\n\n  /**\n   * The main body message of the alert.\n   */\n  @Prop() message?: string;\n\n  /**\n   * If `true`, the title and message will appear above and below instead of inline.\n   */\n  @Prop() titleAbove?: boolean = false;\n\n  /**\n   * The variant of the alert which will be rendered.\n   */\n  @Prop() variant?: IcStatusVariants = \"neutral\";\n\n  /**\n   * If `true`, the default icon for the neutral variant will be appear on the left of the alert.\n   */\n  @Prop() showDefaultIcon: boolean = true;\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 alert.\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentDidLoad(): void {\n    this.alertTitleShouldWrap();\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\n  }\n\n  private dismissAction = (): void => {\n    this.dismiss.emit();\n    this.icDismiss.emit();\n  };\n\n  private alertTitleShouldWrap() {\n    const titleHeight =\n      this.el.shadowRoot.querySelector(\".alert-title\")?.clientHeight;\n    if (titleHeight > 24) this.alertTitleWrap = true;\n  }\n\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    if (\n      mutationList.some(({ type, addedNodes, removedNodes }) =>\n        type === \"childList\"\n          ? checkSlotInChildMutations(addedNodes, removedNodes, \"action\")\n          : false\n      )\n    ) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const {\n      variant,\n      heading,\n      message,\n      titleAbove,\n      dismissible,\n      announced,\n      visible,\n      showDefaultIcon,\n    } = this;\n\n    return (\n      visible && (\n        <Host\n          role={announced ? \"alert\" : null}\n          class={{\n            [IcThemeForegroundEnum.Dark]: true,\n          }}\n        >\n          <div\n            class={{\n              [\"container\"]: true,\n              [`container-${variant}`]: true,\n            }}\n          >\n            <div class=\"alert-icon-container\">\n              <div\n                class={{\n                  [\"divider\"]: true,\n                  [`divider-${variant}`]: true,\n                }}\n              ></div>\n              {variant === \"neutral\" ? (\n                isSlotUsed(this.el, \"neutral-icon\") ? (\n                  <div class=\"alert-icon svg-container icon-neutral\">\n                    <slot name=\"neutral-icon\"></slot>\n                  </div>\n                ) : showDefaultIcon ? (\n                  <span\n                    class={{\n                      [\"alert-icon\"]: true,\n                      [\"svg-container\"]: true,\n                      [`icon-${variant}`]: true,\n                    }}\n                    innerHTML={VARIANT_ICONS[variant].icon}\n                  ></span>\n                ) : (\n                  <div class=\"icon-placeholder\"></div>\n                )\n              ) : (\n                <span\n                  class={{\n                    [\"alert-icon\"]: true,\n                    [\"svg-container\"]: true,\n                    [`icon-${variant}`]: true,\n                  }}\n                  innerHTML={VARIANT_ICONS[variant].icon}\n                ></span>\n              )}\n            </div>\n            <div class=\"alert-content\">\n              <div\n                class={{\n                  [\"alert-message\"]: true,\n                  [\"alert-message-title-above\"]:\n                    titleAbove || this.alertTitleWrap,\n                }}\n              >\n                {heading && (\n                  <ic-typography\n                    class={{\n                      [\"alert-title\"]: true,\n                      [\"alert-title-above\"]: titleAbove || this.alertTitleWrap,\n                    }}\n                    variant=\"subtitle-large\"\n                  >\n                    <p>{heading}</p>\n                  </ic-typography>\n                )}\n                <slot name=\"message\">\n                  <ic-typography variant=\"body\">{message}</ic-typography>\n                </slot>\n              </div>\n              {isSlotUsed(this.el, \"action\") && (\n                <div class=\"alert-action-container\">\n                  <slot name=\"action\" />\n                </div>\n              )}\n            </div>\n            <div class=\"dismiss-icon-container\">\n              {dismissible && (\n                <ic-button\n                  class={{\n                    [\"svg-container\"]: true,\n                    [\"dismiss-icon\"]: true,\n                  }}\n                  innerHTML={closeIcon}\n                  onClick={this.dismissAction}\n                  variant=\"icon\"\n                  appearance={IcThemeForegroundEnum.Dark}\n                  title=\"dismiss\"\n                ></ic-button>\n              )}\n            </div>\n          </div>\n        </Host>\n      )\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-alert.js","sourceRoot":"","sources":["../../../src/components/ic-alert/ic-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  State,\n  Listen,\n  Prop,\n  h,\n  forceUpdate,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { isSlotUsed, checkSlotInChildMutations } from \"../../utils/helpers\";\nimport { IcThemeForegroundEnum, IcStatusVariants } from \"../../utils/types\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\n\n/**\n * @slot message - Content is placed to the right of the title.\n * @slot action - Content is placed to the right of the message.\n * @slot neutral-icon - A custom neutral icon is placed to the left of the title. This will override the default icon if used.\n */\n@Component({\n  tag: \"ic-alert\",\n  styleUrl: \"ic-alert.css\",\n  shadow: true,\n})\nexport class Alert {\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcAlertElement;\n\n  @State() alertTitleWrap: boolean = false;\n  @State() visible: boolean = true;\n\n  /**\n   * If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.\n   */\n  @Prop() announced?: boolean = true;\n\n  /**\n   * If `true`, the alert will have a close icon at the end to dismiss it.\n   */\n  @Prop() dismissible?: boolean = false;\n\n  /**\n   * The optional title to display at the start of the alert.\n   */\n  @Prop() heading?: string = \"\";\n\n  /**\n   * The main body message of the alert.\n   */\n  @Prop() message?: string;\n\n  /**\n   * If `true`, the title and message will appear above and below instead of inline.\n   */\n  @Prop() titleAbove?: boolean = false;\n\n  /**\n   * The variant of the alert which will be rendered.\n   */\n  @Prop() variant?: IcStatusVariants = \"neutral\";\n\n  /**\n   * If `true`, the default icon for the neutral variant will appear on the left of the alert.\n   */\n  @Prop() showDefaultIcon: boolean = true;\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 alert.\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentDidLoad(): void {\n    this.alertTitleShouldWrap();\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\n  }\n\n  private dismissAction = (): void => {\n    this.dismiss.emit();\n    this.icDismiss.emit();\n  };\n\n  private alertTitleShouldWrap() {\n    const titleHeight =\n      this.el.shadowRoot.querySelector(\".alert-title\")?.clientHeight;\n    if (titleHeight > 24) this.alertTitleWrap = true;\n  }\n\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    if (\n      mutationList.some(({ type, addedNodes, removedNodes }) =>\n        type === \"childList\"\n          ? checkSlotInChildMutations(addedNodes, removedNodes, \"action\")\n          : false\n      )\n    ) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const {\n      variant,\n      heading,\n      message,\n      titleAbove,\n      dismissible,\n      announced,\n      visible,\n      showDefaultIcon,\n    } = this;\n\n    return (\n      visible && (\n        <Host\n          role={announced ? \"alert\" : null}\n          class={{\n            [IcThemeForegroundEnum.Dark]: true,\n          }}\n        >\n          <div\n            class={{\n              [\"container\"]: true,\n              [`container-${variant}`]: true,\n            }}\n          >\n            <div class=\"alert-icon-container\">\n              <div\n                class={{\n                  [\"divider\"]: true,\n                  [`divider-${variant}`]: true,\n                }}\n              ></div>\n              {variant === \"neutral\" ? (\n                isSlotUsed(this.el, \"neutral-icon\") ? (\n                  <div class=\"alert-icon svg-container icon-neutral\">\n                    <slot name=\"neutral-icon\"></slot>\n                  </div>\n                ) : showDefaultIcon ? (\n                  <span\n                    class={{\n                      [\"alert-icon\"]: true,\n                      [\"svg-container\"]: true,\n                      [`icon-${variant}`]: true,\n                    }}\n                    innerHTML={VARIANT_ICONS[variant].icon}\n                  ></span>\n                ) : (\n                  <div class=\"icon-placeholder\"></div>\n                )\n              ) : (\n                <span\n                  class={{\n                    [\"alert-icon\"]: true,\n                    [\"svg-container\"]: true,\n                    [`icon-${variant}`]: true,\n                  }}\n                  innerHTML={VARIANT_ICONS[variant].icon}\n                ></span>\n              )}\n            </div>\n            <div class=\"alert-content\">\n              <div\n                class={{\n                  [\"alert-message\"]: true,\n                  [\"alert-message-title-above\"]:\n                    titleAbove || this.alertTitleWrap,\n                }}\n              >\n                {heading && (\n                  <ic-typography\n                    class={{\n                      [\"alert-title\"]: true,\n                      [\"alert-title-above\"]: titleAbove || this.alertTitleWrap,\n                    }}\n                    variant=\"subtitle-large\"\n                  >\n                    <p>{heading}</p>\n                  </ic-typography>\n                )}\n                <slot name=\"message\">\n                  <ic-typography variant=\"body\">{message}</ic-typography>\n                </slot>\n              </div>\n              {isSlotUsed(this.el, \"action\") && (\n                <div class=\"alert-action-container\">\n                  <slot name=\"action\" />\n                </div>\n              )}\n            </div>\n            <div class=\"dismiss-icon-container\">\n              {dismissible && (\n                <ic-button\n                  class={{\n                    [\"svg-container\"]: true,\n                    [\"dismiss-icon\"]: true,\n                  }}\n                  innerHTML={closeIcon}\n                  onClick={this.dismissAction}\n                  variant=\"icon\"\n                  appearance={IcThemeForegroundEnum.Dark}\n                  title=\"dismiss\"\n                ></ic-button>\n              )}\n            </div>\n          </div>\n        </Host>\n      )\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js

@@ -15,7 +15,10 @@ export class BreadcrumbGroup {
         };
         this.setBackBreadcrumb = () => {
             if (this.backBreadcrumbOnly) {
-                this.setBackBreadcrumbAttr();
+                this.setLastParentCollapsedBackBreadcrumb();
+            }
+            else {
+                this.revertLastParentCollapsedBreadcrumb();
             }
         };
         this.setBackBreadcrumbAttr = () => {
@@ -29,8 +32,8 @@ export class BreadcrumbGroup {
             if (allBreadcrumbs.length === 1) {
                 return null;
             }
-            this.breadcrumbs = allBreadcrumbs.filter((breadcrumb) => !breadcrumb.getAttribute("current"));
-            this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 1];
+            this.breadcrumbs = allBreadcrumbs;
+            this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 2];
             return this.breadcrumb;
         };
         this.lastParentBreadcrumb = this.getLastParentBreadcrumb();
@@ -41,20 +44,32 @@ export class BreadcrumbGroup {
             });
         };
         this.setCollapsed = () => {
+            const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));
+            const firstBreadcrumb = allBreadcrumbs[0];
+            if (this.collapsedBreadcrumbs) {
+                this.collapsedBreadcrumbs.forEach((breadcrumb) => {
+                    breadcrumb.classList.remove("visuallyhidden");
+                    breadcrumb.classList.remove("fade");
+                });
+            }
             if (this.collapsed) {
-                const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));
+                this.renderCollapsedBreadcrumb();
                 this.collapsedBreadcrumbs = allBreadcrumbs
                     .splice(1, allBreadcrumbs.length - 2)
                     .filter((breadcrumb) => !breadcrumb.classList.contains("collapsed-breadcrumb-wrapper"));
-                this.collapsedBreadcrumbs.forEach((breadcrumb) => breadcrumb.classList.add("hide"));
-                const firstBreadcrumb = allBreadcrumbs[0];
+                if (!this.backBreadcrumbOnly) {
+                    this.collapsedBreadcrumbs.forEach((breadcrumb) => breadcrumb.classList.add("hide"));
+                }
                 if (firstBreadcrumb) {
                     firstBreadcrumb.insertAdjacentElement("afterend", this.collapsedBreadcrumbWrapper);
                 }
             }
+            else {
+                this.collapsedBreadcrumbWrapper.remove();
+            }
         };
         this.clickHandler = () => {
-            this.handleHiddenCollapsedBreadcrumbs(this.collapsedBreadcrumbWrapper);
+            this.handleHiddenCollapsedBreadcrumbs();
         };
         this.renderCollapsedBreadcrumb = () => {
             this.collapsedBreadcrumbWrapper = document.createElement("ic-breadcrumb");
@@ -79,8 +94,8 @@ export class BreadcrumbGroup {
             this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl);
             return this.collapsedBreadcrumbWrapper;
         };
-        this.handleHiddenCollapsedBreadcrumbs = (collapsedBreadcrumbWrapper) => {
-            collapsedBreadcrumbWrapper.remove();
+        this.handleHiddenCollapsedBreadcrumbs = () => {
+            this.collapsedBreadcrumbWrapper.remove();
             this.collapsedBreadcrumbs.forEach((breadcrumb) => {
                 breadcrumb.classList.add("visuallyhidden");
                 breadcrumb.classList.remove("hide");
@@ -102,11 +117,18 @@ export class BreadcrumbGroup {
             breadcrumb.addEventListener("transitionend", this.transitionendHandler);
         };
         this.setLastParentCollapsedBackBreadcrumb = () => {
+            this.lastParentBreadcrumb = this.getLastParentBreadcrumb();
             this.setBackBreadcrumbAttr();
-            this.lastParentBreadcrumb.classList.remove("hide");
+            if (this.lastParentBreadcrumb) {
+                this.lastParentBreadcrumb.classList.remove("hide");
+                this.lastParentBreadcrumb.classList.add("show");
+            }
         };
         this.revertLastParentCollapsedBreadcrumb = () => {
             this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, "false");
+            if (this.collapsed) {
+                this.lastParentBreadcrumb.classList.add("hide");
+            }
         };
         this.resizeObserverCallback = (currSize) => {
             if (currSize !== this.deviceSize) {
@@ -156,6 +178,9 @@ export class BreadcrumbGroup {
     watchBackBreadcrumbHandler() {
         this.setBackBreadcrumb();
     }
+    watchCollapsedHandler() {
+        this.setCollapsed();
+    }
     componentWillLoad() {
         const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));
         this.setAppearance();
@@ -165,15 +190,12 @@ export class BreadcrumbGroup {
         else {
             checkResizeObserver(this.runResizeObserver);
         }
-        if (this.collapsed) {
-            this.collapsedBreadcrumbWrapper = this.renderCollapsedBreadcrumb();
-            if (allBreadcrumbs.length > 2) {
-                if (getCurrentDeviceSize() === DEVICE_SIZES.S) {
-                    this.setLastParentCollapsedBackBreadcrumb();
-                }
-                else {
-                    this.setCollapsed();
-                }
+        if (this.collapsed && allBreadcrumbs.length > 2) {
+            if (getCurrentDeviceSize() === DEVICE_SIZES.S) {
+                this.setLastParentCollapsedBackBreadcrumb();
+            }
+            else {
+                this.setCollapsed();
             }
         }
     }
@@ -279,6 +301,9 @@ export class BreadcrumbGroup {
             }, {
                 "propName": "backBreadcrumbOnly",
                 "methodName": "watchBackBreadcrumbHandler"
+            }, {
+                "propName": "collapsed",
+                "methodName": "watchCollapsedHandler"
             }];
     }
 }

package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-breadcrumb-group.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumb-group/ic-breadcrumb-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n} from \"../../utils/helpers\";\nimport { IcThemeForeground } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-breadcrumb-group\",\n  styleUrl: \"ic-breadcrumb-group.css\",\n  shadow: true,\n})\n\n// Added ResizeObserver to find out width of breadcrumbs and parents. Use side navigation long title for ref.\nexport class BreadcrumbGroup {\n  private ADD_CLASS_DELAY = 50;\n  private breadcrumb: HTMLIcBreadcrumbElement;\n  private breadcrumbs: HTMLIcBreadcrumbElement[];\n  private collapsedBreadcrumbEl: HTMLButtonElement;\n  private collapsedBreadcrumbs: HTMLIcBreadcrumbElement[];\n  private collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement;\n  private IC_BREADCRUMB: string = \"ic-breadcrumb\";\n  private resizeObserver: ResizeObserver = null;\n  private SHOW_BACK_ICON: string = \"show-back-icon\";\n\n  @Element() el: HTMLIcBreadcrumbGroupElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() expandedBreadcrumbs: boolean = false;\n\n  /**\n   * The appearance of the breadcrumb group.\n   */\n  @Prop() appearance: IcThemeForeground = \"default\";\n  @Watch(\"appearance\")\n  watchAppearanceHandler(): void {\n    this.setAppearance();\n  }\n\n  /**\n   * If `true`, display only a single breadcrumb for the parent page with a back icon.\n   */\n  @Prop() backBreadcrumbOnly: boolean = false;\n  @Watch(\"backBreadcrumbOnly\")\n  watchBackBreadcrumbHandler(): void {\n    this.setBackBreadcrumb();\n  }\n\n  /**\n   * If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed.\n   */\n  @Prop() collapsed: boolean = false;\n\n  componentWillLoad(): void {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n\n    this.setAppearance();\n\n    if (this.backBreadcrumbOnly) {\n      this.setBackBreadcrumb();\n    } else {\n      checkResizeObserver(this.runResizeObserver);\n    }\n\n    if (this.collapsed) {\n      this.collapsedBreadcrumbWrapper = this.renderCollapsedBreadcrumb();\n\n      if (allBreadcrumbs.length > 2) {\n        if (getCurrentDeviceSize() === DEVICE_SIZES.S) {\n          this.setLastParentCollapsedBackBreadcrumb();\n        } else {\n          this.setCollapsed();\n        }\n      }\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.breadcrumb &&\n      this.breadcrumb.removeEventListener(\n        \"transitionend\",\n        this.transitionendHandler\n      );\n\n    this.collapsedBreadcrumbEl &&\n      this.collapsedBreadcrumbEl.removeEventListener(\n        \"click\",\n        this.clickHandler\n      );\n  }\n\n  private setAppearance = () => {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n\n    allBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.setAttribute(\"appearance\", this.appearance);\n    });\n  };\n\n  private setBackBreadcrumb = () => {\n    if (this.backBreadcrumbOnly) {\n      this.setBackBreadcrumbAttr();\n    }\n  };\n\n  private setBackBreadcrumbAttr = () => {\n    if (this.lastParentBreadcrumb) {\n      this.lastParentBreadcrumb.classList.add(\"show\");\n      this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"true\");\n    }\n  };\n\n  private getLastParentBreadcrumb = (): HTMLIcBreadcrumbElement | null => {\n    const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n\n    if (allBreadcrumbs.length === 1) {\n      return null;\n    }\n\n    this.breadcrumbs = allBreadcrumbs.filter(\n      (breadcrumb) => !breadcrumb.getAttribute(\"current\")\n    );\n    this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 1];\n\n    return this.breadcrumb;\n  };\n\n  private lastParentBreadcrumb = this.getLastParentBreadcrumb();\n\n  private setDefaultBreadcrumbs = () => {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n    allBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n    });\n  };\n\n  private setCollapsed = () => {\n    if (this.collapsed) {\n      const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n        this.el.querySelectorAll(this.IC_BREADCRUMB)\n      );\n      this.collapsedBreadcrumbs = allBreadcrumbs\n        .splice(1, allBreadcrumbs.length - 2)\n        .filter(\n          (breadcrumb) =>\n            !breadcrumb.classList.contains(\"collapsed-breadcrumb-wrapper\")\n        );\n\n      this.collapsedBreadcrumbs.forEach((breadcrumb) =>\n        breadcrumb.classList.add(\"hide\")\n      );\n\n      const firstBreadcrumb = allBreadcrumbs[0];\n\n      if (firstBreadcrumb) {\n        firstBreadcrumb.insertAdjacentElement(\n          \"afterend\",\n          this.collapsedBreadcrumbWrapper\n        );\n      }\n    }\n  };\n\n  private clickHandler = () => {\n    this.handleHiddenCollapsedBreadcrumbs(this.collapsedBreadcrumbWrapper);\n  };\n\n  private renderCollapsedBreadcrumb = () => {\n    this.collapsedBreadcrumbWrapper = document.createElement(\"ic-breadcrumb\");\n    this.collapsedBreadcrumbWrapper.classList.add(\n      \"collapsed-breadcrumb-wrapper\"\n    );\n    this.collapsedBreadcrumbEl = document.createElement(\"button\");\n\n    const ariaLabel = document.createElement(\"span\");\n    ariaLabel.id = \"collapsed-button-label\";\n    ariaLabel.innerText = \"Collapsed breadcrumbs\";\n    ariaLabel.className = \"hide\";\n    this.collapsedBreadcrumbEl.setAttribute(\n      \"aria-labelledby\",\n      \"collapsed-button-label\"\n    );\n\n    const ariaDescribed = document.createElement(\"span\");\n    ariaDescribed.id = \"collapsed-button-described\";\n    ariaDescribed.innerText = \"Select to view collapsed breadcrumbs\";\n    ariaDescribed.className = \"hide\";\n    this.collapsedBreadcrumbEl.setAttribute(\n      \"aria-describedby\",\n      \"collapsed-button-described\"\n    );\n\n    this.collapsedBreadcrumbEl.id = \"collapsed-ellipsis\";\n    this.collapsedBreadcrumbEl.innerText = \"...\";\n    this.collapsedBreadcrumbEl.classList.add(\"collapsed-breadcrumb\");\n    this.collapsedBreadcrumbEl.addEventListener(\"click\", this.clickHandler);\n\n    this.collapsedBreadcrumbWrapper.append(ariaDescribed);\n    this.collapsedBreadcrumbWrapper.append(ariaLabel);\n    this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl);\n\n    return this.collapsedBreadcrumbWrapper;\n  };\n\n  private handleHiddenCollapsedBreadcrumbs = (\n    collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement\n  ) => {\n    collapsedBreadcrumbWrapper.remove();\n    this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.classList.add(\"visuallyhidden\");\n      breadcrumb.classList.remove(\"hide\");\n      setTimeout(() => {\n        breadcrumb.classList.add(\"fade\");\n      }, this.ADD_CLASS_DELAY);\n\n      this.removeVisuallyHiddenClass(breadcrumb);\n    });\n    this.expandedBreadcrumbs = true;\n    // Set focus to first unhidden breadcrumb\n    this.collapsedBreadcrumbs[0].setFocus();\n  };\n\n  private transitionendHandler = (event: TransitionEvent) => {\n    if (event.propertyName === \"opacity\") {\n      (event.target as HTMLElement).classList.remove(\"visuallyhidden\");\n    }\n  };\n\n  private removeVisuallyHiddenClass = (breadcrumb: HTMLIcBreadcrumbElement) => {\n    breadcrumb.addEventListener(\"transitionend\", this.transitionendHandler);\n  };\n\n  private setLastParentCollapsedBackBreadcrumb = () => {\n    this.setBackBreadcrumbAttr();\n    this.lastParentBreadcrumb.classList.remove(\"hide\");\n  };\n\n  private revertLastParentCollapsedBreadcrumb = () => {\n    this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n\n      if (this.deviceSize <= DEVICE_SIZES.S) {\n        this.el.setAttribute(\"back-breadcrumb-only\", \"true\");\n        if (this.collapsed) {\n          this.setLastParentCollapsedBackBreadcrumb();\n        } else {\n          this.setBackBreadcrumb();\n        }\n      } else {\n        this.el.setAttribute(\"back-breadcrumb-only\", \"false\");\n        if (this.collapsed && this.breadcrumbs && this.breadcrumbs.length > 2) {\n          this.revertLastParentCollapsedBreadcrumb();\n          if (this.expandedBreadcrumbs) {\n            this.setDefaultBreadcrumbs();\n          } else {\n            this.setCollapsed();\n          }\n        } else {\n          this.setDefaultBreadcrumbs();\n        }\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          back: this.backBreadcrumbOnly,\n          collapsed: this.collapsed,\n        }}\n      >\n        <nav aria-label=\"breadcrumbs\">\n          <ol>\n            <slot />\n          </ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-breadcrumb-group.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumb-group/ic-breadcrumb-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n} from \"../../utils/helpers\";\nimport { IcThemeForeground } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-breadcrumb-group\",\n  styleUrl: \"ic-breadcrumb-group.css\",\n  shadow: true,\n})\n\n// Added ResizeObserver to find out width of breadcrumbs and parents. Use side navigation long title for ref.\nexport class BreadcrumbGroup {\n  private ADD_CLASS_DELAY = 50;\n  private breadcrumb: HTMLIcBreadcrumbElement;\n  private breadcrumbs: HTMLIcBreadcrumbElement[];\n  private collapsedBreadcrumbEl: HTMLButtonElement;\n  private collapsedBreadcrumbs: HTMLIcBreadcrumbElement[];\n  private collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement;\n  private IC_BREADCRUMB: string = \"ic-breadcrumb\";\n  private resizeObserver: ResizeObserver = null;\n  private SHOW_BACK_ICON: string = \"show-back-icon\";\n\n  @Element() el: HTMLIcBreadcrumbGroupElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() expandedBreadcrumbs: boolean = false;\n\n  /**\n   * The appearance of the breadcrumb group.\n   */\n  @Prop() appearance: IcThemeForeground = \"default\";\n  @Watch(\"appearance\")\n  watchAppearanceHandler(): void {\n    this.setAppearance();\n  }\n\n  /**\n   * If `true`, display only a single breadcrumb for the parent page with a back icon.\n   */\n  @Prop() backBreadcrumbOnly: boolean = false;\n  @Watch(\"backBreadcrumbOnly\")\n  watchBackBreadcrumbHandler(): void {\n    this.setBackBreadcrumb();\n  }\n\n  /**\n   * If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed.\n   */\n  @Prop() collapsed: boolean = false;\n  @Watch(\"collapsed\")\n  watchCollapsedHandler(): void {\n    this.setCollapsed();\n  }\n\n  componentWillLoad(): void {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n\n    this.setAppearance();\n\n    if (this.backBreadcrumbOnly) {\n      this.setBackBreadcrumb();\n    } else {\n      checkResizeObserver(this.runResizeObserver);\n    }\n\n    if (this.collapsed && allBreadcrumbs.length > 2) {\n      if (getCurrentDeviceSize() === DEVICE_SIZES.S) {\n        this.setLastParentCollapsedBackBreadcrumb();\n      } else {\n        this.setCollapsed();\n      }\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.breadcrumb &&\n      this.breadcrumb.removeEventListener(\n        \"transitionend\",\n        this.transitionendHandler\n      );\n\n    this.collapsedBreadcrumbEl &&\n      this.collapsedBreadcrumbEl.removeEventListener(\n        \"click\",\n        this.clickHandler\n      );\n  }\n\n  private setAppearance = () => {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n\n    allBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.setAttribute(\"appearance\", this.appearance);\n    });\n  };\n\n  private setBackBreadcrumb = () => {\n    if (this.backBreadcrumbOnly) {\n      this.setLastParentCollapsedBackBreadcrumb();\n    } else {\n      this.revertLastParentCollapsedBreadcrumb();\n    }\n  };\n\n  private setBackBreadcrumbAttr = () => {\n    if (this.lastParentBreadcrumb) {\n      this.lastParentBreadcrumb.classList.add(\"show\");\n      this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"true\");\n    }\n  };\n\n  private getLastParentBreadcrumb = (): HTMLIcBreadcrumbElement | null => {\n    const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n\n    if (allBreadcrumbs.length === 1) {\n      return null;\n    }\n\n    this.breadcrumbs = allBreadcrumbs;\n    this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 2];\n\n    return this.breadcrumb;\n  };\n\n  private lastParentBreadcrumb = this.getLastParentBreadcrumb();\n\n  private setDefaultBreadcrumbs = () => {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n    allBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n    });\n  };\n\n  private setCollapsed = () => {\n    const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n      this.el.querySelectorAll(this.IC_BREADCRUMB)\n    );\n    const firstBreadcrumb = allBreadcrumbs[0];\n    if (this.collapsedBreadcrumbs) {\n      this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n        breadcrumb.classList.remove(\"visuallyhidden\");\n        breadcrumb.classList.remove(\"fade\");\n      });\n    }\n\n    if (this.collapsed) {\n      this.renderCollapsedBreadcrumb();\n\n      this.collapsedBreadcrumbs = allBreadcrumbs\n        .splice(1, allBreadcrumbs.length - 2)\n        .filter(\n          (breadcrumb) =>\n            !breadcrumb.classList.contains(\"collapsed-breadcrumb-wrapper\")\n        );\n      if (!this.backBreadcrumbOnly) {\n        this.collapsedBreadcrumbs.forEach((breadcrumb) =>\n          breadcrumb.classList.add(\"hide\")\n        );\n      }\n\n      if (firstBreadcrumb) {\n        firstBreadcrumb.insertAdjacentElement(\n          \"afterend\",\n          this.collapsedBreadcrumbWrapper\n        );\n      }\n    } else {\n      this.collapsedBreadcrumbWrapper.remove();\n    }\n  };\n\n  private clickHandler = () => {\n    this.handleHiddenCollapsedBreadcrumbs();\n  };\n\n  private renderCollapsedBreadcrumb = () => {\n    this.collapsedBreadcrumbWrapper = document.createElement(\"ic-breadcrumb\");\n    this.collapsedBreadcrumbWrapper.classList.add(\n      \"collapsed-breadcrumb-wrapper\"\n    );\n    this.collapsedBreadcrumbEl = document.createElement(\"button\");\n\n    const ariaLabel = document.createElement(\"span\");\n    ariaLabel.id = \"collapsed-button-label\";\n    ariaLabel.innerText = \"Collapsed breadcrumbs\";\n    ariaLabel.className = \"hide\";\n    this.collapsedBreadcrumbEl.setAttribute(\n      \"aria-labelledby\",\n      \"collapsed-button-label\"\n    );\n\n    const ariaDescribed = document.createElement(\"span\");\n    ariaDescribed.id = \"collapsed-button-described\";\n    ariaDescribed.innerText = \"Select to view collapsed breadcrumbs\";\n    ariaDescribed.className = \"hide\";\n    this.collapsedBreadcrumbEl.setAttribute(\n      \"aria-describedby\",\n      \"collapsed-button-described\"\n    );\n\n    this.collapsedBreadcrumbEl.id = \"collapsed-ellipsis\";\n    this.collapsedBreadcrumbEl.innerText = \"...\";\n    this.collapsedBreadcrumbEl.classList.add(\"collapsed-breadcrumb\");\n    this.collapsedBreadcrumbEl.addEventListener(\"click\", this.clickHandler);\n\n    this.collapsedBreadcrumbWrapper.append(ariaDescribed);\n    this.collapsedBreadcrumbWrapper.append(ariaLabel);\n    this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl);\n\n    return this.collapsedBreadcrumbWrapper;\n  };\n\n  private handleHiddenCollapsedBreadcrumbs = () => {\n    this.collapsedBreadcrumbWrapper.remove();\n    this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.classList.add(\"visuallyhidden\");\n      breadcrumb.classList.remove(\"hide\");\n      setTimeout(() => {\n        breadcrumb.classList.add(\"fade\");\n      }, this.ADD_CLASS_DELAY);\n\n      this.removeVisuallyHiddenClass(breadcrumb);\n    });\n    this.expandedBreadcrumbs = true;\n    // Set focus to first unhidden breadcrumb\n    this.collapsedBreadcrumbs[0].setFocus();\n  };\n\n  private transitionendHandler = (event: TransitionEvent) => {\n    if (event.propertyName === \"opacity\") {\n      (event.target as HTMLElement).classList.remove(\"visuallyhidden\");\n    }\n  };\n\n  private removeVisuallyHiddenClass = (breadcrumb: HTMLIcBreadcrumbElement) => {\n    breadcrumb.addEventListener(\"transitionend\", this.transitionendHandler);\n  };\n\n  private setLastParentCollapsedBackBreadcrumb = () => {\n    this.lastParentBreadcrumb = this.getLastParentBreadcrumb();\n    this.setBackBreadcrumbAttr();\n    if (this.lastParentBreadcrumb) {\n      this.lastParentBreadcrumb.classList.remove(\"hide\");\n      this.lastParentBreadcrumb.classList.add(\"show\");\n    }\n  };\n\n  private revertLastParentCollapsedBreadcrumb = () => {\n    this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n    if (this.collapsed) {\n      this.lastParentBreadcrumb.classList.add(\"hide\");\n    }\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n\n      if (this.deviceSize <= DEVICE_SIZES.S) {\n        this.el.setAttribute(\"back-breadcrumb-only\", \"true\");\n        if (this.collapsed) {\n          this.setLastParentCollapsedBackBreadcrumb();\n        } else {\n          this.setBackBreadcrumb();\n        }\n      } else {\n        this.el.setAttribute(\"back-breadcrumb-only\", \"false\");\n        if (this.collapsed && this.breadcrumbs && this.breadcrumbs.length > 2) {\n          this.revertLastParentCollapsedBreadcrumb();\n          if (this.expandedBreadcrumbs) {\n            this.setDefaultBreadcrumbs();\n          } else {\n            this.setCollapsed();\n          }\n        } else {\n          this.setDefaultBreadcrumbs();\n        }\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          back: this.backBreadcrumbOnly,\n          collapsed: this.collapsed,\n        }}\n      >\n        <nav aria-label=\"breadcrumbs\">\n          <ol>\n            <slot />\n          </ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -478,6 +478,11 @@ video {
   flex-shrink: 0;
 }
 
+:host .container svg {
+  width: var(--ic-space-lg);
+  height: var(--ic-space-lg);
+}
+
 :host(.small) .checkbox,
 :host(.small) .container svg {
   width: var(--ic-space-md);

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

@@ -98,7 +98,7 @@ export class Checkbox {
                 disabled,
                 small,
                 [`${size || parentElementSize}`]: true,
-            } }, h("div", { class: "container" }, displayIndeterminate && h("div", { class: "indeterminate-symbol" }), !displayIndeterminate && checked && (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" }))), h("input", { role: "checkbox", class: {
+            } }, h("div", { class: "container" }, displayIndeterminate && h("div", { class: "indeterminate-symbol" }), !displayIndeterminate && checked && (h("svg", { class: "checkmark", 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" }))), h("input", { role: "checkbox", class: {
                 checkbox: true,
                 checked,
                 indeterminate: displayIndeterminate,
@@ -157,7 +157,7 @@ export class Checkbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the checkbox will be set to the checked state."
+                    "text": "If `true`, the checkbox will be set to the checked state. This is only the initial state and will be updated to unchecked if the checkbox is clicked."
                 },
                 "attribute": "checked",
                 "reflect": true,

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

@@ -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  Watch,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes, IcSizes } from \"../../utils/types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  removeHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n  isPropDefined,\n} from \"../../utils/helpers\";\n\n/**\n * @slot additional-field - Content to be displayed alongside a checkbox.\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\n  @Element() el: 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\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n  /**\n   * The <form> element to associate the checkbox with.\n   */\n  @Prop() form?: string;\n\n  /**\n   * The URL that processes the information submitted by the checkbox. It overrides the action attribute of the checkbox's form owner. Does nothing if there is no form owner.\n   */\n  @Prop() formaction?: string;\n\n  /**\n   * The way the submitted form data is encoded.\n   */\n  @Prop() formenctype?: string;\n\n  /**\n   * The HTTP method used to submit the form.\n   */\n  @Prop() formmethod?: string;\n\n  /**\n   * If `true`, the form will not be validated when submitted.\n   */\n  @Prop() formnovalidate?: boolean;\n\n  /**\n   * The place to display the response from submitting the form. It overrides the target attribute of the checkbox's form owner.\n   */\n  @Prop() formtarget?: string;\n\n  /**\n   * The group label for the checkbox.\n   */\n  @Prop({ mutable: true }) groupLabel: string;\n\n  /**\n   * If `true`, the indeterminate state will be displayed when checked.\n   */\n  @Prop() indeterminate: boolean = false;\n  @State() displayIndeterminate = this.indeterminate;\n\n  @Watch(\"indeterminate\")\n  watchIndeterminateHandler(): void {\n    this.displayIndeterminate = this.nativeIndeterminateBehaviour\n      ? this.indeterminate\n      : this.indeterminate && this.checked;\n  }\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({ mutable: true }) name: string;\n\n  /**\n   * If `true`, the checkbox will behave like a native checkbox where the `indeterminate` prop sets the indeterminate visual styling, independent of the `checked` state.\n   */\n  @Prop() nativeIndeterminateBehaviour: boolean = false;\n\n  /**\n   * The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.\n   */\n  @Prop() size?: IcSizes;\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * The value for the checkbox.\n   */\n  @Prop() value!: string;\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel = false;\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.el);\n\n    addFormResetListener(this.el, this.handleFormReset);\n\n    const checkboxGroup = this.el.parentElement as HTMLIcCheckboxGroupElement;\n    if (checkboxGroup) {\n      if (!this.name) this.name = checkboxGroup.name;\n      this.groupLabel = checkboxGroup.label;\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.value, propName: \"value\" },\n      ],\n      \"Checkbox\"\n    );\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.el.querySelector(\"ic-text-field\");\n      if (!this.checked) {\n        textfield?.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield?.removeAttribute(\"disabled\");\n      }\n    } else if (this.additionalFieldContainer) {\n      this.additionalFieldContainer.style.display = !this.checked\n        ? \"none\"\n        : \"flex\";\n    }\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.el.shadowRoot.querySelector<HTMLElement>(\".checkbox\")?.focus();\n  }\n\n  private handleClick = () => {\n    this.checked = !this.checked;\n    this.displayIndeterminate = this.nativeIndeterminateBehaviour\n      ? false\n      : this.indeterminate && 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    const {\n      additionalFieldDisplay,\n      checked,\n      disabled,\n      dynamicText,\n      el,\n      form,\n      formaction,\n      formenctype,\n      formmethod,\n      formnovalidate,\n      formtarget,\n      displayIndeterminate,\n      groupLabel,\n      label,\n      name,\n      size,\n      small,\n      value,\n    } = this;\n\n    const id = `ic-checkbox-${\n      isPropDefined(label) || value\n    }-${groupLabel}`.replace(/ /g, \"-\");\n\n    const parentElementSize = (el.parentElement as HTMLIcCheckboxGroupElement)\n      .size;\n\n    checked\n      ? renderHiddenInput(true, el, name, checked && value, disabled)\n      : removeHiddenInput(el);\n\n    return (\n      <Host\n        class={{\n          disabled,\n          small,\n          [`${size || parentElementSize}`]: true,\n        }}\n      >\n        <div class=\"container\">\n          {displayIndeterminate && <div class=\"indeterminate-symbol\" />}\n          {!displayIndeterminate && checked && (\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          <input\n            role=\"checkbox\"\n            class={{\n              checkbox: true,\n              checked,\n              indeterminate: displayIndeterminate,\n            }}\n            type=\"checkbox\"\n            name={name}\n            id={id}\n            value={value}\n            disabled={disabled ? true : null}\n            checked={checked}\n            indeterminate={displayIndeterminate}\n            onClick={this.handleClick}\n            form={form}\n            formaction={formaction}\n            formenctype={formenctype}\n            formmethod={formmethod}\n            formnovalidate={formnovalidate}\n            formtarget={formtarget}\n            aria-label={this.hideLabel ? this.label : undefined}\n          ></input>\n          {!this.hideLabel && (\n            <ic-typography class=\"checkbox-label\" variant=\"body\">\n              <label htmlFor={id}>{label}</label>\n            </ic-typography>\n          )}\n        </div>\n        {isSlotUsed(el, \"additional-field\") && (\n          <div\n            class=\"dynamic-container\"\n            ref={(el) => (this.additionalFieldContainer = el)}\n          >\n            {additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\" aria-live=\"polite\">\n                    {dynamicText}\n                  </p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\":\n                    additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name=\"additional-field\"></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-checkbox.js","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,EACN,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,UAAU,EACV,gCAAgC,EAChC,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,uBAAuB,EACvB,mBAAmB,EACnB,aAAa,GACd,MAAM,qBAAqB,CAAC;AAE7B;;GAEG;AAQH,6DAA6D;AAC7D,MAAM,OAAO,QAAQ;;QA0KX,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,4BAA4B;gBAC3D,CAAC,CAAC,KAAK;gBACP,CAAC,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,OAAO,CAAC;YACvC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YACpB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;QAC9B,CAAC,CAAC;QAEM,oBAAe,GAAG,GAAS,EAAE;YACnC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC;QACvC,CAAC,CAAC;sCA5KA,QAAQ;uBAKkD,KAAK;gCACrC,IAAI,CAAC,OAAO;wBAKX,KAAK;2BAMJ,4CAA4C;;;;;;;;6BAwCzC,KAAK;oCACN,IAAI,CAAC,aAAa;;;4CAsBF,KAAK;;qBAU3B,KAAK;;yBAUX,KAAK;;IAvCzB,yBAAyB;QACvB,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,4BAA4B;YAC3D,CAAC,CAAC,IAAI,CAAC,aAAa;YACpB,CAAC,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,OAAO,CAAC;IACzC,CAAC;IA+CD,iBAAiB;QACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QAE5C,oBAAoB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAEpD,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,aAA2C,CAAC;QAC1E,IAAI,aAAa,EAAE,CAAC;YAClB,IAAI,CAAC,IAAI,CAAC,IAAI;gBAAE,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC;YAC/C,IAAI,CAAC,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC;QACxC,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,gCAAgC,CAC9B;YACE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE;YACvC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE;SACxC,EACD,UAAU,CACX,CAAC;IACJ,CAAC;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,sBAAsB,KAAK,QAAQ,EAAE,CAAC;YAC7C,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;YACzD,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;gBAClB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;YAC1C,CAAC;iBAAM,CAAC;gBACN,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,eAAe,CAAC,UAAU,CAAC,CAAC;YACzC,CAAC;QACH,CAAC;aAAM,IAAI,IAAI,CAAC,wBAAwB,EAAE,CAAC;YACzC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;gBACzD,CAAC,CAAC,MAAM;gBACR,CAAC,CAAC,MAAM,CAAC;QACb,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,uBAAuB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IACzD,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,QAAQ;;QACZ,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAc,WAAW,CAAC,0CAAE,KAAK,EAAE,CAAC;IACtE,CAAC;IAeD,MAAM;QACJ,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACP,QAAQ,EACR,WAAW,EACX,EAAE,EACF,IAAI,EACJ,UAAU,EACV,WAAW,EACX,UAAU,EACV,cAAc,EACd,UAAU,EACV,oBAAoB,EACpB,UAAU,EACV,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,GACN,GAAG,IAAI,CAAC;QAET,MAAM,EAAE,GAAG,eACT,aAAa,CAAC,KAAK,CAAC,IAAI,KAC1B,IAAI,UAAU,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAEpC,MAAM,iBAAiB,GAAI,EAAE,CAAC,aAA4C;aACvE,IAAI,CAAC;QAER,OAAO;YACL,CAAC,CAAC,iBAAiB,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,IAAI,KAAK,EAAE,QAAQ,CAAC;YAC/D,CAAC,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;QAE1B,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,QAAQ;gBACR,KAAK;gBACL,CAAC,GAAG,IAAI,IAAI,iBAAiB,EAAE,CAAC,EAAE,IAAI;aACvC;YAED,WAAK,KAAK,EAAC,WAAW;gBACnB,oBAAoB,IAAI,WAAK,KAAK,EAAC,sBAAsB,GAAG;gBAC5D,CAAC,oBAAoB,IAAI,OAAO,IAAI,CACnC,WACE,KAAK,EAAC,WAAW,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,eACxB,SAAS,eACT,SAAS;oBAEnB,kCAA6B;oBAC7B,YAAM,CAAC,EAAC,qFAAqF,GAAG,CAC5F,CACP;gBACD,aACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE;wBACL,QAAQ,EAAE,IAAI;wBACd,OAAO;wBACP,aAAa,EAAE,oBAAoB;qBACpC,EACD,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAChC,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,oBAAoB,EACnC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,gBACV,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GAC5C;gBACR,CAAC,IAAI,CAAC,SAAS,IAAI,CAClB,qBAAe,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAC,MAAM;oBAClD,aAAO,OAAO,EAAE,EAAE,IAAG,KAAK,CAAS,CACrB,CACjB,CACG;YACL,UAAU,CAAC,EAAE,EAAE,kBAAkB,CAAC,IAAI,CACrC,WACE,KAAK,EAAC,mBAAmB,EACzB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,wBAAwB,GAAG,EAAE,CAAC;gBAEhD,sBAAsB,KAAK,SAAS,IAAI,CACvC,WAAK,KAAK,EAAC,eAAe,GAAO,CAClC;gBACD;oBACG,sBAAsB,KAAK,SAAS,IAAI,CACvC,qBAAe,OAAO,EAAC,SAAS;wBAC9B,SAAG,KAAK,EAAC,cAAc,eAAW,QAAQ,IACvC,WAAW,CACV,CACU,CACjB;oBACD,WACE,KAAK,EAAE;4BACL,0BAA0B,EACxB,sBAAsB,KAAK,QAAQ;yBACtC;wBAED,YAAM,IAAI,EAAC,kBAAkB,GAAQ,CACjC,CACF,CACF,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes, IcSizes } from \"../../utils/types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  removeHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n  isPropDefined,\n} from \"../../utils/helpers\";\n\n/**\n * @slot additional-field - Content to be displayed alongside a checkbox.\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\n  @Element() el: 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. This is only the initial state and will be updated to unchecked if the checkbox is clicked.\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\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n  /**\n   * The <form> element to associate the checkbox with.\n   */\n  @Prop() form?: string;\n\n  /**\n   * The URL that processes the information submitted by the checkbox. It overrides the action attribute of the checkbox's form owner. Does nothing if there is no form owner.\n   */\n  @Prop() formaction?: string;\n\n  /**\n   * The way the submitted form data is encoded.\n   */\n  @Prop() formenctype?: string;\n\n  /**\n   * The HTTP method used to submit the form.\n   */\n  @Prop() formmethod?: string;\n\n  /**\n   * If `true`, the form will not be validated when submitted.\n   */\n  @Prop() formnovalidate?: boolean;\n\n  /**\n   * The place to display the response from submitting the form. It overrides the target attribute of the checkbox's form owner.\n   */\n  @Prop() formtarget?: string;\n\n  /**\n   * The group label for the checkbox.\n   */\n  @Prop({ mutable: true }) groupLabel: string;\n\n  /**\n   * If `true`, the indeterminate state will be displayed when checked.\n   */\n  @Prop() indeterminate: boolean = false;\n  @State() displayIndeterminate = this.indeterminate;\n\n  @Watch(\"indeterminate\")\n  watchIndeterminateHandler(): void {\n    this.displayIndeterminate = this.nativeIndeterminateBehaviour\n      ? this.indeterminate\n      : this.indeterminate && this.checked;\n  }\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({ mutable: true }) name: string;\n\n  /**\n   * If `true`, the checkbox will behave like a native checkbox where the `indeterminate` prop sets the indeterminate visual styling, independent of the `checked` state.\n   */\n  @Prop() nativeIndeterminateBehaviour: boolean = false;\n\n  /**\n   * The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.\n   */\n  @Prop() size?: IcSizes;\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * The value for the checkbox.\n   */\n  @Prop() value!: string;\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel = false;\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.el);\n\n    addFormResetListener(this.el, this.handleFormReset);\n\n    const checkboxGroup = this.el.parentElement as HTMLIcCheckboxGroupElement;\n    if (checkboxGroup) {\n      if (!this.name) this.name = checkboxGroup.name;\n      this.groupLabel = checkboxGroup.label;\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.value, propName: \"value\" },\n      ],\n      \"Checkbox\"\n    );\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.el.querySelector(\"ic-text-field\");\n      if (!this.checked) {\n        textfield?.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield?.removeAttribute(\"disabled\");\n      }\n    } else if (this.additionalFieldContainer) {\n      this.additionalFieldContainer.style.display = !this.checked\n        ? \"none\"\n        : \"flex\";\n    }\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.el.shadowRoot.querySelector<HTMLElement>(\".checkbox\")?.focus();\n  }\n\n  private handleClick = () => {\n    this.checked = !this.checked;\n    this.displayIndeterminate = this.nativeIndeterminateBehaviour\n      ? false\n      : this.indeterminate && 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    const {\n      additionalFieldDisplay,\n      checked,\n      disabled,\n      dynamicText,\n      el,\n      form,\n      formaction,\n      formenctype,\n      formmethod,\n      formnovalidate,\n      formtarget,\n      displayIndeterminate,\n      groupLabel,\n      label,\n      name,\n      size,\n      small,\n      value,\n    } = this;\n\n    const id = `ic-checkbox-${\n      isPropDefined(label) || value\n    }-${groupLabel}`.replace(/ /g, \"-\");\n\n    const parentElementSize = (el.parentElement as HTMLIcCheckboxGroupElement)\n      .size;\n\n    checked\n      ? renderHiddenInput(true, el, name, checked && value, disabled)\n      : removeHiddenInput(el);\n\n    return (\n      <Host\n        class={{\n          disabled,\n          small,\n          [`${size || parentElementSize}`]: true,\n        }}\n      >\n        <div class=\"container\">\n          {displayIndeterminate && <div class=\"indeterminate-symbol\" />}\n          {!displayIndeterminate && checked && (\n            <svg\n              class=\"checkmark\"\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          <input\n            role=\"checkbox\"\n            class={{\n              checkbox: true,\n              checked,\n              indeterminate: displayIndeterminate,\n            }}\n            type=\"checkbox\"\n            name={name}\n            id={id}\n            value={value}\n            disabled={disabled ? true : null}\n            checked={checked}\n            indeterminate={displayIndeterminate}\n            onClick={this.handleClick}\n            form={form}\n            formaction={formaction}\n            formenctype={formenctype}\n            formmethod={formmethod}\n            formnovalidate={formnovalidate}\n            formtarget={formtarget}\n            aria-label={this.hideLabel ? this.label : undefined}\n          ></input>\n          {!this.hideLabel && (\n            <ic-typography class=\"checkbox-label\" variant=\"body\">\n              <label htmlFor={id}>{label}</label>\n            </ic-typography>\n          )}\n        </div>\n        {isSlotUsed(el, \"additional-field\") && (\n          <div\n            class=\"dynamic-container\"\n            ref={(el) => (this.additionalFieldContainer = el)}\n          >\n            {additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\" aria-live=\"polite\">\n                    {dynamicText}\n                  </p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\":\n                    additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name=\"additional-field\"></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}