npm - @ukic/web-components - Versions diffs - 2.0.0-alpha.124 → 2.0.0 - Mend

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

Files changed (584) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-navigation-menu.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-menu/ic-navigation-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,CAAC,EACD,KAAK,EAEL,MAAM,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAE1E;;;GAGG;AAMH,MAAM,OAAO,cAAc;;IA2CjB,eAAU,GAAY,KAAK,CAAC;IAC5B,kBAAa,GAAY,KAAK,CAAC;IAC/B,wBAAmB,GAAY,KAAK,CAAC;IACrC,kBAAa,GAAY,KAAK,CAAC;IAC/B,gBAAW,GAAgB,IAAI,CAAC;IAChC,gBAAW,GAAwB,IAAI,CAAC;IAGxC,cAAS,GAAG,GAAG,EAAE;MACvB,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC;IACpC,CAAC,CAAC;IAEM,qBAAgB,GAAG,GAAG,EAAE;MAC9B,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;QAC7B,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC;OAC7B;IACH,CAAC,CAAC;IAEM,qBAAgB,GAAG,GAAG,EAAE;MAC9B,IAAI,OAAO,CAAC;MACZ,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,EAAE;QAC7B,QAAQ,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;UAChC,KAAK,sBAAsB;YACzB,OAAO,GAAG,IAAI,CAAC,WAA4C,CAAC;YAC5D,OAAO,CAAC,QAAQ,EAAE,CAAC;YACnB,MAAM;UACR,KAAK,oBAAoB;YACvB,OAAO,GAAG,IAAI,CAAC,WAA0C,CAAC;YAC1D,OAAO,CAAC,QAAQ,EAAE,CAAC;YACnB,MAAM;UACR,KAAK,qBAAqB;YACxB,OAAO,GAAG,IAAI,CAAC,WAA2C,CAAC;YAC3D,OAAO,CAAC,QAAQ,EAAE,CAAC;YACnB,MAAM;UACR,KAAK,GAAG;YACN,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;YACzB,MAAM;SACT;OACF;IACH,CAAC,CAAC;mBA5EwB,EAAE;kBAKH,EAAE;;EAQ3B,mBAAmB;IACjB,IAAI,CAAC,SAAS,EAAE,CAAC;EACnB,CAAC;EAGD,aAAa,CAAC,EAAiB;IAC7B,IAAI,EAAE,CAAC,GAAG,KAAK,KAAK,EAAE;MACpB,IAAI,EAAE,CAAC,QAAQ,EAAE;QACf,IAAI,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,QAAQ,EAAE;UAC5C,EAAE,CAAC,cAAc,EAAE,CAAC;UACpB,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;OACF;WAAM,IACL,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,WAAW;QAC3C,IAAI,CAAC,WAAW,KAAK,IAAI,EACzB;QACA,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,IAAI,CAAC,gBAAgB,EAAE,CAAC;OACzB;KACF;SAAM,IAAI,EAAE,CAAC,GAAG,KAAK,QAAQ,EAAE;MAC9B,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;EACH,CAAC;EA2CD,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;IAC5D,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC;IAC5D,IAAI,aAAa,EAAE;MACjB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;MAC1B,MAAM,MAAM,GAAG,aAAa,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAgB,CAAC;MACtE,IAAI,MAAM,CAAC,OAAO,KAAK,oBAAoB,EAAE;QAC3C,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;OACjC;MACD,MAAM,OAAO,GAAG,aAAa,CAAC,CAAC,CAAgB,CAAC;MAChD,IAAI,OAAO,CAAC,OAAO,KAAK,qBAAqB,EAAE;QAC7C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;OAC3B;KACF;IACD,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;IAEzD,IAAI,aAAa,KAAK,IAAI,EAAE;MAC1B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;MACvB,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAgB,CAAC;KAC3E;SAAM;MACL,IAAI,IAAI,CAAC,aAAa,EAAE;QACtB,MAAM,MAAM,GAAG,aAAa,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAgB,CAAC;QACtE,kDAAkD;QAClD,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;QACvD,IAAI,WAAW,KAAK,IAAI,EAAE;UACxB,IAAI,CAAC,WAAW,GAAG,WAA0B,CAAC;SAC/C;aAAM;UACL,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;SAC3B;OACF;KACF;EACH,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC1B,CAAC;EAED,mBAAmB;IACjB,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC;IACvD,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;EACnD,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,SAAS,GAAQ;MACzD,WACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,QAAQ,gBACF,MAAM,gBACL,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,OAAO;QAE/D,2BACc,MAAM,EAClB,EAAE,EAAC,0BAA0B,EAC7B,KAAK,EAAC,0BAA0B,sBAG3B;QACP,8BACkB,0BAA0B,iBAC7B,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;UAElD,WACE,KAAK,EAAE;cACL,CAAC,6BAA6B,CAAC,EAAE,IAAI;cACrC,CAAC,iBAAiB,CAAC,EAAE,IAAI,CAAC,aAAa;aACxC;YAED,iBACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EACpC,EAAE,EAAC,mBAAmB,EACtB,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,UAAU,gBACH,SACV,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KACtC,OAAO,EACP,OAAO,EAAE,IAAI,CAAC,SAAS;cAEvB,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B;gBAElC,YACE,CAAC,EAAC,uGAAuG,EACzG,IAAI,EAAC,SAAS,GACd,CACE,CACI,CACR;UACL,IAAI,CAAC,aAAa,IAAI,YAAM,IAAI,EAAC,YAAY,GAAQ,CAClD;QACL,IAAI,CAAC,UAAU,IAAI,CAClB,WACE,KAAK,EAAE;YACL,CAAC,wBAAwB,CAAC,EAAE,IAAI;YAChC,CAAC,uCAAuC,CAAC,EACvC,IAAI,CAAC,mBAAmB;WAC3B;UAED,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACP;QACA,CAAC,IAAI,CAAC,MAAM,KAAK,EAAE,IAAI,IAAI,CAAC,OAAO,KAAK,EAAE,CAAC,IAAI,CAC9C,WAAK,KAAK,EAAC,+BAA+B;UACvC,IAAI,CAAC,MAAM,KAAK,EAAE,IAAI,CACrB,WAAK,KAAK,EAAC,aAAa;YACtB,qBACE,OAAO,EAAC,iBAAiB,gBACd,SAAS,EACpB,KAAK,EAAC,kBAAkB,IAEvB,IAAI,CAAC,MAAM,CACE,CACZ,CACP;UACA,IAAI,CAAC,OAAO,KAAK,EAAE,IAAI,CACtB,WAAK,KAAK,EAAC,cAAc;YACvB,qBACE,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,mBAAmB,gBACd,aAAa,IAEvB,IAAI,CAAC,OAAO,CACC,CACZ,CACP,CACG,CACP,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Element,\n Host,\n Prop,\n h,\n Event,\n EventEmitter,\n Listen,\n} from \"@stencil/core\";\n\nimport { getSlot, getSlotContent, isSlotUsed } from \"../../utils/helpers\";\n\n/*\n @slot navigation - Content will be rendered at top of panel.\n * @slot buttons - Content will be rendered above version info and below navigation.\n /\n@Component({\n tag: \"ic-navigation-menu\",\n styleUrl: \"ic-navigation-menu.css\",\n shadow: true,\n})\nexport class NavigationMenu {\n @Element() el: HTMLIcNavigationMenuElement;\n\n /\n Version info to display\n /\n @Prop() version: string = \"\";\n\n /\n Status info to display\n /\n @Prop() status: string = \"\";\n\n /\n @internal - Emitted when the menu is closed.\n */\n @Event() icNavigationMenuClose: EventEmitter<void>;\n\n @Listen(\"icNavItemClicked\")\n navItemClickHandler(): void {\n this.closeMenu();\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeyDown(ev: KeyboardEvent): void {\n if (ev.key === \"Tab\") {\n if (ev.shiftKey) {\n if (document.activeElement === this.navBarEl) {\n ev.preventDefault();\n this.focusLastTabStop();\n }\n } else if (\n document.activeElement === this.lastTabStop \|\|\n this.lastTabStop === null\n ) {\n ev.preventDefault();\n this.focusCloseButton();\n }\n } else if (ev.key === \"Escape\") {\n this.closeMenu();\n }\n }\n\n private hasButtons: boolean = false;\n private hasNavigation: boolean = false;\n private navItemAboveButtons: boolean = false;\n private navGroupFirst: boolean = false;\n private lastTabStop: HTMLElement = null;\n private closeButton: HTMLIcButtonElement = null;\n private navBarEl: HTMLIcTopNavigationElement;\n\n private closeMenu = () => {\n this.icNavigationMenuClose.emit();\n };\n\n private focusCloseButton = () => {\n if (this.closeButton.setFocus) {\n this.closeButton.setFocus();\n }\n };\n\n private focusLastTabStop = () => {\n let focusEl;\n if (this.lastTabStop !== null) {\n switch (this.lastTabStop.tagName) {\n case \"IC-NAVIGATION-BUTTON\":\n focusEl = this.lastTabStop as HTMLIcNavigationButtonElement;\n focusEl.setFocus();\n break;\n case \"IC-NAVIGATION-ITEM\":\n focusEl = this.lastTabStop as HTMLIcNavigationItemElement;\n focusEl.setFocus();\n break;\n case \"IC-NAVIGATION-GROUP\":\n focusEl = this.lastTabStop as HTMLIcNavigationGroupElement;\n focusEl.setFocus();\n break;\n case \"A\":\n this.lastTabStop.focus();\n break;\n }\n }\n };\n\n componentWillLoad(): void {\n this.navBarEl = document.querySelector(\"ic-top-navigation\");\n const navigationEls = getSlotContent(this.el, \"navigation\");\n if (navigationEls) {\n this.hasNavigation = true;\n const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n if (lastEl.tagName === \"IC-NAVIGATION-ITEM\") {\n this.navItemAboveButtons = true;\n }\n const firstEl = navigationEls[0] as HTMLElement;\n if (firstEl.tagName === \"IC-NAVIGATION-GROUP\") {\n this.navGroupFirst = true;\n }\n }\n const buttonContent = getSlotContent(this.el, \"buttons\");\n\n if (buttonContent !== null) {\n this.hasButtons = true;\n this.lastTabStop = buttonContent[buttonContent.length - 1] as HTMLElement;\n } else {\n if (this.hasNavigation) {\n const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n //check for slotted content i.e. react router link\n const slotContent = getSlot(lastEl, \"navigation-item\");\n if (slotContent !== null) {\n this.lastTabStop = slotContent as HTMLElement;\n } else {\n this.lastTabStop = lastEl;\n }\n }\n }\n }\n\n componentDidLoad(): void {\n this.focusCloseButton();\n }\n\n componentWillRender(): void {\n this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n this.hasButtons = isSlotUsed(this.el, \"buttons\");\n }\n\n render() {\n return (\n <Host>\n <div class=\"popout-modal\" onClick={this.closeMenu}></div>\n <div\n class=\"popout-menu\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={`${this.hasNavigation ? \"Navigation\" : \"App\"} menu`}\n >\n <span\n aria-hidden=\"true\"\n id=\"navigation-landmark-text\"\n class=\"navigation-landmark-text\"\n >\n Main navigation\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-text\"\n aria-hidden={this.hasNavigation ? \"false\" : \"true\"}\n >\n <div\n class={{\n [\"menu-close-button-container\"]: true,\n [\"nav-group-first\"]: this.navGroupFirst,\n }}\n >\n <ic-button\n ref={(el) => (this.closeButton = el)}\n id=\"menu-close-button\"\n class=\"menu-close-button\"\n variant=\"icon\"\n size=\"emphasis\"\n aria-label={`Close ${\n this.hasNavigation ? \"navigation\" : \"app\"\n } menu`}\n onClick={this.closeMenu}\n >\n <svg\n slot=\"icon\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z\"\n fill=\"#1759BC\"\n />\n </svg>\n </ic-button>\n </div>\n {this.hasNavigation && <slot name=\"navigation\"></slot>}\n </nav>\n {this.hasButtons && (\n <div\n class={{\n [\"menu-buttons-container\"]: true,\n [\"menu-buttons-container-nav-item-above\"]:\n this.navItemAboveButtons,\n }}\n >\n <slot name=\"buttons\"></slot>\n </div>\n )}\n {(this.status !== \"\" \|\| this.version !== \"\") && (\n <div class=\"menu-status-version-container\">\n {this.status !== \"\" && (\n <div class=\"menu-status\">\n <ic-typography\n variant=\"label-uppercase\"\n aria-label=\"app tag\"\n class=\"menu-status-text\"\n >\n {this.status}\n </ic-typography>\n </div>\n )}\n {this.version !== \"\" && (\n <div class=\"menu-version\">\n <ic-typography\n variant=\"label\"\n class=\"menu-version-text\"\n aria-label=\"app version\"\n >\n {this.version}\n </ic-typography>\n </div>\n )}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-navigation-menu.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-menu/ic-navigation-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Host,\n Prop,\n h,\n Event,\n EventEmitter,\n Listen,\n} from \"@stencil/core\";\n\nimport { getSlot, getSlotContent, isSlotUsed } from \"../../utils/helpers\";\n\n/*\n @slot navigation - Content will be rendered at top of panel.\n * @slot buttons - Content will be rendered above version info and below navigation.\n /\n@Component({\n tag: \"ic-navigation-menu\",\n styleUrl: \"ic-navigation-menu.css\",\n shadow: true,\n})\nexport class NavigationMenu {\n @Element() el: HTMLIcNavigationMenuElement;\n\n /\n Version info to display\n /\n @Prop() version: string = \"\";\n\n /\n Status info to display\n /\n @Prop() status: string = \"\";\n\n /\n @internal - Emitted when the menu is closed.\n */\n @Event() icNavigationMenuClose: EventEmitter<void>;\n\n @Listen(\"icNavItemClicked\")\n navItemClickHandler(): void {\n this.closeMenu();\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeyDown(ev: KeyboardEvent): void {\n if (ev.key === \"Tab\") {\n if (ev.shiftKey) {\n if (document.activeElement === this.navBarEl) {\n ev.preventDefault();\n this.focusLastTabStop();\n }\n } else if (\n document.activeElement === this.lastTabStop \|\|\n this.lastTabStop === null\n ) {\n ev.preventDefault();\n this.focusCloseButton();\n }\n } else if (ev.key === \"Escape\") {\n this.closeMenu();\n }\n }\n\n private hasButtons: boolean = false;\n private hasNavigation: boolean = false;\n private navItemAboveButtons: boolean = false;\n private navGroupFirst: boolean = false;\n private lastTabStop: HTMLElement = null;\n private closeButton: HTMLIcButtonElement = null;\n private navBarEl: HTMLIcTopNavigationElement;\n\n private closeMenu = () => {\n this.icNavigationMenuClose.emit();\n };\n\n private focusCloseButton = () => {\n if (this.closeButton.setFocus) {\n this.closeButton.setFocus();\n }\n };\n\n private focusLastTabStop = () => {\n let focusEl;\n if (this.lastTabStop !== null) {\n switch (this.lastTabStop.tagName) {\n case \"IC-NAVIGATION-BUTTON\":\n focusEl = this.lastTabStop as HTMLIcNavigationButtonElement;\n focusEl.setFocus();\n break;\n case \"IC-NAVIGATION-ITEM\":\n focusEl = this.lastTabStop as HTMLIcNavigationItemElement;\n focusEl.setFocus();\n break;\n case \"IC-NAVIGATION-GROUP\":\n focusEl = this.lastTabStop as HTMLIcNavigationGroupElement;\n focusEl.setFocus();\n break;\n case \"A\":\n this.lastTabStop.focus();\n break;\n }\n }\n };\n\n componentWillLoad(): void {\n this.navBarEl = document.querySelector(\"ic-top-navigation\");\n const navigationEls = getSlotContent(this.el, \"navigation\");\n if (navigationEls) {\n this.hasNavigation = true;\n const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n if (lastEl.tagName === \"IC-NAVIGATION-ITEM\") {\n this.navItemAboveButtons = true;\n }\n const firstEl = navigationEls[0] as HTMLElement;\n if (firstEl.tagName === \"IC-NAVIGATION-GROUP\") {\n this.navGroupFirst = true;\n }\n }\n const buttonContent = getSlotContent(this.el, \"buttons\");\n\n if (buttonContent !== null) {\n this.hasButtons = true;\n this.lastTabStop = buttonContent[buttonContent.length - 1] as HTMLElement;\n } else {\n if (this.hasNavigation) {\n const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n //check for slotted content i.e. react router link\n const slotContent = getSlot(lastEl, \"navigation-item\");\n if (slotContent !== null) {\n this.lastTabStop = slotContent as HTMLElement;\n } else {\n this.lastTabStop = lastEl;\n }\n }\n }\n }\n\n componentDidLoad(): void {\n this.focusCloseButton();\n }\n\n componentWillRender(): void {\n this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n this.hasButtons = isSlotUsed(this.el, \"buttons\");\n }\n\n render() {\n return (\n <Host>\n <div class=\"popout-modal\" onClick={this.closeMenu}></div>\n <div\n class=\"popout-menu\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={`${this.hasNavigation ? \"Navigation\" : \"App\"} menu`}\n >\n <span\n aria-hidden=\"true\"\n id=\"navigation-landmark-text\"\n class=\"navigation-landmark-text\"\n >\n Main navigation\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-text\"\n aria-hidden={this.hasNavigation ? \"false\" : \"true\"}\n >\n <div\n class={{\n [\"menu-close-button-container\"]: true,\n [\"nav-group-first\"]: this.navGroupFirst,\n }}\n >\n <ic-button\n ref={(el) => (this.closeButton = el)}\n id=\"menu-close-button\"\n class=\"menu-close-button\"\n variant=\"icon\"\n size=\"large\"\n aria-label={`Close ${\n this.hasNavigation ? \"navigation\" : \"app\"\n } menu`}\n onClick={this.closeMenu}\n >\n <svg\n slot=\"icon\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z\"\n fill=\"#1759BC\"\n />\n </svg>\n </ic-button>\n </div>\n {this.hasNavigation && <slot name=\"navigation\"></slot>}\n </nav>\n {this.hasButtons && (\n <div\n class={{\n [\"menu-buttons-container\"]: true,\n [\"menu-buttons-container-nav-item-above\"]:\n this.navItemAboveButtons,\n }}\n >\n <slot name=\"buttons\"></slot>\n </div>\n )}\n {(this.status !== \"\" \|\| this.version !== \"\") && (\n <div class=\"menu-status-version-container\">\n {this.status !== \"\" && (\n <div class=\"menu-status\">\n <ic-typography\n variant=\"label-uppercase\"\n aria-label=\"app tag\"\n class=\"menu-status-text\"\n >\n {this.status}\n </ic-typography>\n </div>\n )}\n {this.version !== \"\" && (\n <div class=\"menu-version\">\n <ic-typography\n variant=\"label\"\n class=\"menu-version-text\"\n aria-label=\"app version\"\n >\n {this.version}\n </ic-typography>\n </div>\n )}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-page-header/ic-page-header.css CHANGED Viewed

