@gravionlabs/helix-shell 22.1.14 → 22.1.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/gravionlabs-helix-shell.mjs +82 -145
  2. package/fesm2022/gravionlabs-helix-shell.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/styles.css +0 -3
package/fesm2022/gravionlabs-helix-shell.mjs CHANGED
@@ -1,33 +1,25 @@
1
1
  import * as i0 from "@angular/core";
2
2
  import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, InjectionToken, PLATFORM_ID, ViewEncapsulation, computed, effect, forwardRef, inject, input, output, signal, untracked } from "@angular/core";
3
- import * as i1$3 from "@angular/common";
3
+ import * as i1$1 from "@angular/common";
4
4
  import { CommonModule, NgClass, SlicePipe, isPlatformBrowser } from "@angular/common";
5
- import * as i1$4 from "@angular/forms";
5
+ import * as i1$2 from "@angular/forms";
6
6
  import { FormsModule, NG_VALUE_ACCESSOR } from "@angular/forms";
7
7
  import * as i2 from "@angular/router";
8
8
  import { ActivatedRoute, NavigationEnd, Router, RouterModule } from "@angular/router";
9
9
  import { patchState, signalStore, withComputed, withHooks, withMethods, withState } from "@ngrx/signals";
10
10
  import { DomSanitizer } from "@angular/platform-browser";
11
11
  import { Subject, filter, takeUntil } from "rxjs";
12
- import * as i3$1 from "@gravionlabs/helix-core/ripple";
12
+ import * as i3 from "@gravionlabs/helix-core/ripple";
13
13
  import { RippleModule } from "@gravionlabs/helix-core/ripple";
14
- import { Tooltip } from "@gravionlabs/helix-core/tooltip";
15
- import { Breadcrumb } from "@gravionlabs/helix-core/breadcrumb";
16
- import * as i1$2 from "@gravionlabs/helix-core/styleclass";
14
+ import { HxBreadcrumb, HxButton, HxCheckbox, HxDivider, HxInput, HxPassword, HxSelectButton, HxTooltip } from "@gravionlabs/helix-ui";
15
+ import * as i1 from "@gravionlabs/helix-core/styleclass";
17
16
  import { StyleClassModule } from "@gravionlabs/helix-core/styleclass";
18
17
  import { HelixConfig } from "@gravionlabs/helix-core/config";
19
- import * as i3 from "@gravionlabs/helix-core/selectbutton";
20
- import { SelectButtonModule } from "@gravionlabs/helix-core/selectbutton";
21
18
  import { $t, updatePreset, updateSurfacePalette } from "@gravionlabs/helix-core/themes";
22
19
  import { auraPreset } from "@gravionlabs/helix-core/themes/aura";
23
20
  import { helixPreset } from "@gravionlabs/helix-core/themes/helix";
24
21
  import { laraPreset } from "@gravionlabs/helix-core/themes/lara";
25
22
  import { noraPreset } from "@gravionlabs/helix-core/themes/nora";
26
- import { HxButton, HxCheckbox, HxInput } from "@gravionlabs/helix-ui";
27
- import * as i1$1 from "@gravionlabs/helix-core/password";
28
- import { PasswordModule } from "@gravionlabs/helix-core/password";
29
- import * as i1 from "@gravionlabs/helix-core/divider";
30
- import { DividerModule } from "@gravionlabs/helix-core/divider";
31
23
  var HelixFormField = class HelixFormField {
32
24
  label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
33
25
  control = input(null, ...ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []);
@@ -297,13 +289,13 @@ var HelixSelect = class HelixSelect {
297
289
  },
298
290
  {
299
291
  kind: "directive",
300
- type: i1$4.NgSelectOption,
292
+ type: i1$2.NgSelectOption,
301
293
  selector: "option",
302
294
  inputs: ["ngValue", "value"]
303
295
  },
304
296
  {
305
297
  kind: "directive",
306
- type: i1$4.ɵNgSelectMultipleOption,
298
+ type: i1$2.ɵNgSelectMultipleOption,
307
299
  selector: "option",
308
300
  inputs: ["ngValue", "value"]
309
301
  }
@@ -745,7 +737,7 @@ var HelixNavRailItem = class HelixNavRailItem {
745
737
  }
746
738
  },
747
739
  ngImport: i0,
748
- template: "@if (hasChildren()) {\n <a\n class=\"helix-nav-rail-link\"\n [attr.title]=\"isCollapsed() ? null : $safeNavigationMigration(item()?.label)\"\n [attr.aria-expanded]=\"isCollapsed() ? flyoutOpen() : isExpanded()\"\n [attr.aria-haspopup]=\"isCollapsed() ? 'true' : null\"\n role=\"button\"\n (click)=\"itemClick($event)\"\n (keydown)=\"onKeydown($event)\"\n tabindex=\"0\"\n hRipple\n >\n @if (item()?.icon) {\n <i [ngClass]=\"$safeNavigationMigration(item()?.icon)\" class=\"helix-nav-rail-icon\"></i>\n }\n @if (!isCollapsed()) {\n <span class=\"helix-nav-rail-label\">{{ item()?.label }}</span>\n <i\n class=\"pi pi-chevron-right helix-nav-rail-chevron\"\n [class.helix-nav-rail-chevron-open]=\"isExpanded()\"\n ></i>\n }\n </a>\n @if (isCollapsed() && flyoutOpen()) {\n <div class=\"helix-nav-rail-flyout\" [style.top.px]=\"flyoutTop()\" [style.left.px]=\"flyoutLeft()\">\n <div class=\"helix-nav-rail-flyout-title\">{{ item()?.label }}</div>\n <ul class=\"helix-nav-rail-flyout-list\">\n @for (child of item()?.items; track child.label) {\n <li\n helix-nav-rail-item\n [item]=\"child\"\n [parentPath]=\"fullPath()\"\n [depth]=\"0\"\n [flyout]=\"true\"\n ></li>\n }\n </ul>\n </div>\n }\n @if (isExpanded() && !isCollapsed()) {\n <ul\n class=\"helix-nav-rail-sublist\"\n [animate.enter]=\"initialized() ? 'helix-nav-rail-submenu-enter' : null\"\n [animate.leave]=\"'helix-nav-rail-submenu-leave'\"\n >\n @for (child of item()?.items; track child.label) {\n <li helix-nav-rail-item [item]=\"child\" [parentPath]=\"fullPath()\" [depth]=\"depth() + 1\"></li>\n }\n </ul>\n }\n} @else {\n <a\n class=\"helix-nav-rail-link\"\n [class.active]=\"isActive()\"\n [attr.aria-current]=\"isActive() ? 'page' : null\"\n [attr.title]=\"isCollapsed() ? null : $safeNavigationMigration(item()?.label)\"\n [hTooltip]=\"$safeNavigationMigration(item()?.label)\"\n [tooltipDisabled]=\"!isCollapsed()\"\n tooltipPosition=\"right\"\n tooltipEvent=\"both\"\n [routerLink]=\"$safeNavigationMigration(item()?.routerLink)\"\n (click)=\"itemClick($event)\"\n (keydown)=\"onKeydown($event)\"\n tabindex=\"0\"\n hRipple\n >\n @if (isActive() && !isCollapsed()) {\n <span class=\"helix-nav-rail-accent\"></span>\n }\n @if (item()?.icon) {\n <i [ngClass]=\"$safeNavigationMigration(item()?.icon)\" class=\"helix-nav-rail-icon\"></i>\n }\n @if (!isCollapsed()) {\n <span class=\"helix-nav-rail-label\">{{ item()?.label }}</span>\n }\n </a>\n}\n",
740
+ template: "@if (hasChildren()) {\n <a\n class=\"helix-nav-rail-link\"\n [attr.title]=\"isCollapsed() ? null : $safeNavigationMigration(item()?.label)\"\n [attr.aria-expanded]=\"isCollapsed() ? flyoutOpen() : isExpanded()\"\n [attr.aria-haspopup]=\"isCollapsed() ? 'true' : null\"\n role=\"button\"\n (click)=\"itemClick($event)\"\n (keydown)=\"onKeydown($event)\"\n tabindex=\"0\"\n hRipple\n >\n @if (item()?.icon) {\n <i [ngClass]=\"$safeNavigationMigration(item()?.icon)\" class=\"helix-nav-rail-icon\"></i>\n }\n @if (!isCollapsed()) {\n <span class=\"helix-nav-rail-label\">{{ item()?.label }}</span>\n <i\n class=\"pi pi-chevron-right helix-nav-rail-chevron\"\n [class.helix-nav-rail-chevron-open]=\"isExpanded()\"\n ></i>\n }\n </a>\n @if (isCollapsed() && flyoutOpen()) {\n <div class=\"helix-nav-rail-flyout\" [style.top.px]=\"flyoutTop()\" [style.left.px]=\"flyoutLeft()\">\n <div class=\"helix-nav-rail-flyout-title\">{{ item()?.label }}</div>\n <ul class=\"helix-nav-rail-flyout-list\">\n @for (child of item()?.items; track child.label) {\n <li\n helix-nav-rail-item\n [item]=\"child\"\n [parentPath]=\"fullPath()\"\n [depth]=\"0\"\n [flyout]=\"true\"\n ></li>\n }\n </ul>\n </div>\n }\n @if (isExpanded() && !isCollapsed()) {\n <ul\n class=\"helix-nav-rail-sublist\"\n [animate.enter]=\"initialized() ? 'helix-nav-rail-submenu-enter' : null\"\n [animate.leave]=\"'helix-nav-rail-submenu-leave'\"\n >\n @for (child of item()?.items; track child.label) {\n <li helix-nav-rail-item [item]=\"child\" [parentPath]=\"fullPath()\" [depth]=\"depth() + 1\"></li>\n }\n </ul>\n }\n} @else {\n <a\n class=\"helix-nav-rail-link\"\n [class.active]=\"isActive()\"\n [attr.aria-current]=\"isActive() ? 'page' : null\"\n [attr.title]=\"isCollapsed() ? null : $safeNavigationMigration(item()?.label)\"\n [hx-tooltip]=\"$safeNavigationMigration(item()?.label)\"\n [hxTooltipDisabled]=\"!isCollapsed()\"\n hxTooltipPosition=\"right\"\n [routerLink]=\"$safeNavigationMigration(item()?.routerLink)\"\n (click)=\"itemClick($event)\"\n (keydown)=\"onKeydown($event)\"\n tabindex=\"0\"\n hRipple\n >\n @if (isActive() && !isCollapsed()) {\n <span class=\"helix-nav-rail-accent\"></span>\n }\n @if (item()?.icon) {\n <i [ngClass]=\"$safeNavigationMigration(item()?.icon)\" class=\"helix-nav-rail-icon\"></i>\n }\n @if (!isCollapsed()) {\n <span class=\"helix-nav-rail-label\">{{ item()?.label }}</span>\n }\n </a>\n}\n",
749
741
  styles: ["@keyframes helix-nav-rail-submenu-enter{0%{max-height:0;overflow:hidden}to{max-height:1000px;overflow:visible}}@keyframes helix-nav-rail-submenu-leave{0%{max-height:1000px;overflow:hidden}to{max-height:0;overflow:hidden}}.helix-nav-rail-submenu-enter{animation:helix-nav-rail-submenu-enter .45s cubic-bezier(.86,0,.07,1) forwards}.helix-nav-rail-submenu-leave{animation:helix-nav-rail-submenu-leave .45s cubic-bezier(.86,0,.07,1) forwards}.helix-nav-rail-link{position:relative;display:flex;align-items:center;gap:.85rem;padding:.625rem .75rem;margin:1px .65rem;border-radius:var(--content-border-radius);cursor:pointer;text-decoration:none;font-size:.95rem;font-weight:500;white-space:nowrap;outline:0 none;color:var(--helix-nav-text);transition:background-color var(--element-transition-duration),color var(--element-transition-duration)}.helix-nav-rail-link:hover{background-color:var(--helix-nav-hover-bg)}.helix-nav-rail-link.active{color:var(--helix-nav-active-text);background-color:var(--helix-nav-active-bg)}.helix-nav-rail-link.active .helix-nav-rail-icon{color:var(--helix-nav-accent)}.helix-nav-rail-link:focus{outline-offset:-1px;box-shadow:inset var(--focus-ring-shadow)}.helix-nav-rail-accent{position:absolute;left:-.5rem;top:50%;transform:translateY(-50%);width:3px;height:24px;border-radius:3px;background:var(--helix-nav-accent)}.helix-nav-rail-icon{flex:0 0 auto;font-size:1.15rem;transition:color var(--element-transition-duration)}.helix-nav-rail-label{overflow:hidden;text-overflow:ellipsis}.helix-nav-rail-chevron{margin-left:auto;font-size:.7rem;transition:transform var(--element-transition-duration)}.helix-nav-rail-chevron.helix-nav-rail-chevron-open{transform:rotate(90deg)}.helix-nav-rail-sublist{margin:0;padding:0;list-style-type:none;overflow:hidden;margin-left:1.5rem;border-left:1px solid var(--helix-nav-border)}.helix-nav-rail-sublist .helix-nav-rail-link{margin-left:.4rem;padding-block:.45rem;font-size:.9rem}:host(.helix-nav-rail-item-collapsed)>.helix-nav-rail-link{justify-content:center}.helix-nav-rail-flyout{position:fixed;z-index:1000;min-width:13rem;max-width:18rem;max-height:calc(100vh - 1rem);overflow-y:auto;padding:.35rem 0;border:1px solid var(--helix-nav-border);border-radius:var(--content-border-radius);background:var(--helix-surface-overlay, var(--helix-surface-chrome));box-shadow:0 8px 24px #00000029}.helix-nav-rail-flyout-title{padding:.5rem 1.15rem .3rem;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--helix-nav-text-muted)}.helix-nav-rail-flyout-list{margin:0;padding:0;list-style-type:none}\n"],
