@gravionlabs/helix-shell 22.1.13 → 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 (5) hide show
  1. package/fesm2022/gravionlabs-helix-shell.mjs +301 -506
  2. package/fesm2022/gravionlabs-helix-shell.mjs.map +1 -1
  3. package/package.json +2 -1
  4. package/styles.css +0 -3
  5. package/types/gravionlabs-helix-shell.d.ts +18 -0
package/fesm2022/gravionlabs-helix-shell.mjs CHANGED
@@ -1,38 +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$2 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$3 from "@angular/forms";
5
+ import * as i1$2 from "@angular/forms";
6
6
  import { FormsModule, NG_VALUE_ACCESSOR } from "@angular/forms";
7
- import * as i2$2 from "@angular/router";
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$2 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$1 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$1 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 * as i2$1 from "@gravionlabs/helix-core/button";
27
- import { ButtonModule } from "@gravionlabs/helix-core/button";
28
- import * as i2 from "@gravionlabs/helix-core/checkbox";
29
- import { CheckboxModule } from "@gravionlabs/helix-core/checkbox";
30
- import * as i3 from "@gravionlabs/helix-core/inputtext";
31
- import { InputTextModule } from "@gravionlabs/helix-core/inputtext";
32
- import * as i4 from "@gravionlabs/helix-core/password";
33
- import { PasswordModule } from "@gravionlabs/helix-core/password";
34
- import * as i1 from "@gravionlabs/helix-core/divider";
35
- import { DividerModule } from "@gravionlabs/helix-core/divider";
36
23
  var HelixFormField = class HelixFormField {
37
24
  label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
38
25
  control = input(null, ...ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []);
@@ -302,13 +289,13 @@ var HelixSelect = class HelixSelect {
302
289
  },
303
290
  {
304
291
  kind: "directive",
305
- type: i1$3.NgSelectOption,
292
+ type: i1$2.NgSelectOption,
306
293
  selector: "option",
307
294
  inputs: ["ngValue", "value"]
308
295
  },
309
296
  {
310
297
  kind: "directive",
311
- type: i1$3.ɵNgSelectMultipleOption,
298
+ type: i1$2.ɵNgSelectMultipleOption,
312
299
  selector: "option",
313
300
  inputs: ["ngValue", "value"]
314
301
  }
@@ -750,7 +737,7 @@ var HelixNavRailItem = class HelixNavRailItem {
750
737
  }
751
738
  },
752
739
  ngImport: i0,
