@gravionlabs/helix-shell 22.1.15 → 22.1.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/gravionlabs-helix-shell.mjs +306 -297
  2. package/fesm2022/gravionlabs-helix-shell.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/gravionlabs-helix-shell.d.ts +23 -2
package/fesm2022/gravionlabs-helix-shell.mjs CHANGED
@@ -1,19 +1,15 @@
1
1
  import * as i0 from "@angular/core";
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$1 from "@angular/common";
4
- import { CommonModule, NgClass, SlicePipe, isPlatformBrowser } from "@angular/common";
5
- import * as i1$2 from "@angular/forms";
2
+ import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, InjectionToken, PLATFORM_ID, ViewEncapsulation, afterNextRender, booleanAttribute, computed, effect, forwardRef, inject, input, output, signal, untracked } from "@angular/core";
3
+ import * as i1 from "@angular/common";
4
+ import { CommonModule, DOCUMENT, NgClass, SlicePipe, isPlatformBrowser } from "@angular/common";
5
+ import * as i1$1 from "@angular/forms";
6
6
  import { FormsModule, NG_VALUE_ACCESSOR } from "@angular/forms";
7
7
  import * as i2 from "@angular/router";
8
8
  import { ActivatedRoute, NavigationEnd, Router, RouterModule } from "@angular/router";
9
9
  import { patchState, signalStore, withComputed, withHooks, withMethods, withState } from "@ngrx/signals";
10
10
  import { DomSanitizer } from "@angular/platform-browser";
11
11
  import { Subject, filter, takeUntil } from "rxjs";
12
- import * as i3 from "@gravionlabs/helix-core/ripple";
13
- import { RippleModule } from "@gravionlabs/helix-core/ripple";
14
12
  import { HxBreadcrumb, HxButton, HxCheckbox, HxDivider, HxInput, HxPassword, HxSelectButton, HxTooltip } from "@gravionlabs/helix-ui";
15
- import * as i1 from "@gravionlabs/helix-core/styleclass";
16
- import { StyleClassModule } from "@gravionlabs/helix-core/styleclass";
17
13
  import { HelixConfig } from "@gravionlabs/helix-core/config";
18
14
  import { $t, updatePreset, updateSurfacePalette } from "@gravionlabs/helix-core/themes";
19
15
  import { auraPreset } from "@gravionlabs/helix-core/themes/aura";
@@ -289,13 +285,13 @@ var HelixSelect = class HelixSelect {
289
285
  },
290
286
  {
291
287
  kind: "directive",
292
- type: i1$2.NgSelectOption,
288
+ type: i1$1.NgSelectOption,
293
289
  selector: "option",
294
290
  inputs: ["ngValue", "value"]
295
291
  },
296
292
  {
297
293
  kind: "directive",
298
- type: i1$2.ɵNgSelectMultipleOption,
294
+ type: i1$1.ɵNgSelectMultipleOption,
299
295
  selector: "option",
300
296
  inputs: ["ngValue", "value"]
301
297
  }
@@ -737,7 +733,7 @@ var HelixNavRailItem = class HelixNavRailItem {
737
733
  }
738
734
  },
739
735
  ngImport: i0,
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",
736
+ 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 >\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 >\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",
741
737
  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"],
742
738
  dependencies: [
743
739
  {
@@ -757,7 +753,7 @@ var HelixNavRailItem = class HelixNavRailItem {
757
753
  },
758
754
  {
759
755
  kind: "directive",
760
- type: i1$1.NgClass,
756
+ type: i1.NgClass,
761
757
  selector: "[ngClass]",
762
758
  inputs: ["class", "ngClass"]
763
759
  },
@@ -784,15 +780,6 @@ var HelixNavRailItem = class HelixNavRailItem {
784
780
  "routerLink"
785
781
  ]
786
782
  },
787
- {
788
- kind: "ngmodule",
789
- type: RippleModule
790
- },
791
- {
792
- kind: "directive",
793
- type: i3.Ripple,
794
- selector: "[hRipple]"
795
- },
796
783
  {
797
784
  kind: "directive",
798
785
  type: HxTooltip,
@@ -822,7 +809,6 @@ i0.ɵɵngDeclareClassMetadata({
822
809
  imports: [
823
810
  CommonModule,
824
811
  RouterModule,
825
- RippleModule,
826
812
  HxTooltip
827
813
  ],
828
814
  changeDetection: ChangeDetectionStrategy.Eager,
@@ -835,7 +821,7 @@ i0.ɵɵngDeclareClassMetadata({
835
821
  "(focusout)": "onFocusOut($event)",
836
822
  "(keydown.escape)": "closeFlyout(true)"
837
823
  },
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",
824
+ 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 >\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 >\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",
839
825
  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"]
840
826
  }]
841
827
  }],
@@ -982,7 +968,7 @@ var HelixNavRail = class HelixNavRail {
982
968
  },
983
969
  {
984
970
  kind: "directive",
985
- type: i1$1.NgClass,
971
+ type: i1.NgClass,
986
972
  selector: "[ngClass]",
987
973
  inputs: ["class", "ngClass"]
988
974
  },
@@ -1494,6 +1480,136 @@ i0.ɵɵngDeclareClassMetadata({
1494
1480
  }]
1495
1481
  }
1496
1482
  });