750
742
  dependencies: [
751
743
  {
@@ -765,7 +757,7 @@ var HelixNavRailItem = class HelixNavRailItem {
765
757
  },
766
758
  {
767
759
  kind: "directive",
768
- type: i1$3.NgClass,
760
+ type: i1$1.NgClass,
769
761
  selector: "[ngClass]",
770
762
  inputs: ["class", "ngClass"]
771
763
  },
@@ -798,36 +790,19 @@ var HelixNavRailItem = class HelixNavRailItem {
798
790
  },
799
791
  {
800
792
  kind: "directive",
801
- type: i3$1.Ripple,
793
+ type: i3.Ripple,
802
794
  selector: "[hRipple]"
803
795
  },
804
796
  {
805
797
  kind: "directive",
806
- type: Tooltip,
807
- selector: "[hTooltip]",
798
+ type: HxTooltip,
799
+ selector: "[hx-tooltip]",
808
800
  inputs: [
809
- "tooltipPosition",
810
- "tooltipEvent",
811
- "positionStyle",
812
- "tooltipStyleClass",
813
- "tooltipZIndex",
814
- "escape",
815
- "showDelay",
816
- "hideDelay",
817
- "life",
818
- "positionTop",
819
- "positionLeft",
820
- "autoHide",
821
- "fitContent",
822
- "hideOnEscape",
823
- "showOnEllipsis",
824
- "hTooltip",
825
- "tooltipDisabled",
826
- "tooltipOptions",
827
- "appendTo",
828
- "ptTooltip",
829
- "pTooltipPT",
830
- "pTooltipUnstyled"
801
+ "hx-tooltip",
802
+ "hxTooltipPosition",
803
+ "hxTooltipEvent",
804
+ "hxTooltipDisabled",
805
+ "hxTooltipShowDelay"
831
806
  ]
832
807
  }
833
808
  ],
@@ -848,7 +823,7 @@ i0.ɵɵngDeclareClassMetadata({
848
823
  CommonModule,
849
824
  RouterModule,
850
825
  RippleModule,
851
- Tooltip
826
+ HxTooltip
852
827
  ],
853
828
  changeDetection: ChangeDetectionStrategy.Eager,
854
829
  host: {
@@ -860,7 +835,7 @@ i0.ɵɵngDeclareClassMetadata({
860
835
  "(focusout)": "onFocusOut($event)",
861
836
  "(keydown.escape)": "closeFlyout(true)"
862
837
  },
863
- template: "@if (hasChildren()) {\n <a\n class=\"helix-nav-rail-link\"\n [attr.title]=\"isCollapsed() ? null : $safeNavigationMigration(item()?.label)\"\n [attr.aria-expanded]=\"isCollapsed() ? flyoutOpen() : isExpanded()\"\n [attr.aria-haspopup]=\"isCollapsed() ? 'true' : null\"\n role=\"button\"\n (click)=\"itemClick($event)\"\n (keydown)=\"onKeydown($event)\"\n tabindex=\"0\"\n hRipple\n >\n @if (item()?.icon) {\n <i [ngClass]=\"$safeNavigationMigration(item()?.icon)\" class=\"helix-nav-rail-icon\"></i>\n }\n @if (!isCollapsed()) {\n <span class=\"helix-nav-rail-label\">{{ item()?.label }}</span>\n <i\n class=\"pi pi-chevron-right helix-nav-rail-chevron\"\n [class.helix-nav-rail-chevron-open]=\"isExpanded()\"\n ></i>\n }\n </a>\n @if (isCollapsed() && flyoutOpen()) {\n <div class=\"helix-nav-rail-flyout\" [style.top.px]=\"flyoutTop()\" [style.left.px]=\"flyoutLeft()\">\n <div class=\"helix-nav-rail-flyout-title\">{{ item()?.label }}</div>\n <ul class=\"helix-nav-rail-flyout-list\">\n @for (child of item()?.items; track child.label) {\n <li\n helix-nav-rail-item\n [item]=\"child\"\n [parentPath]=\"fullPath()\"\n [depth]=\"0\"\n [flyout]=\"true\"\n ></li>\n }\n </ul>\n </div>\n }\n @if (isExpanded() && !isCollapsed()) {\n <ul\n class=\"helix-nav-rail-sublist\"\n [animate.enter]=\"initialized() ? 'helix-nav-rail-submenu-enter' : null\"\n [animate.leave]=\"'helix-nav-rail-submenu-leave'\"\n >\n @for (child of item()?.items; track child.label) {\n <li helix-nav-rail-item [item]=\"child\" [parentPath]=\"fullPath()\" [depth]=\"depth() + 1\"></li>\n }\n </ul>\n }\n} @else {\n <a\n class=\"helix-nav-rail-link\"\n [class.active]=\"isActive()\"\n [attr.aria-current]=\"isActive() ? 'page' : null\"\n [attr.title]=\"isCollapsed() ? null : $safeNavigationMigration(item()?.label)\"\n [hTooltip]=\"$safeNavigationMigration(item()?.label)\"\n [tooltipDisabled]=\"!isCollapsed()\"\n tooltipPosition=\"right\"\n tooltipEvent=\"both\"\n [routerLink]=\"$safeNavigationMigration(item()?.routerLink)\"\n (click)=\"itemClick($event)\"\n (keydown)=\"onKeydown($event)\"\n tabindex=\"0\"\n hRipple\n >\n @if (isActive() && !isCollapsed()) {\n <span class=\"helix-nav-rail-accent\"></span>\n }\n @if (item()?.icon) {\n <i [ngClass]=\"$safeNavigationMigration(item()?.icon)\" class=\"helix-nav-rail-icon\"></i>\n }\n @if (!isCollapsed()) {\n <span class=\"helix-nav-rail-label\">{{ item()?.label }}</span>\n }\n </a>\n}\n",
838
+ template: "@if (hasChildren()) {\n <a\n class=\"helix-nav-rail-link\"\n [attr.title]=\"isCollapsed() ? null : $safeNavigationMigration(item()?.label)\"\n [attr.aria-expanded]=\"isCollapsed() ? flyoutOpen() : isExpanded()\"\n [attr.aria-haspopup]=\"isCollapsed() ? 'true' : null\"\n role=\"button\"\n (click)=\"itemClick($event)\"\n (keydown)=\"onKeydown($event)\"\n tabindex=\"0\"\n hRipple\n >\n @if (item()?.icon) {\n <i [ngClass]=\"$safeNavigationMigration(item()?.icon)\" class=\"helix-nav-rail-icon\"></i>\n }\n @if (!isCollapsed()) {\n <span class=\"helix-nav-rail-label\">{{ item()?.label }}</span>\n <i\n class=\"pi pi-chevron-right helix-nav-rail-chevron\"\n [class.helix-nav-rail-chevron-open]=\"isExpanded()\"\n ></i>\n }\n </a>\n @if (isCollapsed() && flyoutOpen()) {\n <div class=\"helix-nav-rail-flyout\" [style.top.px]=\"flyoutTop()\" [style.left.px]=\"flyoutLeft()\">\n <div class=\"helix-nav-rail-flyout-title\">{{ item()?.label }}</div>\n <ul class=\"helix-nav-rail-flyout-list\">\n @for (child of item()?.items; track child.label) {\n <li\n helix-nav-rail-item\n [item]=\"child\"\n [parentPath]=\"fullPath()\"\n [depth]=\"0\"\n [flyout]=\"true\"\n ></li>\n }\n </ul>\n </div>\n }\n @if (isExpanded() && !isCollapsed()) {\n <ul\n class=\"helix-nav-rail-sublist\"\n [animate.enter]=\"initialized() ? 'helix-nav-rail-submenu-enter' : null\"\n [animate.leave]=\"'helix-nav-rail-submenu-leave'\"\n >\n @for (child of item()?.items; track child.label) {\n <li helix-nav-rail-item [item]=\"child\" [parentPath]=\"fullPath()\" [depth]=\"depth() + 1\"></li>\n }\n </ul>\n }\n} @else {\n <a\n class=\"helix-nav-rail-link\"\n [class.active]=\"isActive()\"\n [attr.aria-current]=\"isActive() ? 'page' : null\"\n [attr.title]=\"isCollapsed() ? null : $safeNavigationMigration(item()?.label)\"\n [hx-tooltip]=\"$safeNavigationMigration(item()?.label)\"\n [hxTooltipDisabled]=\"!isCollapsed()\"\n hxTooltipPosition=\"right\"\n [routerLink]=\"$safeNavigationMigration(item()?.routerLink)\"\n (click)=\"itemClick($event)\"\n (keydown)=\"onKeydown($event)\"\n tabindex=\"0\"\n hRipple\n >\n @if (isActive() && !isCollapsed()) {\n <span class=\"helix-nav-rail-accent\"></span>\n }\n @if (item()?.icon) {\n <i [ngClass]=\"$safeNavigationMigration(item()?.icon)\" class=\"helix-nav-rail-icon\"></i>\n }\n @if (!isCollapsed()) {\n <span class=\"helix-nav-rail-label\">{{ item()?.label }}</span>\n }\n </a>\n}\n",
864
839
  styles: ["@keyframes helix-nav-rail-submenu-enter{0%{max-height:0;overflow:hidden}to{max-height:1000px;overflow:visible}}@keyframes helix-nav-rail-submenu-leave{0%{max-height:1000px;overflow:hidden}to{max-height:0;overflow:hidden}}.helix-nav-rail-submenu-enter{animation:helix-nav-rail-submenu-enter .45s cubic-bezier(.86,0,.07,1) forwards}.helix-nav-rail-submenu-leave{animation:helix-nav-rail-submenu-leave .45s cubic-bezier(.86,0,.07,1) forwards}.helix-nav-rail-link{position:relative;display:flex;align-items:center;gap:.85rem;padding:.625rem .75rem;margin:1px .65rem;border-radius:var(--content-border-radius);cursor:pointer;text-decoration:none;font-size:.95rem;font-weight:500;white-space:nowrap;outline:0 none;color:var(--helix-nav-text);transition:background-color var(--element-transition-duration),color var(--element-transition-duration)}.helix-nav-rail-link:hover{background-color:var(--helix-nav-hover-bg)}.helix-nav-rail-link.active{color:var(--helix-nav-active-text);background-color:var(--helix-nav-active-bg)}.helix-nav-rail-link.active .helix-nav-rail-icon{color:var(--helix-nav-accent)}.helix-nav-rail-link:focus{outline-offset:-1px;box-shadow:inset var(--focus-ring-shadow)}.helix-nav-rail-accent{position:absolute;left:-.5rem;top:50%;transform:translateY(-50%);width:3px;height:24px;border-radius:3px;background:var(--helix-nav-accent)}.helix-nav-rail-icon{flex:0 0 auto;font-size:1.15rem;transition:color var(--element-transition-duration)}.helix-nav-rail-label{overflow:hidden;text-overflow:ellipsis}.helix-nav-rail-chevron{margin-left:auto;font-size:.7rem;transition:transform var(--element-transition-duration)}.helix-nav-rail-chevron.helix-nav-rail-chevron-open{transform:rotate(90deg)}.helix-nav-rail-sublist{margin:0;padding:0;list-style-type:none;overflow:hidden;margin-left:1.5rem;border-left:1px solid var(--helix-nav-border)}.helix-nav-rail-sublist .helix-nav-rail-link{margin-left:.4rem;padding-block:.45rem;font-size:.9rem}:host(.helix-nav-rail-item-collapsed)>.helix-nav-rail-link{justify-content:center}.helix-nav-rail-flyout{position:fixed;z-index:1000;min-width:13rem;max-width:18rem;max-height:calc(100vh - 1rem);overflow-y:auto;padding:.35rem 0;border:1px solid var(--helix-nav-border);border-radius:var(--content-border-radius);background:var(--helix-surface-overlay, var(--helix-surface-chrome));box-shadow:0 8px 24px #00000029}.helix-nav-rail-flyout-title{padding:.5rem 1.15rem .3rem;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--helix-nav-text-muted)}.helix-nav-rail-flyout-list{margin:0;padding:0;list-style-type:none}\n"]
865
840
  }]
866
841
  }],
@@ -1007,7 +982,7 @@ var HelixNavRail = class HelixNavRail {
1007
982
  },
1008
983
  {
1009
984
  kind: "directive",
1010
- type: i1$3.NgClass,
985
+ type: i1$1.NgClass,
1011
986
  selector: "[ngClass]",
1012
987
  inputs: ["class", "ngClass"]
1013
988
  },