@@ -504,7 +504,7 @@ header.tabs {
           hyphens: auto;
 }
-.subheading.dense {
+.subheading.small {
   margin-top: var(--ic-space-xs);
 }

package/dist/collection/components/ic-page-header/ic-page-header.js CHANGED Viewed

@@ -68,7 +68,7 @@ export class PageHeader {
     this.heading = undefined;
     this.subheading = undefined;
     this.aligned = "left";
-    this.dense = false;
+    this.small = false;
     this.border = true;
     this.sticky = false;
     this.stickyDesktopOnly = false;
@@ -89,14 +89,14 @@ export class PageHeader {
     }
   }
   render() {
-    const { dense, border, heading, subheading, aligned, sticky, stickyDesktopOnly, } = this;
+    const { small, border, heading, subheading, aligned, sticky, stickyDesktopOnly, } = this;
     return (h(Host, { class: {
         ["sticky"]: sticky,
         ["sticky-desktop"]: !sticky && stickyDesktopOnly,
       } }, h("header", { class: {
         ["border-bottom"]: border,
         ["tabs"]: isSlotUsed(this.el, "tabs"),
-      } }, h("ic-section-container", { aligned: aligned, fullHeight: isSlotUsed(this.el, "tabs") }, isSlotUsed(this.el, "breadcrumbs") && (h("div", { class: "breadcrumb-area" }, h("slot", { name: "breadcrumbs" }))), h("div", { class: "main-content" }, h("div", { class: "title-area" }, h("div", { class: "header-content" }, h("slot", { name: "heading" }, h("ic-typography", { variant: dense ? "h4" : "h2", class: "heading" }, h("h2", null, heading))), h("slot", { name: "heading-adornment" })), h("div", null, h("slot", { name: "subheading" }, subheading && (h("ic-typography", { variant: "body", class: { ["subheading"]: true, ["dense"]: dense } }, subheading))))), isSlotUsed(this.el, "actions") && (h("div", { class: "action-area" }, h("slot", { name: "actions" }))), isSlotUsed(this.el, "input") && (h("div", { class: "input-area" }, h("slot", { name: "input" })))), (isSlotUsed(this.el, "stepper") ||
+      } }, h("ic-section-container", { aligned: aligned, fullHeight: isSlotUsed(this.el, "tabs") }, isSlotUsed(this.el, "breadcrumbs") && (h("div", { class: "breadcrumb-area" }, h("slot", { name: "breadcrumbs" }))), h("div", { class: "main-content" }, h("div", { class: "title-area" }, h("div", { class: "header-content" }, h("slot", { name: "heading" }, h("ic-typography", { variant: small ? "h4" : "h2", class: "heading" }, h("h2", null, heading))), h("slot", { name: "heading-adornment" })), h("div", null, h("slot", { name: "subheading" }, subheading && (h("ic-typography", { variant: "body", class: { ["subheading"]: true, ["small"]: small } }, subheading))))), isSlotUsed(this.el, "actions") && (h("div", { class: "action-area" }, h("slot", { name: "actions" }))), isSlotUsed(this.el, "input") && (h("div", { class: "input-area" }, h("slot", { name: "input" })))), (isSlotUsed(this.el, "stepper") ||
       isSlotUsed(this.el, "tabs")) && (h("div", { class: "navigation-area" }, isSlotUsed(this.el, "stepper") &&
       !isSlotUsed(this.el, "tabs") && h("slot", { name: "stepper" }), isSlotUsed(this.el, "tabs") && (h("nav", { class: "tabs-slot", "aria-label": "navigation-landmark-page-header" }, h("slot", { name: "tabs" })))))))));
   }
@@ -171,7 +171,7 @@ export class PageHeader {
         "reflect": false,
         "defaultValue": "\"left\""
       },
-      "dense": {
+      "small": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -183,9 +183,9 @@ export class PageHeader {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Whether the component uses dense styling."
+          "text": "Whether the component uses small styling."
         },
-        "attribute": "dense",
+        "attribute": "small",
         "reflect": false,
         "defaultValue": "false"
       },

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-page-header.js","sourceRoot":"","sources":["../../../src/components/ic-page-header/ic-page-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAIzE,OAAO,EACL,UAAU,EACV,YAAY,EACZ,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,qBAAqB,CAAC;AAE7B;;;;;;;;;GASG;AAOH,MAAM,OAAO,UAAU;;IAuCb,mBAAc,GAAmB,IAAI,CAAC;IAEtC,2BAAsB,GAAG,GAAG,EAAE;MACpC,IAAI,IAAI,CAAC,YAAY,EAAE;QACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;OAC1B;IACH,CAAC,CAAC;IAEM,sBAAiB,GAAG,GAAG,EAAE;MAC/B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;QAC5C,IAAI,CAAC,sBAAsB,EAAE,CAAC;MAChC,CAAC,CAAC,CAAC;MACH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACvC,CAAC,CAAC;IAEM,sBAAiB,GAAG,GAAS,EAAE;MACrC,MAAM,QAAQ,GAAG,oBAAoB,EAAE,CAAC;MACxC,IAAI,QAAQ,KAAK,IAAI,CAAC,UAAU,EAAE;QAChC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;OAC5B;MAED,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CACjD,iBAAiB,CACH,CAAC;MACjB,MAAM,aAAa,GAAa,EAAE,CAAC;MAEnC,wNAAwN;MACxN,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAClD,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAgB,CAAC;QACpD,IAAI,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC;QACvC,IAAI,YAAY,KAAK,SAAS,EAAE;UAC9B,YAAY,GAAG,CAAC,CAAC;SAClB;QACD,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;OAClC;MAED,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,aAAa,CAAC,CAAC;MAEvC,ioBAAioB;MACjoB,IAAI,gBAAgB,GAAG,UAAU,CAAC,YAAY,CAAC;MAE/C,IAAI,gBAAgB,KAAK,SAAS,EAAE;QAClC,gBAAgB,GAAG,CAAC,CAAC;OACtB;MAED,IACE,IAAI,CAAC,UAAU,GAAG,YAAY,CAAC,CAAC;QAChC,gBAAgB,IAAI,GAAG;QACvB,CAAC,IAAI,CAAC,kBAAkB,EACxB;QACA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;QAClD,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,GAAkB,EAAE,EAAE;UAChD,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QACtB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,kBAAkB,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC;OACpD;WAAM,IACL,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,YAAY,CAAC,CAAC,IAAI,gBAAgB,GAAG,GAAG,CAAC;QAC3D,IAAI,CAAC,UAAU,IAAI,YAAY,CAAC,CAAC,CAAC;QACpC,IAAI,CAAC,kBAAkB,EACvB;QACA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;QAClD,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,GAAkB,EAAE,EAAE;UAChD,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QACtB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,kBAAkB,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC;OACpD;IACH,CAAC,CAAC;;;mBA5F8B,MAAM;iBAIZ,KAAK;kBAIJ,IAAI;kBAIJ,KAAK;6BAGM,KAAK;wBAGV,KAAK;sBAER,YAAY,CAAC,EAAE;8BAEN,KAAK;;;EAwE5C,iBAAiB;IACf,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAC7B,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAC7C,CAAC;EACJ,CAAC;EAED,gBAAgB;IACd,mBAAmB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;EAC9C,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,cAAc,KAAK,IAAI,EAAE;MAChC,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;KAClC;EACH,CAAC;EAED,MAAM;IACJ,MAAM,EACJ,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,EACV,OAAO,EACP,MAAM,EACN,iBAAiB,GAClB,GAAG,IAAI,CAAC;IAET,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,QAAQ,CAAC,EAAE,MAAM;QAClB,CAAC,gBAAgB,CAAC,EAAE,CAAC,MAAM,IAAI,iBAAiB;OACjD;MAED,cACE,KAAK,EAAE;UACL,CAAC,eAAe,CAAC,EAAE,MAAM;UACzB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC;SACtC;QAED,4BACE,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC;UAEtC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CACrC,WAAK,KAAK,EAAC,iBAAiB;YAC1B,YAAM,IAAI,EAAC,aAAa,GAAG,CACvB,CACP;UACD,WAAK,KAAK,EAAC,cAAc;YACvB,WAAK,KAAK,EAAC,YAAY;cACrB,WAAK,KAAK,EAAC,gBAAgB;gBACzB,YAAM,IAAI,EAAC,SAAS;kBAClB,qBACE,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAC5B,KAAK,EAAC,SAAS;oBAEf,cAAK,OAAO,CAAM,CACJ,CACX;gBACP,YAAM,IAAI,EAAC,mBAAmB,GAAG,CAC7B;cACN;gBACE,YAAM,IAAI,EAAC,YAAY,IACpB,UAAU,IAAI,CACb,qBACE,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,IAEhD,UAAU,CACG,CACjB,CACI,CACH,CACF;YACL,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CACjC,WAAK,KAAK,EAAC,aAAa;cACtB,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACP;YACA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,CAC/B,WAAK,KAAK,EAAC,YAAY;cACrB,YAAM,IAAI,EAAC,OAAO,GAAG,CACjB,CACP,CACG;UAEL,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC;YAC9B,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC,IAAI,CAChC,WAAK,KAAK,EAAC,iBAAiB;YACzB,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC;cAC7B,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,YAAM,IAAI,EAAC,SAAS,GAAG;YACxD,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,CAC9B,WACE,KAAK,EAAC,WAAW,gBACN,iCAAiC;cAE5C,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP,CACG,CACP,CACoB,CAChB,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { IcAlignment } from \"../../utils/types\";\n\nimport {\n isSlotUsed,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n checkResizeObserver,\n} from \"../../utils/helpers\";\n\n/*\n @slot breadcrumbs - Content will be rendered in the breadcrumb area, above the title and action areas.\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot heading-adornment - Content will be rendered in the title area, adjacent to the heading.\n * @slot actions - Content will be rendered in the action area, adjacent to the title area.\n * @slot input - Content will be rendered in the input area, below the title area and adjacent to the action area.\n * @slot stepper - Content will be rendered in the navigation area, below the title and action areas. Note: stepper slot cannot be used when the tabs slot is being used.\n * @slot tabs - Content will be rendered in the navigation area, below the title and action areas. Note: the stepper slot cannot be used when the tabs slot is being used.\n /\n\n@Component({\n tag: \"ic-page-header\",\n styleUrl: \"ic-page-header.css\",\n shadow: true,\n})\nexport class PageHeader {\n @Element() el: HTMLIcPageHeaderElement;\n /\n The title to render on the component.\n /\n @Prop() heading?: string;\n /\n The subtitle to render on the component.\n /\n @Prop() subheading?: string;\n /\n How the component should be aligned.\n /\n @Prop() aligned?: IcAlignment = \"left\";\n /\n Whether the component uses dense styling.\n /\n @Prop() dense?: boolean = false;\n /\n Set whether the bottom border is used\n /\n @Prop() border?: boolean = true;\n /\n Set whether the header is sticky at all breakpoints\n /\n @Prop() sticky?: boolean = false;\n /* Set whether the header is only sticky for viewport widths of 992px and above\n /\n @Prop() stickyDesktopOnly?: boolean = false;\n /* Set whether the reading pattern and tab order change in the action area for viewport widths of above 576px and when actions have not wrapped\n /\n @Prop() reverseOrder?: boolean = false;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n\n @State() areButtonsReversed: boolean = false;\n\n @State() actionContent: Node[];\n\n private resizeObserver: ResizeObserver = null;\n\n private resizeObserverCallback = () => {\n if (this.reverseOrder) {\n this.applyReverseOrder();\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback();\n });\n this.resizeObserver.observe(this.el);\n };\n\n private applyReverseOrder = (): void => {\n const currSize = getCurrentDeviceSize();\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n }\n\n const actionArea = this.el.shadowRoot.querySelector(\n \"div.action-area\"\n ) as HTMLElement;\n const actionHeights: number[] = [];\n\n / For each button in the actions slot, check the height of the button and push this number into the actionHeights array and then find the greatest number in this array (i.e. find the height of the tallest button) /\n for (let i = 0; i < this.actionContent.length; i++) {\n const action = this.actionContent[i] as HTMLElement;\n let actionHeight = action.offsetHeight;\n if (actionHeight === undefined) {\n actionHeight = 0;\n }\n actionHeights.push(actionHeight);\n }\n\n const max = Math.max(...actionHeights);\n\n / The smallest breakpoint displays buttons in the same order the user has slotted them in. When the device size is larger than the small breakpoiint then the order of the button reverses due to best practice for reading patterns. If the device size is larger than the small breakpoint and the buttons have started to wrap then they follow the order the user has slotted them in. This logic is programmed based on the height of the action-area div that wraps the actions slot. If the height of the action-area div is taller than the height of the tallest button, then it is assumed that the taller height is caused by the buttons wrapping */\n let actionAreaHeight = actionArea.offsetHeight;\n\n if (actionAreaHeight === undefined) {\n actionAreaHeight = 0;\n }\n\n if (\n this.deviceSize > DEVICE_SIZES.S &&\n actionAreaHeight <= max &&\n !this.areButtonsReversed\n ) {\n this.actionContent = this.actionContent.reverse();\n this.actionContent.forEach((btn: string \| Node) => {\n this.el.append(btn);\n });\n this.areButtonsReversed = !this.areButtonsReversed;\n } else if (\n ((this.deviceSize > DEVICE_SIZES.S && actionAreaHeight > max) \|\|\n this.deviceSize <= DEVICE_SIZES.S) &&\n this.areButtonsReversed\n ) {\n this.actionContent = this.actionContent.reverse();\n this.actionContent.forEach((btn: string \| Node) => {\n this.el.append(btn);\n });\n this.areButtonsReversed = !this.areButtonsReversed;\n }\n };\n\n componentWillLoad(): void {\n this.actionContent = Array.from(\n this.el.querySelectorAll(`[slot=\"actions\"]`)\n );\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const {\n dense,\n border,\n heading,\n subheading,\n aligned,\n sticky,\n stickyDesktopOnly,\n } = this;\n\n return (\n <Host\n class={{\n [\"sticky\"]: sticky,\n [\"sticky-desktop\"]: !sticky && stickyDesktopOnly,\n }}\n >\n <header\n class={{\n [\"border-bottom\"]: border,\n [\"tabs\"]: isSlotUsed(this.el, \"tabs\"),\n }}\n >\n <ic-section-container\n aligned={aligned}\n fullHeight={isSlotUsed(this.el, \"tabs\")}\n >\n {isSlotUsed(this.el, \"breadcrumbs\") && (\n <div class=\"breadcrumb-area\">\n <slot name=\"breadcrumbs\" />\n </div>\n )}\n <div class=\"main-content\">\n <div class=\"title-area\">\n <div class=\"header-content\">\n <slot name=\"heading\">\n <ic-typography\n variant={dense ? \"h4\" : \"h2\"}\n class=\"heading\"\n >\n <h2>{heading}</h2>\n </ic-typography>\n </slot>\n <slot name=\"heading-adornment\" />\n </div>\n <div>\n <slot name=\"subheading\">\n {subheading && (\n <ic-typography\n variant=\"body\"\n class={{ [\"subheading\"]: true, [\"dense\"]: dense }}\n >\n {subheading}\n </ic-typography>\n )}\n </slot>\n </div>\n </div>\n {isSlotUsed(this.el, \"actions\") && (\n <div class=\"action-area\">\n <slot name=\"actions\" />\n </div>\n )}\n {isSlotUsed(this.el, \"input\") && (\n <div class=\"input-area\">\n <slot name=\"input\" />\n </div>\n )}\n </div>\n\n {(isSlotUsed(this.el, \"stepper\") \|\|\n isSlotUsed(this.el, \"tabs\")) && (\n <div class=\"navigation-area\">\n {isSlotUsed(this.el, \"stepper\") &&\n !isSlotUsed(this.el, \"tabs\") && <slot name=\"stepper\" />}\n {isSlotUsed(this.el, \"tabs\") && (\n <nav\n class=\"tabs-slot\"\n aria-label=\"navigation-landmark-page-header\"\n >\n <slot name=\"tabs\" />\n </nav>\n )}\n </div>\n )}\n </ic-section-container>\n </header>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-page-header.js","sourceRoot":"","sources":["../../../src/components/ic-page-header/ic-page-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAIzE,OAAO,EACL,UAAU,EACV,YAAY,EACZ,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,qBAAqB,CAAC;AAE7B;;;;;;;;;GASG;AAOH,MAAM,OAAO,UAAU;;IAuCb,mBAAc,GAAmB,IAAI,CAAC;IAEtC,2BAAsB,GAAG,GAAG,EAAE;MACpC,IAAI,IAAI,CAAC,YAAY,EAAE;QACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;OAC1B;IACH,CAAC,CAAC;IAEM,sBAAiB,GAAG,GAAG,EAAE;MAC/B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;QAC5C,IAAI,CAAC,sBAAsB,EAAE,CAAC;MAChC,CAAC,CAAC,CAAC;MACH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACvC,CAAC,CAAC;IAEM,sBAAiB,GAAG,GAAS,EAAE;MACrC,MAAM,QAAQ,GAAG,oBAAoB,EAAE,CAAC;MACxC,IAAI,QAAQ,KAAK,IAAI,CAAC,UAAU,EAAE;QAChC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;OAC5B;MAED,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CACjD,iBAAiB,CACH,CAAC;MACjB,MAAM,aAAa,GAAa,EAAE,CAAC;MAEnC,wNAAwN;MACxN,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAClD,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAgB,CAAC;QACpD,IAAI,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC;QACvC,IAAI,YAAY,KAAK,SAAS,EAAE;UAC9B,YAAY,GAAG,CAAC,CAAC;SAClB;QACD,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;OAClC;MAED,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,aAAa,CAAC,CAAC;MAEvC,ioBAAioB;MACjoB,IAAI,gBAAgB,GAAG,UAAU,CAAC,YAAY,CAAC;MAE/C,IAAI,gBAAgB,KAAK,SAAS,EAAE;QAClC,gBAAgB,GAAG,CAAC,CAAC;OACtB;MAED,IACE,IAAI,CAAC,UAAU,GAAG,YAAY,CAAC,CAAC;QAChC,gBAAgB,IAAI,GAAG;QACvB,CAAC,IAAI,CAAC,kBAAkB,EACxB;QACA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;QAClD,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,GAAkB,EAAE,EAAE;UAChD,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QACtB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,kBAAkB,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC;OACpD;WAAM,IACL,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,YAAY,CAAC,CAAC,IAAI,gBAAgB,GAAG,GAAG,CAAC;QAC3D,IAAI,CAAC,UAAU,IAAI,YAAY,CAAC,CAAC,CAAC;QACpC,IAAI,CAAC,kBAAkB,EACvB;QACA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;QAClD,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,GAAkB,EAAE,EAAE;UAChD,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QACtB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,kBAAkB,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC;OACpD;IACH,CAAC,CAAC;;;mBA5F8B,MAAM;iBAIZ,KAAK;kBAIJ,IAAI;kBAIJ,KAAK;6BAGM,KAAK;wBAGV,KAAK;sBAER,YAAY,CAAC,EAAE;8BAEN,KAAK;;;EAwE5C,iBAAiB;IACf,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAC7B,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAC7C,CAAC;EACJ,CAAC;EAED,gBAAgB;IACd,mBAAmB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;EAC9C,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,cAAc,KAAK,IAAI,EAAE;MAChC,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;KAClC;EACH,CAAC;EAED,MAAM;IACJ,MAAM,EACJ,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,EACV,OAAO,EACP,MAAM,EACN,iBAAiB,GAClB,GAAG,IAAI,CAAC;IAET,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,QAAQ,CAAC,EAAE,MAAM;QAClB,CAAC,gBAAgB,CAAC,EAAE,CAAC,MAAM,IAAI,iBAAiB;OACjD;MAED,cACE,KAAK,EAAE;UACL,CAAC,eAAe,CAAC,EAAE,MAAM;UACzB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC;SACtC;QAED,4BACE,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC;UAEtC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CACrC,WAAK,KAAK,EAAC,iBAAiB;YAC1B,YAAM,IAAI,EAAC,aAAa,GAAG,CACvB,CACP;UACD,WAAK,KAAK,EAAC,cAAc;YACvB,WAAK,KAAK,EAAC,YAAY;cACrB,WAAK,KAAK,EAAC,gBAAgB;gBACzB,YAAM,IAAI,EAAC,SAAS;kBAClB,qBACE,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAC5B,KAAK,EAAC,SAAS;oBAEf,cAAK,OAAO,CAAM,CACJ,CACX;gBACP,YAAM,IAAI,EAAC,mBAAmB,GAAG,CAC7B;cACN;gBACE,YAAM,IAAI,EAAC,YAAY,IACpB,UAAU,IAAI,CACb,qBACE,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,IAEhD,UAAU,CACG,CACjB,CACI,CACH,CACF;YACL,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CACjC,WAAK,KAAK,EAAC,aAAa;cACtB,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACP;YACA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,CAC/B,WAAK,KAAK,EAAC,YAAY;cACrB,YAAM,IAAI,EAAC,OAAO,GAAG,CACjB,CACP,CACG;UAEL,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC;YAC9B,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC,IAAI,CAChC,WAAK,KAAK,EAAC,iBAAiB;YACzB,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC;cAC7B,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,YAAM,IAAI,EAAC,SAAS,GAAG;YACxD,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,CAC9B,WACE,KAAK,EAAC,WAAW,gBACN,iCAAiC;cAE5C,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP,CACG,CACP,CACoB,CAChB,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { IcAlignment } from \"../../utils/types\";\n\nimport {\n isSlotUsed,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n checkResizeObserver,\n} from \"../../utils/helpers\";\n\n/*\n @slot breadcrumbs - Content will be rendered in the breadcrumb area, above the title and action areas.\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot heading-adornment - Content will be rendered in the title area, adjacent to the heading.\n * @slot actions - Content will be rendered in the action area, adjacent to the title area.\n * @slot input - Content will be rendered in the input area, below the title area and adjacent to the action area.\n * @slot stepper - Content will be rendered in the navigation area, below the title and action areas. Note: stepper slot cannot be used when the tabs slot is being used.\n * @slot tabs - Content will be rendered in the navigation area, below the title and action areas. Note: the stepper slot cannot be used when the tabs slot is being used.\n /\n\n@Component({\n tag: \"ic-page-header\",\n styleUrl: \"ic-page-header.css\",\n shadow: true,\n})\nexport class PageHeader {\n @Element() el: HTMLIcPageHeaderElement;\n /\n The title to render on the component.\n /\n @Prop() heading?: string;\n /\n The subtitle to render on the component.\n /\n @Prop() subheading?: string;\n /\n How the component should be aligned.\n /\n @Prop() aligned?: IcAlignment = \"left\";\n /\n Whether the component uses small styling.\n /\n @Prop() small?: boolean = false;\n /\n Set whether the bottom border is used\n /\n @Prop() border?: boolean = true;\n /\n Set whether the header is sticky at all breakpoints\n /\n @Prop() sticky?: boolean = false;\n /* Set whether the header is only sticky for viewport widths of 992px and above\n /\n @Prop() stickyDesktopOnly?: boolean = false;\n /* Set whether the reading pattern and tab order change in the action area for viewport widths of above 576px and when actions have not wrapped\n /\n @Prop() reverseOrder?: boolean = false;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n\n @State() areButtonsReversed: boolean = false;\n\n @State() actionContent: Node[];\n\n private resizeObserver: ResizeObserver = null;\n\n private resizeObserverCallback = () => {\n if (this.reverseOrder) {\n this.applyReverseOrder();\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback();\n });\n this.resizeObserver.observe(this.el);\n };\n\n private applyReverseOrder = (): void => {\n const currSize = getCurrentDeviceSize();\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n }\n\n const actionArea = this.el.shadowRoot.querySelector(\n \"div.action-area\"\n ) as HTMLElement;\n const actionHeights: number[] = [];\n\n / For each button in the actions slot, check the height of the button and push this number into the actionHeights array and then find the greatest number in this array (i.e. find the height of the tallest button) /\n for (let i = 0; i < this.actionContent.length; i++) {\n const action = this.actionContent[i] as HTMLElement;\n let actionHeight = action.offsetHeight;\n if (actionHeight === undefined) {\n actionHeight = 0;\n }\n actionHeights.push(actionHeight);\n }\n\n const max = Math.max(...actionHeights);\n\n / The smallest breakpoint displays buttons in the same order the user has slotted them in. When the device size is larger than the small breakpoiint then the order of the button reverses due to best practice for reading patterns. If the device size is larger than the small breakpoint and the buttons have started to wrap then they follow the order the user has slotted them in. This logic is programmed based on the height of the action-area div that wraps the actions slot. If the height of the action-area div is taller than the height of the tallest button, then it is assumed that the taller height is caused by the buttons wrapping */\n let actionAreaHeight = actionArea.offsetHeight;\n\n if (actionAreaHeight === undefined) {\n actionAreaHeight = 0;\n }\n\n if (\n this.deviceSize > DEVICE_SIZES.S &&\n actionAreaHeight <= max &&\n !this.areButtonsReversed\n ) {\n this.actionContent = this.actionContent.reverse();\n this.actionContent.forEach((btn: string \| Node) => {\n this.el.append(btn);\n });\n this.areButtonsReversed = !this.areButtonsReversed;\n } else if (\n ((this.deviceSize > DEVICE_SIZES.S && actionAreaHeight > max) \|\|\n this.deviceSize <= DEVICE_SIZES.S) &&\n this.areButtonsReversed\n ) {\n this.actionContent = this.actionContent.reverse();\n this.actionContent.forEach((btn: string \| Node) => {\n this.el.append(btn);\n });\n this.areButtonsReversed = !this.areButtonsReversed;\n }\n };\n\n componentWillLoad(): void {\n this.actionContent = Array.from(\n this.el.querySelectorAll(`[slot=\"actions\"]`)\n );\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const {\n small,\n border,\n heading,\n subheading,\n aligned,\n sticky,\n stickyDesktopOnly,\n } = this;\n\n return (\n <Host\n class={{\n [\"sticky\"]: sticky,\n [\"sticky-desktop\"]: !sticky && stickyDesktopOnly,\n }}\n >\n <header\n class={{\n [\"border-bottom\"]: border,\n [\"tabs\"]: isSlotUsed(this.el, \"tabs\"),\n }}\n >\n <ic-section-container\n aligned={aligned}\n fullHeight={isSlotUsed(this.el, \"tabs\")}\n >\n {isSlotUsed(this.el, \"breadcrumbs\") && (\n <div class=\"breadcrumb-area\">\n <slot name=\"breadcrumbs\" />\n </div>\n )}\n <div class=\"main-content\">\n <div class=\"title-area\">\n <div class=\"header-content\">\n <slot name=\"heading\">\n <ic-typography\n variant={small ? \"h4\" : \"h2\"}\n class=\"heading\"\n >\n <h2>{heading}</h2>\n </ic-typography>\n </slot>\n <slot name=\"heading-adornment\" />\n </div>\n <div>\n <slot name=\"subheading\">\n {subheading && (\n <ic-typography\n variant=\"body\"\n class={{ [\"subheading\"]: true, [\"small\"]: small }}\n >\n {subheading}\n </ic-typography>\n )}\n </slot>\n </div>\n </div>\n {isSlotUsed(this.el, \"actions\") && (\n <div class=\"action-area\">\n <slot name=\"actions\" />\n </div>\n )}\n {isSlotUsed(this.el, \"input\") && (\n <div class=\"input-area\">\n <slot name=\"input\" />\n </div>\n )}\n </div>\n\n {(isSlotUsed(this.el, \"stepper\") \|\|\n isSlotUsed(this.el, \"tabs\")) && (\n <div class=\"navigation-area\">\n {isSlotUsed(this.el, \"stepper\") &&\n !isSlotUsed(this.el, \"tabs\") && <slot name=\"stepper\" />}\n {isSlotUsed(this.el, \"tabs\") && (\n <nav\n class=\"tabs-slot\"\n aria-label=\"navigation-landmark-page-header\"\n >\n <slot name=\"tabs\" />\n </nav>\n )}\n </div>\n )}\n </ic-section-container>\n </header>\n </Host>\n );\n }\n}\n"]}

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