753
- 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",
754
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"],
755
742
  dependencies: [
756
743
  {
@@ -770,7 +757,7 @@ var HelixNavRailItem = class HelixNavRailItem {
770
757
  },
771
758
  {
772
759
  kind: "directive",
773
- type: i1$2.NgClass,
760
+ type: i1$1.NgClass,
774
761
  selector: "[ngClass]",
775
762
  inputs: ["class", "ngClass"]
776
763
  },
@@ -780,7 +767,7 @@ var HelixNavRailItem = class HelixNavRailItem {
780
767
  },
781
768
  {
782
769
  kind: "directive",
783
- type: i2$2.RouterLink,
770
+ type: i2.RouterLink,
784
771
  selector: "[routerLink]",
785
772
  inputs: [
786
773
  "target",
@@ -803,36 +790,19 @@ var HelixNavRailItem = class HelixNavRailItem {
803
790
  },
804
791
  {
805
792
  kind: "directive",
806
- type: i3$2.Ripple,
793
+ type: i3.Ripple,
807
794
  selector: "[hRipple]"
808
795
  },
809
796
  {
810
797
  kind: "directive",
811
- type: Tooltip,
812
- selector: "[hTooltip]",
798
+ type: HxTooltip,
799
+ selector: "[hx-tooltip]",
813
800
  inputs: [
814
- "tooltipPosition",
815
- "tooltipEvent",
816
- "positionStyle",
817
- "tooltipStyleClass",
818
- "tooltipZIndex",
819
- "escape",
820
- "showDelay",
821
- "hideDelay",
822
- "life",
823
- "positionTop",
824
- "positionLeft",
825
- "autoHide",
826
- "fitContent",
827
- "hideOnEscape",
828
- "showOnEllipsis",
829
- "hTooltip",
830
- "tooltipDisabled",
831
- "tooltipOptions",
832
- "appendTo",
833
- "ptTooltip",
834
- "pTooltipPT",
835
- "pTooltipUnstyled"
801
+ "hx-tooltip",
802
+ "hxTooltipPosition",
803
+ "hxTooltipEvent",
804
+ "hxTooltipDisabled",
805
+ "hxTooltipShowDelay"
836
806
  ]
837
807
  }
838
808
  ],
@@ -853,7 +823,7 @@ i0.ɵɵngDeclareClassMetadata({
853
823
  CommonModule,
854
824
  RouterModule,
855
825
  RippleModule,
856
- Tooltip
826
+ HxTooltip
857
827
  ],
858
828
  changeDetection: ChangeDetectionStrategy.Eager,
859
829
  host: {
@@ -865,7 +835,7 @@ i0.ɵɵngDeclareClassMetadata({
865
835
  "(focusout)": "onFocusOut($event)",
866
836
  "(keydown.escape)": "closeFlyout(true)"
867
837
  },
868
- 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",
869
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"]
870
840
  }]
871
841
  }],
@@ -1012,7 +982,7 @@ var HelixNavRail = class HelixNavRail {
1012
982
  },
1013
983
  {
1014
984
  kind: "directive",
1015
- type: i1$2.NgClass,
985
+ type: i1$1.NgClass,
1016
986
  selector: "[ngClass]",
1017
987
  inputs: ["class", "ngClass"]
1018
988
  },
@@ -1033,7 +1003,7 @@ var HelixNavRail = class HelixNavRail {
1033
1003
  },
1034
1004
  {
1035
1005
  kind: "directive",
1036
- type: i2$2.RouterLink,
1006
+ type: i2.RouterLink,
1037
1007
  selector: "[routerLink]",
1038
1008
  inputs: [
1039
1009
  "target",
@@ -1566,7 +1536,7 @@ var HelixAlertAction = class HelixAlertAction {
1566
1536
  type: RouterModule
1567
1537
  }, {
1568
1538
  kind: "directive",
1569
- type: i2$2.RouterLink,
1539
+ type: i2.RouterLink,
1570
1540
  selector: "[routerLink]",
1571
1541
  inputs: [
1572
1542
  "target",
@@ -2003,7 +1973,7 @@ var HelixConfigurator = class HelixConfigurator {
2003
1973
  selector: "helix-configurator",
2004
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)]" },
2005
1975
  ngImport: i0,
2006
- 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",
2007
1977
  styles: [""],
2008
1978
  dependencies: [
2009
1979
  {
@@ -2012,7 +1982,7 @@ var HelixConfigurator = class HelixConfigurator {
2012
1982
  },
2013
1983
  {
2014
1984
  kind: "directive",
2015
- type: i1$2.NgClass,
1985
+ type: i1$1.NgClass,
2016
1986
  selector: "[ngClass]",
2017
1987
  inputs: ["class", "ngClass"]
2018
1988
  },
@@ -2022,12 +1992,12 @@ var HelixConfigurator = class HelixConfigurator {
2022
1992
  },
2023
1993
  {
2024
1994
  kind: "directive",
2025
- type: i1$3.NgControlStatus,
1995
+ type: i1$2.NgControlStatus,
2026
1996
  selector: "[formControlName],[ngModel],[formControl]"
2027
1997
  },
2028
1998
  {
2029
1999
  kind: "directive",
2030
- type: i1$3.NgModel,
2000
+ type: i1$2.NgModel,
2031
2001
  selector: "[ngModel]:not([formControlName]):not([formControl])",
2032
2002
  inputs: [
2033
2003
  "name",
@@ -2038,31 +2008,26 @@ var HelixConfigurator = class HelixConfigurator {
2038
2008
  outputs: ["ngModelChange"],
2039
2009
  exportAs: ["ngModel"]
2040
2010
  },
2041
- {
2042
- kind: "ngmodule",
2043
- type: SelectButtonModule
2044
- },
2045
2011
  {
2046
2012
  kind: "component",
2047
- type: i3$1.SelectButton,
2048
- selector: "h-selectButton, h-selectbutton, h-select-button",
2013
+ type: HxSelectButton,
2014
+ selector: "hx-select-button",
2049
2015
  inputs: [
2050
2016
  "options",
2051
2017
  "optionLabel",
2052
2018
  "optionValue",
2053
2019
  "optionDisabled",
2054
- "unselectable",
2055
- "tabindex",
2056
2020
  "multiple",
2057
2021
  "allowEmpty",
2058
- "styleClass",
2059
- "ariaLabelledBy",
2060
- "dataKey",
2061
- "autofocus",
2062
2022
  "size",
2063
- "fluid"
2023
+ "fluid",
2024
+ "ariaLabel",
2025
+ "ariaLabelledby",
2026
+ "value",
2027
+ "disabled",
2028
+ "invalid"
2064
2029
  ],
2065
- outputs: ["onOptionClick", "onChange"]
2030
+ outputs: ["valueChange", "touch"]
2066
2031
  }
2067
2032
  ],
2068
2033
  changeDetection: i0.ChangeDetectionStrategy.Eager
@@ -2081,11 +2046,11 @@ i0.ɵɵngDeclareClassMetadata({
2081
2046
  imports: [
2082
2047
  CommonModule,
2083
2048
  FormsModule,
2084
- SelectButtonModule
2049
+ HxSelectButton
2085
2050
  ],
2086
2051
  changeDetection: ChangeDetectionStrategy.Eager,
2087
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)]" },
2088
- 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"
2089
2054
  }]
2090
2055
  }]
2091
2056
  });
@@ -2133,7 +2098,7 @@ var HelixConfiguratorAction = class HelixConfiguratorAction {
2133
2098
  },
2134
2099
  {
2135
2100
  kind: "directive",
2136
- type: i1$1.StyleClass,
2101
+ type: i1.StyleClass,
2137
2102
  selector: "[hStyleClass]",
2138
2103
  inputs: [
2139
2104
  "hStyleClass",
@@ -2231,7 +2196,7 @@ var HelixDarkModeAction = class HelixDarkModeAction {
2231
2196
  type: CommonModule
2232
2197
  }, {
2233
2198
  kind: "directive",
2234
- type: i1$2.NgClass,
2199
+ type: i1$1.NgClass,
2235
2200
  selector: "[ngClass]",
2236
2201
  inputs: ["class", "ngClass"]
2237
2202
  }],
@@ -2355,7 +2320,7 @@ var HelixTopbar = class HelixTopbar {
2355
2320
  }
2356
2321
  },
2357
2322
  ngImport: i0,
2358
- 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",
2359
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"],
2360
2325
  dependencies: [
2361
2326
  {
@@ -2372,7 +2337,7 @@ var HelixTopbar = class HelixTopbar {
2372
2337
  },
2373
2338
  {
2374
2339
  kind: "directive",
2375
- type: i1$1.StyleClass,
2340
+ type: i1.StyleClass,
2376
2341
  selector: "[hStyleClass]",
2377
2342
  inputs: [
2378
2343
  "hStyleClass",
@@ -2407,16 +2372,13 @@ var HelixTopbar = class HelixTopbar {
2407
2372
  },
2408
2373
  {
2409
2374
  kind: "component",
2410
- type: Breadcrumb,
2411
- selector: "h-breadcrumb",
2375
+ type: HxBreadcrumb,
2376
+ selector: "hx-breadcrumb",
2412
2377
  inputs: [
2413
2378
  "model",
2414
- "style",
2415
- "styleClass",
2416
2379
  "home",
2417
- "homeAriaLabel"
2418
- ],
2419
- outputs: ["onItemClick"]
2380
+ "ariaLabel"
2381
+ ]
2420
2382
  }
2421
2383
  ],
2422
2384
  changeDetection: i0.ChangeDetectionStrategy.Eager
@@ -2439,10 +2401,10 @@ i0.ɵɵngDeclareClassMetadata({
2439
2401
  HelixAlertAction,
2440
2402
  HelixConfiguratorAction,
2441
2403
  HelixDarkModeAction,
2442
- Breadcrumb
2404
+ HxBreadcrumb
2443
2405
  ],
2444
2406
  changeDetection: ChangeDetectionStrategy.Eager,
2445
- 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",
2446
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"]
2447
2409
  }]
2448
2410
  }],
@@ -2663,7 +2625,7 @@ var HelixAppLayout = class HelixAppLayout {
2663
2625
  },
2664
2626
  {
2665
2627
  kind: "directive",
2666
- type: i1$2.NgClass,
2628
+ type: i1$1.NgClass,
2667
2629
  selector: "[ngClass]",
2668
2630
  inputs: ["class", "ngClass"]
2669
2631
  },
@@ -2694,7 +2656,7 @@ var HelixAppLayout = class HelixAppLayout {
2694
2656
  },
2695
2657
  {
2696
2658
  kind: "directive",
2697
- type: i2$2.RouterOutlet,
2659
+ type: i2.RouterOutlet,
2698
2660
  selector: "router-outlet",
2699
2661
  inputs: ["name", "routerOutletData"],
2700
2662
  outputs: [
@@ -2857,6 +2819,8 @@ i0.ɵɵngDeclareClassMetadata({
2857
2819
  var HelixFloatingConfigurator = class HelixFloatingConfigurator {
2858
2820
  store = inject(LayoutStore);
2859
2821
  float = input(true, ...ngDevMode ? [{ debugName: "float" }] : /* istanbul ignore next */ []);
2822
+ darkModeLabel = input("Toggle dark mode", ...ngDevMode ? [{ debugName: "darkModeLabel" }] : /* istanbul ignore next */ []);
2823
+ configuratorLabel = input("Configure theme", ...ngDevMode ? [{ debugName: "configuratorLabel" }] : /* istanbul ignore next */ []);
2860
2824
  isDarkTheme = computed(() => this.store.darkTheme(), ...ngDevMode ? [{ debugName: "isDarkTheme" }] : /* istanbul ignore next */ []);
2861
2825
  toggleDarkMode() {
2862
2826
  this.store.toggleDarkMode();
@@ -2875,15 +2839,31 @@ var HelixFloatingConfigurator = class HelixFloatingConfigurator {
2875
2839
  type: HelixFloatingConfigurator,
2876
2840
  isStandalone: true,
2877
2841
  selector: "helix-floating-configurator",
2878
- inputs: { float: {
2879
- classPropertyName: "float",
2880
- publicName: "float",
2881
- isSignal: true,
2882
- isRequired: false,
2883
- transformFunction: null
2884
- } },
2842
+ inputs: {
2843
+ float: {
2844
+ classPropertyName: "float",
2845
+ publicName: "float",
2846
+ isSignal: true,
2847
+ isRequired: false,
2848
+ transformFunction: null
2849
+ },
2850
+ darkModeLabel: {
2851
+ classPropertyName: "darkModeLabel",
2852
+ publicName: "darkModeLabel",
2853
+ isSignal: true,
2854
+ isRequired: false,
2855
+ transformFunction: null
2856
+ },
2857
+ configuratorLabel: {
2858
+ classPropertyName: "configuratorLabel",
2859
+ publicName: "configuratorLabel",
2860
+ isSignal: true,
2861
+ isRequired: false,
2862
+ transformFunction: null
2863
+ }
2864
+ },
2885
2865
  ngImport: i0,
2886
- template: "<div class=\"flex gap-4 top-8 right-8\" [ngClass]=\"{ fixed: float() }\">\n <h-button\n type=\"button\"\n (onClick)=\"toggleDarkMode()\"\n [rounded]=\"true\"\n [icon]=\"isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'\"\n severity=\"secondary\"\n />\n <div class=\"relative\">\n <h-button\n icon=\"pi pi-palette\"\n hStyleClass=\"@next\"\n enterFromClass=\"hidden\"\n enterActiveClass=\"animate-scalein\"\n leaveToClass=\"hidden\"\n leaveActiveClass=\"animate-fadeout\"\n [hideOnOutsideClick]=\"true\"\n type=\"button\"\n rounded\n />\n <helix-configurator />\n </div>\n</div>\n",
2866
+ template: "<div class=\"flex gap-4 top-8 right-8\" [ngClass]=\"{ fixed: float() }\">\n <button\n hx-button\n type=\"button\"\n iconOnly\n rounded\n severity=\"secondary\"\n [attr.aria-label]=\"darkModeLabel()\"\n (click)=\"toggleDarkMode()\"\n >\n <span [class]=\"isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'\" aria-hidden=\"true\"></span>\n </button>\n <div class=\"relative\">\n <button\n hx-button\n type=\"button\"\n iconOnly\n rounded\n [attr.aria-label]=\"configuratorLabel()\"\n hStyleClass=\"@next\"\n enterFromClass=\"hidden\"\n enterActiveClass=\"animate-scalein\"\n leaveToClass=\"hidden\"\n leaveActiveClass=\"animate-fadeout\"\n [hideOnOutsideClick]=\"true\"\n >\n <span class=\"pi pi-palette\" aria-hidden=\"true\"></span>\n </button>\n <helix-configurator />\n </div>\n</div>\n",
2887
2867
  styles: [""],
2888
2868
  dependencies: [
2889
2869
  {
@@ -2892,52 +2872,25 @@ var HelixFloatingConfigurator = class HelixFloatingConfigurator {
2892
2872
  },
2893
2873
  {
2894
2874
  kind: "directive",
2895
- type: i1$2.NgClass,
2875
+ type: i1$1.NgClass,
2896
2876
  selector: "[ngClass]",
2897
2877
  inputs: ["class", "ngClass"]
2898
2878
  },
2899
2879
  {
2900
- kind: "ngmodule",
2901
- type: ButtonModule
2902
- },
2903
- {
2904
- kind: "component",
2905
- type: i2$1.Button,
2906
- selector: "h-button",
2880
+ kind: "directive",
2881
+ type: HxButton,
2882
+ selector: "button[hx-button], a[hx-button]",
2907
2883
  inputs: [
2908
- "hostName",
2909
- "type",
2910
- "badge",
2911
- "disabled",
2912
- "raised",
2913
- "rounded",
2914
- "text",
2915
- "plain",
2916
- "outlined",
2917
- "link",
2918
- "tabindex",
2919
- "size",
2920
2884
  "variant",
2921
- "style",
2922
- "styleClass",
2923
- "badgeClass",
2924
- "badgeSeverity",
2925
- "ariaLabel",
2926
- "autofocus",
2927
- "iconPos",
2928
- "icon",
2929
- "label",
2930
- "loading",
2931
- "loadingIcon",
2932
2885
  "severity",
2933
- "buttonProps",
2934
- "fluid"
2886
+ "size",
2887
+ "rounded",
2888
+ "raised",
2889
+ "fluid",
2890
+ "iconOnly",
2891
+ "loading"
2935
2892
  ],
2936
- outputs: [
2937
- "onClick",
2938
- "onFocus",
2939
- "onBlur"
2940
- ]
2893
+ exportAs: ["hx-button"]
2941
2894
  },
2942
2895
  {
2943
2896
  kind: "ngmodule",
@@ -2945,7 +2898,7 @@ var HelixFloatingConfigurator = class HelixFloatingConfigurator {
2945
2898
  },
2946
2899
  {
2947
2900
  kind: "directive",
2948
- type: i1$1.StyleClass,
2901
+ type: i1.StyleClass,
2949
2902
  selector: "[hStyleClass]",
2950
2903
  inputs: [
2951
2904
  "hStyleClass",
@@ -2983,22 +2936,40 @@ i0.ɵɵngDeclareClassMetadata({
2983
2936
  standalone: true,
2984
2937
  imports: [
2985
2938
  CommonModule,
2986
- ButtonModule,
2939
+ HxButton,
2987
2940
  StyleClassModule,
2988
2941
  HelixConfigurator
2989
2942
  ],
2990
2943
  changeDetection: ChangeDetectionStrategy.Eager,
2991
- template: "<div class=\"flex gap-4 top-8 right-8\" [ngClass]=\"{ fixed: float() }\">\n <h-button\n type=\"button\"\n (onClick)=\"toggleDarkMode()\"\n [rounded]=\"true\"\n [icon]=\"isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'\"\n severity=\"secondary\"\n />\n <div class=\"relative\">\n <h-button\n icon=\"pi pi-palette\"\n hStyleClass=\"@next\"\n enterFromClass=\"hidden\"\n enterActiveClass=\"animate-scalein\"\n leaveToClass=\"hidden\"\n leaveActiveClass=\"animate-fadeout\"\n [hideOnOutsideClick]=\"true\"\n type=\"button\"\n rounded\n />\n <helix-configurator />\n </div>\n</div>\n"
2944
+ template: "<div class=\"flex gap-4 top-8 right-8\" [ngClass]=\"{ fixed: float() }\">\n <button\n hx-button\n type=\"button\"\n iconOnly\n rounded\n severity=\"secondary\"\n [attr.aria-label]=\"darkModeLabel()\"\n (click)=\"toggleDarkMode()\"\n >\n <span [class]=\"isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'\" aria-hidden=\"true\"></span>\n </button>\n <div class=\"relative\">\n <button\n hx-button\n type=\"button\"\n iconOnly\n rounded\n [attr.aria-label]=\"configuratorLabel()\"\n hStyleClass=\"@next\"\n enterFromClass=\"hidden\"\n enterActiveClass=\"animate-scalein\"\n leaveToClass=\"hidden\"\n leaveActiveClass=\"animate-fadeout\"\n [hideOnOutsideClick]=\"true\"\n >\n <span class=\"pi pi-palette\" aria-hidden=\"true\"></span>\n </button>\n <helix-configurator />\n </div>\n</div>\n"
2992
2945
  }]
2993
2946
  }],
2994
- propDecorators: { float: [{
2995
- type: i0.Input,
2996
- args: [{
2997
- isSignal: true,
2998
- alias: "float",
2999
- required: false
2947
+ propDecorators: {
2948
+ float: [{
2949
+ type: i0.Input,
2950
+ args: [{
2951
+ isSignal: true,
2952
+ alias: "float",
2953
+ required: false
2954
+ }]
2955
+ }],
2956
+ darkModeLabel: [{
2957
+ type: i0.Input,
2958
+ args: [{
2959
+ isSignal: true,
2960
+ alias: "darkModeLabel",
2961
+ required: false
2962
+ }]
2963
+ }],
2964
+ configuratorLabel: [{
2965
+ type: i0.Input,
2966
+ args: [{
2967
+ isSignal: true,
2968
+ alias: "configuratorLabel",
2969
+ required: false
2970
+ }]
3000
2971
  }]
3001
- }] }
2972
+ }
3002
2973
  });
3003
2974
  var HelixFooter = class HelixFooter {
3004
2975
  brandName = input("Helix", ...ngDevMode ? [{ debugName: "brandName" }] : /* istanbul ignore next */ []);
@@ -3051,7 +3022,7 @@ var HelixFooter = class HelixFooter {
3051
3022
  },
3052
3023
  {
3053
3024
  kind: "directive",
3054
- type: i2$2.RouterLink,
3025
+ type: i2.RouterLink,
3055
3026
  selector: "[routerLink]",
3056
3027
  inputs: [
3057
3028
  "target",
@@ -3155,7 +3126,7 @@ var HelixMobileMenuAction = class HelixMobileMenuAction {
3155
3126
  type: StyleClassModule
3156
3127
  }, {
3157
3128
  kind: "directive",
3158
- type: i1$1.StyleClass,
3129
+ type: i1.StyleClass,
3159
3130
  selector: "[hStyleClass]",
3160
3131
  inputs: [
3161
3132
  "hStyleClass",
@@ -3293,51 +3264,24 @@ var HelixAccess = class HelixAccess {
3293
3264
  }
3294
3265
  },
3295
3266
  ngImport: i0,
3296
- 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, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%);\n \"\n >\n <div\n class=\"w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center\"\n style=\"border-radius: 53px\"\n >\n <div class=\"gap-4 flex flex-col items-center\">\n <div\n class=\"flex justify-center items-center border-2 border-orange-500 rounded-full\"\n style=\"width: 3.2rem; height: 3.2rem\"\n >\n <i class=\"text-orange-500 pi pi-fw pi-lock text-2xl!\"></i>\n </div>\n <h1 class=\"text-surface-900 dark:text-surface-0 font-bold text-4xl lg:text-5xl mb-2\">\n {{ title() }}\n </h1>\n <span class=\"text-muted-color mb-8\">{{ message() }}</span>\n <img\n src=\"https://primefaces.org/cdn/templates/sakai/auth/asset-access.svg\"\n alt=\"Access denied\"\n class=\"mb-8\"\n width=\"80%\"\n />\n <div class=\"col-span-12 mt-8 text-center\">\n <h-button [label]=\"buttonLabel()\" [routerLink]=\"buttonRoute()\" severity=\"warn\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n",
3267
+ 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, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%);\n \"\n >\n <div\n class=\"w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center\"\n style=\"border-radius: 53px\"\n >\n <div class=\"gap-4 flex flex-col items-center\">\n <div\n class=\"flex justify-center items-center border-2 border-orange-500 rounded-full\"\n style=\"width: 3.2rem; height: 3.2rem\"\n >\n <i class=\"text-orange-500 pi pi-fw pi-lock text-2xl!\"></i>\n </div>\n <h1 class=\"text-surface-900 dark:text-surface-0 font-bold text-4xl lg:text-5xl mb-2\">\n {{ title() }}\n </h1>\n <span class=\"text-muted-color mb-8\">{{ message() }}</span>\n <img\n src=\"https://primefaces.org/cdn/templates/sakai/auth/asset-access.svg\"\n alt=\"Access denied\"\n class=\"mb-8\"\n width=\"80%\"\n />\n <div class=\"col-span-12 mt-8 text-center\">\n <a hx-button [routerLink]=\"buttonRoute()\" severity=\"warn\">{{ buttonLabel() }}</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n",
3297
3268
  styles: [""],
3298
3269
  dependencies: [
3299
3270
  {
3300
- kind: "ngmodule",
3301
- type: ButtonModule
3302
- },
3303
- {
3304
- kind: "component",
3305
- type: i2$1.Button,
3306
- selector: "h-button",
3271
+ kind: "directive",
3272
+ type: HxButton,
3273
+ selector: "button[hx-button], a[hx-button]",
3307
3274
  inputs: [
3308
- "hostName",
3309
- "type",
3310
- "badge",
3311
- "disabled",
3312
- "raised",
3313
- "rounded",
3314
- "text",
3315
- "plain",
3316
- "outlined",
3317
- "link",
3318
- "tabindex",
3319
- "size",
3320
3275
  "variant",
3321
- "style",
3322
- "styleClass",
3323
- "badgeClass",
3324
- "badgeSeverity",
3325
- "ariaLabel",
3326
- "autofocus",
3327
- "iconPos",
3328
- "icon",
3329
- "label",
3330
- "loading",
3331
- "loadingIcon",
3332
3276
  "severity",
3333
- "buttonProps",
3334
- "fluid"
3277
+ "size",
3278
+ "rounded",
3279
+ "raised",
3280
+ "fluid",
3281
+ "iconOnly",
3282
+ "loading"
3335
3283
  ],
3336
- outputs: [
3337
- "onClick",
3338
- "onFocus",
3339
- "onBlur"
3340
- ]
3284
+ exportAs: ["hx-button"]
3341
3285
  },
3342
3286
  {
3343
3287
  kind: "ngmodule",
@@ -3345,7 +3289,7 @@ var HelixAccess = class HelixAccess {
3345
3289
  },
3346
3290
  {
3347
3291
  kind: "directive",
3348
- type: i2$2.RouterLink,
3292
+ type: i2.RouterLink,
3349
3293
  selector: "[routerLink]",
3350
3294
  inputs: [
3351
3295
  "target",
@@ -3370,7 +3314,11 @@ var HelixAccess = class HelixAccess {
3370
3314
  kind: "component",
3371
3315
  type: HelixFloatingConfigurator,
3372
3316
  selector: "helix-floating-configurator",
3373
- inputs: ["float"]
3317
+ inputs: [
3318
+ "float",
3319
+ "darkModeLabel",
3320
+ "configuratorLabel"
3321
+ ]
3374
3322
  }
3375
3323
  ],
3376
3324
  changeDetection: i0.ChangeDetectionStrategy.Eager
@@ -3387,13 +3335,13 @@ i0.ɵɵngDeclareClassMetadata({
3387
3335
  selector: "helix-access",
3388
3336
  standalone: true,
3389
3337
  imports: [
3390
- ButtonModule,
3338
+ HxButton,
3391
3339
  RouterModule,
3392
3340
  RippleModule,
3393
3341
  HelixFloatingConfigurator
3394
3342
  ],
3395
3343
  changeDetection: ChangeDetectionStrategy.Eager,
3396
- 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, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%);\n \"\n >\n <div\n class=\"w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center\"\n style=\"border-radius: 53px\"\n >\n <div class=\"gap-4 flex flex-col items-center\">\n <div\n class=\"flex justify-center items-center border-2 border-orange-500 rounded-full\"\n style=\"width: 3.2rem; height: 3.2rem\"\n >\n <i class=\"text-orange-500 pi pi-fw pi-lock text-2xl!\"></i>\n </div>\n <h1 class=\"text-surface-900 dark:text-surface-0 font-bold text-4xl lg:text-5xl mb-2\">\n {{ title() }}\n </h1>\n <span class=\"text-muted-color mb-8\">{{ message() }}</span>\n <img\n src=\"https://primefaces.org/cdn/templates/sakai/auth/asset-access.svg\"\n alt=\"Access denied\"\n class=\"mb-8\"\n width=\"80%\"\n />\n <div class=\"col-span-12 mt-8 text-center\">\n <h-button [label]=\"buttonLabel()\" [routerLink]=\"buttonRoute()\" severity=\"warn\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n"
3344
+ 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, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%);\n \"\n >\n <div\n class=\"w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center\"\n style=\"border-radius: 53px\"\n >\n <div class=\"gap-4 flex flex-col items-center\">\n <div\n class=\"flex justify-center items-center border-2 border-orange-500 rounded-full\"\n style=\"width: 3.2rem; height: 3.2rem\"\n >\n <i class=\"text-orange-500 pi pi-fw pi-lock text-2xl!\"></i>\n </div>\n <h1 class=\"text-surface-900 dark:text-surface-0 font-bold text-4xl lg:text-5xl mb-2\">\n {{ title() }}\n </h1>\n <span class=\"text-muted-color mb-8\">{{ message() }}</span>\n <img\n src=\"https://primefaces.org/cdn/templates/sakai/auth/asset-access.svg\"\n alt=\"Access denied\"\n class=\"mb-8\"\n width=\"80%\"\n />\n <div class=\"col-span-12 mt-8 text-center\">\n <a hx-button [routerLink]=\"buttonRoute()\" severity=\"warn\">{{ buttonLabel() }}</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n"
3397
3345
  }]
3398
3346
  }],
3399
3347
  propDecorators: {
@@ -3481,51 +3429,24 @@ var HelixError = class HelixError {
3481
3429
  }
3482
3430
  },
3483
3431
  ngImport: i0,
3484
- 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, rgba(233, 30, 99, 0.4) 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 flex flex-col items-center\"\n style=\"border-radius: 53px\"\n >\n <div class=\"gap-4 flex flex-col items-center\">\n <div\n class=\"flex justify-center items-center border-2 border-pink-500 rounded-full\"\n style=\"height: 3.2rem; width: 3.2rem\"\n >\n <i class=\"pi pi-fw pi-exclamation-circle text-2xl! text-pink-500\"></i>\n </div>\n <h1 class=\"text-surface-900 dark:text-surface-0 font-bold text-5xl mb-2\">\n {{ title() }}\n </h1>\n <span class=\"text-muted-color mb-8\">{{ message() }}</span>\n <img\n src=\"https://primefaces.org/cdn/templates/sakai/auth/asset-error.svg\"\n alt=\"Error\"\n class=\"mb-8\"\n width=\"80%\"\n />\n <div class=\"col-span-12 mt-8 text-center\">\n <h-button [label]=\"buttonLabel()\" [routerLink]=\"buttonRoute()\" severity=\"danger\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n",
3432
+ 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, rgba(233, 30, 99, 0.4) 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 flex flex-col items-center\"\n style=\"border-radius: 53px\"\n >\n <div class=\"gap-4 flex flex-col items-center\">\n <div\n class=\"flex justify-center items-center border-2 border-pink-500 rounded-full\"\n style=\"height: 3.2rem; width: 3.2rem\"\n >\n <i class=\"pi pi-fw pi-exclamation-circle text-2xl! text-pink-500\"></i>\n </div>\n <h1 class=\"text-surface-900 dark:text-surface-0 font-bold text-5xl mb-2\">\n {{ title() }}\n </h1>\n <span class=\"text-muted-color mb-8\">{{ message() }}</span>\n <img\n src=\"https://primefaces.org/cdn/templates/sakai/auth/asset-error.svg\"\n alt=\"Error\"\n class=\"mb-8\"\n width=\"80%\"\n />\n <div class=\"col-span-12 mt-8 text-center\">\n <a hx-button [routerLink]=\"buttonRoute()\" severity=\"danger\">{{ buttonLabel() }}</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n",
3485
3433
  styles: [""],
3486
3434
  dependencies: [
3487
3435
  {
3488
- kind: "ngmodule",
3489
- type: ButtonModule
3490
- },
3491
- {
3492
- kind: "component",
3493
- type: i2$1.Button,
3494
- selector: "h-button",
3436
+ kind: "directive",
3437
+ type: HxButton,
3438
+ selector: "button[hx-button], a[hx-button]",
3495
3439
  inputs: [
3496
- "hostName",
3497
- "type",
3498
- "badge",
3499
- "disabled",
3500
- "raised",
3501
- "rounded",
3502
- "text",
3503
- "plain",
3504
- "outlined",
3505
- "link",
3506
- "tabindex",
3507
- "size",
3508
3440
  "variant",
3509
- "style",
3510
- "styleClass",
3511
- "badgeClass",
3512
- "badgeSeverity",
3513
- "ariaLabel",
3514
- "autofocus",
3515
- "iconPos",
3516
- "icon",
3517
- "label",
3518
- "loading",
3519
- "loadingIcon",
3520
3441
  "severity",
3521
- "buttonProps",
3522
- "fluid"
3442
+ "size",
3443
+ "rounded",
3444
+ "raised",
3445
+ "fluid",
3446
+ "iconOnly",
3447
+ "loading"
3523
3448
  ],
3524
- outputs: [
3525
- "onClick",
3526
- "onFocus",
3527
- "onBlur"
3528
- ]
3449
+ exportAs: ["hx-button"]
3529
3450
  },
3530
3451
  {
3531
3452
  kind: "ngmodule",
@@ -3537,7 +3458,7 @@ var HelixError = class HelixError {
3537
3458
  },
3538
3459
  {
3539
3460
  kind: "directive",
3540
- type: i2$2.RouterLink,
3461
+ type: i2.RouterLink,
3541
3462
  selector: "[routerLink]",
3542
3463
  inputs: [
3543
3464
  "target",
@@ -3558,7 +3479,11 @@ var HelixError = class HelixError {
3558
3479
  kind: "component",
3559
3480
  type: HelixFloatingConfigurator,
3560
3481
  selector: "helix-floating-configurator",
3561
- inputs: ["float"]
3482
+ inputs: [
3483
+ "float",
3484
+ "darkModeLabel",
3485
+ "configuratorLabel"
3486
+ ]
3562
3487
  }
3563
3488
  ],
3564
3489
  changeDetection: i0.ChangeDetectionStrategy.Eager
@@ -3575,13 +3500,13 @@ i0.ɵɵngDeclareClassMetadata({
3575
3500
  selector: "helix-error",
3576
3501
  standalone: true,
3577
3502
  imports: [
3578
- ButtonModule,
3503
+ HxButton,
3579
3504
  RippleModule,
3580
3505
  RouterModule,
3581
3506
  HelixFloatingConfigurator
3582
3507
  ],
3583
3508
  changeDetection: ChangeDetectionStrategy.Eager,
3584
- 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, rgba(233, 30, 99, 0.4) 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 flex flex-col items-center\"\n style=\"border-radius: 53px\"\n >\n <div class=\"gap-4 flex flex-col items-center\">\n <div\n class=\"flex justify-center items-center border-2 border-pink-500 rounded-full\"\n style=\"height: 3.2rem; width: 3.2rem\"\n >\n <i class=\"pi pi-fw pi-exclamation-circle text-2xl! text-pink-500\"></i>\n </div>\n <h1 class=\"text-surface-900 dark:text-surface-0 font-bold text-5xl mb-2\">\n {{ title() }}\n </h1>\n <span class=\"text-muted-color mb-8\">{{ message() }}</span>\n <img\n src=\"https://primefaces.org/cdn/templates/sakai/auth/asset-error.svg\"\n alt=\"Error\"\n class=\"mb-8\"\n width=\"80%\"\n />\n <div class=\"col-span-12 mt-8 text-center\">\n <h-button [label]=\"buttonLabel()\" [routerLink]=\"buttonRoute()\" severity=\"danger\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n"
3509
+ 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, rgba(233, 30, 99, 0.4) 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 flex flex-col items-center\"\n style=\"border-radius: 53px\"\n >\n <div class=\"gap-4 flex flex-col items-center\">\n <div\n class=\"flex justify-center items-center border-2 border-pink-500 rounded-full\"\n style=\"height: 3.2rem; width: 3.2rem\"\n >\n <i class=\"pi pi-fw pi-exclamation-circle text-2xl! text-pink-500\"></i>\n </div>\n <h1 class=\"text-surface-900 dark:text-surface-0 font-bold text-5xl mb-2\">\n {{ title() }}\n </h1>\n <span class=\"text-muted-color mb-8\">{{ message() }}</span>\n <img\n src=\"https://primefaces.org/cdn/templates/sakai/auth/asset-error.svg\"\n alt=\"Error\"\n class=\"mb-8\"\n width=\"80%\"\n />\n <div class=\"col-span-12 mt-8 text-center\">\n <a hx-button [routerLink]=\"buttonRoute()\" severity=\"danger\">{{ buttonLabel() }}</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n"
3585
3510
  }]
3586
3511
  }],
3587
3512
  propDecorators: {
@@ -3688,147 +3613,64 @@ var HelixLogin = class HelixLogin {
3688
3613
  forgotPassword: "forgotPassword"
3689
3614
  },
3690
3615
  ngImport: i0,
3691
- 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 hInputText\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 <h-checkbox [(ngModel)]=\"checked\" id=\"rememberme1\" binary class=\"mr-2\"></h-checkbox>\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 <h-button [label]=\"submitLabel()\" styleClass=\"w-full\" (onClick)=\"onSubmit()\"></h-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",
3692
3617
  styles: [""],
3693
3618
  dependencies: [
3694
3619
  {
3695
- kind: "ngmodule",
3696
- type: ButtonModule
3697
- },
3698
- {
3699
- kind: "component",
3700
- type: i2$1.Button,
3701
- selector: "h-button",
3620
+ kind: "directive",
3621
+ type: HxButton,
3622
+ selector: "button[hx-button], a[hx-button]",
3702
3623
  inputs: [
3703
- "hostName",
3704
- "type",
3705
- "badge",
3706
- "disabled",
3707
- "raised",
3708
- "rounded",
3709
- "text",
3710
- "plain",
3711
- "outlined",
3712
- "link",
3713
- "tabindex",
3714
- "size",
3715
3624
  "variant",
3716
- "style",
3717
- "styleClass",
3718
- "badgeClass",
3719
- "badgeSeverity",
3720
- "ariaLabel",
3721
- "autofocus",
3722
- "iconPos",
3723
- "icon",
3724
- "label",
3725
- "loading",
3726
- "loadingIcon",
3727
3625
  "severity",
3728
- "buttonProps",
3729
- "fluid"
3730
- ],
3731
- outputs: [
3732
- "onClick",
3733
- "onFocus",
3734
- "onBlur"
3735
- ]
3736
- },
3737
- {
3738
- kind: "ngmodule",
3739
- type: CheckboxModule
3740
- },
3741
- {
3742
- kind: "component",
3743
- type: i2.Checkbox,
3744
- selector: "h-checkbox, h-checkBox, h-check-box",
3745
- inputs: [
3746
- "hostName",
3747
- "value",
3748
- "binary",
3749
- "ariaLabelledBy",
3750
- "ariaLabel",
3751
- "tabindex",
3752
- "inputId",
3753
- "inputStyle",
3754
- "styleClass",
3755
- "inputClass",
3756
- "indeterminate",
3757
- "formControl",
3758
- "checkboxIcon",
3759
- "readonly",
3760
- "autofocus",
3761
- "trueValue",
3762
- "falseValue",
3763
- "variant",
3764
- "size"
3626
+ "size",
3627
+ "rounded",
3628
+ "raised",
3629
+ "fluid",
3630
+ "iconOnly",
3631
+ "loading"
3765
3632
  ],
3766
- outputs: [
3767
- "onChange",
3768
- "onFocus",
3769
- "onBlur"
3770
- ]
3633
+ exportAs: ["hx-button"]
3771
3634
  },
3772
3635
  {
3773
- kind: "ngmodule",
3774
- type: InputTextModule
3636
+ kind: "directive",
3637
+ type: HxCheckbox,
3638
+ selector: "input[hx-checkbox]",
3639
+ inputs: ["size"],
3640
+ exportAs: ["hx-checkbox"]
3775
3641
  },
3776
3642
  {
3777
3643
  kind: "directive",
3778
- type: i3.InputText,
3779
- selector: "[hInputText]",
3644
+ type: HxInput,
3645
+ selector: "input[hx-input], textarea[hx-input]",
3780
3646
  inputs: [
3781
- "hostName",
3782
- "ptInputText",
3783
- "pInputTextPT",
3784
- "pInputTextUnstyled",
3785
- "pSize",
3786
3647
  "variant",
3787
- "fluid",
3788
- "invalid"
3789
- ]
3790
- },
3791
- {
3792
- kind: "ngmodule",
3793
- type: PasswordModule
3648
+ "size",
3649
+ "fluid"
3650
+ ],
3651
+ exportAs: ["hx-input"]
3794
3652
  },
3795
3653
  {
3796
3654
  kind: "component",
3797
- type: i4.Password,
3798
- selector: "h-password",
3655
+ type: HxPassword,
3656
+ selector: "hx-password",
3799
3657
  inputs: [
3800
- "ariaLabel",
3801
- "ariaLabelledBy",
3802
- "label",
3803
- "promptLabel",
3804
- "mediumRegex",
3805
- "strongRegex",
3806
- "weakLabel",
3807
- "mediumLabel",
3808
- "maxLength",
3809
- "strongLabel",
3658
+ "placeholder",
3810
3659
  "inputId",
3811
- "feedback",
3812
- "toggleMask",
3813
- "inputStyleClass",
3814
- "styleClass",
3815
- "inputStyle",
3816
- "showTransitionOptions",
3817
- "hideTransitionOptions",
3660
+ "ariaLabel",
3661
+ "ariaLabelledby",
3818
3662
  "autocomplete",
3819
- "placeholder",
3820
- "showClear",
3821
- "autofocus",
3822
- "tabindex",
3823
- "appendTo",
3824
- "motionOptions",
3825
- "overlayOptions"
3663
+ "size",
3664
+ "variant",
3665
+ "fluid",
3666
+ "toggleMask",
3667
+ "showLabel",
3668
+ "hideLabel",
3669
+ "value",
3670
+ "disabled",
3671
+ "invalid"
3826
3672
  ],
3827
- outputs: [
3828
- "onFocus",
3829
- "onBlur",
3830
- "onClear"
3831
- ]
3673
+ outputs: ["valueChange", "touch"]
3832
3674
  },
3833
3675
  {
3834
3676
  kind: "ngmodule",
@@ -3836,17 +3678,22 @@ var HelixLogin = class HelixLogin {
3836
3678
  },
3837
3679
  {
3838
3680
  kind: "directive",
3839
- type: i1$3.DefaultValueAccessor,
3681
+ type: i1$2.DefaultValueAccessor,
3840
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]"
3841
3683
  },
3842
3684
  {
3843
3685
  kind: "directive",
3844
- type: i1$3.NgControlStatus,
3686
+ type: i1$2.CheckboxControlValueAccessor,
3687
+ selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]"
3688
+ },
3689
+ {
3690
+ kind: "directive",
3691
+ type: i1$2.NgControlStatus,
3845
3692
  selector: "[formControlName],[ngModel],[formControl]"
3846
3693
  },
3847
3694
  {
3848
3695
  kind: "directive",
3849
- type: i1$3.NgModel,
3696
+ type: i1$2.NgModel,
3850
3697
  selector: "[ngModel]:not([formControlName]):not([formControl])",
3851
3698
  inputs: [
3852
3699
  "name",
@@ -3869,7 +3716,11 @@ var HelixLogin = class HelixLogin {
3869
3716
  kind: "component",
3870
3717
  type: HelixFloatingConfigurator,
3871
3718
  selector: "helix-floating-configurator",
3872
- inputs: ["float"]
3719
+ inputs: [
3720
+ "float",
3721
+ "darkModeLabel",
3722
+ "configuratorLabel"
3723
+ ]
3873
3724
  }
3874
3725
  ],
3875
3726
  changeDetection: i0.ChangeDetectionStrategy.Eager
@@ -3886,17 +3737,17 @@ i0.ɵɵngDeclareClassMetadata({
3886
3737
  selector: "helix-login",
3887
3738
  standalone: true,
3888
3739
  imports: [
3889
- ButtonModule,
3890
- CheckboxModule,
3891
- InputTextModule,
3892
- PasswordModule,
3740
+ HxButton,
3741
+ HxCheckbox,
3742
+ HxInput,
3743
+ HxPassword,
3893
3744
  FormsModule,
3894
3745
  RouterModule,
3895
3746
  RippleModule,
3896
3747
  HelixFloatingConfigurator
3897
3748
  ],
3898
3749
  changeDetection: ChangeDetectionStrategy.Eager,
3899
- 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 hInputText\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 <h-checkbox [(ngModel)]=\"checked\" id=\"rememberme1\" binary class=\"mr-2\"></h-checkbox>\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 <h-button [label]=\"submitLabel()\" styleClass=\"w-full\" (onClick)=\"onSubmit()\"></h-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"
3900
3751
  }]
3901
3752
  }],
3902
3753
  propDecorators: {
@@ -4166,7 +4017,7 @@ var HelixFeaturesWidget = class HelixFeaturesWidget {
4166
4017
  type: CommonModule
4167
4018
  }, {
4168
4019
  kind: "directive",
4169
- type: i1$2.NgClass,
4020
+ type: i1$1.NgClass,
4170
4021
  selector: "[ngClass]",
4171
4022
  inputs: ["class", "ngClass"]
4172
4023
  }],
@@ -4309,7 +4160,7 @@ var HelixFooterWidget = class HelixFooterWidget {
4309
4160
  type: RouterModule
4310
4161
  }, {
4311
4162
  kind: "directive",
4312
- type: i2$2.RouterLink,
4163
+ type: i2.RouterLink,
4313
4164
  selector: "[routerLink]",
4314
4165
  inputs: [
4315
4166
  "target",
@@ -4439,37 +4290,24 @@ var HelixHeroWidget = class HelixHeroWidget {
4439
4290
  },
4440
4291
  outputs: { buttonClick: "buttonClick" },
4441
4292
  ngImport: i0,
4442
- template: "<div\n id=\"hero\"\n class=\"flex flex-col pt-6 px-6 lg:px-20 overflow-hidden\"\n style=\"\n background:\n linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),\n radial-gradient(\n 77.36% 256.97% at 77.36% 57.52%,\n rgb(238, 239, 175) 0%,\n rgb(195, 227, 250) 100%\n );\n clip-path: ellipse(150% 87% at 93% 13%);\n \"\n>\n <div class=\"mx-6 md:mx-20 mt-0 md:mt-6\">\n <h1 class=\"text-6xl font-bold text-gray-900 leading-tight dark:!text-gray-700\">\n <span class=\"font-light block\">{{ headlineLight() }}</span\n >{{ headline() }}\n </h1>\n <p class=\"font-normal text-2xl leading-normal md:mt-4 text-gray-700 dark:text-gray-700\">\n {{ description() }}\n </p>\n <button\n hButton\n hRipple\n [rounded]=\"true\"\n type=\"button\"\n [label]=\"buttonLabel()\"\n class=\"text-xl! mt-8 px-4!\"\n (click)=\"buttonClick.emit()\"\n ></button>\n </div>\n <div class=\"flex justify-center md:justify-end\">\n <img [src]=\"imageUrl()\" [alt]=\"imageAlt()\" class=\"w-9/12 md:w-auto\" />\n </div>\n</div>\n",
4293
+ template: "<div\n id=\"hero\"\n class=\"flex flex-col pt-6 px-6 lg:px-20 overflow-hidden\"\n style=\"\n background:\n linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),\n radial-gradient(\n 77.36% 256.97% at 77.36% 57.52%,\n rgb(238, 239, 175) 0%,\n rgb(195, 227, 250) 100%\n );\n clip-path: ellipse(150% 87% at 93% 13%);\n \"\n>\n <div class=\"mx-6 md:mx-20 mt-0 md:mt-6\">\n <h1 class=\"text-6xl font-bold text-gray-900 leading-tight dark:!text-gray-700\">\n <span class=\"font-light block\">{{ headlineLight() }}</span\n >{{ headline() }}\n </h1>\n <p class=\"font-normal text-2xl leading-normal md:mt-4 text-gray-700 dark:text-gray-700\">\n {{ description() }}\n </p>\n <button\n hx-button\n hRipple\n rounded\n type=\"button\"\n class=\"text-xl! mt-8 px-4!\"\n (click)=\"buttonClick.emit()\"\n >\n {{ buttonLabel() }}\n </button>\n </div>\n <div class=\"flex justify-center md:justify-end\">\n <img [src]=\"imageUrl()\" [alt]=\"imageAlt()\" class=\"w-9/12 md:w-auto\" />\n </div>\n</div>\n",
4443
4294
  styles: [""],
4444
4295
  dependencies: [
4445
- {
4446
- kind: "ngmodule",
4447
- type: ButtonModule
4448
- },
4449
4296
  {
4450
4297
  kind: "directive",
4451
- type: i2$1.ButtonDirective,
4452
- selector: "[hButton]",
4298
+ type: HxButton,
4299
+ selector: "button[hx-button], a[hx-button]",
4453
4300
  inputs: [
4454
- "ptButtonDirective",
4455
- "pButtonPT",
4456
- "pButtonUnstyled",
4457
- "hostName",
4458
- "text",
4459
- "plain",
4460
- "raised",
4301
+ "variant",
4302
+ "severity",
4461
4303
  "size",
4462
- "outlined",
4463
4304
  "rounded",
4464
- "iconPos",
4465
- "loadingIcon",
4305
+ "raised",
4466
4306
  "fluid",
4467
- "label",
4468
- "icon",
4469
- "loading",
4470
- "buttonProps",
4471
- "severity"
4472
- ]
4307
+ "iconOnly",
4308
+ "loading"
4309
+ ],
4310
+ exportAs: ["hx-button"]
4473
4311
  },
4474
4312
  {
4475
4313
  kind: "ngmodule",
@@ -4477,7 +4315,7 @@ var HelixHeroWidget = class HelixHeroWidget {
4477
4315
  },
4478
4316
  {
4479
4317
  kind: "directive",
4480
- type: i3$2.Ripple,
4318
+ type: i3.Ripple,
4481
4319
  selector: "[hRipple]"
4482
4320
  }
4483
4321
  ],
@@ -4494,9 +4332,9 @@ i0.ɵɵngDeclareClassMetadata({
4494
4332
  args: [{
4495
4333
  selector: "helix-hero-widget",
4496
4334
  standalone: true,
4497
- imports: [ButtonModule, RippleModule],
4335
+ imports: [HxButton, RippleModule],
4498
4336
  changeDetection: ChangeDetectionStrategy.Eager,
4499
- template: "<div\n id=\"hero\"\n class=\"flex flex-col pt-6 px-6 lg:px-20 overflow-hidden\"\n style=\"\n background:\n linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),\n radial-gradient(\n 77.36% 256.97% at 77.36% 57.52%,\n rgb(238, 239, 175) 0%,\n rgb(195, 227, 250) 100%\n );\n clip-path: ellipse(150% 87% at 93% 13%);\n \"\n>\n <div class=\"mx-6 md:mx-20 mt-0 md:mt-6\">\n <h1 class=\"text-6xl font-bold text-gray-900 leading-tight dark:!text-gray-700\">\n <span class=\"font-light block\">{{ headlineLight() }}</span\n >{{ headline() }}\n </h1>\n <p class=\"font-normal text-2xl leading-normal md:mt-4 text-gray-700 dark:text-gray-700\">\n {{ description() }}\n </p>\n <button\n hButton\n hRipple\n [rounded]=\"true\"\n type=\"button\"\n [label]=\"buttonLabel()\"\n class=\"text-xl! mt-8 px-4!\"\n (click)=\"buttonClick.emit()\"\n ></button>\n </div>\n <div class=\"flex justify-center md:justify-end\">\n <img [src]=\"imageUrl()\" [alt]=\"imageAlt()\" class=\"w-9/12 md:w-auto\" />\n </div>\n</div>\n"
4337
+ template: "<div\n id=\"hero\"\n class=\"flex flex-col pt-6 px-6 lg:px-20 overflow-hidden\"\n style=\"\n background:\n linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),\n radial-gradient(\n 77.36% 256.97% at 77.36% 57.52%,\n rgb(238, 239, 175) 0%,\n rgb(195, 227, 250) 100%\n );\n clip-path: ellipse(150% 87% at 93% 13%);\n \"\n>\n <div class=\"mx-6 md:mx-20 mt-0 md:mt-6\">\n <h1 class=\"text-6xl font-bold text-gray-900 leading-tight dark:!text-gray-700\">\n <span class=\"font-light block\">{{ headlineLight() }}</span\n >{{ headline() }}\n </h1>\n <p class=\"font-normal text-2xl leading-normal md:mt-4 text-gray-700 dark:text-gray-700\">\n {{ description() }}\n </p>\n <button\n hx-button\n hRipple\n rounded\n type=\"button\"\n class=\"text-xl! mt-8 px-4!\"\n (click)=\"buttonClick.emit()\"\n >\n {{ buttonLabel() }}\n </button>\n </div>\n <div class=\"flex justify-center md:justify-end\">\n <img [src]=\"imageUrl()\" [alt]=\"imageAlt()\" class=\"w-9/12 md:w-auto\" />\n </div>\n</div>\n"
4500
4338
  }]
4501
4339
  }],
4502
4340
  propDecorators: {
@@ -4758,52 +4596,34 @@ var HelixPricingWidget = class HelixPricingWidget {
4758
4596
  },
4759
4597
  outputs: { planSelect: "planSelect" },
4760
4598
  ngImport: i0,
4761
- 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 hButton\n hRipple\n [label]=\"plan.buttonLabel\"\n class=\"h-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white\"\n (click)=\"planSelect.emit(plan); $event.stopPropagation()\"\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",
4762
4600
  styles: [""],
4763
4601
  dependencies: [
4764
- {
4765
- kind: "ngmodule",
4766
- type: DividerModule
4767
- },
4768
4602
  {
4769
4603
  kind: "component",
4770
- type: i1.Divider,
4771
- selector: "h-divider",
4604
+ type: HxDivider,
4605
+ selector: "hx-divider",
4772
4606
  inputs: [
4773
- "styleClass",
4774
4607
  "layout",
4775
4608
  "type",
4776
4609
  "align"
4777
4610
  ]
4778
4611
  },
4779
- {
4780
- kind: "ngmodule",
4781
- type: ButtonModule
4782
- },
4783
4612
  {
4784
4613
  kind: "directive",
4785
- type: i2$1.ButtonDirective,
4786
- selector: "[hButton]",
4614
+ type: HxButton,
4615
+ selector: "button[hx-button], a[hx-button]",
4787
4616
  inputs: [
4788
- "ptButtonDirective",
4789
- "pButtonPT",
4790
- "pButtonUnstyled",
4791
- "hostName",
4792
- "text",
4793
- "plain",
4794
- "raised",
4617
+ "variant",
4618
+ "severity",
4795
4619
  "size",
4796
- "outlined",
4797
4620
  "rounded",
4798
- "iconPos",
4799
- "loadingIcon",
4621
+ "raised",
4800
4622
  "fluid",
4801
- "label",
4802
- "icon",
4803
- "loading",
4804
- "buttonProps",
4805
- "severity"
4806
- ]
4623
+ "iconOnly",
4624
+ "loading"
4625
+ ],
4626
+ exportAs: ["hx-button"]
4807
4627
  },
4808
4628
  {
4809
4629
  kind: "ngmodule",
@@ -4811,7 +4631,7 @@ var HelixPricingWidget = class HelixPricingWidget {
4811
4631
  },
4812
4632
  {
4813
4633
  kind: "directive",
4814
- type: i3$2.Ripple,
4634
+ type: i3.Ripple,
4815
4635
  selector: "[hRipple]"
4816
4636
  }
4817
4637
  ],
@@ -4829,12 +4649,12 @@ i0.ɵɵngDeclareClassMetadata({
4829
4649
  selector: "helix-pricing-widget",
4830
4650
  standalone: true,
4831
4651
  imports: [
4832
- DividerModule,
4833
- ButtonModule,
4652
+ HxDivider,
4653
+ HxButton,
4834
4654
  RippleModule
4835
4655
  ],
4836
4656
  changeDetection: ChangeDetectionStrategy.Eager,
4837
- 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 hButton\n hRipple\n [label]=\"plan.buttonLabel\"\n class=\"h-button-rounded border-0 ml-4 font-light leading-tight bg-blue-500 text-white\"\n (click)=\"planSelect.emit(plan); $event.stopPropagation()\"\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"
4838
4658
  }]
4839
4659
  }],
4840
4660
  propDecorators: {
@@ -4893,6 +4713,7 @@ const DEFAULT_NAV_LINKS = [
4893
4713
  var HelixTopbarWidget = class HelixTopbarWidget {
4894
4714
  router;
4895
4715
  navLinks = input(DEFAULT_NAV_LINKS, ...ngDevMode ? [{ debugName: "navLinks" }] : /* istanbul ignore next */ []);
4716
+ menuLabel = input("Menu", ...ngDevMode ? [{ debugName: "menuLabel" }] : /* istanbul ignore next */ []);
4896
4717
  loginLabel = input("Login", ...ngDevMode ? [{ debugName: "loginLabel" }] : /* istanbul ignore next */ []);
4897
4718
  loginRoute = input("/auth/login", ...ngDevMode ? [{ debugName: "loginRoute" }] : /* istanbul ignore next */ []);
4898
4719
  registerLabel = input("Register", ...ngDevMode ? [{ debugName: "registerLabel" }] : /* istanbul ignore next */ []);
@@ -4905,7 +4726,7 @@ var HelixTopbarWidget = class HelixTopbarWidget {
4905
4726
  version: "22.2.1",
4906
4727
  ngImport: i0,
4907
4728
  type: HelixTopbarWidget,
4908
- deps: [{ token: i2$2.Router }],
4729
+ deps: [{ token: i2.Router }],
4909
4730
  target: i0.ɵɵFactoryTarget.Component
4910
4731
  });
4911
4732
  static ɵcmp = i0.ɵɵngDeclareComponent({
@@ -4922,6 +4743,13 @@ var HelixTopbarWidget = class HelixTopbarWidget {
4922
4743
  isRequired: false,
4923
4744
  transformFunction: null
4924
4745
  },
4746
+ menuLabel: {
4747
+ classPropertyName: "menuLabel",
4748
+ publicName: "menuLabel",
4749
+ isSignal: true,
4750
+ isRequired: false,
4751
+ transformFunction: null
4752
+ },
4925
4753
  loginLabel: {
4926
4754
  classPropertyName: "loginLabel",
4927
4755
  publicName: "loginLabel",
@@ -4952,7 +4780,7 @@ var HelixTopbarWidget = class HelixTopbarWidget {
4952
4780
  }
4953
4781
  },
4954
4782
  ngImport: i0,
4955
- template: "<a class=\"flex items-center\" href=\"#\">\n <svg viewBox=\"0 0 54 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-12 mr-2\">\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_topbar\"\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_topbar)\">\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.88887Z\"\n fill=\"var(--primary-color)\"\n />\n </g>\n </svg>\n <span class=\"text-surface-900 dark:text-surface-0 font-medium text-2xl leading-normal mr-20\"\n >SAKAI</span\n >\n</a>\n\n<a\n hButton\n [text]=\"true\"\n severity=\"secondary\"\n [rounded]=\"true\"\n hRipple\n class=\"lg:hidden!\"\n hStyleClass=\"@next\"\n enterFromClass=\"hidden\"\n leaveToClass=\"hidden\"\n [hideOnOutsideClick]=\"true\"\n>\n <i class=\"pi pi-bars text-2xl!\"></i>\n</a>\n\n<div\n class=\"items-center bg-surface-0 dark:bg-surface-900 grow justify-between hidden lg:flex absolute lg:static w-full left-0 top-full px-12 lg:px-0 z-20 rounded-border\"\n>\n <ul\n class=\"list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row cursor-pointer gap-8\"\n >\n @for (link of navLinks(); track link.label) {\n <li>\n <a\n (click)=\"router.navigate([link.route], { fragment: link.fragment })\"\n hRipple\n class=\"px-0 py-4 text-surface-900 dark:text-surface-0 font-medium text-xl\"\n >\n <span>{{ link.label }}</span>\n </a>\n </li>\n }\n </ul>\n <div class=\"flex border-t lg:border-t-0 border-surface py-4 lg:py-0 mt-4 lg:mt-0 gap-2\">\n <button\n hButton\n hRipple\n [label]=\"loginLabel()\"\n [routerLink]=\"loginRoute()\"\n [rounded]=\"true\"\n [text]=\"true\"\n ></button>\n <button\n hButton\n hRipple\n [label]=\"registerLabel()\"\n [routerLink]=\"registerRoute()\"\n [rounded]=\"true\"\n ></button>\n <helix-floating-configurator [float]=\"false\" />\n </div>\n</div>\n",
4783
+ template: "<a class=\"flex items-center\" href=\"#\">\n <svg viewBox=\"0 0 54 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-12 mr-2\">\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_topbar\"\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_topbar)\">\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.88887Z\"\n fill=\"var(--primary-color)\"\n />\n </g>\n </svg>\n <span class=\"text-surface-900 dark:text-surface-0 font-medium text-2xl leading-normal mr-20\"\n >SAKAI</span\n >\n</a>\n\n<a\n hx-button\n variant=\"text\"\n severity=\"secondary\"\n rounded\n iconOnly\n [attr.aria-label]=\"menuLabel()\"\n hRipple\n class=\"lg:hidden!\"\n hStyleClass=\"@next\"\n enterFromClass=\"hidden\"\n leaveToClass=\"hidden\"\n [hideOnOutsideClick]=\"true\"\n>\n <i class=\"pi pi-bars text-2xl!\"></i>\n</a>\n\n<div\n class=\"items-center bg-surface-0 dark:bg-surface-900 grow justify-between hidden lg:flex absolute lg:static w-full left-0 top-full px-12 lg:px-0 z-20 rounded-border\"\n>\n <ul\n class=\"list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row cursor-pointer gap-8\"\n >\n @for (link of navLinks(); track link.label) {\n <li>\n <a\n (click)=\"router.navigate([link.route], { fragment: link.fragment })\"\n hRipple\n class=\"px-0 py-4 text-surface-900 dark:text-surface-0 font-medium text-xl\"\n >\n <span>{{ link.label }}</span>\n </a>\n </li>\n }\n </ul>\n <div class=\"flex border-t lg:border-t-0 border-surface py-4 lg:py-0 mt-4 lg:mt-0 gap-2\">\n <a hx-button hRipple [routerLink]=\"loginRoute()\" rounded variant=\"text\">{{ loginLabel() }}</a>\n <a hx-button hRipple [routerLink]=\"registerRoute()\" rounded>{{ registerLabel() }}</a>\n <helix-floating-configurator [float]=\"false\" />\n </div>\n</div>\n",
4956
4784
  styles: [""],
4957
4785
  dependencies: [
4958
4786
  {
@@ -4961,7 +4789,7 @@ var HelixTopbarWidget = class HelixTopbarWidget {
4961
4789
  },
4962
4790
  {
4963
4791
  kind: "directive",
4964
- type: i2$2.RouterLink,
4792
+ type: i2.RouterLink,
4965
4793
  selector: "[routerLink]",
4966
4794
  inputs: [
4967
4795
  "target",
@@ -4984,7 +4812,7 @@ var HelixTopbarWidget = class HelixTopbarWidget {
4984
4812
  },
4985
4813
  {
4986
4814
  kind: "directive",
4987
- type: i1$1.StyleClass,
4815
+ type: i1.StyleClass,
4988
4816
  selector: "[hStyleClass]",
4989
4817
  inputs: [
4990
4818
  "hStyleClass",
@@ -5001,34 +4829,21 @@ var HelixTopbarWidget = class HelixTopbarWidget {
5001
4829
  "resizeSelector"
5002
4830
  ]
5003
4831
  },
5004
- {
5005
- kind: "ngmodule",
5006
- type: ButtonModule
5007
- },
5008
4832
  {
5009
4833
  kind: "directive",
5010
- type: i2$1.ButtonDirective,
5011
- selector: "[hButton]",
4834
+ type: HxButton,
4835
+ selector: "button[hx-button], a[hx-button]",
5012
4836
  inputs: [
5013
- "ptButtonDirective",
5014
- "pButtonPT",
5015
- "pButtonUnstyled",
5016
- "hostName",
5017
- "text",
5018
- "plain",
5019
- "raised",
4837
+ "variant",
4838
+ "severity",
5020
4839
  "size",
5021
- "outlined",
5022
4840
  "rounded",
5023
- "iconPos",
5024
- "loadingIcon",
4841
+ "raised",
5025
4842
  "fluid",
5026
- "label",
5027
- "icon",
5028
- "loading",
5029
- "buttonProps",
5030
- "severity"
5031
- ]
4843
+ "iconOnly",
4844
+ "loading"
4845
+ ],
4846
+ exportAs: ["hx-button"]
5032
4847
  },
5033
4848
  {
5034
4849
  kind: "ngmodule",
@@ -5036,14 +4851,18 @@ var HelixTopbarWidget = class HelixTopbarWidget {
5036
4851
  },
5037
4852
  {
5038
4853
  kind: "directive",
5039
- type: i3$2.Ripple,
4854
+ type: i3.Ripple,
5040
4855
  selector: "[hRipple]"
5041
4856
  },
5042
4857
  {
5043
4858
  kind: "component",
5044
4859
  type: HelixFloatingConfigurator,
5045
4860
  selector: "helix-floating-configurator",
5046
- inputs: ["float"]
4861
+ inputs: [
4862
+ "float",
4863
+ "darkModeLabel",
4864
+ "configuratorLabel"
4865
+ ]
5047
4866
  }
5048
4867
  ],
5049
4868
  changeDetection: i0.ChangeDetectionStrategy.Eager
@@ -5062,15 +4881,15 @@ i0.ɵɵngDeclareClassMetadata({
5062
4881
  imports: [
5063
4882
  RouterModule,
5064
4883
  StyleClassModule,
5065
- ButtonModule,
4884
+ HxButton,
5066
4885
  RippleModule,
5067
4886
  HelixFloatingConfigurator
5068
4887
  ],
5069
4888
  changeDetection: ChangeDetectionStrategy.Eager,
5070
- template: "<a class=\"flex items-center\" href=\"#\">\n <svg viewBox=\"0 0 54 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-12 mr-2\">\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_topbar\"\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_topbar)\">\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.88887Z\"\n fill=\"var(--primary-color)\"\n />\n </g>\n </svg>\n <span class=\"text-surface-900 dark:text-surface-0 font-medium text-2xl leading-normal mr-20\"\n >SAKAI</span\n >\n</a>\n\n<a\n hButton\n [text]=\"true\"\n severity=\"secondary\"\n [rounded]=\"true\"\n hRipple\n class=\"lg:hidden!\"\n hStyleClass=\"@next\"\n enterFromClass=\"hidden\"\n leaveToClass=\"hidden\"\n [hideOnOutsideClick]=\"true\"\n>\n <i class=\"pi pi-bars text-2xl!\"></i>\n</a>\n\n<div\n class=\"items-center bg-surface-0 dark:bg-surface-900 grow justify-between hidden lg:flex absolute lg:static w-full left-0 top-full px-12 lg:px-0 z-20 rounded-border\"\n>\n <ul\n class=\"list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row cursor-pointer gap-8\"\n >\n @for (link of navLinks(); track link.label) {\n <li>\n <a\n (click)=\"router.navigate([link.route], { fragment: link.fragment })\"\n hRipple\n class=\"px-0 py-4 text-surface-900 dark:text-surface-0 font-medium text-xl\"\n >\n <span>{{ link.label }}</span>\n </a>\n </li>\n }\n </ul>\n <div class=\"flex border-t lg:border-t-0 border-surface py-4 lg:py-0 mt-4 lg:mt-0 gap-2\">\n <button\n hButton\n hRipple\n [label]=\"loginLabel()\"\n [routerLink]=\"loginRoute()\"\n [rounded]=\"true\"\n [text]=\"true\"\n ></button>\n <button\n hButton\n hRipple\n [label]=\"registerLabel()\"\n [routerLink]=\"registerRoute()\"\n [rounded]=\"true\"\n ></button>\n <helix-floating-configurator [float]=\"false\" />\n </div>\n</div>\n"
4889
+ template: "<a class=\"flex items-center\" href=\"#\">\n <svg viewBox=\"0 0 54 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-12 mr-2\">\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_topbar\"\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_topbar)\">\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.88887Z\"\n fill=\"var(--primary-color)\"\n />\n </g>\n </svg>\n <span class=\"text-surface-900 dark:text-surface-0 font-medium text-2xl leading-normal mr-20\"\n >SAKAI</span\n >\n</a>\n\n<a\n hx-button\n variant=\"text\"\n severity=\"secondary\"\n rounded\n iconOnly\n [attr.aria-label]=\"menuLabel()\"\n hRipple\n class=\"lg:hidden!\"\n hStyleClass=\"@next\"\n enterFromClass=\"hidden\"\n leaveToClass=\"hidden\"\n [hideOnOutsideClick]=\"true\"\n>\n <i class=\"pi pi-bars text-2xl!\"></i>\n</a>\n\n<div\n class=\"items-center bg-surface-0 dark:bg-surface-900 grow justify-between hidden lg:flex absolute lg:static w-full left-0 top-full px-12 lg:px-0 z-20 rounded-border\"\n>\n <ul\n class=\"list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row cursor-pointer gap-8\"\n >\n @for (link of navLinks(); track link.label) {\n <li>\n <a\n (click)=\"router.navigate([link.route], { fragment: link.fragment })\"\n hRipple\n class=\"px-0 py-4 text-surface-900 dark:text-surface-0 font-medium text-xl\"\n >\n <span>{{ link.label }}</span>\n </a>\n </li>\n }\n </ul>\n <div class=\"flex border-t lg:border-t-0 border-surface py-4 lg:py-0 mt-4 lg:mt-0 gap-2\">\n <a hx-button hRipple [routerLink]=\"loginRoute()\" rounded variant=\"text\">{{ loginLabel() }}</a>\n <a hx-button hRipple [routerLink]=\"registerRoute()\" rounded>{{ registerLabel() }}</a>\n <helix-floating-configurator [float]=\"false\" />\n </div>\n</div>\n"
5071
4890
  }]
5072
4891
  }],
5073
- ctorParameters: () => [{ type: i2$2.Router }],
4892
+ ctorParameters: () => [{ type: i2.Router }],
5074
4893
  propDecorators: {
5075
4894
  navLinks: [{
5076
4895
  type: i0.Input,
@@ -5080,6 +4899,14 @@ i0.ɵɵngDeclareClassMetadata({
5080
4899
  required: false
5081
4900
  }]
5082
4901
  }],
4902
+ menuLabel: [{
4903
+ type: i0.Input,
4904
+ args: [{
4905
+ isSignal: true,
4906
+ alias: "menuLabel",
4907
+ required: false
4908
+ }]
4909
+ }],
5083
4910
  loginLabel: [{
5084
4911
  type: i0.Input,
5085
4912
  args: [{
@@ -5143,6 +4970,7 @@ var HelixLanding = class HelixLanding {
5143
4970
  selector: "helix-topbar-widget",
5144
4971
  inputs: [
5145
4972
  "navLinks",
4973
+ "menuLabel",
5146
4974
  "loginLabel",
5147
4975
  "loginRoute",
5148
4976
  "registerLabel",
@@ -5212,14 +5040,6 @@ var HelixLanding = class HelixLanding {
5212
5040
  {
5213
5041
  kind: "ngmodule",
5214
5042
  type: StyleClassModule
5215
- },
5216
- {
5217
- kind: "ngmodule",
5218
- type: ButtonModule
5219
- },
5220
- {
5221
- kind: "ngmodule",
5222
- type: DividerModule
5223
5043
  }
5224
5044
  ],
5225
5045
  changeDetection: i0.ChangeDetectionStrategy.Eager
@@ -5244,9 +5064,7 @@ i0.ɵɵngDeclareClassMetadata({
5244
5064
  HelixPricingWidget,
5245
5065
  HelixFooterWidget,
5246
5066
  RippleModule,
5247
- StyleClassModule,
5248
- ButtonModule,
5249
- DividerModule
5067
+ StyleClassModule
5250
5068
  ],
5251
5069
  changeDetection: ChangeDetectionStrategy.Eager,
5252
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"
@@ -5339,7 +5157,7 @@ var HelixNotfound = class HelixNotfound {
5339
5157
  }
5340
5158
  },
5341
5159
  ngImport: i0,
5342
- template: "<helix-floating-configurator />\n<div class=\"flex items-center justify-center min-h-screen overflow-hidden\">\n <div class=\"flex flex-col items-center justify-center\">\n <svg\n width=\"54\"\n height=\"40\"\n viewBox=\"0 0 54 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"mb-8 w-32 shrink-0\"\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\n style=\"\n border-radius: 56px;\n padding: 0.3rem;\n background: linear-gradient(\n 180deg,\n color-mix(in srgb, var(--primary-color), transparent 60%) 10%,\n var(--surface-ground) 30%\n );\n \"\n >\n <div\n class=\"w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center\"\n style=\"border-radius: 53px\"\n >\n <span class=\"text-primary font-bold text-3xl\">{{ errorCode() }}</span>\n <h1 class=\"text-surface-900 dark:text-surface-0 font-bold text-3xl lg:text-5xl mb-2\">\n {{ title() }}\n </h1>\n <div class=\"text-surface-600 dark:text-surface-200 mb-8\">{{ message() }}</div>\n @for (suggestion of suggestions(); track suggestion.title; let last = $last) {\n <a\n [routerLink]=\"suggestion.route\"\n class=\"w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b\"\n [class.mb-8]=\"last\"\n >\n <span\n class=\"flex justify-center items-center border-2 border-primary text-primary rounded-border\"\n style=\"height: 3.5rem; width: 3.5rem\"\n >\n <i [class]=\"suggestion.icon + ' text-2xl!'\"></i>\n </span>\n <span class=\"ml-6 flex flex-col\">\n <span\n class=\"text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0 block\"\n >{{ suggestion.title }}</span\n >\n <span class=\"text-surface-600 dark:text-surface-200 lg:text-xl\">{{\n suggestion.description\n }}</span>\n </span>\n </a>\n }\n <h-button [label]=\"buttonLabel()\" [routerLink]=\"buttonRoute()\" />\n </div>\n </div>\n </div>\n</div>\n",
5160
+ template: "<helix-floating-configurator />\n<div class=\"flex items-center justify-center min-h-screen overflow-hidden\">\n <div class=\"flex flex-col items-center justify-center\">\n <svg\n width=\"54\"\n height=\"40\"\n viewBox=\"0 0 54 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"mb-8 w-32 shrink-0\"\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\n style=\"\n border-radius: 56px;\n padding: 0.3rem;\n background: linear-gradient(\n 180deg,\n color-mix(in srgb, var(--primary-color), transparent 60%) 10%,\n var(--surface-ground) 30%\n );\n \"\n >\n <div\n class=\"w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center\"\n style=\"border-radius: 53px\"\n >\n <span class=\"text-primary font-bold text-3xl\">{{ errorCode() }}</span>\n <h1 class=\"text-surface-900 dark:text-surface-0 font-bold text-3xl lg:text-5xl mb-2\">\n {{ title() }}\n </h1>\n <div class=\"text-surface-600 dark:text-surface-200 mb-8\">{{ message() }}</div>\n @for (suggestion of suggestions(); track suggestion.title; let last = $last) {\n <a\n [routerLink]=\"suggestion.route\"\n class=\"w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b\"\n [class.mb-8]=\"last\"\n >\n <span\n class=\"flex justify-center items-center border-2 border-primary text-primary rounded-border\"\n style=\"height: 3.5rem; width: 3.5rem\"\n >\n <i [class]=\"suggestion.icon + ' text-2xl!'\"></i>\n </span>\n <span class=\"ml-6 flex flex-col\">\n <span\n class=\"text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0 block\"\n >{{ suggestion.title }}</span\n >\n <span class=\"text-surface-600 dark:text-surface-200 lg:text-xl\">{{\n suggestion.description\n }}</span>\n </span>\n </a>\n }\n <a hx-button [routerLink]=\"buttonRoute()\">{{ buttonLabel() }}</a>\n </div>\n </div>\n </div>\n</div>\n",
5343
5161
  styles: [""],
5344
5162
  dependencies: [
5345
5163
  {
@@ -5348,7 +5166,7 @@ var HelixNotfound = class HelixNotfound {
5348
5166
  },
5349
5167
  {
5350
5168
  kind: "directive",
5351
- type: i2$2.RouterLink,
5169
+ type: i2.RouterLink,
5352
5170
  selector: "[routerLink]",
5353
5171
  inputs: [
5354
5172
  "target",
@@ -5369,50 +5187,27 @@ var HelixNotfound = class HelixNotfound {
5369
5187
  kind: "component",
5370
5188
  type: HelixFloatingConfigurator,
5371
5189
  selector: "helix-floating-configurator",
5372
- inputs: ["float"]
5373
- },
5374
- {
5375
- kind: "ngmodule",
5376
- type: ButtonModule
5190
+ inputs: [
5191
+ "float",
5192
+ "darkModeLabel",
5193
+ "configuratorLabel"
5194
+ ]
5377
5195
  },
5378
5196
  {
5379
- kind: "component",
5380
- type: i2$1.Button,
5381
- selector: "h-button",
5197
+ kind: "directive",
5198
+ type: HxButton,
5199
+ selector: "button[hx-button], a[hx-button]",
5382
5200
  inputs: [
5383
- "hostName",
5384
- "type",
5385
- "badge",
5386
- "disabled",
5387
- "raised",
5388
- "rounded",
5389
- "text",
5390
- "plain",
5391
- "outlined",
5392
- "link",
5393
- "tabindex",
5394
- "size",
5395
5201
  "variant",
5396
- "style",
5397
- "styleClass",
5398
- "badgeClass",
5399
- "badgeSeverity",
5400
- "ariaLabel",
5401
- "autofocus",
5402
- "iconPos",
5403
- "icon",
5404
- "label",
5405
- "loading",
5406
- "loadingIcon",
5407
5202
  "severity",
5408
- "buttonProps",
5409
- "fluid"
5203
+ "size",
5204
+ "rounded",
5205
+ "raised",
5206
+ "fluid",
5207
+ "iconOnly",
5208
+ "loading"
5410
5209
  ],
5411
- outputs: [
5412
- "onClick",
5413
- "onFocus",
5414
- "onBlur"
5415
- ]
5210
+ exportAs: ["hx-button"]
5416
5211
  }
5417
5212
  ],
5418
5213
  changeDetection: i0.ChangeDetectionStrategy.Eager
@@ -5431,10 +5226,10 @@ i0.ɵɵngDeclareClassMetadata({
5431
5226
  imports: [
5432
5227
  RouterModule,
5433
5228
  HelixFloatingConfigurator,
5434
- ButtonModule
5229
+ HxButton
5435
5230
  ],
5436
5231
  changeDetection: ChangeDetectionStrategy.Eager,
5437
- template: "<helix-floating-configurator />\n<div class=\"flex items-center justify-center min-h-screen overflow-hidden\">\n <div class=\"flex flex-col items-center justify-center\">\n <svg\n width=\"54\"\n height=\"40\"\n viewBox=\"0 0 54 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"mb-8 w-32 shrink-0\"\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\n style=\"\n border-radius: 56px;\n padding: 0.3rem;\n background: linear-gradient(\n 180deg,\n color-mix(in srgb, var(--primary-color), transparent 60%) 10%,\n var(--surface-ground) 30%\n );\n \"\n >\n <div\n class=\"w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center\"\n style=\"border-radius: 53px\"\n >\n <span class=\"text-primary font-bold text-3xl\">{{ errorCode() }}</span>\n <h1 class=\"text-surface-900 dark:text-surface-0 font-bold text-3xl lg:text-5xl mb-2\">\n {{ title() }}\n </h1>\n <div class=\"text-surface-600 dark:text-surface-200 mb-8\">{{ message() }}</div>\n @for (suggestion of suggestions(); track suggestion.title; let last = $last) {\n <a\n [routerLink]=\"suggestion.route\"\n class=\"w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b\"\n [class.mb-8]=\"last\"\n >\n <span\n class=\"flex justify-center items-center border-2 border-primary text-primary rounded-border\"\n style=\"height: 3.5rem; width: 3.5rem\"\n >\n <i [class]=\"suggestion.icon + ' text-2xl!'\"></i>\n </span>\n <span class=\"ml-6 flex flex-col\">\n <span\n class=\"text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0 block\"\n >{{ suggestion.title }}</span\n >\n <span class=\"text-surface-600 dark:text-surface-200 lg:text-xl\">{{\n suggestion.description\n }}</span>\n </span>\n </a>\n }\n <h-button [label]=\"buttonLabel()\" [routerLink]=\"buttonRoute()\" />\n </div>\n </div>\n </div>\n</div>\n"
5232
+ template: "<helix-floating-configurator />\n<div class=\"flex items-center justify-center min-h-screen overflow-hidden\">\n <div class=\"flex flex-col items-center justify-center\">\n <svg\n width=\"54\"\n height=\"40\"\n viewBox=\"0 0 54 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"mb-8 w-32 shrink-0\"\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\n style=\"\n border-radius: 56px;\n padding: 0.3rem;\n background: linear-gradient(\n 180deg,\n color-mix(in srgb, var(--primary-color), transparent 60%) 10%,\n var(--surface-ground) 30%\n );\n \"\n >\n <div\n class=\"w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center\"\n style=\"border-radius: 53px\"\n >\n <span class=\"text-primary font-bold text-3xl\">{{ errorCode() }}</span>\n <h1 class=\"text-surface-900 dark:text-surface-0 font-bold text-3xl lg:text-5xl mb-2\">\n {{ title() }}\n </h1>\n <div class=\"text-surface-600 dark:text-surface-200 mb-8\">{{ message() }}</div>\n @for (suggestion of suggestions(); track suggestion.title; let last = $last) {\n <a\n [routerLink]=\"suggestion.route\"\n class=\"w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b\"\n [class.mb-8]=\"last\"\n >\n <span\n class=\"flex justify-center items-center border-2 border-primary text-primary rounded-border\"\n style=\"height: 3.5rem; width: 3.5rem\"\n >\n <i [class]=\"suggestion.icon + ' text-2xl!'\"></i>\n </span>\n <span class=\"ml-6 flex flex-col\">\n <span\n class=\"text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0 block\"\n >{{ suggestion.title }}</span\n >\n <span class=\"text-surface-600 dark:text-surface-200 lg:text-xl\">{{\n suggestion.description\n }}</span>\n </span>\n </a>\n }\n <a hx-button [routerLink]=\"buttonRoute()\">{{ buttonLabel() }}</a>\n </div>\n </div>\n </div>\n</div>\n"
5438
5233
  }]
5439
5234
  }],
5440
5235
  propDecorators: {