@@ -1998,7 +1973,7 @@ var HelixConfigurator = class HelixConfigurator {
1998
1973
  selector: "helix-configurator",
1999
1974
  host: { classAttribute: "hidden absolute top-13 right-0 w-72 p-4 bg-surface-0 dark:bg-surface-900 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]" },
2000
1975
  ngImport: i0,
2001
- template: "<div class=\"flex flex-col gap-4\">\n <div>\n <span class=\"text-sm text-muted-color font-semibold\">Primary</span>\n <div class=\"pt-2 flex gap-2 flex-wrap justify-start\">\n @for (primaryColor of primaryColors(); track primaryColor.name) {\n <button\n type=\"button\"\n [title]=\"primaryColor.name\"\n (click)=\"updateColors($event, 'primary', primaryColor)\"\n [ngClass]=\"{ 'outline outline-primary': primaryColor.name === activePrimaryColor() }\"\n class=\"cursor-pointer w-5 h-5 rounded-full flex shrink-0 items-center justify-center outline-offset-1 shadow\"\n [style]=\"{\n 'background-color':\n primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500'],\n }\"\n ></button>\n }\n </div>\n </div>\n <div>\n <span class=\"text-sm text-muted-color font-semibold\">Surface</span>\n <div class=\"pt-2 flex gap-2 flex-wrap justify-start\">\n @for (surface of surfaces; track surface.name) {\n <button\n type=\"button\"\n [title]=\"surface.name\"\n (click)=\"updateColors($event, 'surface', surface)\"\n class=\"cursor-pointer w-5 h-5 rounded-full flex shrink-0 items-center justify-center p-0 outline-offset-1\"\n [ngClass]=\"{\n 'outline outline-primary': selectedSurfaceColor()\n ? selectedSurfaceColor() === surface.name\n : store.darkTheme()\n ? surface.name === 'zinc'\n : surface.name === 'slate',\n }\"\n [style]=\"{ 'background-color': surface?.palette?.['500'] }\"\n ></button>\n }\n </div>\n </div>\n <div class=\"flex flex-col gap-2\">\n <span class=\"text-sm text-muted-color font-semibold\">Presets</span>\n <h-selectbutton\n [options]=\"presetOptions\"\n [ngModel]=\"selectedPreset()\"\n (ngModelChange)=\"onPresetChange($event)\"\n [allowEmpty]=\"false\"\n size=\"small\"\n />\n </div>\n @if (showMenuModeButton()) {\n <div class=\"flex flex-col gap-2\">\n <span class=\"text-sm text-muted-color font-semibold\">Menu Mode</span>\n <h-selectbutton\n [ngModel]=\"menuMode()\"\n (ngModelChange)=\"onMenuModeChange($event)\"\n [options]=\"menuModeOptions\"\n [allowEmpty]=\"false\"\n size=\"small\"\n />\n </div>\n }\n</div>\n",
1976
+ template: "<div class=\"flex flex-col gap-4\">\n <div>\n <span class=\"text-sm text-muted-color font-semibold\">Primary</span>\n <div class=\"pt-2 flex gap-2 flex-wrap justify-start\">\n @for (primaryColor of primaryColors(); track primaryColor.name) {\n <button\n type=\"button\"\n [title]=\"primaryColor.name\"\n (click)=\"updateColors($event, 'primary', primaryColor)\"\n [ngClass]=\"{ 'outline outline-primary': primaryColor.name === activePrimaryColor() }\"\n class=\"cursor-pointer w-5 h-5 rounded-full flex shrink-0 items-center justify-center outline-offset-1 shadow\"\n [style]=\"{\n 'background-color':\n primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500'],\n }\"\n ></button>\n }\n </div>\n </div>\n <div>\n <span class=\"text-sm text-muted-color font-semibold\">Surface</span>\n <div class=\"pt-2 flex gap-2 flex-wrap justify-start\">\n @for (surface of surfaces; track surface.name) {\n <button\n type=\"button\"\n [title]=\"surface.name\"\n (click)=\"updateColors($event, 'surface', surface)\"\n class=\"cursor-pointer w-5 h-5 rounded-full flex shrink-0 items-center justify-center p-0 outline-offset-1\"\n [ngClass]=\"{\n 'outline outline-primary': selectedSurfaceColor()\n ? selectedSurfaceColor() === surface.name\n : store.darkTheme()\n ? surface.name === 'zinc'\n : surface.name === 'slate',\n }\"\n [style]=\"{ 'background-color': surface?.palette?.['500'] }\"\n ></button>\n }\n </div>\n </div>\n <div class=\"flex flex-col gap-2\">\n <span id=\"helix-config-presets\" class=\"text-sm text-muted-color font-semibold\">Presets</span>\n <hx-select-button\n ariaLabelledby=\"helix-config-presets\"\n [options]=\"presetOptions\"\n [ngModel]=\"selectedPreset()\"\n (ngModelChange)=\"onPresetChange($event)\"\n [allowEmpty]=\"false\"\n size=\"small\"\n />\n </div>\n @if (showMenuModeButton()) {\n <div class=\"flex flex-col gap-2\">\n <span id=\"helix-config-menu-mode\" class=\"text-sm text-muted-color font-semibold\">Menu Mode</span>\n <hx-select-button\n ariaLabelledby=\"helix-config-menu-mode\"\n [ngModel]=\"menuMode()\"\n (ngModelChange)=\"onMenuModeChange($event)\"\n [options]=\"menuModeOptions\"\n [allowEmpty]=\"false\"\n size=\"small\"\n />\n </div>\n }\n</div>\n",
2002
1977
  styles: [""],
2003
1978
  dependencies: [
2004
1979
  {
@@ -2007,7 +1982,7 @@ var HelixConfigurator = class HelixConfigurator {
2007
1982
  },
2008
1983
  {
2009
1984
  kind: "directive",
2010
- type: i1$3.NgClass,
1985
+ type: i1$1.NgClass,
2011
1986
  selector: "[ngClass]",
2012
1987
  inputs: ["class", "ngClass"]
2013
1988
  },
@@ -2017,12 +1992,12 @@ var HelixConfigurator = class HelixConfigurator {
2017
1992
  },
2018
1993
  {
2019
1994
  kind: "directive",
2020
- type: i1$4.NgControlStatus,
1995
+ type: i1$2.NgControlStatus,
2021
1996
  selector: "[formControlName],[ngModel],[formControl]"
2022
1997
  },
2023
1998
  {
2024
1999
  kind: "directive",
2025
- type: i1$4.NgModel,
2000
+ type: i1$2.NgModel,
2026
2001
  selector: "[ngModel]:not([formControlName]):not([formControl])",
2027
2002
  inputs: [
2028
2003
  "name",
@@ -2033,31 +2008,26 @@ var HelixConfigurator = class HelixConfigurator {
2033
2008
  outputs: ["ngModelChange"],
2034
2009
  exportAs: ["ngModel"]
2035
2010
  },
2036
- {
2037
- kind: "ngmodule",
2038
- type: SelectButtonModule
2039
- },
2040
2011
  {
2041
2012
  kind: "component",
2042
- type: i3.SelectButton,
2043
- selector: "h-selectButton, h-selectbutton, h-select-button",
2013
+ type: HxSelectButton,
2014
+ selector: "hx-select-button",
2044
2015
  inputs: [
2045
2016
  "options",
2046
2017
  "optionLabel",
2047
2018
  "optionValue",
2048
2019
  "optionDisabled",
2049
- "unselectable",
2050
- "tabindex",
2051
2020
  "multiple",
2052
2021
  "allowEmpty",
2053
- "styleClass",
2054
- "ariaLabelledBy",
2055
- "dataKey",
2056
- "autofocus",
2057
2022
  "size",
2058
- "fluid"
2023
+ "fluid",
2024
+ "ariaLabel",
2025
+ "ariaLabelledby",
2026
+ "value",
2027
+ "disabled",
2028
+ "invalid"
2059
2029
  ],
2060
- outputs: ["onOptionClick", "onChange"]
2030
+ outputs: ["valueChange", "touch"]
2061
2031
  }
2062
2032
  ],
2063
2033
  changeDetection: i0.ChangeDetectionStrategy.Eager
@@ -2076,11 +2046,11 @@ i0.ɵɵngDeclareClassMetadata({
2076
2046
  imports: [
2077
2047
  CommonModule,
2078
2048
  FormsModule,
2079
- SelectButtonModule
2049
+ HxSelectButton
2080
2050
  ],
2081
2051
  changeDetection: ChangeDetectionStrategy.Eager,
2082
2052
  host: { class: "hidden absolute top-13 right-0 w-72 p-4 bg-surface-0 dark:bg-surface-900 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]" },
2083
- template: "<div class=\"flex flex-col gap-4\">\n <div>\n <span class=\"text-sm text-muted-color font-semibold\">Primary</span>\n <div class=\"pt-2 flex gap-2 flex-wrap justify-start\">\n @for (primaryColor of primaryColors(); track primaryColor.name) {\n <button\n type=\"button\"\n [title]=\"primaryColor.name\"\n (click)=\"updateColors($event, 'primary', primaryColor)\"\n [ngClass]=\"{ 'outline outline-primary': primaryColor.name === activePrimaryColor() }\"\n class=\"cursor-pointer w-5 h-5 rounded-full flex shrink-0 items-center justify-center outline-offset-1 shadow\"\n [style]=\"{\n 'background-color':\n primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500'],\n }\"\n ></button>\n }\n </div>\n </div>\n <div>\n <span class=\"text-sm text-muted-color font-semibold\">Surface</span>\n <div class=\"pt-2 flex gap-2 flex-wrap justify-start\">\n @for (surface of surfaces; track surface.name) {\n <button\n type=\"button\"\n [title]=\"surface.name\"\n (click)=\"updateColors($event, 'surface', surface)\"\n class=\"cursor-pointer w-5 h-5 rounded-full flex shrink-0 items-center justify-center p-0 outline-offset-1\"\n [ngClass]=\"{\n 'outline outline-primary': selectedSurfaceColor()\n ? selectedSurfaceColor() === surface.name\n : store.darkTheme()\n ? surface.name === 'zinc'\n : surface.name === 'slate',\n }\"\n [style]=\"{ 'background-color': surface?.palette?.['500'] }\"\n ></button>\n }\n </div>\n </div>\n <div class=\"flex flex-col gap-2\">\n <span class=\"text-sm text-muted-color font-semibold\">Presets</span>\n <h-selectbutton\n [options]=\"presetOptions\"\n [ngModel]=\"selectedPreset()\"\n (ngModelChange)=\"onPresetChange($event)\"\n [allowEmpty]=\"false\"\n size=\"small\"\n />\n </div>\n @if (showMenuModeButton()) {\n <div class=\"flex flex-col gap-2\">\n <span class=\"text-sm text-muted-color font-semibold\">Menu Mode</span>\n <h-selectbutton\n [ngModel]=\"menuMode()\"\n (ngModelChange)=\"onMenuModeChange($event)\"\n [options]=\"menuModeOptions\"\n [allowEmpty]=\"false\"\n size=\"small\"\n />\n </div>\n }\n</div>\n"
2053
+ template: "<div class=\"flex flex-col gap-4\">\n <div>\n <span class=\"text-sm text-muted-color font-semibold\">Primary</span>\n <div class=\"pt-2 flex gap-2 flex-wrap justify-start\">\n @for (primaryColor of primaryColors(); track primaryColor.name) {\n <button\n type=\"button\"\n [title]=\"primaryColor.name\"\n (click)=\"updateColors($event, 'primary', primaryColor)\"\n [ngClass]=\"{ 'outline outline-primary': primaryColor.name === activePrimaryColor() }\"\n class=\"cursor-pointer w-5 h-5 rounded-full flex shrink-0 items-center justify-center outline-offset-1 shadow\"\n [style]=\"{\n 'background-color':\n primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500'],\n }\"\n ></button>\n }\n </div>\n </div>\n <div>\n <span class=\"text-sm text-muted-color font-semibold\">Surface</span>\n <div class=\"pt-2 flex gap-2 flex-wrap justify-start\">\n @for (surface of surfaces; track surface.name) {\n <button\n type=\"button\"\n [title]=\"surface.name\"\n (click)=\"updateColors($event, 'surface', surface)\"\n class=\"cursor-pointer w-5 h-5 rounded-full flex shrink-0 items-center justify-center p-0 outline-offset-1\"\n [ngClass]=\"{\n 'outline outline-primary': selectedSurfaceColor()\n ? selectedSurfaceColor() === surface.name\n : store.darkTheme()\n ? surface.name === 'zinc'\n : surface.name === 'slate',\n }\"\n [style]=\"{ 'background-color': surface?.palette?.['500'] }\"\n ></button>\n }\n </div>\n </div>\n <div class=\"flex flex-col gap-2\">\n <span id=\"helix-config-presets\" class=\"text-sm text-muted-color font-semibold\">Presets</span>\n <hx-select-button\n ariaLabelledby=\"helix-config-presets\"\n [options]=\"presetOptions\"\n [ngModel]=\"selectedPreset()\"\n (ngModelChange)=\"onPresetChange($event)\"\n [allowEmpty]=\"false\"\n size=\"small\"\n />\n </div>\n @if (showMenuModeButton()) {\n <div class=\"flex flex-col gap-2\">\n <span id=\"helix-config-menu-mode\" class=\"text-sm text-muted-color font-semibold\">Menu Mode</span>\n <hx-select-button\n ariaLabelledby=\"helix-config-menu-mode\"\n [ngModel]=\"menuMode()\"\n (ngModelChange)=\"onMenuModeChange($event)\"\n [options]=\"menuModeOptions\"\n [allowEmpty]=\"false\"\n size=\"small\"\n />\n </div>\n }\n</div>\n"
2084
2054
  }]
2085
2055
  }]
2086
2056
  });
@@ -2128,7 +2098,7 @@ var HelixConfiguratorAction = class HelixConfiguratorAction {
2128
2098
  },
2129
2099
  {
2130
2100
  kind: "directive",
2131
- type: i1$2.StyleClass,
2101
+ type: i1.StyleClass,
2132
2102
  selector: "[hStyleClass]",
2133
2103
  inputs: [
2134
2104
  "hStyleClass",
@@ -2226,7 +2196,7 @@ var HelixDarkModeAction = class HelixDarkModeAction {
2226
2196
  type: CommonModule
2227
2197
  }, {
2228
2198
  kind: "directive",
2229
- type: i1$3.NgClass,
2199
+ type: i1$1.NgClass,
2230
2200
  selector: "[ngClass]",
2231
2201
  inputs: ["class", "ngClass"]
2232
2202
  }],
@@ -2350,7 +2320,7 @@ var HelixTopbar = class HelixTopbar {
2350
2320
  }
2351
2321
  },
2352
2322
  ngImport: i0,
2353
- template: "<div class=\"layout-topbar\">\n <div class=\"layout-topbar-start\">\n <button\n type=\"button\"\n class=\"layout-menu-button layout-topbar-action\"\n [class.layout-menu-button-mobile-only]=\"store.isStatic()\"\n aria-label=\"Toggle navigation\"\n (click)=\"store.onMenuToggle()\"\n >\n <i class=\"pi pi-bars\"></i>\n </button>\n @if (showBreadcrumbs()) {\n <h-breadcrumb [model]=\"effectiveBreadcrumbs()\" [home]=\"{ icon: 'pi pi-home', routerLink: '/' }\" />\n }\n </div>\n\n <div class=\"layout-topbar-end\">\n <div class=\"layout-config-menu\">\n @for (item of items(); track $index) {\n @switch (item.type) {\n @case ('darkmode') {\n <helix-dark-mode-action />\n }\n @case ('configurator') {\n <helix-configurator-action />\n }\n @case ('alert') {\n <helix-alert-action [count]=\"item.badgeCount ?? 0\" [alerts]=\"item.alerts\" />\n }\n @case ('action') {\n <button type=\"button\" class=\"layout-topbar-action\" (click)=\"item.command?.()\">\n <i [class]=\"item.icon ?? ''\"></i>\n </button>\n }\n }\n }\n </div>\n\n <button\n class=\"layout-topbar-menu-button layout-topbar-action\"\n hStyleClass=\"@next\"\n enterFromClass=\"hidden\"\n enterActiveClass=\"animate-scalein\"\n leaveToClass=\"hidden\"\n leaveActiveClass=\"animate-fadeout\"\n [hideOnOutsideClick]=\"true\"\n >\n <i class=\"pi pi-ellipsis-v\"></i>\n </button>\n\n <div class=\"layout-topbar-menu hidden lg:block\">\n <div class=\"layout-topbar-menu-content\">\n @for (action of topbarActions(); track action.icon) {\n <button type=\"button\" class=\"layout-topbar-action\" (click)=\"action.command?.()\">\n <i [class]=\"action.icon\"></i>\n <span>{{ action.label }}</span>\n </button>\n }\n <ng-content select=\"[helixTopbarEnd]\" />\n </div>\n </div>\n </div>\n</div>\n",
2323
+ template: "<div class=\"layout-topbar\">\n <div class=\"layout-topbar-start\">\n <button\n type=\"button\"\n class=\"layout-menu-button layout-topbar-action\"\n [class.layout-menu-button-mobile-only]=\"store.isStatic()\"\n aria-label=\"Toggle navigation\"\n (click)=\"store.onMenuToggle()\"\n >\n <i class=\"pi pi-bars\"></i>\n </button>\n @if (showBreadcrumbs()) {\n <hx-breadcrumb [model]=\"effectiveBreadcrumbs()\" [home]=\"{ icon: 'pi pi-home', routerLink: '/' }\" />\n }\n </div>\n\n <div class=\"layout-topbar-end\">\n <div class=\"layout-config-menu\">\n @for (item of items(); track $index) {\n @switch (item.type) {\n @case ('darkmode') {\n <helix-dark-mode-action />\n }\n @case ('configurator') {\n <helix-configurator-action />\n }\n @case ('alert') {\n <helix-alert-action [count]=\"item.badgeCount ?? 0\" [alerts]=\"item.alerts\" />\n }\n @case ('action') {\n <button type=\"button\" class=\"layout-topbar-action\" (click)=\"item.command?.()\">\n <i [class]=\"item.icon ?? ''\"></i>\n </button>\n }\n }\n }\n </div>\n\n <button\n class=\"layout-topbar-menu-button layout-topbar-action\"\n hStyleClass=\"@next\"\n enterFromClass=\"hidden\"\n enterActiveClass=\"animate-scalein\"\n leaveToClass=\"hidden\"\n leaveActiveClass=\"animate-fadeout\"\n [hideOnOutsideClick]=\"true\"\n >\n <i class=\"pi pi-ellipsis-v\"></i>\n </button>\n\n <div class=\"layout-topbar-menu hidden lg:block\">\n <div class=\"layout-topbar-menu-content\">\n @for (action of topbarActions(); track action.icon) {\n <button type=\"button\" class=\"layout-topbar-action\" (click)=\"action.command?.()\">\n <i [class]=\"action.icon\"></i>\n <span>{{ action.label }}</span>\n </button>\n }\n <ng-content select=\"[helixTopbarEnd]\" />\n </div>\n </div>\n </div>\n</div>\n",
2354
2324
  styles: [".layout-topbar{position:fixed;height:var(--helix-topbar-height, 4rem);z-index:997;left:0;top:0;width:100%;padding:0 2rem;background-color:var(--helix-surface-chrome);border-bottom:1px solid var(--helix-border);transition:left var(--layout-section-transition-duration),width var(--layout-section-transition-duration);display:flex;align-items:center;gap:.75rem}.layout-topbar .layout-topbar-start{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}.layout-topbar .layout-topbar-end{display:flex;align-items:center;gap:1rem;flex-shrink:0}.layout-topbar ::ng-deep .h-breadcrumb{background:inherit;color:inherit}.layout-topbar .layout-topbar-action{display:inline-flex;justify-content:center;align-items:center;border-radius:50%;width:2.5rem;height:2.5rem;color:var(--text-color);transition:background-color var(--element-transition-duration);cursor:pointer}.layout-topbar .layout-topbar-action:hover{background-color:var(--helix-surface-hover)}.layout-topbar .layout-topbar-action:focus-visible{outline-width:var(--focus-ring-width);outline-style:var(--focus-ring-style);outline-color:var(--focus-ring-color);outline-offset:var(--focus-ring-offset);box-shadow:var(--focus-ring-shadow);transition:box-shadow var(--transition-duration),outline-color var(--transition-duration)}.layout-topbar .layout-topbar-action i{font-size:1.25rem}.layout-topbar .layout-topbar-action span{font-size:1rem;display:none}.layout-topbar .layout-topbar-action.layout-topbar-action-highlight{background-color:var(--primary-color);color:var(--primary-contrast-color)}.layout-topbar .layout-menu-button{flex-shrink:0;margin-left:-.5rem}@media(min-width:992px){.layout-topbar .layout-menu-button-mobile-only{display:none}}.layout-topbar .layout-topbar-menu-button{display:none}.layout-topbar .layout-topbar-menu-content,.layout-topbar .layout-config-menu{display:flex;gap:1rem}@media(max-width:991px){.layout-topbar{padding:0 1rem}.layout-topbar .layout-menu-button{margin-left:0}.layout-topbar .layout-topbar-menu-button{display:inline-flex}.layout-topbar .layout-topbar-menu{position:absolute;background-color:var(--helix-surface-overlay);transform-origin:top;box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014;border-radius:var(--content-border-radius);padding:1rem;right:1rem;top:var(--helix-topbar-height, 4rem);min-width:15rem;border:1px solid var(--helix-border)}.layout-topbar .layout-topbar-menu .layout-topbar-menu-content{gap:.5rem}.layout-topbar .layout-topbar-menu .layout-topbar-action{display:flex;width:100%;height:auto;justify-content:flex-start;border-radius:var(--content-border-radius);padding:.5rem 1rem}.layout-topbar .layout-topbar-menu .layout-topbar-action i{font-size:1rem;margin-right:.5rem}.layout-topbar .layout-topbar-menu .layout-topbar-action span{font-weight:medium;display:block}.layout-topbar .layout-topbar-menu-content{flex-direction:column}}.config-panel .config-panel-label{font-size:.875rem;color:var(--text-secondary-color);font-weight:600;line-height:1}.config-panel .config-panel-colors>div{padding-top:.5rem;display:flex;gap:.5rem;flex-wrap:wrap;justify-content:space-between}.config-panel .config-panel-colors>div button{border:none;width:1.25rem;height:1.25rem;border-radius:50%;padding:0;cursor:pointer;outline-color:transparent;outline-width:2px;outline-style:solid;outline-offset:1px}.config-panel .config-panel-colors>div button.active-color{outline-color:var(--primary-color)}.config-panel .config-panel-settings{display:flex;flex-direction:column;gap:.5rem}\n"],