@@ -40,7 +40,7 @@ export class RadioGroup {
     this.hideLabel = false;
     this.disabled = false;
     this.helperText = undefined;
-    this.dense = false;
+    this.small = false;
     this.validationStatus = "";
     this.validationText = "";
     this.checkedValue = "";
@@ -204,7 +204,7 @@ export class RadioGroup {
         "attribute": "helper-text",
         "reflect": false
       },
-      "dense": {
+      "small": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -216,9 +216,9 @@ export class RadioGroup {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specify whether dense styling is to be applied to the element."
+          "text": "Specify whether small styling is to be applied to the element."
         },
-        "attribute": "dense",
+        "attribute": "small",
         "reflect": false,
         "defaultValue": "false"
       },

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-radio-group.js","sourceRoot":"","sources":["../../../src/components/ic-radio-group/ic-radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,KAAK,EACL,MAAM,EACN,OAAO,EACP,KAAK,GAEN,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,mBAAmB,EACnB,gCAAgC,EAChC,iBAAiB,GAClB,MAAM,qBAAqB,CAAC;AAS7B,MAAM,OAAO,UAAU;;IA2Eb,kBAAa,GAAG,CAAC,KAAoB,EAAQ,EAAE;MACrD,QAAQ,KAAK,CAAC,GAAG,EAAE;QACjB,KAAK,WAAW,CAAC;QACjB,KAAK,YAAY;UACf,IAAI,CAAC,YAAY,CACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,CACnD,CAAC,QAAQ,GAAG,IAAI,CAAC;UAClB,KAAK,CAAC,cAAc,EAAE,CAAC;UACvB,MAAM;QACR,KAAK,SAAS,CAAC;QACf,KAAK,WAAW;UACd,IAAI,CAAC,YAAY,CACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,CACpD,CAAC,QAAQ,GAAG,IAAI,CAAC;UAClB,KAAK,CAAC,cAAc,EAAE,CAAC;OAC1B;IACH,CAAC,CAAC;IAEM,wBAAmB,GAAG,CAC5B,WAAmB,EACnB,UAAmB,EACX,EAAE;MACV,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;MAE/C,IAAI,WAAW,GAAG,CAAC,EAAE;QACnB,WAAW,GAAG,CAAC,CAAC;OACjB;MAED,IAAI,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC;MAE9D,gCAAgC;MAChC,IAAI,QAAQ,GAAG,CAAC,EAAE;QAChB,QAAQ,GAAG,SAAS,CAAC;OACtB;WAAM,IAAI,QAAQ,GAAG,SAAS,EAAE;QAC/B,QAAQ,GAAG,CAAC,CAAC;OACd;MAED,yCAAyC;MACzC,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,QAAQ,EAAE;QACxC,QAAQ,GAAG,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;OAC3D;MAED,OAAO,QAAQ,CAAC;IAClB,CAAC,CAAC;;;oBApG0B,KAAK;qBAKJ,KAAK;oBAKN,KAAK;;iBAUR,KAAK;4BAIyB,EAAE;0BAIxB,EAAE;wBAIH,EAAE;yBACD,CAAC,CAAC;;EAQnC,aAAa,CAAC,KAAsC;IAClD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;IACvC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;IAEjD,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS,EAAE;MACnC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE;QAC/C,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,KAAK,CAAC;QAC/D,IAAI,WAAW,CAAC,QAAQ,EAAE;UACxB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B;MACH,CAAC,CAAC,CAAC;MACH,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ;QAC7D,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;KACnC;EACH,CAAC;EA+CD,gBAAgB;IACd,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAC5B,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAC9C,CAAC;IAEF,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE;MAC/C,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;QACzB,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,KAAK,CAAC;OAChE;MACD,WAAW,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;MAC7B,WAAW,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;MACpC,IAAI,WAAW,CAAC,QAAQ,EAAE;QACxB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC,KAAK,CAAC;OACvC;IACH,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ;MAC7D,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAElC,gCAAgC,CAC9B;MACE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE;MACvC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE;KACtC,EACD,aAAa,CACd,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,mBAAmB,GAAG,mBAAmB,CAC7C,IAAI,CAAC,gBAAgB,EACrB,IAAI,CAAC,QAAQ,CACd,CAAC;IAEF,iBAAiB,CACf,IAAI,EACJ,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,QAAQ,CACd,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,IAAC,SAAS,EAAE,IAAI,CAAC,aAAa;MACjC,WACE,IAAI,EAAC,YAAY,gBACL,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE;QAE9D,CAAC,IAAI,CAAC,SAAS,IAAI,CAClB,sBACE,KAAK,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,EAAE,IAAI,EAAE,EAC7C,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACP,CACnB;QACD,eAAa,CACT;MACN,2BACE,YAAY,EAAC,QAAQ,EACrB,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,EACxD,OAAO,EAAE,mBAAmB,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,GAClC,CAClB,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n State,\n Listen,\n Element,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport {\n hasValidationStatus,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty } from \"../../utils/types\";\nimport { IcValueEventDetail } from \"../../interface\";\n\n@Component({\n tag: \"ic-radio-group\",\n styleUrl: \"ic-radio-group.css\",\n shadow: true,\n})\nexport class RadioGroup {\n private radioOptions: HTMLIcRadioOptionElement[];\n\n @Element() host: HTMLIcRadioGroupElement;\n\n /*\n Provide a label for the input.\n /\n @Prop() label!: string;\n\n /\n Provide a name for the input.\n /\n @Prop() name!: string;\n\n /\n Specify if the input requires a value.\n /\n @Prop() required: boolean = false;\n\n /\n Hides the label and applies the required label value as an aria-label.\n /\n @Prop() hideLabel: boolean = false;\n\n /\n Specify whether the input is disabled.\n /\n @Prop() disabled: boolean = false;\n\n /\n Provide helper text to display additional field guidance.\n /\n @Prop() helperText: string;\n\n /\n Specify whether ~~dense~~ styling is to be applied to the element.\n /\n @Prop() ~~dense~~: boolean = false;\n /\n Provide validation status - 'error'\n /\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n /\n Provide validation text - 'error'\n /\n @Prop() validationText: string = \"\";\n /\n Provide checked state\n /\n @State() checkedValue: string = \"\";\n @State() selectedChild: number = -1;\n\n /\n Emitted when a user selects a radio.\n */\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n @Listen(\"radioOptionSelect\")\n selectHandler(event: CustomEvent<IcValueEventDetail>): void {\n this.checkedValue = event.detail.value;\n this.icChange.emit({ value: this.checkedValue });\n\n if (this.radioOptions !== undefined) {\n this.radioOptions.forEach((radioOption, index) => {\n radioOption.selected = this.checkedValue === radioOption.value;\n if (radioOption.selected) {\n this.selectedChild = index;\n }\n });\n this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n this.selectedChild > 0 ? -1 : 0;\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, true)\n ].selected = true;\n event.preventDefault();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, false)\n ].selected = true;\n event.preventDefault();\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numRadios = this.radioOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n //check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numRadios;\n } else if (nextItem > numRadios) {\n nextItem = 0;\n }\n\n //if next item is disabled then find next\n if (this.radioOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n componentDidLoad(): void {\n this.radioOptions = Array.from(\n this.host.querySelectorAll(\"ic-radio-option\")\n );\n\n this.radioOptions.forEach((radioOption, index) => {\n if (!radioOption.selected) {\n radioOption.selected = this.checkedValue === radioOption.value;\n }\n radioOption.name = this.name;\n radioOption.groupLabel = this.label;\n if (radioOption.selected) {\n this.selectedChild = index;\n this.checkedValue = radioOption.value;\n }\n });\n this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n this.selectedChild > 0 ? -1 : 0;\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Radio Group\"\n );\n }\n\n render() {\n const hadValidationStatus = hasValidationStatus(\n this.validationStatus,\n this.disabled\n );\n\n renderHiddenInput(\n true,\n this.host,\n this.name,\n this.checkedValue,\n this.disabled\n );\n\n return (\n <Host onKeyDown={this.handleKeyDown}>\n <div\n role=\"radiogroup\"\n aria-label={`${this.label}${this.required ? \", required\" : \"\"}`}\n >\n {!this.hideLabel && (\n <ic-input-label\n class={{ [`${this.validationStatus}`]: true }}\n label={this.label}\n helperText={this.helperText}\n required={this.required}\n disabled={this.disabled}\n ></ic-input-label>\n )}\n <slot></slot>\n </div>\n <ic-input-validation\n ariaLiveMode=\"polite\"\n status={hadValidationStatus ? this.validationStatus : \"\"}\n message={hadValidationStatus ? this.validationText : \"\"}\n ></ic-input-validation>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-radio-group.js","sourceRoot":"","sources":["../../../src/components/ic-radio-group/ic-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n State,\n Listen,\n Element,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport {\n hasValidationStatus,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty } from \"../../utils/types\";\nimport { IcValueEventDetail } from \"../../interface\";\n\n@Component({\n tag: \"ic-radio-group\",\n styleUrl: \"ic-radio-group.css\",\n shadow: true,\n})\nexport class RadioGroup {\n private radioOptions: HTMLIcRadioOptionElement[];\n\n @Element() host: HTMLIcRadioGroupElement;\n\n /*\n Provide a label for the input.\n /\n @Prop() label!: string;\n\n /\n Provide a name for the input.\n /\n @Prop() name!: string;\n\n /\n Specify if the input requires a value.\n /\n @Prop() required: boolean = false;\n\n /\n Hides the label and applies the required label value as an aria-label.\n /\n @Prop() hideLabel: boolean = false;\n\n /\n Specify whether the input is disabled.\n /\n @Prop() disabled: boolean = false;\n\n /\n Provide helper text to display additional field guidance.\n /\n @Prop() helperText: string;\n\n /\n Specify whether small styling is to be applied to the element.\n /\n @Prop() small: boolean = false;\n /\n Provide validation status - 'error'\n /\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n /\n Provide validation text - 'error'\n /\n @Prop() validationText: string = \"\";\n /\n Provide checked state\n /\n @State() checkedValue: string = \"\";\n @State() selectedChild: number = -1;\n\n /\n Emitted when a user selects a radio.\n */\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n @Listen(\"radioOptionSelect\")\n selectHandler(event: CustomEvent<IcValueEventDetail>): void {\n this.checkedValue = event.detail.value;\n this.icChange.emit({ value: this.checkedValue });\n\n if (this.radioOptions !== undefined) {\n this.radioOptions.forEach((radioOption, index) => {\n radioOption.selected = this.checkedValue === radioOption.value;\n if (radioOption.selected) {\n this.selectedChild = index;\n }\n });\n this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n this.selectedChild > 0 ? -1 : 0;\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, true)\n ].selected = true;\n event.preventDefault();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, false)\n ].selected = true;\n event.preventDefault();\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numRadios = this.radioOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n //check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numRadios;\n } else if (nextItem > numRadios) {\n nextItem = 0;\n }\n\n //if next item is disabled then find next\n if (this.radioOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n componentDidLoad(): void {\n this.radioOptions = Array.from(\n this.host.querySelectorAll(\"ic-radio-option\")\n );\n\n this.radioOptions.forEach((radioOption, index) => {\n if (!radioOption.selected) {\n radioOption.selected = this.checkedValue === radioOption.value;\n }\n radioOption.name = this.name;\n radioOption.groupLabel = this.label;\n if (radioOption.selected) {\n this.selectedChild = index;\n this.checkedValue = radioOption.value;\n }\n });\n this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n this.selectedChild > 0 ? -1 : 0;\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Radio Group\"\n );\n }\n\n render() {\n const hadValidationStatus = hasValidationStatus(\n this.validationStatus,\n this.disabled\n );\n\n renderHiddenInput(\n true,\n this.host,\n this.name,\n this.checkedValue,\n this.disabled\n );\n\n return (\n <Host onKeyDown={this.handleKeyDown}>\n <div\n role=\"radiogroup\"\n aria-label={`${this.label}${this.required ? \", required\" : \"\"}`}\n >\n {!this.hideLabel && (\n <ic-input-label\n class={{ [`${this.validationStatus}`]: true }}\n label={this.label}\n helperText={this.helperText}\n required={this.required}\n disabled={this.disabled}\n ></ic-input-label>\n )}\n <slot></slot>\n </div>\n <ic-input-validation\n ariaLiveMode=\"polite\"\n status={hadValidationStatus ? this.validationStatus : \"\"}\n message={hadValidationStatus ? this.validationText : \"\"}\n ></ic-input-validation>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-radio-option/ic-radio-option.css CHANGED Viewed

@@ -448,7 +448,7 @@ video {
   width: fit-content;
 }
-:host([dense]) {
+:host([small]) {
   margin-bottom: 10px;
 }
@@ -458,7 +458,7 @@ video {
 }
 /* The label turns grey when disabled  */
-:host([inactive]) {
+:host([disabled]) {
   color: var(--ic-architectural-200);
 }

package/dist/collection/components/ic-search-bar/ic-search-bar.css CHANGED Viewed

@@ -445,7 +445,7 @@ video {
   --divider-height: 24px;
 }
-:host(.search.dense) {
+:host(.search.small) {
   --divider-height: 16px;
 }
@@ -474,6 +474,12 @@ video {
   visibility: hidden;
 }
+.clear-button {
+  border-radius: var(--ic-border-radius);
+  transition: box-shadow var(--ic-easing-transition),
+    border-radius var(--ic-easing-transition);
+}
 .clear-button:focus {
   background-color: var(--ic-focus-blue);
   box-shadow: inset 0 0 0 2px var(--ic-focus-glow);

package/dist/collection/components/ic-search-bar/ic-search-bar.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Host, h, } from "@stencil/core";
 import { IcThemeForegroundEnum, } from "../../utils/types";
-import { debounceEvent, getInputDescribedByText, renderHiddenInput, handleHiddenFormButtonClick, getLabelFromValue, onComponentRequiredPropUndefined, } from "../../utils/helpers";
+import { debounceEvent, getInputDescribedByText, renderHiddenInput, handleHiddenFormButtonClick, getLabelFromValue, onComponentRequiredPropUndefined, getFilteredMenuOptions, } from "../../utils/helpers";
 import clearIcon from "../../assets/clear-icon.svg";
 import searchIcon from "../../assets/search-icon.svg";
 let inputIds = 0;
@@ -24,9 +24,7 @@ export class SearchBar {
       if (this.options.length > 0) {
         this.setMenuChange(true);
         if (this.disableFilter === false) {
-          const rawFilteredOptions = this.options.filter((option) => {
-            return option.label.toLowerCase().includes(this.value.toLowerCase());
-          });
+          const rawFilteredOptions = getFilteredMenuOptions(this.options, false, this.value, "anywhere");
           const noOptions = [{ label: this.emptyOptionListText, value: "" }];
           this.filteredOptions =
             rawFilteredOptions.length > 0 ? rawFilteredOptions : noOptions;
@@ -170,7 +168,7 @@ export class SearchBar {
     this.disableFilter = false;
     this.hideLabel = false;
     this.helperText = "";
-    this.dense = false;
+    this.small = false;
     this.value = "";
     this.autocapitalize = "off";
     this.autocomplete = "off";
@@ -181,7 +179,6 @@ export class SearchBar {
     this.spellcheck = false;
     this.options = [];
     this.focusOnLoad = false;
-    this.dark = false;
     this.hintText = "When autocomplete results are available use the up and down arrows to choose and press enter to select";
     this.emptyOptionListText = "No results found";
     this.charactersUntilSuggestion = 2;
@@ -291,7 +288,7 @@ export class SearchBar {
     }
   }
   render() {
-    const { inputId, name, label, required, dense, placeholder, helperText, disabled, value, readonly, spellcheck, fullWidth, options, open, hideLabel, menuId, ariaActiveDescendant, dark, truncateValue, autofocus, autocapitalize, autocomplete, filteredOptions, } = this;
+    const { inputId, name, label, required, small, placeholder, helperText, disabled, value, readonly, spellcheck, fullWidth, options, open, hideLabel, menuId, ariaActiveDescendant, truncateValue, autofocus, autocapitalize, autocomplete, filteredOptions, } = this;
     const disabledMode = readonly || disabled ? true : false;
     const describedBy = getInputDescribedByText(inputId, helperText !== "", false).trim();
     let describedById;
@@ -329,30 +326,29 @@ export class SearchBar {
     return (h(Host, { class: {
         ["search"]: true,
         ["fullwidth"]: fullWidth,
-        ["dark"]: dark,
         ["disabled"]: disabled,
-        ["dense"]: dense,
-      }, onFocus: this.handleHostFocus, onBlur: this.handleHostBlur }, h("ic-text-field", { ref: (el) => (this.inputEl = el), inputId: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly, dense: dense, hideLabel: hideLabel, fullWidth: fullWidth, name: name, truncateValue: truncateValue, dark: dark, value: options && !!getLabelFromValue(value, options)
+        ["small"]: small,
+      }, onFocus: this.handleHostFocus, onBlur: this.handleHostBlur }, h("ic-text-field", { ref: (el) => (this.inputEl = el), inputId: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly, small: small, hideLabel: hideLabel, fullWidth: fullWidth, name: name, truncateValue: truncateValue, value: options && !!getLabelFromValue(value, options)
         ? getLabelFromValue(value, options)
         : value, placeholder: placeholder, onInput: this.onInput, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "aria-label": hideLabel ? label : "", "aria-describedby": describedById, "aria-owns": hasSuggestedSearch ? menuId : undefined, "aria-haspopup": options.length > 0 ? "listbox" : undefined, ariaExpanded: expanded, ariaActiveDescendant: ariaActiveDescendant, "aria-autocomplete": hasSuggestedSearch ? "list" : undefined, role: hasSuggestedSearch ? "combobox" : undefined, autocomplete: autocomplete, autocapitalize: autocapitalize, autoFocus: autofocus, spellcheck: spellcheck, inputmode: "search" }, h("div", { class: {
         "clear-button-container": true,
         "clear-button-visible": value && !disabledMode && this.showClearButton,
-      }, slot: "clear-button" }, h("ic-button", { id: "clear-button", class: "clear-button", "aria-label": "Clear", innerHTML: clearIcon, onClick: this.handleClear, size: dense ? "dense" : "default", onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "submit", variant: "icon", buttonStyle: this.clearButtonFocused
+      }, slot: "clear-button" }, h("ic-button", { id: "clear-button", class: "clear-button", "aria-label": "Clear", innerHTML: clearIcon, onClick: this.handleClear, size: small ? "small" : "default", onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "submit", variant: "icon", appearance: this.clearButtonFocused
         ? IcThemeForegroundEnum.Light
         : IcThemeForegroundEnum.Dark }), h("div", { class: "divider" })), h("div", { class: {
         "search-submit-button-container": true,
         "search-submit-button-disabled": valueNotSet || disabled || hadNoOptions,
       }, slot: "search-submit-button" }, h("ic-button", { id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
         ["search-submit-button"]: true,
-        ["search-submit-button-dense"]: !!dense,
-      }, disabled: valueNotSet || disabled || hadNoOptions, innerHTML: searchIcon, size: dense ? "dense" : "default", onClick: this.handleSubmitSearch, onBlur: this.handleSubmitSearchBlur, onFocus: this.handleSubmitSearchFocus, type: "submit", variant: "icon", buttonStyle: this.searchSubmitFocused
+        ["search-submit-button-small"]: !!small,
+      }, disabled: valueNotSet || disabled || hadNoOptions, innerHTML: searchIcon, size: small ? "small" : "default", onClick: this.handleSubmitSearch, onBlur: this.handleSubmitSearchBlur, onFocus: this.handleSubmitSearchFocus, type: "submit", variant: "icon", appearance: this.searchSubmitFocused
         ? IcThemeForegroundEnum.Light
         : IcThemeForegroundEnum.Default })), h("div", { class: {
         "menu-container": true,
         fullwidth: fullWidth,
       }, slot: "menu" }, menuOpen && value.length >= this.charactersUntilSuggestion && (h("ic-menu", { class: {
         "no-results": hadNoOptions,
-      }, activationType: "manual", anchorEl: this.anchorEl, autoFocusOnSelected: false, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), dense: dense, fullWidth: fullWidth, menuId: menuId, open: true, options: filteredOptions, onOptionSelect: this.handleOptionSelect, onMenuChange: this.handleMenuChange, parentEl: this.el, value: value })))), h("div", { "aria-live": "polite", role: "status", class: "search-results-status" })));
+      }, activationType: "manual", anchorEl: this.anchorEl, autoFocusOnSelected: false, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), small: small, fullWidth: fullWidth, menuId: menuId, open: true, options: filteredOptions, onOptionSelect: this.handleOptionSelect, onMenuChange: this.handleMenuChange, parentEl: this.el, value: value })))), h("div", { "aria-live": "polite", role: "status", class: "search-results-status" })));
   }
   static get is() { return "ic-search-bar"; }
   static get encapsulation() { return "shadow"; }
@@ -529,7 +525,7 @@ export class SearchBar {
         "reflect": false,
         "defaultValue": "\"\""
       },
-      "dense": {
+      "small": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -541,9 +537,9 @@ export class SearchBar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Specify whether dense styling is to be applied to the element."
+          "text": "Specify whether small styling is to be applied to the element."
         },
-        "attribute": "dense",
+        "attribute": "small",
         "reflect": false,
         "defaultValue": "false"
       },
@@ -740,24 +736,6 @@ export class SearchBar {
         "reflect": false,
         "defaultValue": "false"
       },
-      "dark": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Determines whether the dark variant of the search bar should be displayed."
-        },
-        "attribute": "dark",
-        "reflect": false,
-        "defaultValue": "false"
-      },
       "hintText": {
         "type": "string",
         "mutable": false,