1483
+ let nextId = 0;
1484
+ const HIDDEN = "hidden";
1485
+ var HelixDisclosure = class HelixDisclosure {
1486
+ animate = input(false, {
1487
+ ...ngDevMode ? { debugName: "animate" } : /* istanbul ignore next */ {},
1488
+ alias: "helixDisclosureAnimate",
1489
+ transform: booleanAttribute
1490
+ });
1491
+ #trigger = inject(ElementRef).nativeElement;
1492
+ #doc = inject(DOCUMENT);
1493
+ expanded = signal(false, ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
1494
+ #stopOutside = null;
1495
+ #fallback;
1496
+ constructor() {
1497
+ afterNextRender(() => this.expanded.set(this.#isOpen()));
1498
+ inject(DestroyRef).onDestroy(() => {
1499
+ clearTimeout(this.#fallback);
1500
+ this.#stopOutside?.();
1501
+ });
1502
+ }
1503
+ get #panel() {
1504
+ return this.#trigger.nextElementSibling;
1505
+ }
1506
+ #isOpen() {
1507
+ const panel = this.#panel;
1508
+ return !!panel && !panel.classList.contains(HIDDEN);
1509
+ }
1510
+ #motion() {
1511
+ return this.animate() && !this.#doc.defaultView?.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
1512
+ }
1513
+ toggle() {
1514
+ if (this.#isOpen()) this.close();
1515
+ else this.open();
1516
+ }
1517
+ open() {
1518
+ const panel = this.#panel;
1519
+ if (!panel || this.#isOpen()) return;
1520
+ clearTimeout(this.#fallback);
1521
+ if (!panel.id) panel.id = `helix-disclosure-${nextId++}`;
1522
+ this.#trigger.setAttribute("aria-controls", panel.id);
1523
+ panel.classList.remove("animate-fadeout");
1524
+ panel.classList.remove(HIDDEN);
1525
+ if (this.#motion()) {
1526
+ panel.classList.add("animate-scalein");
1527
+ panel.addEventListener("animationend", () => panel.classList.remove("animate-scalein"), { once: true });
1528
+ }
1529
+ this.expanded.set(true);
1530
+ const onClick = (event) => {
1531
+ const target = event.target;
1532
+ if (!this.#trigger.contains(target) && !panel.contains(target)) this.close();
1533
+ };
1534
+ setTimeout(() => this.#doc.addEventListener("click", onClick));
1535
+ this.#stopOutside = () => this.#doc.removeEventListener("click", onClick);
1536
+ }
1537
+ close(refocus = false) {
1538
+ const panel = this.#panel;
1539
+ this.#stopOutside?.();
1540
+ this.#stopOutside = null;
1541
+ if (!panel || !this.#isOpen()) return;
1542
+ const hide = () => {
1543
+ clearTimeout(this.#fallback);
1544
+ panel.classList.remove("animate-scalein", "animate-fadeout");
1545
+ panel.classList.add(HIDDEN);
1546
+ };
1547
+ if (this.#motion()) {
1548
+ panel.classList.remove("animate-scalein");
1549
+ panel.classList.add("animate-fadeout");
1550
+ panel.addEventListener("animationend", hide, { once: true });
1551
+ this.#fallback = setTimeout(hide, 400);
1552
+ } else hide();
1553
+ this.expanded.set(false);
1554
+ if (refocus) this.#trigger.focus();
1555
+ }
1556
+ static ɵfac = i0.ɵɵngDeclareFactory({
1557
+ minVersion: "12.0.0",
1558
+ version: "22.2.1",
1559
+ ngImport: i0,
1560
+ type: HelixDisclosure,
1561
+ deps: [],
1562
+ target: i0.ɵɵFactoryTarget.Directive
1563
+ });
1564
+ static ɵdir = i0.ɵɵngDeclareDirective({
1565
+ minVersion: "17.1.0",
1566
+ version: "22.2.1",
1567
+ type: HelixDisclosure,
1568
+ isStandalone: true,
1569
+ selector: "[helixDisclosure]",
1570
+ inputs: { animate: {
1571
+ classPropertyName: "animate",
1572
+ publicName: "helixDisclosureAnimate",
1573
+ isSignal: true,
1574
+ isRequired: false,
1575
+ transformFunction: null
1576
+ } },
1577
+ host: {
1578
+ listeners: {
1579
+ "click": "toggle()",
1580
+ "keydown.escape": "close(true)"
1581
+ },
1582
+ properties: { "attr.aria-expanded": "expanded()" }
1583
+ },
1584
+ ngImport: i0
1585
+ });
1586
+ };
1587
+ i0.ɵɵngDeclareClassMetadata({
1588
+ minVersion: "12.0.0",
1589
+ version: "22.2.1",
1590
+ ngImport: i0,
1591
+ type: HelixDisclosure,
1592
+ decorators: [{
1593
+ type: Directive,
1594
+ args: [{
1595
+ selector: "[helixDisclosure]",
1596
+ host: {
1597
+ "[attr.aria-expanded]": "expanded()",
1598
+ "(click)": "toggle()",
1599
+ "(keydown.escape)": "close(true)"
1600
+ }
1601
+ }]
1602
+ }],
1603
+ ctorParameters: () => [],
1604
+ propDecorators: { animate: [{
1605
+ type: i0.Input,
1606
+ args: [{
1607
+ isSignal: true,
1608
+ alias: "helixDisclosureAnimate",
1609
+ required: false
1610
+ }]
1611
+ }] }
1612
+ });
1497
1613
  var HelixAlertAction = class HelixAlertAction {
1498
1614
  count = input.required(...ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []);
1499
1615
  alerts = input(...ngDevMode ? [void 0, { debugName: "alerts" }] : /* istanbul ignore next */ []);
@@ -1982,7 +2098,7 @@ var HelixConfigurator = class HelixConfigurator {
1982
2098
  },
1983
2099
  {
1984
2100
  kind: "directive",
1985
- type: i1$1.NgClass,
2101
+ type: i1.NgClass,
1986
2102
  selector: "[ngClass]",
1987
2103
  inputs: ["class", "ngClass"]
1988
2104
  },
@@ -1992,12 +2108,12 @@ var HelixConfigurator = class HelixConfigurator {
1992
2108
  },
1993
2109
  {
1994
2110
  kind: "directive",
1995
- type: i1$2.NgControlStatus,
2111
+ type: i1$1.NgControlStatus,
1996
2112
  selector: "[formControlName],[ngModel],[formControl]"
1997
2113
  },
1998
2114
  {
1999
2115
  kind: "directive",
2000
- type: i1$2.NgModel,
2116
+ type: i1$1.NgModel,
2001
2117
  selector: "[ngModel]:not([formControlName]):not([formControl])",
2002
2118
  inputs: [
2003
2119
  "name",
@@ -2055,6 +2171,7 @@ i0.ɵɵngDeclareClassMetadata({
2055
2171
  }]
2056
2172
  });
2057
2173
  var HelixConfiguratorAction = class HelixConfiguratorAction {
2174
+ label = input("Configure theme", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
2058
2175
  static ɵfac = i0.ɵɵngDeclareFactory({
2059
2176
  minVersion: "12.0.0",
2060
2177
  version: "22.2.1",
@@ -2064,11 +2181,18 @@ var HelixConfiguratorAction = class HelixConfiguratorAction {
2064
2181
  target: i0.ɵɵFactoryTarget.Component
2065
2182
  });
2066
2183
  static ɵcmp = i0.ɵɵngDeclareComponent({
2067
- minVersion: "14.0.0",
2184
+ minVersion: "17.1.0",
2068
2185
  version: "22.2.1",
2069
2186
  type: HelixConfiguratorAction,
2070
2187
  isStandalone: true,
2071
2188
  selector: "helix-configurator-action",
2189
+ inputs: { label: {
2190
+ classPropertyName: "label",
2191
+ publicName: "label",
2192
+ isSignal: true,
2193
+ isRequired: false,
2194
+ transformFunction: null
2195
+ } },
2072
2196
  ngImport: i0,
2073
2197
  template: `
2074
2198
  <div
@@ -2076,13 +2200,11 @@ var HelixConfiguratorAction = class HelixConfiguratorAction {
2076
2200
  style="display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;"
2077
2201
  >
2078
2202
  <button
2203
+ type="button"
2079
2204
  class="layout-topbar-action layout-topbar-action-highlight"
2080
- hStyleClass="@next"
2081
- enterFromClass="hidden"
2082
- enterActiveClass="animate-scalein"
2083
- leaveToClass="hidden"
2084
- leaveActiveClass="animate-fadeout"
2085
- [hideOnOutsideClick]="true"
2205
+ [attr.aria-label]="label()"
2206
+ helixDisclosure
2207
+ helixDisclosureAnimate
2086
2208
  >
2087
2209
  <i class="pi pi-palette" style="font-size: 1.4rem;"></i>
2088
2210
  </button>
@@ -2091,36 +2213,16 @@ var HelixConfiguratorAction = class HelixConfiguratorAction {
2091
2213
  `,
2092
2214
  isInline: true,
2093
2215
  styles: [":host{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:50%;cursor:pointer;transition:background-color var(--element-transition-duration)}:host(:hover){background-color:var(--surface-hover)}.relative,button{cursor:pointer}button i{cursor:inherit}\n"],
2094
- dependencies: [
2095
- {
2096
- kind: "ngmodule",
2097
- type: StyleClassModule
2098
- },
2099
- {
2100
- kind: "directive",
2101
- type: i1.StyleClass,
2102
- selector: "[hStyleClass]",
2103
- inputs: [
2104
- "hStyleClass",
2105
- "enterFromClass",
2106
- "enterActiveClass",
2107
- "enterToClass",
2108
- "leaveFromClass",
2109
- "leaveActiveClass",
2110
- "leaveToClass",
2111
- "hideOnOutsideClick",
2112
- "toggleClass",
2113
- "hideOnEscape",
2114
- "hideOnResize",
2115
- "resizeSelector"
2116
- ]
2117
- },
2118
- {
2119
- kind: "component",
2120
- type: HelixConfigurator,
2121
- selector: "helix-configurator"
2122
- }
2123
- ],
2216
+ dependencies: [{
2217
+ kind: "directive",
2218
+ type: HelixDisclosure,
2219
+ selector: "[helixDisclosure]",
2220
+ inputs: ["helixDisclosureAnimate"]
2221
+ }, {
2222
+ kind: "component",
2223
+ type: HelixConfigurator,
2224
+ selector: "helix-configurator"
2225
+ }],
2124
2226
  changeDetection: i0.ChangeDetectionStrategy.Eager
2125
2227
  });
2126
2228
  };
@@ -2134,20 +2236,18 @@ i0.ɵɵngDeclareClassMetadata({
2134
2236
  args: [{
2135
2237
  selector: "helix-configurator-action",
2136
2238
  standalone: true,
2137
- imports: [StyleClassModule, HelixConfigurator],
2239
+ imports: [HelixDisclosure, HelixConfigurator],
2138
2240
  template: `
2139
2241
  <div
2140
2242
  class="relative"
2141
2243
  style="display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;"
2142
2244
  >
2143
2245
  <button
2246
+ type="button"
2144
2247
  class="layout-topbar-action layout-topbar-action-highlight"
2145
- hStyleClass="@next"
2146
- enterFromClass="hidden"
2147
- enterActiveClass="animate-scalein"
2148
- leaveToClass="hidden"
2149
- leaveActiveClass="animate-fadeout"
2150
- [hideOnOutsideClick]="true"
2248
+ [attr.aria-label]="label()"
2249
+ helixDisclosure
2250
+ helixDisclosureAnimate
2151
2251
  >
2152
2252
  <i class="pi pi-palette" style="font-size: 1.4rem;"></i>
2153
2253
  </button>
@@ -2157,7 +2257,15 @@ i0.ɵɵngDeclareClassMetadata({
2157
2257
  changeDetection: ChangeDetectionStrategy.Eager,
2158
2258
  styles: [":host{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:50%;cursor:pointer;transition:background-color var(--element-transition-duration)}:host(:hover){background-color:var(--surface-hover)}.relative,button{cursor:pointer}button i{cursor:inherit}\n"]
2159
2259
  }]
2160
- }]
2260
+ }],
2261
+ propDecorators: { label: [{
2262
+ type: i0.Input,
2263
+ args: [{
2264
+ isSignal: true,
2265
+ alias: "label",
2266
+ required: false
2267
+ }]
2268
+ }] }
2161
2269
  });
2162
2270
  var HelixDarkModeAction = class HelixDarkModeAction {
2163
2271
  store = inject(LayoutStore);
@@ -2196,7 +2304,7 @@ var HelixDarkModeAction = class HelixDarkModeAction {
2196
2304
  type: CommonModule
2197
2305
  }, {
2198
2306
  kind: "directive",
2199
- type: i1$1.NgClass,
2307
+ type: i1.NgClass,
2200
2308
  selector: "[ngClass]",
2201
2309
  inputs: ["class", "ngClass"]
2202
2310
  }],
@@ -2255,6 +2363,7 @@ var HelixTopbar = class HelixTopbar {
2255
2363
  appTitle = input("Helix", ...ngDevMode ? [{ debugName: "appTitle" }] : /* istanbul ignore next */ []);
2256
2364
  topbarActions = input(DEFAULT_ACTIONS, ...ngDevMode ? [{ debugName: "topbarActions" }] : /* istanbul ignore next */ []);
2257
2365
  breadcrumbs = input(void 0, ...ngDevMode ? [{ debugName: "breadcrumbs" }] : /* istanbul ignore next */ []);
2366
+ menuLabel = input("More actions", ...ngDevMode ? [{ debugName: "menuLabel" }] : /* istanbul ignore next */ []);
2258
2367
  items = input(DEFAULT_ITEMS, ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
2259
2368
  store = inject(LayoutStore);
2260
2369
  router = inject(Router);
@@ -2311,6 +2420,13 @@ var HelixTopbar = class HelixTopbar {
2311
2420
  isRequired: false,
2312
2421
  transformFunction: null
2313
2422
  },
2423
+ menuLabel: {
2424
+ classPropertyName: "menuLabel",
2425
+ publicName: "menuLabel",
2426
+ isSignal: true,
2427
+ isRequired: false,
2428
+ transformFunction: null
2429
+ },
2314
2430
  items: {
2315
2431
  classPropertyName: "items",
2316
2432
  publicName: "items",
@@ -2320,7 +2436,7 @@ var HelixTopbar = class HelixTopbar {
2320
2436
  }
2321
2437
  },
2322
2438
  ngImport: i0,
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",
2439
+ 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 type=\"button\"\n class=\"layout-topbar-menu-button layout-topbar-action\"\n [attr.aria-label]=\"menuLabel()\"\n helixDisclosure\n helixDisclosureAnimate\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",
2324
2440
  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"],
2325
2441
  dependencies: [
2326
2442
  {
@@ -2331,29 +2447,6 @@ var HelixTopbar = class HelixTopbar {
2331
2447
  kind: "ngmodule",
2332
2448
  type: CommonModule
2333
2449
  },
2334
- {
2335
- kind: "ngmodule",
2336
- type: StyleClassModule
2337
- },
2338
- {
2339
- kind: "directive",
2340
- type: i1.StyleClass,
2341
- selector: "[hStyleClass]",
2342
- inputs: [
2343
- "hStyleClass",
2344
- "enterFromClass",
2345
- "enterActiveClass",
2346
- "enterToClass",
2347
- "leaveFromClass",
2348
- "leaveActiveClass",
2349
- "leaveToClass",
2350
- "hideOnOutsideClick",
2351
- "toggleClass",
2352
- "hideOnEscape",
2353
- "hideOnResize",
2354
- "resizeSelector"
2355
- ]
2356
- },
2357
2450
  {
2358
2451
  kind: "component",
2359
2452
  type: HelixAlertAction,
@@ -2363,13 +2456,20 @@ var HelixTopbar = class HelixTopbar {
2363
2456
  {
2364
2457
  kind: "component",
2365
2458
  type: HelixConfiguratorAction,
2366
- selector: "helix-configurator-action"
2459
+ selector: "helix-configurator-action",
2460
+ inputs: ["label"]
2367
2461
  },
2368
2462
  {
2369
2463
  kind: "component",
2370
2464
  type: HelixDarkModeAction,
2371
2465
  selector: "helix-dark-mode-action"
2372
2466
  },
2467
+ {
2468
+ kind: "directive",
2469
+ type: HelixDisclosure,
2470
+ selector: "[helixDisclosure]",
2471
+ inputs: ["helixDisclosureAnimate"]
2472
+ },
2373
2473
  {
2374
2474
  kind: "component",
2375
2475
  type: HxBreadcrumb,
@@ -2397,14 +2497,14 @@ i0.ɵɵngDeclareClassMetadata({
2397
2497
  imports: [
2398
2498
  RouterModule,
2399
2499
  CommonModule,
2400
- StyleClassModule,
2401
2500
  HelixAlertAction,
2402
2501
  HelixConfiguratorAction,
2403
2502
  HelixDarkModeAction,
2503
+ HelixDisclosure,
2404
2504
  HxBreadcrumb
2405
2505
  ],
2406
2506
  changeDetection: ChangeDetectionStrategy.Eager,
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",
2507
+ 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 type=\"button\"\n class=\"layout-topbar-menu-button layout-topbar-action\"\n [attr.aria-label]=\"menuLabel()\"\n helixDisclosure\n helixDisclosureAnimate\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",
2408
2508
  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"]
2409
2509
  }]
2410
2510
  }],
@@ -2433,6 +2533,14 @@ i0.ɵɵngDeclareClassMetadata({
2433
2533
  required: false
2434
2534
  }]
2435
2535
  }],
2536
+ menuLabel: [{
2537
+ type: i0.Input,
2538
+ args: [{
2539
+ isSignal: true,
2540
+ alias: "menuLabel",
2541
+ required: false
2542
+ }]
2543
+ }],
2436
2544
  items: [{
2437
2545
  type: i0.Input,
2438
2546
  args: [{
@@ -2625,7 +2733,7 @@ var HelixAppLayout = class HelixAppLayout {
2625
2733
  },
2626
2734
  {
2627
2735
  kind: "directive",
2628
- type: i1$1.NgClass,
2736
+ type: i1.NgClass,
2629
2737
  selector: "[ngClass]",
2630
2738
  inputs: ["class", "ngClass"]
2631
2739
  },
@@ -2637,6 +2745,7 @@ var HelixAppLayout = class HelixAppLayout {
2637
2745
  "appTitle",
2638
2746
  "topbarActions",
2639
2747
  "breadcrumbs",
2748
+ "menuLabel",
2640
2749
  "items"
2641
2750
  ]
2642
2751
  },
@@ -2863,7 +2972,7 @@ var HelixFloatingConfigurator = class HelixFloatingConfigurator {
2863
2972
  }
2864
2973
  },
2865
2974
  ngImport: i0,
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",
2975
+ 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 helixDisclosure\n helixDisclosureAnimate\n >\n <span class=\"pi pi-palette\" aria-hidden=\"true\"></span>\n </button>\n <helix-configurator />\n </div>\n</div>\n",
2867
2976
  styles: [""],
2868
2977
  dependencies: [
2869
2978
  {
@@ -2872,7 +2981,7 @@ var HelixFloatingConfigurator = class HelixFloatingConfigurator {
2872
2981
  },
2873
2982
  {
2874
2983
  kind: "directive",
2875
- type: i1$1.NgClass,
2984
+ type: i1.NgClass,
2876
2985
  selector: "[ngClass]",
2877
2986
  inputs: ["class", "ngClass"]
2878
2987
  },
@@ -2892,28 +3001,11 @@ var HelixFloatingConfigurator = class HelixFloatingConfigurator {
2892
3001
  ],
2893
3002
  exportAs: ["hx-button"]
2894
3003
  },
2895
- {
2896
- kind: "ngmodule",
2897
- type: StyleClassModule
2898
- },
2899
3004
  {
2900
3005
  kind: "directive",
2901
- type: i1.StyleClass,
2902
- selector: "[hStyleClass]",
2903
- inputs: [
2904
- "hStyleClass",
2905
- "enterFromClass",
2906
- "enterActiveClass",
2907
- "enterToClass",
2908
- "leaveFromClass",
2909
- "leaveActiveClass",
2910
- "leaveToClass",
2911
- "hideOnOutsideClick",
2912
- "toggleClass",
2913
- "hideOnEscape",
2914
- "hideOnResize",
2915
- "resizeSelector"
2916
- ]
3006
+ type: HelixDisclosure,
3007
+ selector: "[helixDisclosure]",
3008
+ inputs: ["helixDisclosureAnimate"]
2917
3009
  },
2918
3010
  {
2919
3011
  kind: "component",
@@ -2937,11 +3029,11 @@ i0.ɵɵngDeclareClassMetadata({
2937
3029
  imports: [
2938
3030
  CommonModule,
2939
3031
  HxButton,
2940
- StyleClassModule,
3032
+ HelixDisclosure,
2941
3033
  HelixConfigurator
2942
3034
  ],
2943
3035
  changeDetection: ChangeDetectionStrategy.Eager,
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"
3036
+ 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 helixDisclosure\n helixDisclosureAnimate\n >\n <span class=\"pi pi-palette\" aria-hidden=\"true\"></span>\n </button>\n <helix-configurator />\n </div>\n</div>\n"
2945
3037
  }]
2946
3038
  }],
2947
3039
  propDecorators: {
@@ -3092,6 +3184,7 @@ i0.ɵɵngDeclareClassMetadata({
3092
3184
  }
3093
3185
  });
3094
3186
  var HelixMobileMenuAction = class HelixMobileMenuAction {
3187
+ label = input("More actions", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
3095
3188
  static ɵfac = i0.ɵɵngDeclareFactory({
3096
3189
  minVersion: "12.0.0",
3097
3190
  version: "22.2.1",
@@ -3101,47 +3194,36 @@ var HelixMobileMenuAction = class HelixMobileMenuAction {
3101
3194
  target: i0.ɵɵFactoryTarget.Component
3102
3195
  });
3103
3196
  static ɵcmp = i0.ɵɵngDeclareComponent({
3104
- minVersion: "14.0.0",
3197
+ minVersion: "17.1.0",
3105
3198
  version: "22.2.1",
3106
3199
  type: HelixMobileMenuAction,
3107
3200
  isStandalone: true,
3108
3201
  selector: "helix-mobile-menu-action",
3202
+ inputs: { label: {
3203
+ classPropertyName: "label",
3204
+ publicName: "label",
3205
+ isSignal: true,
3206
+ isRequired: false,
3207
+ transformFunction: null
3208
+ } },
3109
3209
  ngImport: i0,
3110
3210
  template: `
3111
3211
  <button
3212
+ type="button"
3112
3213
  class="layout-topbar-menu-button layout-topbar-action"
3113
- hStyleClass="@next"
3114
- enterFromClass="hidden"
3115
- enterActiveClass="animate-scalein"
3116
- leaveToClass="hidden"
3117
- leaveActiveClass="animate-fadeout"
3118
- [hideOnOutsideClick]="true"
3214
+ [attr.aria-label]="label()"
3215
+ helixDisclosure
3216
+ helixDisclosureAnimate
3119
3217
  >
3120
3218
  <i class="pi pi-ellipsis-v"></i>
3121
3219
  </button>
3122
3220
  `,
3123
3221
  isInline: true,
3124
3222
  dependencies: [{
3125
- kind: "ngmodule",
3126
- type: StyleClassModule
3127
- }, {
3128
3223
  kind: "directive",
3129
- type: i1.StyleClass,
3130
- selector: "[hStyleClass]",
3131
- inputs: [
3132
- "hStyleClass",
3133
- "enterFromClass",
3134
- "enterActiveClass",
3135
- "enterToClass",
3136
- "leaveFromClass",
3137
- "leaveActiveClass",
3138
- "leaveToClass",
3139
- "hideOnOutsideClick",
3140
- "toggleClass",
3141
- "hideOnEscape",
3142
- "hideOnResize",
3143
- "resizeSelector"
3144
- ]
3224
+ type: HelixDisclosure,
3225
+ selector: "[helixDisclosure]",
3226
+ inputs: ["helixDisclosureAnimate"]
3145
3227
  }],
3146
3228
  changeDetection: i0.ChangeDetectionStrategy.Eager
3147
3229
  });
@@ -3156,23 +3238,29 @@ i0.ɵɵngDeclareClassMetadata({
3156
3238
  args: [{
3157
3239
  selector: "helix-mobile-menu-action",
3158
3240
  standalone: true,
3159
- imports: [StyleClassModule],
3241
+ imports: [HelixDisclosure],
3160
3242
  changeDetection: ChangeDetectionStrategy.Eager,
3161
3243
  template: `
3162
3244
  <button
3245
+ type="button"
3163
3246
  class="layout-topbar-menu-button layout-topbar-action"
3164
- hStyleClass="@next"
3165
- enterFromClass="hidden"
3166
- enterActiveClass="animate-scalein"
3167
- leaveToClass="hidden"
3168
- leaveActiveClass="animate-fadeout"
3169
- [hideOnOutsideClick]="true"
3247
+ [attr.aria-label]="label()"
3248
+ helixDisclosure
3249
+ helixDisclosureAnimate
3170
3250
  >
3171
3251
  <i class="pi pi-ellipsis-v"></i>
3172
3252
  </button>
3173
3253
  `
3174
3254
  }]
3175
- }]
3255
+ }],
3256
+ propDecorators: { label: [{
3257
+ type: i0.Input,
3258
+ args: [{
3259
+ isSignal: true,
3260
+ alias: "label",
3261
+ required: false
3262
+ }]
3263
+ }] }
3176
3264
  });
3177
3265
  function helixMenuLinksFrom(items, basePath) {
3178
3266
  return items.map((item) => {
@@ -3306,10 +3394,6 @@ var HelixAccess = class HelixAccess {
3306
3394
  "routerLink"
3307
3395
  ]
3308
3396
  },
3309
- {
3310
- kind: "ngmodule",
3311
- type: RippleModule
3312
- },
3313
3397
  {
3314
3398
  kind: "component",
3315
3399
  type: HelixFloatingConfigurator,
@@ -3337,7 +3421,6 @@ i0.ɵɵngDeclareClassMetadata({
3337
3421
  imports: [
3338
3422
  HxButton,
3339
3423
  RouterModule,
3340
- RippleModule,
3341
3424
  HelixFloatingConfigurator
3342
3425
  ],
3343
3426
  changeDetection: ChangeDetectionStrategy.Eager,
@@ -3448,10 +3531,6 @@ var HelixError = class HelixError {
3448
3531
  ],
3449
3532
  exportAs: ["hx-button"]
3450
3533
  },
3451
- {
3452
- kind: "ngmodule",
3453
- type: RippleModule
3454
- },
3455
3534
  {
3456
3535
  kind: "ngmodule",
3457
3536
  type: RouterModule
@@ -3501,7 +3580,6 @@ i0.ɵɵngDeclareClassMetadata({
3501
3580
  standalone: true,
3502
3581
  imports: [
3503
3582
  HxButton,
3504
- RippleModule,
3505
3583
  RouterModule,
3506
3584
  HelixFloatingConfigurator
3507
3585
  ],
@@ -3678,22 +3756,22 @@ var HelixLogin = class HelixLogin {
3678
3756
  },
3679
3757
  {
3680
3758
  kind: "directive",
3681
- type: i1$2.DefaultValueAccessor,
3759
+ type: i1$1.DefaultValueAccessor,
3682
3760
  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]"
3683
3761
  },
3684
3762
  {
3685
3763
  kind: "directive",
3686
- type: i1$2.CheckboxControlValueAccessor,
3764
+ type: i1$1.CheckboxControlValueAccessor,
3687
3765
  selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]"
3688
3766
  },
3689
3767
  {
3690
3768
  kind: "directive",
3691
- type: i1$2.NgControlStatus,
3769
+ type: i1$1.NgControlStatus,
3692
3770
  selector: "[formControlName],[ngModel],[formControl]"
3693
3771
  },
3694
3772
  {
3695
3773
  kind: "directive",
3696
- type: i1$2.NgModel,
3774
+ type: i1$1.NgModel,
3697
3775
  selector: "[ngModel]:not([formControlName]):not([formControl])",
3698
3776
  inputs: [
3699
3777
  "name",
@@ -3708,10 +3786,6 @@ var HelixLogin = class HelixLogin {
3708
3786
  kind: "ngmodule",
3709
3787
  type: RouterModule
3710
3788
  },
3711
- {
3712
- kind: "ngmodule",
3713
- type: RippleModule
3714
- },
3715
3789
  {
3716
3790
  kind: "component",
3717
3791
  type: HelixFloatingConfigurator,
@@ -3743,7 +3817,6 @@ i0.ɵɵngDeclareClassMetadata({
3743
3817
  HxPassword,
3744
3818
  FormsModule,
3745
3819
  RouterModule,
3746
- RippleModule,
3747
3820
  HelixFloatingConfigurator
3748
3821
  ],
3749
3822
  changeDetection: ChangeDetectionStrategy.Eager,
@@ -4017,7 +4090,7 @@ var HelixFeaturesWidget = class HelixFeaturesWidget {
4017
4090
  type: CommonModule
4018
4091
  }, {
4019
4092
  kind: "directive",
4020
- type: i1$1.NgClass,
4093
+ type: i1.NgClass,
4021
4094
  selector: "[ngClass]",
4022
4095
  inputs: ["class", "ngClass"]
4023
4096
  }],
@@ -4290,35 +4363,24 @@ var HelixHeroWidget = class HelixHeroWidget {
4290
4363
  },
4291
4364
  outputs: { buttonClick: "buttonClick" },
4292
4365
  ngImport: i0,
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",
4366
+ 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 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",
4294
4367
  styles: [""],
4295
- dependencies: [
4296
- {
4297
- kind: "directive",
4298
- type: HxButton,
4299
- selector: "button[hx-button], a[hx-button]",
4300
- inputs: [
4301
- "variant",
4302
- "severity",
4303
- "size",
4304
- "rounded",
4305
- "raised",
4306
- "fluid",
4307
- "iconOnly",
4308
- "loading"
4309
- ],
4310
- exportAs: ["hx-button"]
4311
- },
4312
- {
4313
- kind: "ngmodule",
4314
- type: RippleModule
4315
- },
4316
- {
4317
- kind: "directive",
4318
- type: i3.Ripple,
4319
- selector: "[hRipple]"
4320
- }
4321
- ],
4368
+ dependencies: [{
4369
+ kind: "directive",
4370
+ type: HxButton,
4371
+ selector: "button[hx-button], a[hx-button]",
4372
+ inputs: [
4373
+ "variant",
4374
+ "severity",
4375
+ "size",
4376
+ "rounded",
4377
+ "raised",
4378
+ "fluid",
4379
+ "iconOnly",
4380
+ "loading"
4381
+ ],
4382
+ exportAs: ["hx-button"]
4383
+ }],
4322
4384
  changeDetection: i0.ChangeDetectionStrategy.Eager
4323
4385
  });
4324
4386
  };
@@ -4332,9 +4394,9 @@ i0.ɵɵngDeclareClassMetadata({
4332
4394
  args: [{
4333
4395
  selector: "helix-hero-widget",
4334
4396
  standalone: true,
4335
- imports: [HxButton, RippleModule],
4397
+ imports: [HxButton],
4336
4398
  changeDetection: ChangeDetectionStrategy.Eager,
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"
4399
+ 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 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"
4338
4400
  }]
4339
4401
  }],
4340
4402
  propDecorators: {
@@ -4596,45 +4658,33 @@ var HelixPricingWidget = class HelixPricingWidget {
4596
4658
  },
4597
4659
  outputs: { planSelect: "planSelect" },
4598
4660
  ngImport: i0,
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",
4661
+ 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 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",
4600
4662
  styles: [""],
4601
- dependencies: [
4602
- {
4603
- kind: "component",
4604
- type: HxDivider,
4605
- selector: "hx-divider",
4606
- inputs: [
4607
- "layout",
4608
- "type",
4609
- "align"
4610
- ]
4611
- },
4612
- {
4613
- kind: "directive",
4614
- type: HxButton,
4615
- selector: "button[hx-button], a[hx-button]",
4616
- inputs: [
4617
- "variant",
4618
- "severity",
4619
- "size",
4620
- "rounded",
4621
- "raised",
4622
- "fluid",
4623
- "iconOnly",
4624
- "loading"
4625
- ],
4626
- exportAs: ["hx-button"]
4627
- },
4628
- {
4629
- kind: "ngmodule",
4630
- type: RippleModule
4631
- },
4632
- {
4633
- kind: "directive",
4634
- type: i3.Ripple,
4635
- selector: "[hRipple]"
4636
- }
4637
- ],
4663
+ dependencies: [{
4664
+ kind: "component",
4665
+ type: HxDivider,
4666
+ selector: "hx-divider",
4667
+ inputs: [
4668
+ "layout",
4669
+ "type",
4670
+ "align"
4671
+ ]
4672
+ }, {
4673
+ kind: "directive",
4674
+ type: HxButton,
4675
+ selector: "button[hx-button], a[hx-button]",
4676
+ inputs: [
4677
+ "variant",
4678
+ "severity",
4679
+ "size",
4680
+ "rounded",
4681
+ "raised",
4682
+ "fluid",
4683
+ "iconOnly",
4684
+ "loading"
4685
+ ],
4686
+ exportAs: ["hx-button"]
4687
+ }],
4638
4688
  changeDetection: i0.ChangeDetectionStrategy.Eager
4639
4689
  });
4640
4690
  };
@@ -4648,13 +4698,9 @@ i0.ɵɵngDeclareClassMetadata({
4648
4698
  args: [{
4649
4699
  selector: "helix-pricing-widget",
4650
4700
  standalone: true,
4651
- imports: [
4652
- HxDivider,
4653
- HxButton,
4654
- RippleModule
4655
- ],
4701
+ imports: [HxDivider, HxButton],
4656
4702
  changeDetection: ChangeDetectionStrategy.Eager,
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"
4703
+ 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 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"
4658
4704
  }]
4659
4705
  }],
4660
4706
  propDecorators: {
@@ -4780,7 +4826,7 @@ var HelixTopbarWidget = class HelixTopbarWidget {
4780
4826
  }
4781
4827
  },
4782
4828
  ngImport: i0,
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",
4829
+ 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<button\n type=\"button\"\n hx-button\n variant=\"text\"\n severity=\"secondary\"\n rounded\n iconOnly\n [attr.aria-label]=\"menuLabel()\"\n class=\"lg:hidden!\"\n helixDisclosure\n>\n <i class=\"pi pi-bars text-2xl!\" aria-hidden=\"true\"></i>\n</button>\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 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 [routerLink]=\"loginRoute()\" rounded variant=\"text\">{{ loginLabel() }}</a>\n <a hx-button [routerLink]=\"registerRoute()\" rounded>{{ registerLabel() }}</a>\n <helix-floating-configurator [float]=\"false\" />\n </div>\n</div>\n",
4784
4830
  styles: [""],
4785
4831
  dependencies: [
4786
4832
  {
@@ -4806,29 +4852,6 @@ var HelixTopbarWidget = class HelixTopbarWidget {
4806
4852
  "routerLink"
4807
4853
  ]
4808
4854
  },
4809
- {
4810
- kind: "ngmodule",
4811
- type: StyleClassModule
4812
- },
4813
- {
4814
- kind: "directive",
4815
- type: i1.StyleClass,
4816
- selector: "[hStyleClass]",
4817
- inputs: [
4818
- "hStyleClass",
4819
- "enterFromClass",
4820
- "enterActiveClass",
4821
- "enterToClass",
4822
- "leaveFromClass",
4823
- "leaveActiveClass",
4824
- "leaveToClass",
4825
- "hideOnOutsideClick",
4826
- "toggleClass",
4827
- "hideOnEscape",
4828
- "hideOnResize",
4829
- "resizeSelector"
4830
- ]
4831
- },
4832
4855
  {
4833
4856
  kind: "directive",
4834
4857
  type: HxButton,
@@ -4845,14 +4868,11 @@ var HelixTopbarWidget = class HelixTopbarWidget {
4845
4868
  ],
4846
4869
  exportAs: ["hx-button"]
4847
4870
  },
4848
- {
4849
- kind: "ngmodule",
4850
- type: RippleModule
4851
- },
4852
4871
  {
4853
4872
  kind: "directive",
4854
- type: i3.Ripple,
4855
- selector: "[hRipple]"
4873
+ type: HelixDisclosure,
4874
+ selector: "[helixDisclosure]",
4875
+ inputs: ["helixDisclosureAnimate"]
4856
4876
  },
4857
4877
  {
4858
4878
  kind: "component",
@@ -4880,13 +4900,12 @@ i0.ɵɵngDeclareClassMetadata({
4880
4900
  standalone: true,
4881
4901
  imports: [
4882
4902
  RouterModule,
4883
- StyleClassModule,
4884
4903
  HxButton,
4885
- RippleModule,
4904
+ HelixDisclosure,
4886
4905
  HelixFloatingConfigurator
4887
4906
  ],
4888
4907
  changeDetection: ChangeDetectionStrategy.Eager,
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"
4908
+ 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<button\n type=\"button\"\n hx-button\n variant=\"text\"\n severity=\"secondary\"\n rounded\n iconOnly\n [attr.aria-label]=\"menuLabel()\"\n class=\"lg:hidden!\"\n helixDisclosure\n>\n <i class=\"pi pi-bars text-2xl!\" aria-hidden=\"true\"></i>\n</button>\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 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 [routerLink]=\"loginRoute()\" rounded variant=\"text\">{{ loginLabel() }}</a>\n <a hx-button [routerLink]=\"registerRoute()\" rounded>{{ registerLabel() }}</a>\n <helix-floating-configurator [float]=\"false\" />\n </div>\n</div>\n"
4890
4909
  }]
4891
4910
  }],
4892
4911
  ctorParameters: () => [{ type: i2.Router }],
@@ -5032,14 +5051,6 @@ var HelixLanding = class HelixLanding {
5032
5051
  "homeRoute",
5033
5052
  "brandName"
5034
5053
  ]
5035
- },
5036
- {
5037
- kind: "ngmodule",
5038
- type: RippleModule
5039
- },
5040
- {
5041
- kind: "ngmodule",
5042
- type: StyleClassModule
5043
5054
  }
5044
5055
  ],
5045
5056
  changeDetection: i0.ChangeDetectionStrategy.Eager
@@ -5062,9 +5073,7 @@ i0.ɵɵngDeclareClassMetadata({
5062
5073
  HelixFeaturesWidget,
5063
5074
  HelixHighlightsWidget,
5064
5075
  HelixPricingWidget,
5065
- HelixFooterWidget,
5066
- RippleModule,
5067
- StyleClassModule
5076
+ HelixFooterWidget
5068
5077
  ],
5069
5078
  changeDetection: ChangeDetectionStrategy.Eager,
5070
5079
  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"