2355
2325
  dependencies: [
2356
2326
  {
@@ -2367,7 +2337,7 @@ var HelixTopbar = class HelixTopbar {
2367
2337
  },
2368
2338
  {
2369
2339
  kind: "directive",
2370
- type: i1$2.StyleClass,
2340
+ type: i1.StyleClass,
2371
2341
  selector: "[hStyleClass]",
2372
2342
  inputs: [
2373
2343
  "hStyleClass",
@@ -2402,16 +2372,13 @@ var HelixTopbar = class HelixTopbar {
2402
2372
  },
2403
2373
  {
2404
2374
  kind: "component",
2405
- type: Breadcrumb,
2406
- selector: "h-breadcrumb",
2375
+ type: HxBreadcrumb,
2376
+ selector: "hx-breadcrumb",
2407
2377
  inputs: [
2408
2378
  "model",
2409
- "style",
2410
- "styleClass",
2411
2379
  "home",
2412
- "homeAriaLabel"
2413
- ],
2414
- outputs: ["onItemClick"]
2380
+ "ariaLabel"
2381
+ ]
2415
2382
  }
2416
2383
  ],
2417
2384
  changeDetection: i0.ChangeDetectionStrategy.Eager
@@ -2434,10 +2401,10 @@ i0.ɵɵngDeclareClassMetadata({
2434
2401
  HelixAlertAction,
2435
2402
  HelixConfiguratorAction,
2436
2403
  HelixDarkModeAction,
2437
- Breadcrumb
2404
+ HxBreadcrumb
2438
2405
  ],
2439
2406
  changeDetection: ChangeDetectionStrategy.Eager,
2440
- template: "<div class=\"layout-topbar\">\n <div class=\"layout-topbar-start\">\n <button\n type=\"button\"\n class=\"layout-menu-button layout-topbar-action\"\n [class.layout-menu-button-mobile-only]=\"store.isStatic()\"\n aria-label=\"Toggle navigation\"\n (click)=\"store.onMenuToggle()\"\n >\n <i class=\"pi pi-bars\"></i>\n </button>\n @if (showBreadcrumbs()) {\n <h-breadcrumb [model]=\"effectiveBreadcrumbs()\" [home]=\"{ icon: 'pi pi-home', routerLink: '/' }\" />\n }\n </div>\n\n <div class=\"layout-topbar-end\">\n <div class=\"layout-config-menu\">\n @for (item of items(); track $index) {\n @switch (item.type) {\n @case ('darkmode') {\n <helix-dark-mode-action />\n }\n @case ('configurator') {\n <helix-configurator-action />\n }\n @case ('alert') {\n <helix-alert-action [count]=\"item.badgeCount ?? 0\" [alerts]=\"item.alerts\" />\n }\n @case ('action') {\n <button type=\"button\" class=\"layout-topbar-action\" (click)=\"item.command?.()\">\n <i [class]=\"item.icon ?? ''\"></i>\n </button>\n }\n }\n }\n </div>\n\n <button\n class=\"layout-topbar-menu-button layout-topbar-action\"\n hStyleClass=\"@next\"\n enterFromClass=\"hidden\"\n enterActiveClass=\"animate-scalein\"\n leaveToClass=\"hidden\"\n leaveActiveClass=\"animate-fadeout\"\n [hideOnOutsideClick]=\"true\"\n >\n <i class=\"pi pi-ellipsis-v\"></i>\n </button>\n\n <div class=\"layout-topbar-menu hidden lg:block\">\n <div class=\"layout-topbar-menu-content\">\n @for (action of topbarActions(); track action.icon) {\n <button type=\"button\" class=\"layout-topbar-action\" (click)=\"action.command?.()\">\n <i [class]=\"action.icon\"></i>\n <span>{{ action.label }}</span>\n </button>\n }\n <ng-content select=\"[helixTopbarEnd]\" />\n </div>\n </div>\n </div>\n</div>\n",
2407
+ template: "<div class=\"layout-topbar\">\n <div class=\"layout-topbar-start\">\n <button\n type=\"button\"\n class=\"layout-menu-button layout-topbar-action\"\n [class.layout-menu-button-mobile-only]=\"store.isStatic()\"\n aria-label=\"Toggle navigation\"\n (click)=\"store.onMenuToggle()\"\n >\n <i class=\"pi pi-bars\"></i>\n </button>\n @if (showBreadcrumbs()) {\n <hx-breadcrumb [model]=\"effectiveBreadcrumbs()\" [home]=\"{ icon: 'pi pi-home', routerLink: '/' }\" />\n }\n </div>\n\n <div class=\"layout-topbar-end\">\n <div class=\"layout-config-menu\">\n @for (item of items(); track $index) {\n @switch (item.type) {\n @case ('darkmode') {\n <helix-dark-mode-action />\n }\n @case ('configurator') {\n <helix-configurator-action />\n }\n @case ('alert') {\n <helix-alert-action [count]=\"item.badgeCount ?? 0\" [alerts]=\"item.alerts\" />\n }\n @case ('action') {\n <button type=\"button\" class=\"layout-topbar-action\" (click)=\"item.command?.()\">\n <i [class]=\"item.icon ?? ''\"></i>\n </button>\n }\n }\n }\n </div>\n\n <button\n class=\"layout-topbar-menu-button layout-topbar-action\"\n hStyleClass=\"@next\"\n enterFromClass=\"hidden\"\n enterActiveClass=\"animate-scalein\"\n leaveToClass=\"hidden\"\n leaveActiveClass=\"animate-fadeout\"\n [hideOnOutsideClick]=\"true\"\n >\n <i class=\"pi pi-ellipsis-v\"></i>\n </button>\n\n <div class=\"layout-topbar-menu hidden lg:block\">\n <div class=\"layout-topbar-menu-content\">\n @for (action of topbarActions(); track action.icon) {\n <button type=\"button\" class=\"layout-topbar-action\" (click)=\"action.command?.()\">\n <i [class]=\"action.icon\"></i>\n <span>{{ action.label }}</span>\n </button>\n }\n <ng-content select=\"[helixTopbarEnd]\" />\n </div>\n </div>\n </div>\n</div>\n",
2441
2408
  styles: [".layout-topbar{position:fixed;height:var(--helix-topbar-height, 4rem);z-index:997;left:0;top:0;width:100%;padding:0 2rem;background-color:var(--helix-surface-chrome);border-bottom:1px solid var(--helix-border);transition:left var(--layout-section-transition-duration),width var(--layout-section-transition-duration);display:flex;align-items:center;gap:.75rem}.layout-topbar .layout-topbar-start{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}.layout-topbar .layout-topbar-end{display:flex;align-items:center;gap:1rem;flex-shrink:0}.layout-topbar ::ng-deep .h-breadcrumb{background:inherit;color:inherit}.layout-topbar .layout-topbar-action{display:inline-flex;justify-content:center;align-items:center;border-radius:50%;width:2.5rem;height:2.5rem;color:var(--text-color);transition:background-color var(--element-transition-duration);cursor:pointer}.layout-topbar .layout-topbar-action:hover{background-color:var(--helix-surface-hover)}.layout-topbar .layout-topbar-action:focus-visible{outline-width:var(--focus-ring-width);outline-style:var(--focus-ring-style);outline-color:var(--focus-ring-color);outline-offset:var(--focus-ring-offset);box-shadow:var(--focus-ring-shadow);transition:box-shadow var(--transition-duration),outline-color var(--transition-duration)}.layout-topbar .layout-topbar-action i{font-size:1.25rem}.layout-topbar .layout-topbar-action span{font-size:1rem;display:none}.layout-topbar .layout-topbar-action.layout-topbar-action-highlight{background-color:var(--primary-color);color:var(--primary-contrast-color)}.layout-topbar .layout-menu-button{flex-shrink:0;margin-left:-.5rem}@media(min-width:992px){.layout-topbar .layout-menu-button-mobile-only{display:none}}.layout-topbar .layout-topbar-menu-button{display:none}.layout-topbar .layout-topbar-menu-content,.layout-topbar .layout-config-menu{display:flex;gap:1rem}@media(max-width:991px){.layout-topbar{padding:0 1rem}.layout-topbar .layout-menu-button{margin-left:0}.layout-topbar .layout-topbar-menu-button{display:inline-flex}.layout-topbar .layout-topbar-menu{position:absolute;background-color:var(--helix-surface-overlay);transform-origin:top;box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014;border-radius:var(--content-border-radius);padding:1rem;right:1rem;top:var(--helix-topbar-height, 4rem);min-width:15rem;border:1px solid var(--helix-border)}.layout-topbar .layout-topbar-menu .layout-topbar-menu-content{gap:.5rem}.layout-topbar .layout-topbar-menu .layout-topbar-action{display:flex;width:100%;height:auto;justify-content:flex-start;border-radius:var(--content-border-radius);padding:.5rem 1rem}.layout-topbar .layout-topbar-menu .layout-topbar-action i{font-size:1rem;margin-right:.5rem}.layout-topbar .layout-topbar-menu .layout-topbar-action span{font-weight:medium;display:block}.layout-topbar .layout-topbar-menu-content{flex-direction:column}}.config-panel .config-panel-label{font-size:.875rem;color:var(--text-secondary-color);font-weight:600;line-height:1}.config-panel .config-panel-colors>div{padding-top:.5rem;display:flex;gap:.5rem;flex-wrap:wrap;justify-content:space-between}.config-panel .config-panel-colors>div button{border:none;width:1.25rem;height:1.25rem;border-radius:50%;padding:0;cursor:pointer;outline-color:transparent;outline-width:2px;outline-style:solid;outline-offset:1px}.config-panel .config-panel-colors>div button.active-color{outline-color:var(--primary-color)}.config-panel .config-panel-settings{display:flex;flex-direction:column;gap:.5rem}\n"]
2442
2409
  }]
2443
2410
  }],
@@ -2658,7 +2625,7 @@ var HelixAppLayout = class HelixAppLayout {
2658
2625
  },
2659
2626
  {
2660
2627
  kind: "directive",
2661
- type: i1$3.NgClass,
2628
+ type: i1$1.NgClass,
2662
2629
  selector: "[ngClass]",
2663
2630
  inputs: ["class", "ngClass"]
2664
2631
  },
@@ -2905,7 +2872,7 @@ var HelixFloatingConfigurator = class HelixFloatingConfigurator {
2905
2872
  },
2906
2873
  {
2907
2874
  kind: "directive",
2908
- type: i1$3.NgClass,
2875
+ type: i1$1.NgClass,
2909
2876
  selector: "[ngClass]",
2910
2877
  inputs: ["class", "ngClass"]
2911
2878
  },
@@ -2931,7 +2898,7 @@ var HelixFloatingConfigurator = class HelixFloatingConfigurator {
2931
2898
  },
2932
2899
  {
2933
2900
  kind: "directive",
2934
- type: i1$2.StyleClass,
2901
+ type: i1.StyleClass,
2935
2902
  selector: "[hStyleClass]",
2936
2903
  inputs: [
2937
2904
  "hStyleClass",
@@ -3159,7 +3126,7 @@ var HelixMobileMenuAction = class HelixMobileMenuAction {
3159
3126
  type: StyleClassModule
3160
3127
  }, {
3161
3128
  kind: "directive",
3162
- type: i1$2.StyleClass,
3129
+ type: i1.StyleClass,
3163
3130
  selector: "[hStyleClass]",
3164
3131
  inputs: [
3165
3132
  "hStyleClass",
@@ -3646,7 +3613,7 @@ var HelixLogin = class HelixLogin {
3646
3613
  forgotPassword: "forgotPassword"
3647
3614
  },
3648
3615
  ngImport: i0,
3649
- template: "<helix-floating-configurator />\n<div\n class=\"bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-screen overflow-hidden\"\n>\n <div class=\"flex flex-col items-center justify-center\">\n <div\n style=\"\n border-radius: 56px;\n padding: 0.3rem;\n background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%);\n \"\n >\n <div\n class=\"w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20\"\n style=\"border-radius: 53px\"\n >\n <div class=\"text-center mb-8\">\n <svg\n viewBox=\"0 0 54 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"mb-8 w-16 shrink-0 mx-auto\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M17.1637 19.2467C17.1566 19.4033 17.1529 19.561 17.1529 19.7194C17.1529 25.3503 21.7203 29.915 27.3546 29.915C32.9887 29.915 37.5561 25.3503 37.5561 19.7194C37.5561 19.5572 37.5524 19.3959 37.5449 19.2355C38.5617 19.0801 39.5759 18.9013 40.5867 18.6994L40.6926 18.6782C40.7191 19.0218 40.7326 19.369 40.7326 19.7194C40.7326 27.1036 34.743 33.0896 27.3546 33.0896C19.966 33.0896 13.9765 27.1036 13.9765 19.7194C13.9765 19.374 13.9896 19.0316 14.0154 18.6927L14.0486 18.6994C15.0837 18.9062 16.1223 19.0886 17.1637 19.2467ZM33.3284 11.4538C31.6493 10.2396 29.5855 9.52381 27.3546 9.52381C25.1195 9.52381 23.0524 10.2421 21.3717 11.4603C20.0078 11.3232 18.6475 11.1387 17.2933 10.907C19.7453 8.11308 23.3438 6.34921 27.3546 6.34921C31.36 6.34921 34.9543 8.10844 37.4061 10.896C36.0521 11.1292 34.692 11.3152 33.3284 11.4538ZM43.826 18.0518C43.881 18.6003 43.9091 19.1566 43.9091 19.7194C43.9091 28.8568 36.4973 36.2642 27.3546 36.2642C18.2117 36.2642 10.8 28.8568 10.8 19.7194C10.8 19.1615 10.8276 18.61 10.8816 18.0663L7.75383 17.4411C7.66775 18.1886 7.62354 18.9488 7.62354 19.7194C7.62354 30.6102 16.4574 39.4388 27.3546 39.4388C38.2517 39.4388 47.0855 30.6102 47.0855 19.7194C47.0855 18.9439 47.0407 18.1789 46.9536 17.4267L43.826 18.0518ZM44.2613 9.54743L40.9084 10.2176C37.9134 5.95821 32.9593 3.1746 27.3546 3.1746C21.7442 3.1746 16.7856 5.96385 13.7915 10.2305L10.4399 9.56057C13.892 3.83178 20.1756 0 27.3546 0C34.5281 0 40.8075 3.82591 44.2613 9.54743Z\"\n fill=\"var(--primary-color)\"\n />\n <mask\n id=\"mask0_1413_1551\"\n style=\"mask-type: alpha\"\n maskUnits=\"userSpaceOnUse\"\n x=\"0\"\n y=\"8\"\n width=\"54\"\n height=\"11\"\n >\n <path\n d=\"M27 18.3652C10.5114 19.1944 0 8.88892 0 8.88892C0 8.88892 16.5176 14.5866 27 14.5866C37.4824 14.5866 54 8.88892 54 8.88892C54 8.88892 43.4886 17.5361 27 18.3652Z\"\n fill=\"var(--primary-color)\"\n />\n </mask>\n <g mask=\"url(#mask0_1413_1551)\">\n <path\n d=\"M-4.673e-05 8.88887L3.73084 -1.91434L-8.00806 17.0473L-4.673e-05 8.88887ZM27 18.3652L26.4253 6.95109L27 18.3652ZM54 8.88887L61.2673 17.7127L50.2691 -1.91434L54 8.88887ZM-4.673e-05 8.88887C-8.00806 17.0473 -8.00469 17.0505 -8.00132 17.0538C-8.00018 17.055 -7.99675 17.0583 -7.9944 17.0607C-7.98963 17.0653 -7.98474 17.0701 -7.97966 17.075C-7.96949 17.0849 -7.95863 17.0955 -7.94707 17.1066C-7.92401 17.129 -7.89809 17.1539 -7.86944 17.1812C-7.8122 17.236 -7.74377 17.3005 -7.66436 17.3743C-7.50567 17.5218 -7.30269 17.7063 -7.05645 17.9221C-6.56467 18.3532 -5.89662 18.9125 -5.06089 19.5534C-3.39603 20.83 -1.02575 22.4605 1.98012 24.0457C7.97874 27.2091 16.7723 30.3226 27.5746 29.7793L26.4253 6.95109C20.7391 7.23699 16.0326 5.61231 12.6534 3.83024C10.9703 2.94267 9.68222 2.04866 8.86091 1.41888C8.45356 1.10653 8.17155 0.867278 8.0241 0.738027C7.95072 0.673671 7.91178 0.637576 7.90841 0.634492C7.90682 0.63298 7.91419 0.639805 7.93071 0.65557C7.93897 0.663455 7.94952 0.673589 7.96235 0.686039C7.96883 0.692262 7.97582 0.699075 7.98338 0.706471C7.98719 0.710167 7.99113 0.714014 7.99526 0.718014C7.99729 0.720008 8.00047 0.723119 8.00148 0.724116C8.00466 0.727265 8.00796 0.730446 -4.673e-05 8.88887ZM27.5746 29.7793C37.6904 29.2706 45.9416 26.3684 51.6602 23.6054C54.5296 22.2191 56.8064 20.8465 58.4186 19.7784C59.2265 19.2431 59.873 18.7805 60.3494 18.4257C60.5878 18.2482 60.7841 18.0971 60.9374 17.977C61.014 17.9169 61.0799 17.8645 61.1349 17.8203C61.1624 17.7981 61.1872 17.7781 61.2093 17.7602C61.2203 17.7512 61.2307 17.7427 61.2403 17.7348C61.2452 17.7308 61.2499 17.727 61.2544 17.7233C61.2566 17.7215 61.2598 17.7188 61.261 17.7179C61.2642 17.7153 61.2673 17.7127 54 8.88887C46.7326 0.0650536 46.7357 0.0625219 46.7387 0.0600241C46.7397 0.0592345 46.7427 0.0567658 46.7446 0.0551857C46.7485 0.0520238 46.7521 0.0489887 46.7557 0.0460799C46.7628 0.0402623 46.7694 0.0349487 46.7753 0.0301318C46.7871 0.0204986 46.7966 0.0128495 46.8037 0.00712562C46.818 -0.00431848 46.8228 -0.00808311 46.8184 -0.00463784C46.8096 0.00228345 46.764 0.0378652 46.6828 0.0983779C46.5199 0.219675 46.2165 0.439161 45.7812 0.727519C44.9072 1.30663 43.5257 2.14765 41.7061 3.02677C38.0469 4.79468 32.7981 6.63058 26.4253 6.95109L27.5746 29.7793ZM54 8.88887C50.2691 -1.91433 50.27 -1.91467 50.271 -1.91498C50.2712 -1.91506 50.272 -1.91535 50.2724 -1.9155C50.2733 -1.91581 50.274 -1.91602 50.2743 -1.91616C50.2752 -1.91643 50.275 -1.91636 50.2738 -1.91595C50.2714 -1.91515 50.2652 -1.91302 50.2552 -1.9096C50.2351 -1.90276 50.1999 -1.89078 50.1503 -1.874C50.0509 -1.84043 49.8938 -1.78773 49.6844 -1.71863C49.2652 -1.58031 48.6387 -1.377 47.8481 -1.13035C46.2609 -0.635237 44.0427 0.0249875 41.5325 0.6823C36.215 2.07471 30.6736 3.15796 27 3.15796V26.0151C33.8087 26.0151 41.7672 24.2495 47.3292 22.7931C50.2586 22.026 52.825 21.2618 54.6625 20.6886C55.5842 20.4011 56.33 20.1593 56.8551 19.986C57.1178 19.8993 57.3258 19.8296 57.4735 19.7797C57.5474 19.7548 57.6062 19.7348 57.6493 19.72C57.6709 19.7127 57.6885 19.7066 57.7021 19.7019C57.7089 19.6996 57.7147 19.6976 57.7195 19.696C57.7219 19.6952 57.7241 19.6944 57.726 19.6938C57.7269 19.6934 57.7281 19.693 57.7286 19.6929C57.7298 19.6924 57.7309 19.692 54 8.88887ZM27 3.15796C23.3263 3.15796 17.7849 2.07471 12.4674 0.6823C9.95717 0.0249875 7.73904 -0.635237 6.15184 -1.13035C5.36118 -1.377 4.73467 -1.58031 4.3155 -1.71863C4.10609 -1.78773 3.94899 -1.84043 3.84961 -1.874C3.79994 -1.89078 3.76474 -1.90276 3.74471 -1.9096C3.73469 -1.91302 3.72848 -1.91515 3.72613 -1.91595C3.72496 -1.91636 3.72476 -1.91643 3.72554 -1.91616C3.72593 -1.91602 3.72657 -1.91581 3.72745 -1.9155C3.72789 -1.91535 3.72874 -1.91506 3.72896 -1.91498C3.72987 -1.91467 3.73084 -1.91433 -4.673e-05 8.88887C-3.73093 19.692 -3.72983 19.6924 -3.72868 19.6929C-3.72821 19.693 -3.72698 19.6934 -3.72603 19.6938C-3.72415 19.6944 -3.72201 19.6952 -3.71961 19.696C-3.71482 19.6976 -3.70901 19.6996 -3.7022 19.7019C-3.68858 19.7066 -3.67095 19.7127 -3.6494 19.72C-3.60629 19.7348 -3.54745 19.7548 -3.47359 19.7797C-3.32589 19.8296 -3.11788 19.8993 -2.85516 19.986C-2.33008 20.1593 -1.58425 20.4011 -0.662589 20.6886C1.17485 21.2618 3.74125 22.026 6.67073 22.7931C12.2327 24.2495 20.1913 26.0151 27 26.0151V3.15796Z\"\n fill=\"var(--primary-color)\"\n />\n </g>\n </svg>\n <div class=\"text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4\">\n {{ title() }}\n </div>\n <span class=\"text-muted-color font-medium\">{{ subtitle() }}</span>\n </div>\n\n <div>\n <label\n for=\"email1\"\n class=\"block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2\"\n >Email</label\n >\n <input\n hx-input\n id=\"email1\"\n type=\"text\"\n placeholder=\"Email address\"\n class=\"w-full md:w-120 mb-8\"\n [(ngModel)]=\"email\"\n />\n\n <label\n for=\"password1\"\n class=\"block text-surface-900 dark:text-surface-0 font-medium text-xl mb-2\"\n >Password</label\n >\n <h-password\n id=\"password1\"\n [(ngModel)]=\"password\"\n placeholder=\"Password\"\n [toggleMask]=\"true\"\n styleClass=\"mb-4\"\n [fluid]=\"true\"\n [feedback]=\"false\"\n ></h-password>\n\n <div class=\"flex items-center justify-between mt-2 mb-8 gap-8\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\" hx-checkbox [(ngModel)]=\"checked\" id=\"rememberme1\" class=\"mr-2\" />\n <label for=\"rememberme1\">Remember me</label>\n </div>\n <span\n class=\"font-medium no-underline ml-2 text-right cursor-pointer text-primary\"\n (click)=\"onForgotPassword()\"\n >{{ forgotPasswordLabel() }}</span\n >\n </div>\n <button hx-button type=\"button\" fluid (click)=\"onSubmit()\">{{ submitLabel() }}</button>\n </div>\n </div>\n </div>\n </div>\n</div>\n",
3616
+ template: "<helix-floating-configurator />\n<div\n class=\"bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-screen overflow-hidden\"\n>\n <div class=\"flex flex-col items-center justify-center\">\n <div\n style=\"\n border-radius: 56px;\n padding: 0.3rem;\n background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%);\n \"\n >\n <div\n class=\"w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20\"\n style=\"border-radius: 53px\"\n >\n <div class=\"text-center mb-8\">\n <svg\n viewBox=\"0 0 54 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"mb-8 w-16 shrink-0 mx-auto\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M17.1637 19.2467C17.1566 19.4033 17.1529 19.561 17.1529 19.7194C17.1529 25.3503 21.7203 29.915 27.3546 29.915C32.9887 29.915 37.5561 25.3503 37.5561 19.7194C37.5561 19.5572 37.5524 19.3959 37.5449 19.2355C38.5617 19.0801 39.5759 18.9013 40.5867 18.6994L40.6926 18.6782C40.7191 19.0218 40.7326 19.369 40.7326 19.7194C40.7326 27.1036 34.743 33.0896 27.3546 33.0896C19.966 33.0896 13.9765 27.1036 13.9765 19.7194C13.9765 19.374 13.9896 19.0316 14.0154 18.6927L14.0486 18.6994C15.0837 18.9062 16.1223 19.0886 17.1637 19.2467ZM33.3284 11.4538C31.6493 10.2396 29.5855 9.52381 27.3546 9.52381C25.1195 9.52381 23.0524 10.2421 21.3717 11.4603C20.0078 11.3232 18.6475 11.1387 17.2933 10.907C19.7453 8.11308 23.3438 6.34921 27.3546 6.34921C31.36 6.34921 34.9543 8.10844 37.4061 10.896C36.0521 11.1292 34.692 11.3152 33.3284 11.4538ZM43.826 18.0518C43.881 18.6003 43.9091 19.1566 43.9091 19.7194C43.9091 28.8568 36.4973 36.2642 27.3546 36.2642C18.2117 36.2642 10.8 28.8568 10.8 19.7194C10.8 19.1615 10.8276 18.61 10.8816 18.0663L7.75383 17.4411C7.66775 18.1886 7.62354 18.9488 7.62354 19.7194C7.62354 30.6102 16.4574 39.4388 27.3546 39.4388C38.2517 39.4388 47.0855 30.6102 47.0855 19.7194C47.0855 18.9439 47.0407 18.1789 46.9536 17.4267L43.826 18.0518ZM44.2613 9.54743L40.9084 10.2176C37.9134 5.95821 32.9593 3.1746 27.3546 3.1746C21.7442 3.1746 16.7856 5.96385 13.7915 10.2305L10.4399 9.56057C13.892 3.83178 20.1756 0 27.3546 0C34.5281 0 40.8075 3.82591 44.2613 9.54743Z\"\n fill=\"var(--primary-color)\"\n />\n <mask\n id=\"mask0_1413_1551\"\n style=\"mask-type: alpha\"\n maskUnits=\"userSpaceOnUse\"\n x=\"0\"\n y=\"8\"\n width=\"54\"\n height=\"11\"\n >\n <path\n d=\"M27 18.3652C10.5114 19.1944 0 8.88892 0 8.88892C0 8.88892 16.5176 14.5866 27 14.5866C37.4824 14.5866 54 8.88892 54 8.88892C54 8.88892 43.4886 17.5361 27 18.3652Z\"\n fill=\"var(--primary-color)\"\n />\n </mask>\n <g mask=\"url(#mask0_1413_1551)\">\n <path\n d=\"M-4.673e-05 8.88887L3.73084 -1.91434L-8.00806 17.0473L-4.673e-05 8.88887ZM27 18.3652L26.4253 6.95109L27 18.3652ZM54 8.88887L61.2673 17.7127L50.2691 -1.91434L54 8.88887ZM-4.673e-05 8.88887C-8.00806 17.0473 -8.00469 17.0505 -8.00132 17.0538C-8.00018 17.055 -7.99675 17.0583 -7.9944 17.0607C-7.98963 17.0653 -7.98474 17.0701 -7.97966 17.075C-7.96949 17.0849 -7.95863 17.0955 -7.94707 17.1066C-7.92401 17.129 -7.89809 17.1539 -7.86944 17.1812C-7.8122 17.236 -7.74377 17.3005 -7.66436 17.3743C-7.50567 17.5218 -7.30269 17.7063 -7.05645 17.9221C-6.56467 18.3532 -5.89662 18.9125 -5.06089 19.5534C-3.39603 20.83 -1.02575 22.4605 1.98012 24.0457C7.97874 27.2091 16.7723 30.3226 27.5746 29.7793L26.4253 6.95109C20.7391 7.23699 16.0326 5.61231 12.6534 3.83024C10.9703 2.94267 9.68222 2.04866 8.86091 1.41888C8.45356 1.10653 8.17155 0.867278 8.0241 0.738027C7.95072 0.673671 7.91178 0.637576 7.90841 0.634492C7.90682 0.63298 7.91419 0.639805 7.93071 0.65557C7.93897 0.663455 7.94952 0.673589 7.96235 0.686039C7.96883 0.692262 7.97582 0.699075 7.98338 0.706471C7.98719 0.710167 7.99113 0.714014 7.99526 0.718014C7.99729 0.720008 8.00047 0.723119 8.00148 0.724116C8.00466 0.727265 8.00796 0.730446 -4.673e-05 8.88887ZM27.5746 29.7793C37.6904 29.2706 45.9416 26.3684 51.6602 23.6054C54.5296 22.2191 56.8064 20.8465 58.4186 19.7784C59.2265 19.2431 59.873 18.7805 60.3494 18.4257C60.5878 18.2482 60.7841 18.0971 60.9374 17.977C61.014 17.9169 61.0799 17.8645 61.1349 17.8203C61.1624 17.7981 61.1872 17.7781 61.2093 17.7602C61.2203 17.7512 61.2307 17.7427 61.2403 17.7348C61.2452 17.7308 61.2499 17.727 61.2544 17.7233C61.2566 17.7215 61.2598 17.7188 61.261 17.7179C61.2642 17.7153 61.2673 17.7127 54 8.88887C46.7326 0.0650536 46.7357 0.0625219 46.7387 0.0600241C46.7397 0.0592345 46.7427 0.0567658 46.7446 0.0551857C46.7485 0.0520238 46.7521 0.0489887 46.7557 0.0460799C46.7628 0.0402623 46.7694 0.0349487 46.7753 0.0301318C46.7871 0.0204986 46.7966 0.0128495 46.8037 0.00712562C46.818 -0.00431848 46.8228 -0.00808311 46.8184 -0.00463784C46.8096 0.00228345 46.764 0.0378652 46.6828 0.0983779C46.5199 0.219675 46.2165 0.439161 45.7812 0.727519C44.9072 1.30663 43.5257 2.14765 41.7061 3.02677C38.0469 4.79468 32.7981 6.63058 26.4253 6.95109L27.5746 29.7793ZM54 8.88887C50.2691 -1.91433 50.27 -1.91467 50.271 -1.91498C50.2712 -1.91506 50.272 -1.91535 50.2724 -1.9155C50.2733 -1.91581 50.274 -1.91602 50.2743 -1.91616C50.2752 -1.91643 50.275 -1.91636 50.2738 -1.91595C50.2714 -1.91515 50.2652 -1.91302 50.2552 -1.9096C50.2351 -1.90276 50.1999 -1.89078 50.1503 -1.874C50.0509 -1.84043 49.8938 -1.78773 49.6844 -1.71863C49.2652 -1.58031 48.6387 -1.377 47.8481 -1.13035C46.2609 -0.635237 44.0427 0.0249875 41.5325 0.6823C36.215 2.07471 30.6736 3.15796 27 3.15796V26.0151C33.8087 26.0151 41.7672 24.2495 47.3292 22.7931C50.2586 22.026 52.825 21.2618 54.6625 20.6886C55.5842 20.4011 56.33 20.1593 56.8551 19.986C57.1178 19.8993 57.3258 19.8296 57.4735 19.7797C57.5474 19.7548 57.6062 19.7348 57.6493 19.72C57.6709 19.7127 57.6885 19.7066 57.7021 19.7019C57.7089 19.6996 57.7147 19.6976 57.7195 19.696C57.7219 19.6952 57.7241 19.6944 57.726 19.6938C57.7269 19.6934 57.7281 19.693 57.7286 19.6929C57.7298 19.6924 57.7309 19.692 54 8.88887ZM27 3.15796C23.3263 3.15796 17.7849 2.07471 12.4674 0.6823C9.95717 0.0249875 7.73904 -0.635237 6.15184 -1.13035C5.36118 -1.377 4.73467 -1.58031 4.3155 -1.71863C4.10609 -1.78773 3.94899 -1.84043 3.84961 -1.874C3.79994 -1.89078 3.76474 -1.90276 3.74471 -1.9096C3.73469 -1.91302 3.72848 -1.91515 3.72613 -1.91595C3.72496 -1.91636 3.72476 -1.91643 3.72554 -1.91616C3.72593 -1.91602 3.72657 -1.91581 3.72745 -1.9155C3.72789 -1.91535 3.72874 -1.91506 3.72896 -1.91498C3.72987 -1.91467 3.73084 -1.91433 -4.673e-05 8.88887C-3.73093 19.692 -3.72983 19.6924 -3.72868 19.6929C-3.72821 19.693 -3.72698 19.6934 -3.72603 19.6938C-3.72415 19.6944 -3.72201 19.6952 -3.71961 19.696C-3.71482 19.6976 -3.70901 19.6996 -3.7022 19.7019C-3.68858 19.7066 -3.67095 19.7127 -3.6494 19.72C-3.60629 19.7348 -3.54745 19.7548 -3.47359 19.7797C-3.32589 19.8296 -3.11788 19.8993 -2.85516 19.986C-2.33008 20.1593 -1.58425 20.4011 -0.662589 20.6886C1.17485 21.2618 3.74125 22.026 6.67073 22.7931C12.2327 24.2495 20.1913 26.0151 27 26.0151V3.15796Z\"\n fill=\"var(--primary-color)\"\n />\n </g>\n </svg>\n <div class=\"text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4\">\n {{ title() }}\n </div>\n <span class=\"text-muted-color font-medium\">{{ subtitle() }}</span>\n </div>\n\n <div>\n <label\n for=\"email1\"\n class=\"block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2\"\n >Email</label\n >\n <input\n hx-input\n id=\"email1\"\n type=\"text\"\n placeholder=\"Email address\"\n class=\"w-full md:w-120 mb-8\"\n [(ngModel)]=\"email\"\n />\n\n <label\n for=\"password1\"\n class=\"block text-surface-900 dark:text-surface-0 font-medium text-xl mb-2\"\n >Password</label\n >\n <hx-password\n inputId=\"password1\"\n [(ngModel)]=\"password\"\n placeholder=\"Password\"\n toggleMask\n fluid\n class=\"mb-4\"\n />\n\n <div class=\"flex items-center justify-between mt-2 mb-8 gap-8\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\" hx-checkbox [(ngModel)]=\"checked\" id=\"rememberme1\" class=\"mr-2\" />\n <label for=\"rememberme1\">Remember me</label>\n </div>\n <span\n class=\"font-medium no-underline ml-2 text-right cursor-pointer text-primary\"\n (click)=\"onForgotPassword()\"\n >{{ forgotPasswordLabel() }}</span\n >\n </div>\n <button hx-button type=\"button\" fluid (click)=\"onSubmit()\">{{ submitLabel() }}</button>\n </div>\n </div>\n </div>\n </div>\n</div>\n",
3650
3617
  styles: [""],
3651
3618
  dependencies: [
3652
3619
  {
@@ -3683,47 +3650,27 @@ var HelixLogin = class HelixLogin {
3683
3650
  ],
3684
3651
  exportAs: ["hx-input"]
3685
3652
  },
3686
- {
3687
- kind: "ngmodule",
3688
- type: PasswordModule
3689
- },
3690
3653
  {
3691
3654
  kind: "component",
3692
- type: i1$1.Password,
3693
- selector: "h-password",
3655
+ type: HxPassword,
3656
+ selector: "hx-password",
3694
3657
  inputs: [
3695
- "ariaLabel",
3696
- "ariaLabelledBy",
3697
- "label",
3698
- "promptLabel",
3699
- "mediumRegex",
3700
- "strongRegex",
3701
- "weakLabel",
3702
- "mediumLabel",
3703
- "maxLength",
3704
- "strongLabel",
3658
+ "placeholder",
3705
3659
  "inputId",
3706
- "feedback",
3707
- "toggleMask",
3708
- "inputStyleClass",
3709
- "styleClass",
3710
- "inputStyle",
3711
- "showTransitionOptions",
3712
- "hideTransitionOptions",
3660
+ "ariaLabel",
3661
+ "ariaLabelledby",
3713
3662
  "autocomplete",
3714
- "placeholder",
3715
- "showClear",
3716
- "autofocus",
3717
- "tabindex",
3718
- "appendTo",
3719
- "motionOptions",
3720
- "overlayOptions"
3663
+ "size",
3664
+ "variant",
3665
+ "fluid",
3666
+ "toggleMask",
3667
+ "showLabel",
3668
+ "hideLabel",
3669
+ "value",
3670
+ "disabled",
3671
+ "invalid"
3721
3672
  ],
3722
- outputs: [
3723
- "onFocus",
3724
- "onBlur",
3725
- "onClear"
3726
- ]
3673
+ outputs: ["valueChange", "touch"]
3727
3674
  },
3728
3675
  {
3729
3676
  kind: "ngmodule",
@@ -3731,22 +3678,22 @@ var HelixLogin = class HelixLogin {
3731
3678
  },
3732
3679
  {
3733
3680
  kind: "directive",
3734
- type: i1$4.DefaultValueAccessor,
3681
+ type: i1$2.DefaultValueAccessor,
3735
3682
  selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
3736
3683
  },
3737
3684
  {
3738
3685
  kind: "directive",
3739
- type: i1$4.CheckboxControlValueAccessor,
3686
+ type: i1$2.CheckboxControlValueAccessor,
3740
3687
  selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]"
3741
3688
  },
3742
3689
  {
3743
3690
  kind: "directive",
3744
- type: i1$4.NgControlStatus,
3691
+ type: i1$2.NgControlStatus,
3745
3692
  selector: "[formControlName],[ngModel],[formControl]"
3746
3693
  },
3747
3694
  {
3748
3695
  kind: "directive",
3749
- type: i1$4.NgModel,
3696
+ type: i1$2.NgModel,
3750
3697
  selector: "[ngModel]:not([formControlName]):not([formControl])",
3751
3698
  inputs: [
3752
3699
  "name",
@@ -3793,14 +3740,14 @@ i0.ɵɵngDeclareClassMetadata({
3793
3740
  HxButton,
3794
3741
  HxCheckbox,
3795
3742
  HxInput,
3796
- PasswordModule,
3743
+ HxPassword,
3797
3744
  FormsModule,
3798
3745
  RouterModule,
3799
3746
  RippleModule,
3800
3747
  HelixFloatingConfigurator
3801
3748
  ],
3802
3749
  changeDetection: ChangeDetectionStrategy.Eager,
3803
- template: "<helix-floating-configurator />\n<div\n class=\"bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-screen overflow-hidden\"\n>\n <div class=\"flex flex-col items-center justify-center\">\n <div\n style=\"\n border-radius: 56px;\n padding: 0.3rem;\n background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%);\n \"\n >\n <div\n class=\"w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20\"\n style=\"border-radius: 53px\"\n >\n <div class=\"text-center mb-8\">\n <svg\n viewBox=\"0 0 54 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"mb-8 w-16 shrink-0 mx-auto\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M17.1637 19.2467C17.1566 19.4033 17.1529 19.561 17.1529 19.7194C17.1529 25.3503 21.7203 29.915 27.3546 29.915C32.9887 29.915 37.5561 25.3503 37.5561 19.7194C37.5561 19.5572 37.5524 19.3959 37.5449 19.2355C38.5617 19.0801 39.5759 18.9013 40.5867 18.6994L40.6926 18.6782C40.7191 19.0218 40.7326 19.369 40.7326 19.7194C40.7326 27.1036 34.743 33.0896 27.3546 33.0896C19.966 33.0896 13.9765 27.1036 13.9765 19.7194C13.9765 19.374 13.9896 19.0316 14.0154 18.6927L14.0486 18.6994C15.0837 18.9062 16.1223 19.0886 17.1637 19.2467ZM33.3284 11.4538C31.6493 10.2396 29.5855 9.52381 27.3546 9.52381C25.1195 9.52381 23.0524 10.2421 21.3717 11.4603C20.0078 11.3232 18.6475 11.1387 17.2933 10.907C19.7453 8.11308 23.3438 6.34921 27.3546 6.34921C31.36 6.34921 34.9543 8.10844 37.4061 10.896C36.0521 11.1292 34.692 11.3152 33.3284 11.4538ZM43.826 18.0518C43.881 18.6003 43.9091 19.1566 43.9091 19.7194C43.9091 28.8568 36.4973 36.2642 27.3546 36.2642C18.2117 36.2642 10.8 28.8568 10.8 19.7194C10.8 19.1615 10.8276 18.61 10.8816 18.0663L7.75383 17.4411C7.66775 18.1886 7.62354 18.9488 7.62354 19.7194C7.62354 30.6102 16.4574 39.4388 27.3546 39.4388C38.2517 39.4388 47.0855 30.6102 47.0855 19.7194C47.0855 18.9439 47.0407 18.1789 46.9536 17.4267L43.826 18.0518ZM44.2613 9.54743L40.9084 10.2176C37.9134 5.95821 32.9593 3.1746 27.3546 3.1746C21.7442 3.1746 16.7856 5.96385 13.7915 10.2305L10.4399 9.56057C13.892 3.83178 20.1756 0 27.3546 0C34.5281 0 40.8075 3.82591 44.2613 9.54743Z\"\n fill=\"var(--primary-color)\"\n />\n <mask\n id=\"mask0_1413_1551\"\n style=\"mask-type: alpha\"\n maskUnits=\"userSpaceOnUse\"\n x=\"0\"\n y=\"8\"\n width=\"54\"\n height=\"11\"\n >\n <path\n d=\"M27 18.3652C10.5114 19.1944 0 8.88892 0 8.88892C0 8.88892 16.5176 14.5866 27 14.5866C37.4824 14.5866 54 8.88892 54 8.88892C54 8.88892 43.4886 17.5361 27 18.3652Z\"\n fill=\"var(--primary-color)\"\n />\n </mask>\n <g mask=\"url(#mask0_1413_1551)\">\n <path\n d=\"M-4.673e-05 8.88887L3.73084 -1.91434L-8.00806 17.0473L-4.673e-05 8.88887ZM27 18.3652L26.4253 6.95109L27 18.3652ZM54 8.88887L61.2673 17.7127L50.2691 -1.91434L54 8.88887ZM-4.673e-05 8.88887C-8.00806 17.0473 -8.00469 17.0505 -8.00132 17.0538C-8.00018 17.055 -7.99675 17.0583 -7.9944 17.0607C-7.98963 17.0653 -7.98474 17.0701 -7.97966 17.075C-7.96949 17.0849 -7.95863 17.0955 -7.94707 17.1066C-7.92401 17.129 -7.89809 17.1539 -7.86944 17.1812C-7.8122 17.236 -7.74377 17.3005 -7.66436 17.3743C-7.50567 17.5218 -7.30269 17.7063 -7.05645 17.9221C-6.56467 18.3532 -5.89662 18.9125 -5.06089 19.5534C-3.39603 20.83 -1.02575 22.4605 1.98012 24.0457C7.97874 27.2091 16.7723 30.3226 27.5746 29.7793L26.4253 6.95109C20.7391 7.23699 16.0326 5.61231 12.6534 3.83024C10.9703 2.94267 9.68222 2.04866 8.86091 1.41888C8.45356 1.10653 8.17155 0.867278 8.0241 0.738027C7.95072 0.673671 7.91178 0.637576 7.90841 0.634492C7.90682 0.63298 7.91419 0.639805 7.93071 0.65557C7.93897 0.663455 7.94952 0.673589 7.96235 0.686039C7.96883 0.692262 7.97582 0.699075 7.98338 0.706471C7.98719 0.710167 7.99113 0.714014 7.99526 0.718014C7.99729 0.720008 8.00047 0.723119 8.00148 0.724116C8.00466 0.727265 8.00796 0.730446 -4.673e-05 8.88887ZM27.5746 29.7793C37.6904 29.2706 45.9416 26.3684 51.6602 23.6054C54.5296 22.2191 56.8064 20.8465 58.4186 19.7784C59.2265 19.2431 59.873 18.7805 60.3494 18.4257C60.5878 18.2482 60.7841 18.0971 60.9374 17.977C61.014 17.9169 61.0799 17.8645 61.1349 17.8203C61.1624 17.7981 61.1872 17.7781 61.2093 17.7602C61.2203 17.7512 61.2307 17.7427 61.2403 17.7348C61.2452 17.7308 61.2499 17.727 61.2544 17.7233C61.2566 17.7215 61.2598 17.7188 61.261 17.7179C61.2642 17.7153 61.2673 17.7127 54 8.88887C46.7326 0.0650536 46.7357 0.0625219 46.7387 0.0600241C46.7397 0.0592345 46.7427 0.0567658 46.7446 0.0551857C46.7485 0.0520238 46.7521 0.0489887 46.7557 0.0460799C46.7628 0.0402623 46.7694 0.0349487 46.7753 0.0301318C46.7871 0.0204986 46.7966 0.0128495 46.8037 0.00712562C46.818 -0.00431848 46.8228 -0.00808311 46.8184 -0.00463784C46.8096 0.00228345 46.764 0.0378652 46.6828 0.0983779C46.5199 0.219675 46.2165 0.439161 45.7812 0.727519C44.9072 1.30663 43.5257 2.14765 41.7061 3.02677C38.0469 4.79468 32.7981 6.63058 26.4253 6.95109L27.5746 29.7793ZM54 8.88887C50.2691 -1.91433 50.27 -1.91467 50.271 -1.91498C50.2712 -1.91506 50.272 -1.91535 50.2724 -1.9155C50.2733 -1.91581 50.274 -1.91602 50.2743 -1.91616C50.2752 -1.91643 50.275 -1.91636 50.2738 -1.91595C50.2714 -1.91515 50.2652 -1.91302 50.2552 -1.9096C50.2351 -1.90276 50.1999 -1.89078 50.1503 -1.874C50.0509 -1.84043 49.8938 -1.78773 49.6844 -1.71863C49.2652 -1.58031 48.6387 -1.377 47.8481 -1.13035C46.2609 -0.635237 44.0427 0.0249875 41.5325 0.6823C36.215 2.07471 30.6736 3.15796 27 3.15796V26.0151C33.8087 26.0151 41.7672 24.2495 47.3292 22.7931C50.2586 22.026 52.825 21.2618 54.6625 20.6886C55.5842 20.4011 56.33 20.1593 56.8551 19.986C57.1178 19.8993 57.3258 19.8296 57.4735 19.7797C57.5474 19.7548 57.6062 19.7348 57.6493 19.72C57.6709 19.7127 57.6885 19.7066 57.7021 19.7019C57.7089 19.6996 57.7147 19.6976 57.7195 19.696C57.7219 19.6952 57.7241 19.6944 57.726 19.6938C57.7269 19.6934 57.7281 19.693 57.7286 19.6929C57.7298 19.6924 57.7309 19.692 54 8.88887ZM27 3.15796C23.3263 3.15796 17.7849 2.07471 12.4674 0.6823C9.95717 0.0249875 7.73904 -0.635237 6.15184 -1.13035C5.36118 -1.377 4.73467 -1.58031 4.3155 -1.71863C4.10609 -1.78773 3.94899 -1.84043 3.84961 -1.874C3.79994 -1.89078 3.76474 -1.90276 3.74471 -1.9096C3.73469 -1.91302 3.72848 -1.91515 3.72613 -1.91595C3.72496 -1.91636 3.72476 -1.91643 3.72554 -1.91616C3.72593 -1.91602 3.72657 -1.91581 3.72745 -1.9155C3.72789 -1.91535 3.72874 -1.91506 3.72896 -1.91498C3.72987 -1.91467 3.73084 -1.91433 -4.673e-05 8.88887C-3.73093 19.692 -3.72983 19.6924 -3.72868 19.6929C-3.72821 19.693 -3.72698 19.6934 -3.72603 19.6938C-3.72415 19.6944 -3.72201 19.6952 -3.71961 19.696C-3.71482 19.6976 -3.70901 19.6996 -3.7022 19.7019C-3.68858 19.7066 -3.67095 19.7127 -3.6494 19.72C-3.60629 19.7348 -3.54745 19.7548 -3.47359 19.7797C-3.32589 19.8296 -3.11788 19.8993 -2.85516 19.986C-2.33008 20.1593 -1.58425 20.4011 -0.662589 20.6886C1.17485 21.2618 3.74125 22.026 6.67073 22.7931C12.2327 24.2495 20.1913 26.0151 27 26.0151V3.15796Z\"\n fill=\"var(--primary-color)\"\n />\n </g>\n </svg>\n <div class=\"text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4\">\n {{ title() }}\n </div>\n <span class=\"text-muted-color font-medium\">{{ subtitle() }}</span>\n </div>\n\n <div>\n <label\n for=\"email1\"\n class=\"block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2\"\n >Email</label\n >\n <input\n hx-input\n id=\"email1\"\n type=\"text\"\n placeholder=\"Email address\"\n class=\"w-full md:w-120 mb-8\"\n [(ngModel)]=\"email\"\n />\n\n <label\n for=\"password1\"\n class=\"block text-surface-900 dark:text-surface-0 font-medium text-xl mb-2\"\n >Password</label\n >\n <h-password\n id=\"password1\"\n [(ngModel)]=\"password\"\n placeholder=\"Password\"\n [toggleMask]=\"true\"\n styleClass=\"mb-4\"\n [fluid]=\"true\"\n [feedback]=\"false\"\n ></h-password>\n\n <div class=\"flex items-center justify-between mt-2 mb-8 gap-8\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\" hx-checkbox [(ngModel)]=\"checked\" id=\"rememberme1\" class=\"mr-2\" />\n <label for=\"rememberme1\">Remember me</label>\n </div>\n <span\n class=\"font-medium no-underline ml-2 text-right cursor-pointer text-primary\"\n (click)=\"onForgotPassword()\"\n >{{ forgotPasswordLabel() }}</span\n >\n </div>\n <button hx-button type=\"button\" fluid (click)=\"onSubmit()\">{{ submitLabel() }}</button>\n </div>\n </div>\n </div>\n </div>\n</div>\n"
3750
+ template: "<helix-floating-configurator />\n<div\n class=\"bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-screen overflow-hidden\"\n>\n <div class=\"flex flex-col items-center justify-center\">\n <div\n style=\"\n border-radius: 56px;\n padding: 0.3rem;\n background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%);\n \"\n >\n <div\n class=\"w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20\"\n style=\"border-radius: 53px\"\n >\n <div class=\"text-center mb-8\">\n <svg\n viewBox=\"0 0 54 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"mb-8 w-16 shrink-0 mx-auto\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M17.1637 19.2467C17.1566 19.4033 17.1529 19.561 17.1529 19.7194C17.1529 25.3503 21.7203 29.915 27.3546 29.915C32.9887 29.915 37.5561 25.3503 37.5561 19.7194C37.5561 19.5572 37.5524 19.3959 37.5449 19.2355C38.5617 19.0801 39.5759 18.9013 40.5867 18.6994L40.6926 18.6782C40.7191 19.0218 40.7326 19.369 40.7326 19.7194C40.7326 27.1036 34.743 33.0896 27.3546 33.0896C19.966 33.0896 13.9765 27.1036 13.9765 19.7194C13.9765 19.374 13.9896 19.0316 14.0154 18.6927L14.0486 18.6994C15.0837 18.9062 16.1223 19.0886 17.1637 19.2467ZM33.3284 11.4538C31.6493 10.2396 29.5855 9.52381 27.3546 9.52381C25.1195 9.52381 23.0524 10.2421 21.3717 11.4603C20.0078 11.3232 18.6475 11.1387 17.2933 10.907C19.7453 8.11308 23.3438 6.34921 27.3546 6.34921C31.36 6.34921 34.9543 8.10844 37.4061 10.896C36.0521 11.1292 34.692 11.3152 33.3284 11.4538ZM43.826 18.0518C43.881 18.6003 43.9091 19.1566 43.9091 19.7194C43.9091 28.8568 36.4973 36.2642 27.3546 36.2642C18.2117 36.2642 10.8 28.8568 10.8 19.7194C10.8 19.1615 10.8276 18.61 10.8816 18.0663L7.75383 17.4411C7.66775 18.1886 7.62354 18.9488 7.62354 19.7194C7.62354 30.6102 16.4574 39.4388 27.3546 39.4388C38.2517 39.4388 47.0855 30.6102 47.0855 19.7194C47.0855 18.9439 47.0407 18.1789 46.9536 17.4267L43.826 18.0518ZM44.2613 9.54743L40.9084 10.2176C37.9134 5.95821 32.9593 3.1746 27.3546 3.1746C21.7442 3.1746 16.7856 5.96385 13.7915 10.2305L10.4399 9.56057C13.892 3.83178 20.1756 0 27.3546 0C34.5281 0 40.8075 3.82591 44.2613 9.54743Z\"\n fill=\"var(--primary-color)\"\n />\n <mask\n id=\"mask0_1413_1551\"\n style=\"mask-type: alpha\"\n maskUnits=\"userSpaceOnUse\"\n x=\"0\"\n y=\"8\"\n width=\"54\"\n height=\"11\"\n >\n <path\n d=\"M27 18.3652C10.5114 19.1944 0 8.88892 0 8.88892C0 8.88892 16.5176 14.5866 27 14.5866C37.4824 14.5866 54 8.88892 54 8.88892C54 8.88892 43.4886 17.5361 27 18.3652Z\"\n fill=\"var(--primary-color)\"\n />\n </mask>\n <g mask=\"url(#mask0_1413_1551)\">\n <path\n d=\"M-4.673e-05 8.88887L3.73084 -1.91434L-8.00806 17.0473L-4.673e-05 8.88887ZM27 18.3652L26.4253 6.95109L27 18.3652ZM54 8.88887L61.2673 17.7127L50.2691 -1.91434L54 8.88887ZM-4.673e-05 8.88887C-8.00806 17.0473 -8.00469 17.0505 -8.00132 17.0538C-8.00018 17.055 -7.99675 17.0583 -7.9944 17.0607C-7.98963 17.0653 -7.98474 17.0701 -7.97966 17.075C-7.96949 17.0849 -7.95863 17.0955 -7.94707 17.1066C-7.92401 17.129 -7.89809 17.1539 -7.86944 17.1812C-7.8122 17.236 -7.74377 17.3005 -7.66436 17.3743C-7.50567 17.5218 -7.30269 17.7063 -7.05645 17.9221C-6.56467 18.3532 -5.89662 18.9125 -5.06089 19.5534C-3.39603 20.83 -1.02575 22.4605 1.98012 24.0457C7.97874 27.2091 16.7723 30.3226 27.5746 29.7793L26.4253 6.95109C20.7391 7.23699 16.0326 5.61231 12.6534 3.83024C10.9703 2.94267 9.68222 2.04866 8.86091 1.41888C8.45356 1.10653 8.17155 0.867278 8.0241 0.738027C7.95072 0.673671 7.91178 0.637576 7.90841 0.634492C7.90682 0.63298 7.91419 0.639805 7.93071 0.65557C7.93897 0.663455 7.94952 0.673589 7.96235 0.686039C7.96883 0.692262 7.97582 0.699075 7.98338 0.706471C7.98719 0.710167 7.99113 0.714014 7.99526 0.718014C7.99729 0.720008 8.00047 0.723119 8.00148 0.724116C8.00466 0.727265 8.00796 0.730446 -4.673e-05 8.88887ZM27.5746 29.7793C37.6904 29.2706 45.9416 26.3684 51.6602 23.6054C54.5296 22.2191 56.8064 20.8465 58.4186 19.7784C59.2265 19.2431 59.873 18.7805 60.3494 18.4257C60.5878 18.2482 60.7841 18.0971 60.9374 17.977C61.014 17.9169 61.0799 17.8645 61.1349 17.8203C61.1624 17.7981 61.1872 17.7781 61.2093 17.7602C61.2203 17.7512 61.2307 17.7427 61.2403 17.7348C61.2452 17.7308 61.2499 17.727 61.2544 17.7233C61.2566 17.7215 61.2598 17.7188 61.261 17.7179C61.2642 17.7153 61.2673 17.7127 54 8.88887C46.7326 0.0650536 46.7357 0.0625219 46.7387 0.0600241C46.7397 0.0592345 46.7427 0.0567658 46.7446 0.0551857C46.7485 0.0520238 46.7521 0.0489887 46.7557 0.0460799C46.7628 0.0402623 46.7694 0.0349487 46.7753 0.0301318C46.7871 0.0204986 46.7966 0.0128495 46.8037 0.00712562C46.818 -0.00431848 46.8228 -0.00808311 46.8184 -0.00463784C46.8096 0.00228345 46.764 0.0378652 46.6828 0.0983779C46.5199 0.219675 46.2165 0.439161 45.7812 0.727519C44.9072 1.30663 43.5257 2.14765 41.7061 3.02677C38.0469 4.79468 32.7981 6.63058 26.4253 6.95109L27.5746 29.7793ZM54 8.88887C50.2691 -1.91433 50.27 -1.91467 50.271 -1.91498C50.2712 -1.91506 50.272 -1.91535 50.2724 -1.9155C50.2733 -1.91581 50.274 -1.91602 50.2743 -1.91616C50.2752 -1.91643 50.275 -1.91636 50.2738 -1.91595C50.2714 -1.91515 50.2652 -1.91302 50.2552 -1.9096C50.2351 -1.90276 50.1999 -1.89078 50.1503 -1.874C50.0509 -1.84043 49.8938 -1.78773 49.6844 -1.71863C49.2652 -1.58031 48.6387 -1.377 47.8481 -1.13035C46.2609 -0.635237 44.0427 0.0249875 41.5325 0.6823C36.215 2.07471 30.6736 3.15796 27 3.15796V26.0151C33.8087 26.0151 41.7672 24.2495 47.3292 22.7931C50.2586 22.026 52.825 21.2618 54.6625 20.6886C55.5842 20.4011 56.33 20.1593 56.8551 19.986C57.1178 19.8993 57.3258 19.8296 57.4735 19.7797C57.5474 19.7548 57.6062 19.7348 57.6493 19.72C57.6709 19.7127 57.6885 19.7066 57.7021 19.7019C57.7089 19.6996 57.7147 19.6976 57.7195 19.696C57.7219 19.6952 57.7241 19.6944 57.726 19.6938C57.7269 19.6934 57.7281 19.693 57.7286 19.6929C57.7298 19.6924 57.7309 19.692 54 8.88887ZM27 3.15796C23.3263 3.15796 17.7849 2.07471 12.4674 0.6823C9.95717 0.0249875 7.73904 -0.635237 6.15184 -1.13035C5.36118 -1.377 4.73467 -1.58031 4.3155 -1.71863C4.10609 -1.78773 3.94899 -1.84043 3.84961 -1.874C3.79994 -1.89078 3.76474 -1.90276 3.74471 -1.9096C3.73469 -1.91302 3.72848 -1.91515 3.72613 -1.91595C3.72496 -1.91636 3.72476 -1.91643 3.72554 -1.91616C3.72593 -1.91602 3.72657 -1.91581 3.72745 -1.9155C3.72789 -1.91535 3.72874 -1.91506 3.72896 -1.91498C3.72987 -1.91467 3.73084 -1.91433 -4.673e-05 8.88887C-3.73093 19.692 -3.72983 19.6924 -3.72868 19.6929C-3.72821 19.693 -3.72698 19.6934 -3.72603 19.6938C-3.72415 19.6944 -3.72201 19.6952 -3.71961 19.696C-3.71482 19.6976 -3.70901 19.6996 -3.7022 19.7019C-3.68858 19.7066 -3.67095 19.7127 -3.6494 19.72C-3.60629 19.7348 -3.54745 19.7548 -3.47359 19.7797C-3.32589 19.8296 -3.11788 19.8993 -2.85516 19.986C-2.33008 20.1593 -1.58425 20.4011 -0.662589 20.6886C1.17485 21.2618 3.74125 22.026 6.67073 22.7931C12.2327 24.2495 20.1913 26.0151 27 26.0151V3.15796Z\"\n fill=\"var(--primary-color)\"\n />\n </g>\n </svg>\n <div class=\"text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4\">\n {{ title() }}\n </div>\n <span class=\"text-muted-color font-medium\">{{ subtitle() }}</span>\n </div>\n\n <div>\n <label\n for=\"email1\"\n class=\"block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2\"\n >Email</label\n >\n <input\n hx-input\n id=\"email1\"\n type=\"text\"\n placeholder=\"Email address\"\n class=\"w-full md:w-120 mb-8\"\n [(ngModel)]=\"email\"\n />\n\n <label\n for=\"password1\"\n class=\"block text-surface-900 dark:text-surface-0 font-medium text-xl mb-2\"\n >Password</label\n >\n <hx-password\n inputId=\"password1\"\n [(ngModel)]=\"password\"\n placeholder=\"Password\"\n toggleMask\n fluid\n class=\"mb-4\"\n />\n\n <div class=\"flex items-center justify-between mt-2 mb-8 gap-8\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\" hx-checkbox [(ngModel)]=\"checked\" id=\"rememberme1\" class=\"mr-2\" />\n <label for=\"rememberme1\">Remember me</label>\n </div>\n <span\n class=\"font-medium no-underline ml-2 text-right cursor-pointer text-primary\"\n (click)=\"onForgotPassword()\"\n >{{ forgotPasswordLabel() }}</span\n >\n </div>\n <button hx-button type=\"button\" fluid (click)=\"onSubmit()\">{{ submitLabel() }}</button>\n </div>\n </div>\n </div>\n </div>\n</div>\n"
3804
3751
  }]
3805
3752
  }],
3806
3753
  propDecorators: {
@@ -4070,7 +4017,7 @@ var HelixFeaturesWidget = class HelixFeaturesWidget {
4070
4017
  type: CommonModule
4071
4018
  }, {
4072
4019
  kind: "directive",
4073
- type: i1$3.NgClass,
4020
+ type: i1$1.NgClass,
4074
4021
  selector: "[ngClass]",
4075
4022
  inputs: ["class", "ngClass"]
4076
4023
  }],
@@ -4368,7 +4315,7 @@ var HelixHeroWidget = class HelixHeroWidget {
4368
4315
  },
4369
4316
  {
4370
4317
  kind: "directive",
4371
- type: i3$1.Ripple,
4318
+ type: i3.Ripple,
4372
4319
  selector: "[hRipple]"
4373
4320
  }
4374
4321
  ],
@@ -4649,19 +4596,14 @@ var HelixPricingWidget = class HelixPricingWidget {
4649
4596
  },
4650
4597
  outputs: { planSelect: "planSelect" },
4651
4598
  ngImport: i0,
4652
- template: "<div id=\"pricing\" class=\"py-6 px-6 lg:px-20 my-2 md:my-6\">\n <div class=\"text-center mb-6\">\n <div class=\"text-surface-900 dark:text-surface-0 font-normal mb-2 text-4xl\">\n {{ sectionTitle() }}\n </div>\n <span class=\"text-muted-color text-2xl\">{{ sectionSubtitle() }}</span>\n </div>\n\n <div class=\"grid grid-cols-12 gap-4 justify-between mt-20 md:mt-0\">\n @for (plan of plans(); track plan.title) {\n <div class=\"col-span-12 lg:col-span-4 p-0 md:p-4 mt-6 md:mt-0\">\n <div\n class=\"p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all\"\n style=\"border-radius: 10px\"\n (click)=\"planSelect.emit(plan)\"\n >\n <div class=\"text-surface-900 dark:text-surface-0 text-center my-8 text-3xl\">\n {{ plan.title }}\n </div>\n <img [src]=\"plan.imageUrl\" class=\"w-10/12 mx-auto\" [alt]=\"plan.imageAlt\" />\n <div class=\"my-8 flex flex-col items-center gap-4\">\n <div class=\"flex items-center\">\n <span class=\"text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0\">{{\n plan.price\n }}</span>\n <span class=\"text-surface-600 dark:text-surface-200\">{{ plan.pricePeriod }}</span>\n </div>\n <button\n hx-button\n hRipple\n rounded\n type=\"button\"\n class=\"border-0 ml-4 font-light leading-tight bg-blue-500 text-white\"\n (click)=\"planSelect.emit(plan); $event.stopPropagation()\"\n >\n {{ plan.buttonLabel }}\n </button>\n </div>\n <h-divider class=\"w-full bg-surface-200\"></h-divider>\n <ul class=\"my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col px-8\">\n @for (feature of plan.features; track feature) {\n <li class=\"py-2\">\n <i class=\"pi pi-fw pi-check text-xl text-cyan-500 mr-2\"></i>\n <span class=\"text-xl leading-normal\">{{ feature }}</span>\n </li>\n }\n </ul>\n </div>\n </div>\n }\n </div>\n</div>\n",
4599
+ template: "<div id=\"pricing\" class=\"py-6 px-6 lg:px-20 my-2 md:my-6\">\n <div class=\"text-center mb-6\">\n <div class=\"text-surface-900 dark:text-surface-0 font-normal mb-2 text-4xl\">\n {{ sectionTitle() }}\n </div>\n <span class=\"text-muted-color text-2xl\">{{ sectionSubtitle() }}</span>\n </div>\n\n <div class=\"grid grid-cols-12 gap-4 justify-between mt-20 md:mt-0\">\n @for (plan of plans(); track plan.title) {\n <div class=\"col-span-12 lg:col-span-4 p-0 md:p-4 mt-6 md:mt-0\">\n <div\n class=\"p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all\"\n style=\"border-radius: 10px\"\n (click)=\"planSelect.emit(plan)\"\n >\n <div class=\"text-surface-900 dark:text-surface-0 text-center my-8 text-3xl\">\n {{ plan.title }}\n </div>\n <img [src]=\"plan.imageUrl\" class=\"w-10/12 mx-auto\" [alt]=\"plan.imageAlt\" />\n <div class=\"my-8 flex flex-col items-center gap-4\">\n <div class=\"flex items-center\">\n <span class=\"text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0\">{{\n plan.price\n }}</span>\n <span class=\"text-surface-600 dark:text-surface-200\">{{ plan.pricePeriod }}</span>\n </div>\n <button\n hx-button\n hRipple\n rounded\n type=\"button\"\n class=\"border-0 ml-4 font-light leading-tight bg-blue-500 text-white\"\n (click)=\"planSelect.emit(plan); $event.stopPropagation()\"\n >\n {{ plan.buttonLabel }}\n </button>\n </div>\n <hx-divider class=\"w-full\" />\n <ul class=\"my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col px-8\">\n @for (feature of plan.features; track feature) {\n <li class=\"py-2\">\n <i class=\"pi pi-fw pi-check text-xl text-cyan-500 mr-2\"></i>\n <span class=\"text-xl leading-normal\">{{ feature }}</span>\n </li>\n }\n </ul>\n </div>\n </div>\n }\n </div>\n</div>\n",
4653
4600
  styles: [""],
4654
4601
  dependencies: [
4655
- {
4656
- kind: "ngmodule",
4657
- type: DividerModule
4658
- },
4659
4602
  {
4660
4603
  kind: "component",
4661
- type: i1.Divider,
4662
- selector: "h-divider",
4604
+ type: HxDivider,
4605
+ selector: "hx-divider",
4663
4606
  inputs: [
4664
- "styleClass",
4665
4607
  "layout",
4666
4608
  "type",
4667
4609
  "align"
@@ -4689,7 +4631,7 @@ var HelixPricingWidget = class HelixPricingWidget {
4689
4631
  },
4690
4632
  {
4691
4633
  kind: "directive",
4692
- type: i3$1.Ripple,
4634
+ type: i3.Ripple,
4693
4635
  selector: "[hRipple]"
4694
4636
  }
4695
4637
  ],
@@ -4707,12 +4649,12 @@ i0.ɵɵngDeclareClassMetadata({
4707
4649
  selector: "helix-pricing-widget",
4708
4650
  standalone: true,
4709
4651
  imports: [
4710
- DividerModule,
4652
+ HxDivider,
4711
4653
  HxButton,
4712
4654
  RippleModule
4713
4655
  ],
4714
4656
  changeDetection: ChangeDetectionStrategy.Eager,
4715
- template: "<div id=\"pricing\" class=\"py-6 px-6 lg:px-20 my-2 md:my-6\">\n <div class=\"text-center mb-6\">\n <div class=\"text-surface-900 dark:text-surface-0 font-normal mb-2 text-4xl\">\n {{ sectionTitle() }}\n </div>\n <span class=\"text-muted-color text-2xl\">{{ sectionSubtitle() }}</span>\n </div>\n\n <div class=\"grid grid-cols-12 gap-4 justify-between mt-20 md:mt-0\">\n @for (plan of plans(); track plan.title) {\n <div class=\"col-span-12 lg:col-span-4 p-0 md:p-4 mt-6 md:mt-0\">\n <div\n class=\"p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all\"\n style=\"border-radius: 10px\"\n (click)=\"planSelect.emit(plan)\"\n >\n <div class=\"text-surface-900 dark:text-surface-0 text-center my-8 text-3xl\">\n {{ plan.title }}\n </div>\n <img [src]=\"plan.imageUrl\" class=\"w-10/12 mx-auto\" [alt]=\"plan.imageAlt\" />\n <div class=\"my-8 flex flex-col items-center gap-4\">\n <div class=\"flex items-center\">\n <span class=\"text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0\">{{\n plan.price\n }}</span>\n <span class=\"text-surface-600 dark:text-surface-200\">{{ plan.pricePeriod }}</span>\n </div>\n <button\n hx-button\n hRipple\n rounded\n type=\"button\"\n class=\"border-0 ml-4 font-light leading-tight bg-blue-500 text-white\"\n (click)=\"planSelect.emit(plan); $event.stopPropagation()\"\n >\n {{ plan.buttonLabel }}\n </button>\n </div>\n <h-divider class=\"w-full bg-surface-200\"></h-divider>\n <ul class=\"my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col px-8\">\n @for (feature of plan.features; track feature) {\n <li class=\"py-2\">\n <i class=\"pi pi-fw pi-check text-xl text-cyan-500 mr-2\"></i>\n <span class=\"text-xl leading-normal\">{{ feature }}</span>\n </li>\n }\n </ul>\n </div>\n </div>\n }\n </div>\n</div>\n"
4657
+ template: "<div id=\"pricing\" class=\"py-6 px-6 lg:px-20 my-2 md:my-6\">\n <div class=\"text-center mb-6\">\n <div class=\"text-surface-900 dark:text-surface-0 font-normal mb-2 text-4xl\">\n {{ sectionTitle() }}\n </div>\n <span class=\"text-muted-color text-2xl\">{{ sectionSubtitle() }}</span>\n </div>\n\n <div class=\"grid grid-cols-12 gap-4 justify-between mt-20 md:mt-0\">\n @for (plan of plans(); track plan.title) {\n <div class=\"col-span-12 lg:col-span-4 p-0 md:p-4 mt-6 md:mt-0\">\n <div\n class=\"p-4 flex flex-col border-surface-200 dark:border-surface-600 pricing-card cursor-pointer border-2 hover:border-primary duration-300 transition-all\"\n style=\"border-radius: 10px\"\n (click)=\"planSelect.emit(plan)\"\n >\n <div class=\"text-surface-900 dark:text-surface-0 text-center my-8 text-3xl\">\n {{ plan.title }}\n </div>\n <img [src]=\"plan.imageUrl\" class=\"w-10/12 mx-auto\" [alt]=\"plan.imageAlt\" />\n <div class=\"my-8 flex flex-col items-center gap-4\">\n <div class=\"flex items-center\">\n <span class=\"text-5xl font-bold mr-2 text-surface-900 dark:text-surface-0\">{{\n plan.price\n }}</span>\n <span class=\"text-surface-600 dark:text-surface-200\">{{ plan.pricePeriod }}</span>\n </div>\n <button\n hx-button\n hRipple\n rounded\n type=\"button\"\n class=\"border-0 ml-4 font-light leading-tight bg-blue-500 text-white\"\n (click)=\"planSelect.emit(plan); $event.stopPropagation()\"\n >\n {{ plan.buttonLabel }}\n </button>\n </div>\n <hx-divider class=\"w-full\" />\n <ul class=\"my-8 list-none p-0 flex text-surface-900 dark:text-surface-0 flex-col px-8\">\n @for (feature of plan.features; track feature) {\n <li class=\"py-2\">\n <i class=\"pi pi-fw pi-check text-xl text-cyan-500 mr-2\"></i>\n <span class=\"text-xl leading-normal\">{{ feature }}</span>\n </li>\n }\n </ul>\n </div>\n </div>\n }\n </div>\n</div>\n"
4716
4658
  }]
4717
4659
  }],
4718
4660
  propDecorators: {
@@ -4870,7 +4812,7 @@ var HelixTopbarWidget = class HelixTopbarWidget {
4870
4812
  },
4871
4813
  {
4872
4814
  kind: "directive",
4873
- type: i1$2.StyleClass,
4815
+ type: i1.StyleClass,
4874
4816
  selector: "[hStyleClass]",
4875
4817
  inputs: [
4876
4818
  "hStyleClass",
@@ -4909,7 +4851,7 @@ var HelixTopbarWidget = class HelixTopbarWidget {
4909
4851
  },
4910
4852
  {
4911
4853
  kind: "directive",
4912
- type: i3$1.Ripple,
4854
+ type: i3.Ripple,
4913
4855
  selector: "[hRipple]"
4914
4856
  },
4915
4857
  {
@@ -5098,10 +5040,6 @@ var HelixLanding = class HelixLanding {
5098
5040
  {
5099
5041
  kind: "ngmodule",
5100
5042
  type: StyleClassModule
5101
- },
5102
- {
5103
- kind: "ngmodule",
5104
- type: DividerModule
5105
5043
  }
5106
5044
  ],
5107
5045
  changeDetection: i0.ChangeDetectionStrategy.Eager
@@ -5126,8 +5064,7 @@ i0.ɵɵngDeclareClassMetadata({
5126
5064
  HelixPricingWidget,
5127
5065
  HelixFooterWidget,
5128
5066
  RippleModule,
5129
- StyleClassModule,
5130
- DividerModule
5067
+ StyleClassModule
5131
5068
  ],
5132
5069
  changeDetection: ChangeDetectionStrategy.Eager,
5133
5070
  template: "<div class=\"bg-surface-0 dark:bg-surface-900\">\n <div id=\"home\" class=\"landing-wrapper overflow-hidden\">\n <helix-topbar-widget\n class=\"py-6 px-6 mx-0 md:mx-12 lg:mx-20 lg:px-20 flex items-center justify-between relative lg:static\"\n />\n <helix-hero-widget />\n <helix-features-widget />\n <helix-highlights-widget />\n <helix-pricing-widget />\n <helix-footer-widget />\n </div>\n</div>\n"