@gravionlabs/helix-shell 22.0.0

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 (7) hide show
  1. package/LICENSE.md +21 -0
  2. package/README.md +99 -0
  3. package/fesm2022/gravionlabs-helix-shell.mjs +1858 -0
  4. package/fesm2022/gravionlabs-helix-shell.mjs.map +1 -0
  5. package/package.json +46 -0
  6. package/styles.css +2179 -0
  7. package/types/gravionlabs-helix-shell.d.ts +1017 -0
package/fesm2022/gravionlabs-helix-shell.mjs ADDED
@@ -0,0 +1,1858 @@
1
+ import * as i0 from '@angular/core';
2
+ import { input, computed, ChangeDetectionStrategy, Component, signal, forwardRef, InjectionToken, effect, inject, ElementRef, PLATFORM_ID, ViewEncapsulation, output } from '@angular/core';
3
+ import * as i1 from '@angular/common';
4
+ import { CommonModule, isPlatformBrowser, SlicePipe, NgClass } from '@angular/common';
5
+ import * as i5 from '@angular/forms';
6
+ import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
7
+ import * as i1$1 from '@angular/router';
8
+ import { RouterModule, Router, NavigationEnd, ActivatedRoute } from '@angular/router';
9
+ import { signalStore, withState, withComputed, withMethods, patchState, withHooks } from '@ngrx/signals';
10
+ import { DomSanitizer } from '@angular/platform-browser';
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
+ import { Breadcrumb } from '@gravionlabs/helix-core/breadcrumb';
15
+ import * as i1$2 from '@gravionlabs/helix-core/styleclass';
16
+ import { StyleClassModule } from '@gravionlabs/helix-core/styleclass';
17
+ import { HelixConfig } from '@gravionlabs/helix-core/config';
18
+ import * as i3$1 from '@gravionlabs/helix-core/selectbutton';
19
+ import { SelectButtonModule } from '@gravionlabs/helix-core/selectbutton';
20
+ import { updatePreset, updateSurfacePalette, $t } from '@gravionlabs/helix-core/themes';
21
+ import { auraPreset } from '@gravionlabs/helix-core/themes/aura';
22
+ import { laraPreset } from '@gravionlabs/helix-core/themes/lara';
23
+ import { noraPreset } from '@gravionlabs/helix-core/themes/nora';
24
+ import * as i1$3 from '@gravionlabs/helix-core/button';
25
+ import { ButtonModule } from '@gravionlabs/helix-core/button';
26
+ import * as i2 from '@gravionlabs/helix-core/checkbox';
27
+ import { CheckboxModule } from '@gravionlabs/helix-core/checkbox';
28
+ import * as i3$2 from '@gravionlabs/helix-core/inputtext';
29
+ import { InputTextModule } from '@gravionlabs/helix-core/inputtext';
30
+ import * as i4 from '@gravionlabs/helix-core/password';
31
+ import { PasswordModule } from '@gravionlabs/helix-core/password';
32
+ import * as i1$4 from '@gravionlabs/helix-core/divider';
33
+ import { DividerModule } from '@gravionlabs/helix-core/divider';
34
+
35
+ class HelixFormField {
36
+ label = input(/* @ts-ignore */
37
+ ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
38
+ control = input(null, /* @ts-ignore */
39
+ ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
40
+ hint = input(/* @ts-ignore */
41
+ ...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
42
+ error = input(null, /* @ts-ignore */
43
+ ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
44
+ showLabel = input(true, /* @ts-ignore */
45
+ ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
46
+ showHint = input(true, /* @ts-ignore */
47
+ ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
48
+ activeError = computed(() => {
49
+ const ext = this.error();
50
+ if (ext)
51
+ return ext;
52
+ const ctrl = this.control();
53
+ if (ctrl?.touched && ctrl.invalid && ctrl.errors) {
54
+ const first = Object.values(ctrl.errors)[0];
55
+ return typeof first === 'string' ? first : null;
56
+ }
57
+ return null;
58
+ }, /* @ts-ignore */
59
+ ...(ngDevMode ? [{ debugName: "activeError" }] : /* istanbul ignore next */ []));
60
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixFormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
61
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: HelixFormField, isStandalone: true, selector: "helix-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showHint: { classPropertyName: "showHint", publicName: "showHint", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"helix-form-field\">\n @if (showLabel() && label()) {\n <label class=\"helix-form-field__label\">{{ label() }}</label>\n }\n\n <div class=\"helix-form-field__control\">\n <ng-content />\n </div>\n\n @if (showHint()) {\n @if (activeError(); as err) {\n <small class=\"helix-form-field__message helix-form-field__message--error h-error\">{{ err }}</small>\n } @else if (hint()) {\n <small class=\"helix-form-field__message helix-form-field__message--hint\">{{ hint() }}</small>\n }\n }\n</div>\n", styles: [".helix-form-field{display:flex;flex-direction:column;gap:.5rem}.helix-form-field__label{font-size:.875rem;font-weight:500;color:var(--h-text-color)}.helix-form-field__control :host-context(.h-inputtext),.helix-form-field__control :host-context(.h-component){width:100%}.helix-form-field__message{font-size:.75rem}.helix-form-field__message--hint{color:var(--h-text-muted-color)}.helix-form-field__message--error{color:var(--h-red-500)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
62
+ }
63
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixFormField, decorators: [{
64
+ type: Component,
65
+ args: [{ selector: 'helix-form-field', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"helix-form-field\">\n @if (showLabel() && label()) {\n <label class=\"helix-form-field__label\">{{ label() }}</label>\n }\n\n <div class=\"helix-form-field__control\">\n <ng-content />\n </div>\n\n @if (showHint()) {\n @if (activeError(); as err) {\n <small class=\"helix-form-field__message helix-form-field__message--error h-error\">{{ err }}</small>\n } @else if (hint()) {\n <small class=\"helix-form-field__message helix-form-field__message--hint\">{{ hint() }}</small>\n }\n }\n</div>\n", styles: [".helix-form-field{display:flex;flex-direction:column;gap:.5rem}.helix-form-field__label{font-size:.875rem;font-weight:500;color:var(--h-text-color)}.helix-form-field__control :host-context(.h-inputtext),.helix-form-field__control :host-context(.h-component){width:100%}.helix-form-field__message{font-size:.75rem}.helix-form-field__message--hint{color:var(--h-text-muted-color)}.helix-form-field__message--error{color:var(--h-red-500)}\n"] }]
66
+ }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], showHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHint", required: false }] }] } });
67
+
68
+ class HelixSelect {
69
+ options = input([], /* @ts-ignore */
70
+ ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
71
+ optionLabel = input('label', /* @ts-ignore */
72
+ ...(ngDevMode ? [{ debugName: "optionLabel" }] : /* istanbul ignore next */ []));
73
+ optionValue = input('value', /* @ts-ignore */
74
+ ...(ngDevMode ? [{ debugName: "optionValue" }] : /* istanbul ignore next */ []));
75
+ placeholder = input('', /* @ts-ignore */
76
+ ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
77
+ disabled = input(false, /* @ts-ignore */
78
+ ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
79
+ value = signal(null, /* @ts-ignore */
80
+ ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
81
+ onChange = () => { };
82
+ onTouched = () => { };
83
+ processedOptions = computed(() => {
84
+ const opts = this.options();
85
+ const labelKey = this.optionLabel();
86
+ const valueKey = this.optionValue();
87
+ return opts.map((opt) => {
88
+ if (typeof opt === 'string') {
89
+ return { label: opt, value: opt };
90
+ }
91
+ return {
92
+ label: opt[labelKey],
93
+ value: opt[valueKey],
94
+ };
95
+ });
96
+ }, /* @ts-ignore */
97
+ ...(ngDevMode ? [{ debugName: "processedOptions" }] : /* istanbul ignore next */ []));
98
+ writeValue(value) {
99
+ this.value.set(value);
100
+ }
101
+ registerOnChange(fn) {
102
+ this.onChange = fn;
103
+ }
104
+ registerOnTouched(fn) {
105
+ this.onTouched = fn;
106
+ }
107
+ setDisabledState(isDisabled) {
108
+ // Disabled state is handled via the [disabled] input binding in the template
109
+ }
110
+ onSelectChange(event) {
111
+ const target = event.target;
112
+ const indexStr = target.value;
113
+ if (indexStr === '') {
114
+ this.value.set(null);
115
+ this.onChange(null);
116
+ }
117
+ else {
118
+ const index = parseInt(indexStr, 10);
119
+ const selectedOption = this.processedOptions()[index];
120
+ if (selectedOption) {
121
+ this.value.set(selectedOption.value);
122
+ this.onChange(selectedOption.value);
123
+ }
124
+ }
125
+ this.onTouched();
126
+ }
127
+ isSelected(optValue) {
128
+ return JSON.stringify(this.value()) === JSON.stringify(optValue);
129
+ }
130
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
131
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: HelixSelect, isStandalone: true, selector: "helix-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
132
+ {
133
+ provide: NG_VALUE_ACCESSOR,
134
+ useExisting: forwardRef(() => HelixSelect),
135
+ multi: true,
136
+ },
137
+ ], ngImport: i0, template: "<div class=\"helix-select-wrapper\">\n <select\n class=\"helix-select\"\n [disabled]=\"disabled()\"\n (change)=\"onSelectChange($event)\"\n (blur)=\"onTouched()\"\n >\n @if (placeholder()) {\n <option value=\"\" [selected]=\"value() === null\">{{ placeholder() }}</option>\n }\n @for (opt of processedOptions(); track $index) {\n <option\n [value]=\"$index\"\n [selected]=\"isSelected(opt.value)\"\n >\n {{ opt.label }}\n </option>\n }\n </select>\n <i class=\"helix-select-icon pi pi-chevron-down\"></i>\n</div>\n", styles: [":host{display:block;width:100%}.helix-select-wrapper{position:relative;display:flex;width:100%}.helix-select{width:100%;padding:.5rem 2.5rem .5rem .75rem;font-family:inherit;font-size:1rem;color:var(--h-text-color);background-color:var(--h-content-background);border:1px solid var(--h-content-border-color);border-radius:var(--h-border-radius-md);appearance:none;cursor:pointer;transition:border-color .2s,box-shadow .2s}.helix-select:focus{outline:0 none;outline-offset:0;border-color:var(--h-primary-color);box-shadow:0 0 0 .2rem var(--h-primary-100)}.helix-select:disabled{cursor:default;background-color:var(--h-content-disabled-background);color:var(--h-text-disabled-color);opacity:1}.helix-select::placeholder{color:var(--h-text-muted-color)}.helix-select-icon{position:absolute;top:50%;right:.75rem;transform:translateY(-50%);pointer-events:none;color:var(--h-text-muted-color);font-size:.875rem}:host-context(.ng-invalid.ng-touched) .helix-select{border-color:var(--h-red-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
138
+ }
139
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixSelect, decorators: [{
140
+ type: Component,
141
+ args: [{ selector: 'helix-select', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
142
+ {
143
+ provide: NG_VALUE_ACCESSOR,
144
+ useExisting: forwardRef(() => HelixSelect),
145
+ multi: true,
146
+ },
147
+ ], template: "<div class=\"helix-select-wrapper\">\n <select\n class=\"helix-select\"\n [disabled]=\"disabled()\"\n (change)=\"onSelectChange($event)\"\n (blur)=\"onTouched()\"\n >\n @if (placeholder()) {\n <option value=\"\" [selected]=\"value() === null\">{{ placeholder() }}</option>\n }\n @for (opt of processedOptions(); track $index) {\n <option\n [value]=\"$index\"\n [selected]=\"isSelected(opt.value)\"\n >\n {{ opt.label }}\n </option>\n }\n </select>\n <i class=\"helix-select-icon pi pi-chevron-down\"></i>\n</div>\n", styles: [":host{display:block;width:100%}.helix-select-wrapper{position:relative;display:flex;width:100%}.helix-select{width:100%;padding:.5rem 2.5rem .5rem .75rem;font-family:inherit;font-size:1rem;color:var(--h-text-color);background-color:var(--h-content-background);border:1px solid var(--h-content-border-color);border-radius:var(--h-border-radius-md);appearance:none;cursor:pointer;transition:border-color .2s,box-shadow .2s}.helix-select:focus{outline:0 none;outline-offset:0;border-color:var(--h-primary-color);box-shadow:0 0 0 .2rem var(--h-primary-100)}.helix-select:disabled{cursor:default;background-color:var(--h-content-disabled-background);color:var(--h-text-disabled-color);opacity:1}.helix-select::placeholder{color:var(--h-text-muted-color)}.helix-select-icon{position:absolute;top:50%;right:.75rem;transform:translateY(-50%);pointer-events:none;color:var(--h-text-muted-color);font-size:.875rem}:host-context(.ng-invalid.ng-touched) .helix-select{border-color:var(--h-red-500)}\n"] }]
148
+ }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
149
+
150
+ const HELIX_BREADCRUMB = new InjectionToken('HELIX_BREADCRUMB', {
151
+ factory: () => [],
152
+ });
153
+
154
+ function helixBreadcrumbsFromRoutes(route) {
155
+ let deepest = route;
156
+ while (deepest.firstChild) {
157
+ deepest = deepest.firstChild;
158
+ }
159
+ const breadcrumbs = [];
160
+ const routePath = [];
161
+ let current = deepest;
162
+ while (current) {
163
+ const url = current.snapshot.url.map((s) => s.path).join('/');
164
+ routePath.push({ url, snapshot: current.snapshot });
165
+ current = current.parent;
166
+ }
167
+ let accumulatedUrl = '';
168
+ for (const { url, snapshot } of routePath.reverse()) {
169
+ if (url) {
170
+ accumulatedUrl = accumulatedUrl ? `${accumulatedUrl}/${url}` : url;
171
+ }
172
+ const breadcrumb = snapshot.data?.['breadcrumb'];
173
+ if (!breadcrumb)
174
+ continue;
175
+ const label = typeof breadcrumb === 'function' ? breadcrumb(snapshot) : breadcrumb;
176
+ if (accumulatedUrl) {
177
+ breadcrumbs.push({ label, routerLink: `/${accumulatedUrl}` });
178
+ }
179
+ else {
180
+ breadcrumbs.push({ label });
181
+ }
182
+ }
183
+ return breadcrumbs;
184
+ }
185
+
186
+ const initialState = {
187
+ // Config
188
+ preset: 'Aura',
189
+ primary: 'emerald',
190
+ surface: null,
191
+ darkTheme: false,
192
+ menuMode: 'static',
193
+ // State
194
+ staticMenuDesktopInactive: false,
195
+ overlayMenuActive: false,
196
+ configSidebarVisible: false,
197
+ mobileMenuActive: false,
198
+ menuHoverActive: false,
199
+ activePath: null,
200
+ sidebarCollapsed: false,
201
+ expandedRoot: null,
202
+ };
203
+ const LayoutStore = signalStore({ providedIn: 'root' }, withState(initialState), withComputed((store) => ({
204
+ isDarkTheme: computed(() => store.darkTheme()),
205
+ isOverlay: computed(() => store.menuMode() === 'overlay'),
206
+ isStatic: computed(() => store.menuMode() === 'static'),
207
+ isSidebarActive: computed(() => store.overlayMenuActive() || store.mobileMenuActive()),
208
+ isCollapsed: computed(() => store.sidebarCollapsed()),
209
+ })), withMethods((store) => ({
210
+ toggleDarkMode() {
211
+ patchState(store, { darkTheme: !store.darkTheme() });
212
+ },
213
+ setMenuMode(menuMode) {
214
+ patchState(store, { menuMode });
215
+ },
216
+ showConfigSidebar() {
217
+ patchState(store, { configSidebarVisible: true });
218
+ },
219
+ hideConfigSidebar() {
220
+ patchState(store, { configSidebarVisible: false });
221
+ },
222
+ onMenuToggle() {
223
+ if (store.menuMode() === 'overlay') {
224
+ patchState(store, { overlayMenuActive: !store.overlayMenuActive() });
225
+ }
226
+ if (window.innerWidth > 991) {
227
+ patchState(store, { staticMenuDesktopInactive: !store.staticMenuDesktopInactive() });
228
+ }
229
+ else {
230
+ patchState(store, { mobileMenuActive: !store.mobileMenuActive() });
231
+ }
232
+ },
233
+ closeMobileMenu() {
234
+ patchState(store, {
235
+ overlayMenuActive: false,
236
+ mobileMenuActive: false,
237
+ menuHoverActive: false,
238
+ });
239
+ },
240
+ setActivePath(activePath) {
241
+ patchState(store, { activePath });
242
+ },
243
+ setExpandedRoot(key) {
244
+ patchState(store, { expandedRoot: key });
245
+ },
246
+ toggleSidebar() {
247
+ patchState(store, { sidebarCollapsed: !store.sidebarCollapsed() });
248
+ },
249
+ setMenuHoverActive(menuHoverActive) {
250
+ patchState(store, { menuHoverActive });
251
+ },
252
+ updateConfig(config) {
253
+ patchState(store, config);
254
+ },
255
+ setPreset(preset) {
256
+ patchState(store, { preset });
257
+ },
258
+ setPrimary(primary) {
259
+ patchState(store, { primary });
260
+ },
261
+ setSurface(surface) {
262
+ patchState(store, { surface });
263
+ },
264
+ isDesktop() {
265
+ return window.innerWidth > 991;
266
+ },
267
+ reset() {
268
+ patchState(store, initialState);
269
+ },
270
+ })), withHooks({
271
+ onInit(store) {
272
+ effect(() => {
273
+ const isDark = store.darkTheme();
274
+ const supportsViewTransition = 'startViewTransition' in document;
275
+ const applyDarkMode = () => {
276
+ if (isDark) {
277
+ document.documentElement.classList.add('app-dark');
278
+ }
279
+ else {
280
+ document.documentElement.classList.remove('app-dark');
281
+ }
282
+ };
283
+ if (supportsViewTransition) {
284
+ document.startViewTransition(() => applyDarkMode());
285
+ }
286
+ else {
287
+ applyDarkMode();
288
+ }
289
+ });
290
+ },
291
+ }));
292
+
293
+ /**
294
+ * Whether the active URL matches an item path on a whole-segment boundary,
295
+ * so `uikit/dynamicform` does not match `uikit/dynamicform-advanced` but
296
+ * still matches child routes, query params and fragments.
297
+ */
298
+ function isPathActive(activePath, itemPath) {
299
+ if (!itemPath || !activePath.startsWith(itemPath))
300
+ return false;
301
+ const next = activePath[itemPath.length];
302
+ return next === undefined || next === '/' || next === '?' || next === '#' || next === ';';
303
+ }
304
+ class HelixNavRailItem {
305
+ store = inject(LayoutStore);
306
+ item = input(null, /* @ts-ignore */
307
+ ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
308
+ parentPath = input(null, /* @ts-ignore */
309
+ ...(ngDevMode ? [{ debugName: "parentPath" }] : /* istanbul ignore next */ []));
310
+ depth = input(0, /* @ts-ignore */
311
+ ...(ngDevMode ? [{ debugName: "depth" }] : /* istanbul ignore next */ []));
312
+ /** Whether this item's submenu, having animated open at least once, may transition on leave too. */
313
+ initialized = signal(false, /* @ts-ignore */
314
+ ...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
315
+ hasChildren = computed(() => !!this.item()?.items?.length, /* @ts-ignore */
316
+ ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
317
+ isCollapsed = computed(() => this.store.isCollapsed(), /* @ts-ignore */
318
+ ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
319
+ /** Stable key used against LayoutStore.expandedRoot() — only one item app-wide is expanded at a time. */
320
+ itemKey = computed(() => {
321
+ const ownPath = this.item()?.path;
322
+ if (ownPath) {
323
+ const parent = this.parentPath();
324
+ if (parent && !ownPath.startsWith(parent)) {
325
+ return `${parent}/${ownPath}`;
326
+ }
327
+ return ownPath;
328
+ }
329
+ const label = this.item()?.label ?? '';
330
+ const parent = this.parentPath();
331
+ return parent ? `${parent}/${label}` : label;
332
+ }, /* @ts-ignore */
333
+ ...(ngDevMode ? [{ debugName: "itemKey" }] : /* istanbul ignore next */ []));
334
+ fullPath = computed(() => {
335
+ const itemPath = this.item()?.path;
336
+ if (itemPath == null)
337
+ return this.parentPath();
338
+ const parent = this.parentPath();
339
+ if (parent && !itemPath.startsWith(parent)) {
340
+ return `${parent}/${itemPath}`;
341
+ }
342
+ return itemPath;
343
+ }, /* @ts-ignore */
344
+ ...(ngDevMode ? [{ debugName: "fullPath" }] : /* istanbul ignore next */ []));
345
+ isActive = computed(() => {
346
+ if (this.hasChildren())
347
+ return false;
348
+ const itemPath = this.item()?.path;
349
+ if (itemPath == null)
350
+ return false;
351
+ const normalizedPath = this.store.activePath()?.replace(/^\//, '') ?? '';
352
+ const normalizedFull = (this.fullPath() ?? '').replace(/^\//, '');
353
+ return isPathActive(normalizedPath, normalizedFull);
354
+ }, /* @ts-ignore */
355
+ ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
356
+ hasActiveDescendant = computed(() => {
357
+ const normalized = this.store.activePath()?.replace(/^\//, '') ?? '';
358
+ const items = this.item()?.items;
359
+ if (!items)
360
+ return false;
361
+ const parentFullPath = (this.fullPath() ?? '').replace(/^\//, '');
362
+ const match = (list, prefix) => list.some((child) => {
363
+ const childFullPath = child.path
364
+ ? prefix
365
+ ? `${prefix}/${child.path.replace(/^\//, '')}`
366
+ : child.path.replace(/^\//, '')
367
+ : prefix;
368
+ if (childFullPath && isPathActive(normalized, childFullPath)) {
369
+ return true;
370
+ }
371
+ return child.items ? match(child.items, childFullPath) : false;
372
+ });
373
+ return match(items, parentFullPath);
374
+ }, /* @ts-ignore */
375
+ ...(ngDevMode ? [{ debugName: "hasActiveDescendant" }] : /* istanbul ignore next */ []));
376
+ isExpanded = computed(() => this.hasActiveDescendant() || this.store.expandedRoot() === this.itemKey(), /* @ts-ignore */
377
+ ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
378
+ ngAfterViewInit() {
379
+ setTimeout(() => this.initialized.set(true));
380
+ }
381
+ itemClick(event) {
382
+ const item = this.item();
383
+ if (item?.disabled) {
384
+ event.preventDefault();
385
+ return;
386
+ }
387
+ if (item?.command) {
388
+ item.command({ originalEvent: event, item });
389
+ }
390
+ if (this.hasChildren()) {
391
+ event.preventDefault();
392
+ this.store.setExpandedRoot(this.isExpanded() ? null : this.itemKey());
393
+ }
394
+ else {
395
+ this.store.closeMobileMenu();
396
+ }
397
+ }
398
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixNavRailItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
399
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: HelixNavRailItem, isStandalone: true, selector: "[helix-nav-rail-item]", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, parentPath: { classPropertyName: "parentPath", publicName: "parentPath", isSignal: true, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.helix-nav-rail-item-expanded": "isExpanded()", "class.helix-nav-rail-item-collapsed": "isCollapsed()" } }, ngImport: i0, template: "@if (hasChildren()) {\n <a\n class=\"helix-nav-rail-link\"\n [title]=\"$safeNavigationMigration(item()?.label)\"\n [style.padding-left.rem]=\"isCollapsed() ? null : 0.75 + depth() * 0.85\"\n (click)=\"itemClick($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-down helix-nav-rail-chevron\"\n [class.helix-nav-rail-chevron-open]=\"isExpanded()\"\n ></i>\n }\n </a>\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 [title]=\"$safeNavigationMigration(item()?.label)\"\n [routerLink]=\"$safeNavigationMigration(item()?.routerLink)\"\n [style.padding-left.rem]=\"isCollapsed() ? null : 0.75 + depth() * 0.85\"\n (click)=\"itemClick($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", 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(180deg)}.helix-nav-rail-sublist{margin:0;padding:0;list-style-type:none;overflow:hidden}:host(.helix-nav-rail-item-collapsed) .helix-nav-rail-link{justify-content:center}\n"], dependencies: [{ kind: "component", type: HelixNavRailItem, selector: "[helix-nav-rail-item]", inputs: ["item", "parentPath", "depth"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i3.Ripple, selector: "[hRipple]" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
400
+ }
401
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixNavRailItem, decorators: [{
402
+ type: Component,
403
+ args: [{ selector: '[helix-nav-rail-item]', standalone: true, imports: [CommonModule, RouterModule, RippleModule], changeDetection: ChangeDetectionStrategy.Eager, host: {
404
+ '[class.helix-nav-rail-item-expanded]': 'isExpanded()',
405
+ '[class.helix-nav-rail-item-collapsed]': 'isCollapsed()',
406
+ }, template: "@if (hasChildren()) {\n <a\n class=\"helix-nav-rail-link\"\n [title]=\"$safeNavigationMigration(item()?.label)\"\n [style.padding-left.rem]=\"isCollapsed() ? null : 0.75 + depth() * 0.85\"\n (click)=\"itemClick($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-down helix-nav-rail-chevron\"\n [class.helix-nav-rail-chevron-open]=\"isExpanded()\"\n ></i>\n }\n </a>\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 [title]=\"$safeNavigationMigration(item()?.label)\"\n [routerLink]=\"$safeNavigationMigration(item()?.routerLink)\"\n [style.padding-left.rem]=\"isCollapsed() ? null : 0.75 + depth() * 0.85\"\n (click)=\"itemClick($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", 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(180deg)}.helix-nav-rail-sublist{margin:0;padding:0;list-style-type:none;overflow:hidden}:host(.helix-nav-rail-item-collapsed) .helix-nav-rail-link{justify-content:center}\n"] }]
407
+ }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }], parentPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentPath", required: false }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }] } });
408
+
409
+ class HelixNavRail {
410
+ store = inject(LayoutStore);
411
+ router = inject(Router);
412
+ el = inject(ElementRef);
413
+ sanitizer = inject(DomSanitizer);
414
+ /** Grouped navigation model. Each group renders an optional uppercase section label. */
415
+ model = input([], /* @ts-ignore */
416
+ ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
417
+ /** Application title shown in the brand area. Hidden when nav is collapsed. */
418
+ appTitle = input('Helix', /* @ts-ignore */
419
+ ...(ngDevMode ? [{ debugName: "appTitle" }] : /* istanbul ignore next */ []));
420
+ /**
421
+ * Brand icon: inline SVG (`<svg>…</svg>`) or URL to an SVG file.
422
+ * Falls back to the default hardcoded icon when not provided.
423
+ */
424
+ brandIcon = input(/* @ts-ignore */
425
+ ...(ngDevMode ? [undefined, { debugName: "brandIcon" }] : /* istanbul ignore next */ []));
426
+ isInlineSvg = computed(() => this.brandIcon()?.trim().startsWith('<svg') ?? false, /* @ts-ignore */
427
+ ...(ngDevMode ? [{ debugName: "isInlineSvg" }] : /* istanbul ignore next */ []));
428
+ safeBrandIcon = computed(() => {
429
+ const icon = this.brandIcon();
430
+ if (!icon)
431
+ return null;
432
+ if (this.isInlineSvg()) {
433
+ return this.sanitizer.bypassSecurityTrustHtml(icon);
434
+ }
435
+ return icon;
436
+ }, /* @ts-ignore */
437
+ ...(ngDevMode ? [{ debugName: "safeBrandIcon" }] : /* istanbul ignore next */ []));
438
+ outsideClickListener = null;
439
+ destroy$ = new Subject();
440
+ constructor() {
441
+ effect(() => {
442
+ if (this.store.isDesktop()) {
443
+ if (this.store.overlayMenuActive()) {
444
+ this.bindOutsideClickListener();
445
+ }
446
+ else {
447
+ this.unbindOutsideClickListener();
448
+ }
449
+ }
450
+ else {
451
+ if (this.store.mobileMenuActive()) {
452
+ this.bindOutsideClickListener();
453
+ }
454
+ else {
455
+ this.unbindOutsideClickListener();
456
+ }
457
+ }
458
+ });
459
+ }
460
+ ngOnInit() {
461
+ this.router.events
462
+ .pipe(filter((event) => event instanceof NavigationEnd), takeUntil(this.destroy$))
463
+ .subscribe((event) => {
464
+ const navEvent = event;
465
+ this.onRouteChange(navEvent.urlAfterRedirects);
466
+ });
467
+ this.onRouteChange(this.router.url);
468
+ }
469
+ ngOnDestroy() {
470
+ this.destroy$.next();
471
+ this.destroy$.complete();
472
+ this.unbindOutsideClickListener();
473
+ }
474
+ onRouteChange(path) {
475
+ this.store.setActivePath(path);
476
+ this.store.closeMobileMenu();
477
+ }
478
+ bindOutsideClickListener() {
479
+ if (!this.outsideClickListener) {
480
+ this.outsideClickListener = (event) => {
481
+ if (this.isOutsideClicked(event)) {
482
+ this.store.closeMobileMenu();
483
+ }
484
+ };
485
+ document.addEventListener('click', this.outsideClickListener);
486
+ }
487
+ }
488
+ unbindOutsideClickListener() {
489
+ if (this.outsideClickListener) {
490
+ document.removeEventListener('click', this.outsideClickListener);
491
+ this.outsideClickListener = null;
492
+ }
493
+ }
494
+ isOutsideClicked(event) {
495
+ const topbarButtonEl = document.querySelector('.topbar-start > button');
496
+ const railEl = this.el.nativeElement;
497
+ return !(railEl?.isSameNode(event.target) ||
498
+ railEl?.contains(event.target) ||
499
+ topbarButtonEl?.isSameNode(event.target) ||
500
+ topbarButtonEl?.contains(event.target));
501
+ }
502
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixNavRail, deps: [], target: i0.ɵɵFactoryTarget.Component });
503
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: HelixNavRail, isStandalone: true, selector: "helix-nav-rail", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, appTitle: { classPropertyName: "appTitle", publicName: "appTitle", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<aside class=\"helix-nav-rail\" [class.helix-nav-rail-collapsed]=\"store.isCollapsed()\">\n <div class=\"helix-nav-rail-brand\">\n <a routerLink=\"/\">\n @if (brandIcon(); as icon) {\n @if (isInlineSvg()) {\n <span [innerHTML]=\"safeBrandIcon()\"></span>\n } @else {\n <img [src]=\"icon\" alt=\"\" width=\"24\" height=\"24\" />\n }\n } @else {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"var(--primary-color)\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"m10 16 1.5 1.5\" />\n <path d=\"m14 8-1.5-1.5\" />\n <path d=\"M15 2c-1.798 1.998-2.518 3.995-2.807 5.993\" />\n <path d=\"m16.5 10.5 1 1\" />\n <path d=\"m17 6-2.891-2.891\" />\n <path d=\"M2 15c6.667-6 13.333 0 20-6\" />\n <path d=\"m20 9 .891.891\" />\n <path d=\"M3.109 14.109 4 15\" />\n <path d=\"m6.5 12.5 1 1\" />\n <path d=\"m7 18 2.891 2.891\" />\n <path d=\"M9 22c1.798-1.998 2.518-3.995 2.807-5.993\" />\n </svg>\n }\n @if (!store.isCollapsed()) {\n <span class=\"helix-nav-rail-brand-text\">\n <span>{{ appTitle() }}</span>\n </span>\n }\n </a>\n </div>\n\n <nav class=\"helix-nav-rail-nav\">\n @for (group of model(); track group.section ?? $index) {\n <div class=\"helix-nav-rail-group\">\n @if (group.section && !store.isCollapsed()) {\n <div class=\"helix-nav-rail-section\">{{ group.section }}</div>\n }\n @if (group.section && store.isCollapsed() && $index > 0) {\n <div class=\"helix-nav-rail-divider\"></div>\n }\n <ul class=\"helix-nav-rail-list\">\n @for (item of group.items; track item.label) {\n <li helix-nav-rail-item [item]=\"item\" [parentPath]=\"null\" [depth]=\"0\"></li>\n }\n </ul>\n </div>\n }\n </nav>\n\n <div class=\"helix-nav-rail-footer\">\n <button\n type=\"button\"\n class=\"helix-nav-rail-collapse-button\"\n (click)=\"store.toggleSidebar()\"\n [title]=\"store.isCollapsed() ? 'Expand navigation' : 'Collapse navigation'\"\n >\n <i\n class=\"pi\"\n [ngClass]=\"{\n 'pi-angle-double-left': !store.isCollapsed(),\n 'pi-angle-double-right': store.isCollapsed(),\n }\"\n ></i>\n </button>\n </div>\n</aside>\n", styles: [":host{--helix-nav-text: var(--text-color);--helix-nav-text-muted: var(--text-color-secondary);--helix-nav-hover-bg: var(--helix-surface-hover);--helix-nav-active-bg: var(--helix-border);--helix-nav-active-text: var(--text-color);--helix-nav-accent: #009f9e;--helix-nav-border: var(--helix-border);display:contents}.helix-nav-rail{display:flex;flex-direction:column;position:fixed;top:0;left:0;width:var(--helix-nav-width, 17rem);height:100vh;z-index:999;overflow:hidden;-webkit-user-select:none;user-select:none;background:var(--helix-surface-chrome);color:var(--helix-nav-text);border-right:1px solid var(--helix-nav-border);transition:width var(--layout-section-transition-duration)}.helix-nav-rail.helix-nav-rail-collapsed{width:var(--helix-nav-width-collapsed, 4.75rem)}.helix-nav-rail-brand{flex:0 0 auto;height:var(--helix-topbar-height, 4rem);display:flex;align-items:center;padding:0 1.25rem;gap:.65rem;border-bottom:1px solid var(--helix-nav-border);overflow:hidden}.helix-nav-rail-brand a{display:flex;align-items:center;gap:.65rem;color:var(--text-color);font-size:1.15rem;font-weight:600;white-space:nowrap;text-decoration:none;min-width:0}.helix-nav-rail-brand a:hover{color:var(--text-color)}.helix-nav-rail-brand svg{flex-shrink:0;width:1.75rem;height:1.75rem}.helix-nav-rail-brand .helix-nav-rail-brand-text{display:flex;align-items:center;gap:.5rem;overflow:hidden;min-width:0}.helix-nav-rail-collapsed .helix-nav-rail-brand{justify-content:center;padding:0}.helix-nav-rail-collapsed .helix-nav-rail-brand a{gap:0}.helix-nav-rail-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:.85rem .65rem}.helix-nav-rail-group{margin-bottom:1.1rem}.helix-nav-rail-section{padding:.6rem .75rem .35rem;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--helix-nav-text-muted)}.helix-nav-rail-divider{height:1px;background:var(--helix-nav-border);margin:.5rem}.helix-nav-rail-list{margin:0;padding:0;list-style-type:none}.helix-nav-rail-footer{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;height:var(--helix-status-bar-height, 3rem);padding-right:1.25rem;border-top:1px solid var(--helix-nav-border)}.helix-nav-rail-collapsed .helix-nav-rail-footer{justify-content:center;padding-right:0}.helix-nav-rail-collapse-button{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;border:none;border-radius:50%;background-color:transparent;color:var(--helix-nav-text-muted);cursor:pointer;transition:background-color var(--element-transition-duration)}.helix-nav-rail-collapse-button:hover{background-color:var(--helix-surface-hover)}.helix-nav-rail-collapse-button:focus{outline-offset:-1px;box-shadow:inset var(--focus-ring-shadow)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HelixNavRailItem, selector: "[helix-nav-rail-item]", inputs: ["item", "parentPath", "depth"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
504
+ }
505
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixNavRail, decorators: [{
506
+ type: Component,
507
+ args: [{ selector: 'helix-nav-rail', standalone: true, imports: [CommonModule, HelixNavRailItem, RouterModule], changeDetection: ChangeDetectionStrategy.Eager, template: "<aside class=\"helix-nav-rail\" [class.helix-nav-rail-collapsed]=\"store.isCollapsed()\">\n <div class=\"helix-nav-rail-brand\">\n <a routerLink=\"/\">\n @if (brandIcon(); as icon) {\n @if (isInlineSvg()) {\n <span [innerHTML]=\"safeBrandIcon()\"></span>\n } @else {\n <img [src]=\"icon\" alt=\"\" width=\"24\" height=\"24\" />\n }\n } @else {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"var(--primary-color)\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"m10 16 1.5 1.5\" />\n <path d=\"m14 8-1.5-1.5\" />\n <path d=\"M15 2c-1.798 1.998-2.518 3.995-2.807 5.993\" />\n <path d=\"m16.5 10.5 1 1\" />\n <path d=\"m17 6-2.891-2.891\" />\n <path d=\"M2 15c6.667-6 13.333 0 20-6\" />\n <path d=\"m20 9 .891.891\" />\n <path d=\"M3.109 14.109 4 15\" />\n <path d=\"m6.5 12.5 1 1\" />\n <path d=\"m7 18 2.891 2.891\" />\n <path d=\"M9 22c1.798-1.998 2.518-3.995 2.807-5.993\" />\n </svg>\n }\n @if (!store.isCollapsed()) {\n <span class=\"helix-nav-rail-brand-text\">\n <span>{{ appTitle() }}</span>\n </span>\n }\n </a>\n </div>\n\n <nav class=\"helix-nav-rail-nav\">\n @for (group of model(); track group.section ?? $index) {\n <div class=\"helix-nav-rail-group\">\n @if (group.section && !store.isCollapsed()) {\n <div class=\"helix-nav-rail-section\">{{ group.section }}</div>\n }\n @if (group.section && store.isCollapsed() && $index > 0) {\n <div class=\"helix-nav-rail-divider\"></div>\n }\n <ul class=\"helix-nav-rail-list\">\n @for (item of group.items; track item.label) {\n <li helix-nav-rail-item [item]=\"item\" [parentPath]=\"null\" [depth]=\"0\"></li>\n }\n </ul>\n </div>\n }\n </nav>\n\n <div class=\"helix-nav-rail-footer\">\n <button\n type=\"button\"\n class=\"helix-nav-rail-collapse-button\"\n (click)=\"store.toggleSidebar()\"\n [title]=\"store.isCollapsed() ? 'Expand navigation' : 'Collapse navigation'\"\n >\n <i\n class=\"pi\"\n [ngClass]=\"{\n 'pi-angle-double-left': !store.isCollapsed(),\n 'pi-angle-double-right': store.isCollapsed(),\n }\"\n ></i>\n </button>\n </div>\n</aside>\n", styles: [":host{--helix-nav-text: var(--text-color);--helix-nav-text-muted: var(--text-color-secondary);--helix-nav-hover-bg: var(--helix-surface-hover);--helix-nav-active-bg: var(--helix-border);--helix-nav-active-text: var(--text-color);--helix-nav-accent: #009f9e;--helix-nav-border: var(--helix-border);display:contents}.helix-nav-rail{display:flex;flex-direction:column;position:fixed;top:0;left:0;width:var(--helix-nav-width, 17rem);height:100vh;z-index:999;overflow:hidden;-webkit-user-select:none;user-select:none;background:var(--helix-surface-chrome);color:var(--helix-nav-text);border-right:1px solid var(--helix-nav-border);transition:width var(--layout-section-transition-duration)}.helix-nav-rail.helix-nav-rail-collapsed{width:var(--helix-nav-width-collapsed, 4.75rem)}.helix-nav-rail-brand{flex:0 0 auto;height:var(--helix-topbar-height, 4rem);display:flex;align-items:center;padding:0 1.25rem;gap:.65rem;border-bottom:1px solid var(--helix-nav-border);overflow:hidden}.helix-nav-rail-brand a{display:flex;align-items:center;gap:.65rem;color:var(--text-color);font-size:1.15rem;font-weight:600;white-space:nowrap;text-decoration:none;min-width:0}.helix-nav-rail-brand a:hover{color:var(--text-color)}.helix-nav-rail-brand svg{flex-shrink:0;width:1.75rem;height:1.75rem}.helix-nav-rail-brand .helix-nav-rail-brand-text{display:flex;align-items:center;gap:.5rem;overflow:hidden;min-width:0}.helix-nav-rail-collapsed .helix-nav-rail-brand{justify-content:center;padding:0}.helix-nav-rail-collapsed .helix-nav-rail-brand a{gap:0}.helix-nav-rail-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:.85rem .65rem}.helix-nav-rail-group{margin-bottom:1.1rem}.helix-nav-rail-section{padding:.6rem .75rem .35rem;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--helix-nav-text-muted)}.helix-nav-rail-divider{height:1px;background:var(--helix-nav-border);margin:.5rem}.helix-nav-rail-list{margin:0;padding:0;list-style-type:none}.helix-nav-rail-footer{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;height:var(--helix-status-bar-height, 3rem);padding-right:1.25rem;border-top:1px solid var(--helix-nav-border)}.helix-nav-rail-collapsed .helix-nav-rail-footer{justify-content:center;padding-right:0}.helix-nav-rail-collapse-button{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;border:none;border-radius:50%;background-color:transparent;color:var(--helix-nav-text-muted);cursor:pointer;transition:background-color var(--element-transition-duration)}.helix-nav-rail-collapse-button:hover{background-color:var(--helix-surface-hover)}.helix-nav-rail-collapse-button:focus{outline-offset:-1px;box-shadow:inset var(--focus-ring-shadow)}\n"] }]
508
+ }], ctorParameters: () => [], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], appTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTitle", required: false }] }], brandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIcon", required: false }] }] } });
509
+
510
+ /**
511
+ * Adapts a flat HelixRouteMenuItem tree (as used by HelixAppLayout's `menu`
512
+ * input) into HelixNavGroup[] by wrapping it as a single unlabeled group.
513
+ * Each top-level item keeps its own identity (icon, children, etc.), so an
514
+ * item with children renders as a normal expandable HelixNavRailItem rather
515
+ * than being flattened into a static section heading.
516
+ */
517
+ function helixNavGroupsFromMenu(items) {
518
+ return [{ items }];
519
+ }
520
+
521
+ class HelixBadge {
522
+ severity = input.required(/* @ts-ignore */
523
+ ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
524
+ label = input(/* @ts-ignore */
525
+ ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
526
+ icon = input(/* @ts-ignore */
527
+ ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
528
+ size = input('md', /* @ts-ignore */
529
+ ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
530
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
531
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: HelixBadge, isStandalone: true, selector: "helix-badge", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
532
+ <span
533
+ class="helix-badge"
534
+ [class.helix-badge--sm]="size() === 'sm'"
535
+ [class.helix-badge--info]="severity() === 'info'"
536
+ [class.helix-badge--warn]="severity() === 'warn'"
537
+ [class.helix-badge--error]="severity() === 'error'"
538
+ [class.helix-badge--success]="severity() === 'success'"
539
+ >
540
+ @if (icon(); as icn) {
541
+ <i [class]="icn"></i>
542
+ }
543
+ @if (label(); as lbl) {
544
+ <span class="helix-badge__label">{{ lbl }}</span>
545
+ }
546
+ </span>
547
+ `, isInline: true, styles: [".helix-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:9999px;font-size:.75rem;font-weight:600;line-height:1;white-space:nowrap}.helix-badge--sm{padding:.125rem .375rem;font-size:.625rem}.helix-badge--info{background-color:var(--badge-bg, var(--h-info-100, #e0f2fe));color:var(--badge-color, var(--h-info-700, #0369a1))}.helix-badge--warn{background-color:var(--badge-bg, var(--h-warn-100, #fef3c7));color:var(--badge-color, var(--h-warn-700, #b45309))}.helix-badge--error{background-color:var(--badge-bg, var(--h-error-100, #fce4ec));color:var(--badge-color, var(--h-error-700, #c62828))}.helix-badge--success{background-color:var(--badge-bg, var(--h-success-100, #dcfce7));color:var(--badge-color, var(--h-success-700, #15803d))}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
548
+ }
549
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixBadge, decorators: [{
550
+ type: Component,
551
+ args: [{ selector: 'helix-badge', standalone: true, template: `
552
+ <span
553
+ class="helix-badge"
554
+ [class.helix-badge--sm]="size() === 'sm'"
555
+ [class.helix-badge--info]="severity() === 'info'"
556
+ [class.helix-badge--warn]="severity() === 'warn'"
557
+ [class.helix-badge--error]="severity() === 'error'"
558
+ [class.helix-badge--success]="severity() === 'success'"
559
+ >
560
+ @if (icon(); as icn) {
561
+ <i [class]="icn"></i>
562
+ }
563
+ @if (label(); as lbl) {
564
+ <span class="helix-badge__label">{{ lbl }}</span>
565
+ }
566
+ </span>
567
+ `, changeDetection: ChangeDetectionStrategy.Eager, styles: [".helix-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:9999px;font-size:.75rem;font-weight:600;line-height:1;white-space:nowrap}.helix-badge--sm{padding:.125rem .375rem;font-size:.625rem}.helix-badge--info{background-color:var(--badge-bg, var(--h-info-100, #e0f2fe));color:var(--badge-color, var(--h-info-700, #0369a1))}.helix-badge--warn{background-color:var(--badge-bg, var(--h-warn-100, #fef3c7));color:var(--badge-color, var(--h-warn-700, #b45309))}.helix-badge--error{background-color:var(--badge-bg, var(--h-error-100, #fce4ec));color:var(--badge-color, var(--h-error-700, #c62828))}.helix-badge--success{background-color:var(--badge-bg, var(--h-success-100, #dcfce7));color:var(--badge-color, var(--h-success-700, #15803d))}\n"] }]
568
+ }], propDecorators: { severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
569
+
570
+ const ENV_MAP = {
571
+ development: { severity: 'success', icon: 'pi pi-code', label: 'Development' },
572
+ testing: { severity: 'info', icon: 'pi pi-flask', label: 'Testing' },
573
+ staging: { severity: 'warn', icon: 'pi pi-layers', label: 'Staging' },
574
+ production: { severity: 'error', icon: 'pi pi-verified', label: 'Production' },
575
+ };
576
+ const DEFAULT_ENV = { severity: 'info', icon: 'pi pi-question', label: 'Unknown' };
577
+ class HelixEnvironmentBadge {
578
+ environment = input.required(/* @ts-ignore */
579
+ ...(ngDevMode ? [{ debugName: "environment" }] : /* istanbul ignore next */ []));
580
+ mapped = computed(() => ENV_MAP[this.environment()] ?? DEFAULT_ENV, /* @ts-ignore */
581
+ ...(ngDevMode ? [{ debugName: "mapped" }] : /* istanbul ignore next */ []));
582
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixEnvironmentBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
583
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: HelixEnvironmentBadge, isStandalone: true, selector: "helix-environment-badge", inputs: { environment: { classPropertyName: "environment", publicName: "environment", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
584
+ <helix-badge
585
+ [severity]="mapped().severity"
586
+ [icon]="mapped().icon"
587
+ [label]="mapped().label"
588
+ />
589
+ `, isInline: true, dependencies: [{ kind: "component", type: HelixBadge, selector: "helix-badge", inputs: ["severity", "label", "icon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
590
+ }
591
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixEnvironmentBadge, decorators: [{
592
+ type: Component,
593
+ args: [{
594
+ selector: 'helix-environment-badge',
595
+ standalone: true,
596
+ imports: [HelixBadge],
597
+ changeDetection: ChangeDetectionStrategy.Eager,
598
+ template: `
599
+ <helix-badge
600
+ [severity]="mapped().severity"
601
+ [icon]="mapped().icon"
602
+ [label]="mapped().label"
603
+ />
604
+ `,
605
+ }]
606
+ }], propDecorators: { environment: [{ type: i0.Input, args: [{ isSignal: true, alias: "environment", required: true }] }] } });
607
+
608
+ const TONE_BG = {
609
+ staging: 'var(--h-amber-600, #d97706)',
610
+ production: 'var(--h-surface-800, #1e293b)',
611
+ success: 'var(--h-green-600, #16a34a)',
612
+ danger: 'var(--h-red-600, #dc2626)',
613
+ neutral: 'var(--helix-surface-chrome, var(--surface-card))',
614
+ };
615
+ const TONE_TEXT = {
616
+ staging: '#fff',
617
+ production: '#fff',
618
+ success: '#fff',
619
+ danger: '#fff',
620
+ neutral: 'var(--text-color)',
621
+ };
622
+ class HelixStatusBar {
623
+ brand = input('', /* @ts-ignore */
624
+ ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
625
+ environment = input(/* @ts-ignore */
626
+ ...(ngDevMode ? [undefined, { debugName: "environment" }] : /* istanbul ignore next */ []));
627
+ note = input(/* @ts-ignore */
628
+ ...(ngDevMode ? [undefined, { debugName: "note" }] : /* istanbul ignore next */ []));
629
+ versions = input([], /* @ts-ignore */
630
+ ...(ngDevMode ? [{ debugName: "versions" }] : /* istanbul ignore next */ []));
631
+ tone = input('neutral', /* @ts-ignore */
632
+ ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
633
+ height = input('var(--helix-status-bar-height, 3rem)', /* @ts-ignore */
634
+ ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
635
+ envForBadge = computed(() => this.environment(), /* @ts-ignore */
636
+ ...(ngDevMode ? [{ debugName: "envForBadge" }] : /* istanbul ignore next */ []));
637
+ bgColor = computed(() => TONE_BG[this.tone()], /* @ts-ignore */
638
+ ...(ngDevMode ? [{ debugName: "bgColor" }] : /* istanbul ignore next */ []));
639
+ textColor = computed(() => TONE_TEXT[this.tone()], /* @ts-ignore */
640
+ ...(ngDevMode ? [{ debugName: "textColor" }] : /* istanbul ignore next */ []));
641
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixStatusBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
642
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: HelixStatusBar, isStandalone: true, selector: "helix-status-bar", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null }, environment: { classPropertyName: "environment", publicName: "environment", isSignal: true, isRequired: false, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null }, versions: { classPropertyName: "versions", publicName: "versions", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"helix-status-bar\"\n [style.height]=\"height()\"\n [style.background-color]=\"bgColor()\"\n [style.color]=\"textColor()\"\n>\n <span class=\"helix-status-bar-brand\">{{ brand() }}</span>\n\n @if (envForBadge(); as env) {\n <helix-environment-badge [environment]=\"env\" />\n }\n\n @if (note(); as n) {\n <span class=\"helix-status-bar-note\">{{ n }}</span>\n }\n\n <div class=\"helix-status-bar-versions\">\n @for (ver of versions(); track ver.label) {\n <span class=\"helix-status-bar-version\">\n <span class=\"helix-status-bar-version-label\">{{ ver.label }}:</span>\n <span class=\"helix-status-bar-version-value\">{{ ver.value }}</span>\n </span>\n }\n </div>\n</div>\n", styles: [".helix-status-bar{display:flex;align-items:center;gap:1rem;padding:0 1rem;height:var(--helix-status-bar-height, 3rem);font-size:.75rem;font-weight:500;white-space:nowrap;overflow:hidden;box-sizing:border-box;border-top:1px solid var(--helix-border, var(--surface-border))}.helix-status-bar-brand{font-weight:700;flex-shrink:0}.helix-status-bar-note{opacity:.85;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.helix-status-bar-versions{display:flex;gap:.75rem;flex-shrink:0}.helix-status-bar-version{display:inline-flex;gap:.25rem}.helix-status-bar-version-label{opacity:.7}.helix-status-bar-version-value{font-weight:600}\n"], dependencies: [{ kind: "component", type: HelixEnvironmentBadge, selector: "helix-environment-badge", inputs: ["environment"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
643
+ }
644
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixStatusBar, decorators: [{
645
+ type: Component,
646
+ args: [{ selector: 'helix-status-bar', standalone: true, imports: [HelixEnvironmentBadge], changeDetection: ChangeDetectionStrategy.Eager, template: "<div\n class=\"helix-status-bar\"\n [style.height]=\"height()\"\n [style.background-color]=\"bgColor()\"\n [style.color]=\"textColor()\"\n>\n <span class=\"helix-status-bar-brand\">{{ brand() }}</span>\n\n @if (envForBadge(); as env) {\n <helix-environment-badge [environment]=\"env\" />\n }\n\n @if (note(); as n) {\n <span class=\"helix-status-bar-note\">{{ n }}</span>\n }\n\n <div class=\"helix-status-bar-versions\">\n @for (ver of versions(); track ver.label) {\n <span class=\"helix-status-bar-version\">\n <span class=\"helix-status-bar-version-label\">{{ ver.label }}:</span>\n <span class=\"helix-status-bar-version-value\">{{ ver.value }}</span>\n </span>\n }\n </div>\n</div>\n", styles: [".helix-status-bar{display:flex;align-items:center;gap:1rem;padding:0 1rem;height:var(--helix-status-bar-height, 3rem);font-size:.75rem;font-weight:500;white-space:nowrap;overflow:hidden;box-sizing:border-box;border-top:1px solid var(--helix-border, var(--surface-border))}.helix-status-bar-brand{font-weight:700;flex-shrink:0}.helix-status-bar-note{opacity:.85;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.helix-status-bar-versions{display:flex;gap:.75rem;flex-shrink:0}.helix-status-bar-version{display:inline-flex;gap:.25rem}.helix-status-bar-version-label{opacity:.7}.helix-status-bar-version-value{font-weight:600}\n"] }]
647
+ }], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }], environment: [{ type: i0.Input, args: [{ isSignal: true, alias: "environment", required: false }] }], note: [{ type: i0.Input, args: [{ isSignal: true, alias: "note", required: false }] }], versions: [{ type: i0.Input, args: [{ isSignal: true, alias: "versions", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
648
+
649
+ class HelixAlertAction {
650
+ count = input.required(/* @ts-ignore */
651
+ ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
652
+ alerts = input(/* @ts-ignore */
653
+ ...(ngDevMode ? [undefined, { debugName: "alerts" }] : /* istanbul ignore next */ []));
654
+ open = signal(false, /* @ts-ignore */
655
+ ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
656
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixAlertAction, deps: [], target: i0.ɵɵFactoryTarget.Component });
657
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: HelixAlertAction, isStandalone: true, selector: "helix-alert-action", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: true, transformFunction: null }, alerts: { classPropertyName: "alerts", publicName: "alerts", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button type=\"button\" class=\"alert-badge-trigger\" (click)=\"open.set(!open())\" (blur)=\"open.set(false)\">\n <i class=\"pi pi-bell\"></i>\n @if (count() > 0) {\n <span class=\"alert-badge-count\">{{ count() }}</span>\n }\n</button>\n@if (open() && alerts() && alerts()!.length > 0) {\n <div class=\"alert-badge-dropdown\">\n @for (alert of alerts(); track alert.id) {\n <a\n class=\"alert-badge-item\"\n [class.alert-badge-item--warn]=\"alert.severity === 'warn'\"\n [class.alert-badge-item--error]=\"alert.severity === 'error'\"\n [class.alert-badge-item--success]=\"alert.severity === 'success'\"\n [routerLink]=\"alert.route || undefined\"\n >\n <span class=\"alert-badge-dot\"></span>\n <span class=\"alert-badge-label\">{{ alert.label }}</span>\n </a>\n }\n </div>\n}\n", styles: [":host{position:relative;display:inline-flex;justify-content:center;align-items:center;border-radius:50%;width:2.5rem;height:2.5rem;color:var(--text-color);cursor:pointer}:host:hover{background-color:var(--surface-hover)}.alert-badge-trigger{display:inline-flex;justify-content:center;align-items:center;background:none;border:none;color:inherit;cursor:pointer;padding:0;width:100%;height:100%;position:relative}.alert-badge-trigger i{font-size:1.4rem}.alert-badge-count{position:absolute;top:-.25rem;right:-.25rem;display:inline-flex;align-items:center;justify-content:center;min-width:1rem;height:1rem;padding:0 .25rem;border-radius:9999px;background-color:var(--h-red-500, #ef4444);color:#fff;font-size:.625rem;font-weight:700;line-height:1}.alert-badge-dropdown{position:absolute;top:100%;right:0;margin-top:.5rem;min-width:16rem;background-color:var(--surface-overlay, white);border:1px solid var(--surface-border, #e5e7eb);border-radius:var(--content-border-radius, 6px);box-shadow:0 4px 6px -1px #0000001a;z-index:1000;padding:.5rem}.alert-badge-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;border-radius:var(--content-border-radius, 6px);text-decoration:none;color:var(--text-color, #1f2937);cursor:pointer}.alert-badge-item:hover{background-color:var(--surface-hover, #f3f4f6)}.alert-badge-dot{width:.5rem;height:.5rem;border-radius:50%;background-color:var(--h-info-500, #3b82f6);flex-shrink:0}.alert-badge-item--warn .alert-badge-dot{background-color:var(--h-warn-500, #f59e0b)}.alert-badge-item--error .alert-badge-dot{background-color:var(--h-red-500, #ef4444)}.alert-badge-item--success .alert-badge-dot{background-color:var(--h-green-500, #22c55e)}.alert-badge-label{font-size:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
658
+ }
659
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixAlertAction, decorators: [{
660
+ type: Component,
661
+ args: [{ selector: 'helix-alert-action', standalone: true, imports: [RouterModule], changeDetection: ChangeDetectionStrategy.Eager, template: "<button type=\"button\" class=\"alert-badge-trigger\" (click)=\"open.set(!open())\" (blur)=\"open.set(false)\">\n <i class=\"pi pi-bell\"></i>\n @if (count() > 0) {\n <span class=\"alert-badge-count\">{{ count() }}</span>\n }\n</button>\n@if (open() && alerts() && alerts()!.length > 0) {\n <div class=\"alert-badge-dropdown\">\n @for (alert of alerts(); track alert.id) {\n <a\n class=\"alert-badge-item\"\n [class.alert-badge-item--warn]=\"alert.severity === 'warn'\"\n [class.alert-badge-item--error]=\"alert.severity === 'error'\"\n [class.alert-badge-item--success]=\"alert.severity === 'success'\"\n [routerLink]=\"alert.route || undefined\"\n >\n <span class=\"alert-badge-dot\"></span>\n <span class=\"alert-badge-label\">{{ alert.label }}</span>\n </a>\n }\n </div>\n}\n", styles: [":host{position:relative;display:inline-flex;justify-content:center;align-items:center;border-radius:50%;width:2.5rem;height:2.5rem;color:var(--text-color);cursor:pointer}:host:hover{background-color:var(--surface-hover)}.alert-badge-trigger{display:inline-flex;justify-content:center;align-items:center;background:none;border:none;color:inherit;cursor:pointer;padding:0;width:100%;height:100%;position:relative}.alert-badge-trigger i{font-size:1.4rem}.alert-badge-count{position:absolute;top:-.25rem;right:-.25rem;display:inline-flex;align-items:center;justify-content:center;min-width:1rem;height:1rem;padding:0 .25rem;border-radius:9999px;background-color:var(--h-red-500, #ef4444);color:#fff;font-size:.625rem;font-weight:700;line-height:1}.alert-badge-dropdown{position:absolute;top:100%;right:0;margin-top:.5rem;min-width:16rem;background-color:var(--surface-overlay, white);border:1px solid var(--surface-border, #e5e7eb);border-radius:var(--content-border-radius, 6px);box-shadow:0 4px 6px -1px #0000001a;z-index:1000;padding:.5rem}.alert-badge-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;border-radius:var(--content-border-radius, 6px);text-decoration:none;color:var(--text-color, #1f2937);cursor:pointer}.alert-badge-item:hover{background-color:var(--surface-hover, #f3f4f6)}.alert-badge-dot{width:.5rem;height:.5rem;border-radius:50%;background-color:var(--h-info-500, #3b82f6);flex-shrink:0}.alert-badge-item--warn .alert-badge-dot{background-color:var(--h-warn-500, #f59e0b)}.alert-badge-item--error .alert-badge-dot{background-color:var(--h-red-500, #ef4444)}.alert-badge-item--success .alert-badge-dot{background-color:var(--h-green-500, #22c55e)}.alert-badge-label{font-size:.875rem}\n"] }]
662
+ }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: true }] }], alerts: [{ type: i0.Input, args: [{ isSignal: true, alias: "alerts", required: false }] }] } });
663
+
664
+ const presets = { Aura: auraPreset, Lara: laraPreset, Nora: noraPreset };
665
+ class HelixConfigurator {
666
+ router = inject(Router);
667
+ primeng = inject(HelixConfig);
668
+ store = inject(LayoutStore);
669
+ platformId = inject(PLATFORM_ID);
670
+ presetOptions = Object.keys(presets);
671
+ showMenuModeButton = signal(!this.router.url.includes('auth'), /* @ts-ignore */
672
+ ...(ngDevMode ? [{ debugName: "showMenuModeButton" }] : /* istanbul ignore next */ []));
673
+ menuModeOptions = [
674
+ { label: 'Static', value: 'static' },
675
+ { label: 'Overlay', value: 'overlay' },
676
+ ];
677
+ surfaces = [
678
+ {
679
+ name: 'slate',
680
+ palette: {
681
+ 0: '#ffffff',
682
+ 50: '#f8fafc',
683
+ 100: '#f1f5f9',
684
+ 200: '#e2e8f0',
685
+ 300: '#cbd5e1',
686
+ 400: '#94a3b8',
687
+ 500: '#64748b',
688
+ 600: '#475569',
689
+ 700: '#334155',
690
+ 800: '#1e293b',
691
+ 900: '#0f172a',
692
+ 950: '#020617',
693
+ },
694
+ },
695
+ {
696
+ name: 'gray',
697
+ palette: {
698
+ 0: '#ffffff',
699
+ 50: '#f9fafb',
700
+ 100: '#f3f4f6',
701
+ 200: '#e5e7eb',
702
+ 300: '#d1d5db',
703
+ 400: '#9ca3af',
704
+ 500: '#6b7280',
705
+ 600: '#4b5563',
706
+ 700: '#374151',
707
+ 800: '#1f2937',
708
+ 900: '#111827',
709
+ 950: '#030712',
710
+ },
711
+ },
712
+ {
713
+ name: 'zinc',
714
+ palette: {
715
+ 0: '#ffffff',
716
+ 50: '#fafafa',
717
+ 100: '#f4f4f5',
718
+ 200: '#e4e4e7',
719
+ 300: '#d4d4d8',
720
+ 400: '#a1a1aa',
721
+ 500: '#71717a',
722
+ 600: '#52525b',
723
+ 700: '#3f3f46',
724
+ 800: '#27272a',
725
+ 900: '#18181b',
726
+ 950: '#09090b',
727
+ },
728
+ },
729
+ {
730
+ name: 'neutral',
731
+ palette: {
732
+ 0: '#ffffff',
733
+ 50: '#fafafa',
734
+ 100: '#f5f5f5',
735
+ 200: '#e5e5e5',
736
+ 300: '#d4d4d4',
737
+ 400: '#a3a3a3',
738
+ 500: '#737373',
739
+ 600: '#525252',
740
+ 700: '#404040',
741
+ 800: '#262626',
742
+ 900: '#171717',
743
+ 950: '#0a0a0a',
744
+ },
745
+ },
746
+ {
747
+ name: 'stone',
748
+ palette: {
749
+ 0: '#ffffff',
750
+ 50: '#fafaf9',
751
+ 100: '#f5f5f4',
752
+ 200: '#e7e5e4',
753
+ 300: '#d6d3d1',
754
+ 400: '#a8a29e',
755
+ 500: '#78716c',
756
+ 600: '#57534e',
757
+ 700: '#44403c',
758
+ 800: '#292524',
759
+ 900: '#1c1917',
760
+ 950: '#0c0a09',
761
+ },
762
+ },
763
+ {
764
+ name: 'soho',
765
+ palette: {
766
+ 0: '#ffffff',
767
+ 50: '#ececec',
768
+ 100: '#dedfdf',
769
+ 200: '#c4c4c6',
770
+ 300: '#adaeb0',
771
+ 400: '#97979b',
772
+ 500: '#7f8084',
773
+ 600: '#6a6b70',
774
+ 700: '#55565b',
775
+ 800: '#3f4046',
776
+ 900: '#2c2c34',
777
+ 950: '#16161d',
778
+ },
779
+ },
780
+ {
781
+ name: 'viva',
782
+ palette: {
783
+ 0: '#ffffff',
784
+ 50: '#f3f3f3',
785
+ 100: '#e7e7e8',
786
+ 200: '#cfd0d0',
787
+ 300: '#b7b8b9',
788
+ 400: '#9fa1a1',
789
+ 500: '#87898a',
790
+ 600: '#6e7173',
791
+ 700: '#565a5b',
792
+ 800: '#3e4244',
793
+ 900: '#262b2c',
794
+ 950: '#0e1315',
795
+ },
796
+ },
797
+ {
798
+ name: 'ocean',
799
+ palette: {
800
+ 0: '#ffffff',
801
+ 50: '#fbfcfc',
802
+ 100: '#F7F9F8',
803
+ 200: '#EFF3F2',
804
+ 300: '#DADEDD',
805
+ 400: '#B1B7B6',
806
+ 500: '#828787',
807
+ 600: '#5F7274',
808
+ 700: '#415B61',
809
+ 800: '#29444E',
810
+ 900: '#183240',
811
+ 950: '#0c1920',
812
+ },
813
+ },
814
+ ];
815
+ selectedPrimaryColor = computed(() => this.store.primary(), /* @ts-ignore */
816
+ ...(ngDevMode ? [{ debugName: "selectedPrimaryColor" }] : /* istanbul ignore next */ []));
817
+ selectedSurfaceColor = computed(() => this.store.surface(), /* @ts-ignore */
818
+ ...(ngDevMode ? [{ debugName: "selectedSurfaceColor" }] : /* istanbul ignore next */ []));
819
+ selectedPreset = computed(() => this.store.preset(), /* @ts-ignore */
820
+ ...(ngDevMode ? [{ debugName: "selectedPreset" }] : /* istanbul ignore next */ []));
821
+ menuMode = computed(() => this.store.menuMode(), /* @ts-ignore */
822
+ ...(ngDevMode ? [{ debugName: "menuMode" }] : /* istanbul ignore next */ []));
823
+ primaryColors = computed(() => {
824
+ const presetPalette = presets[this.store.preset()].primitive;
825
+ const colors = [
826
+ 'emerald',
827
+ 'green',
828
+ 'lime',
829
+ 'orange',
830
+ 'amber',
831
+ 'yellow',
832
+ 'teal',
833
+ 'cyan',
834
+ 'sky',
835
+ 'blue',
836
+ 'indigo',
837
+ 'violet',
838
+ 'purple',
839
+ 'fuchsia',
840
+ 'pink',
841
+ 'rose',
842
+ ];
843
+ const palettes = [{ name: 'noir', palette: {} }];
844
+ colors.forEach((color) => {
845
+ palettes.push({
846
+ name: color,
847
+ palette: presetPalette?.[color],
848
+ });
849
+ });
850
+ return palettes;
851
+ }, /* @ts-ignore */
852
+ ...(ngDevMode ? [{ debugName: "primaryColors" }] : /* istanbul ignore next */ []));
853
+ ngOnInit() {
854
+ if (isPlatformBrowser(this.platformId)) {
855
+ this.onPresetChange(this.store.preset());
856
+ }
857
+ }
858
+ getPresetExt() {
859
+ const color = this.primaryColors().find((c) => c.name === this.selectedPrimaryColor()) || {};
860
+ const preset = this.store.preset();
861
+ if (color.name === 'noir') {
862
+ return {
863
+ semantic: {
864
+ primary: {
865
+ 50: '{surface.50}',
866
+ 100: '{surface.100}',
867
+ 200: '{surface.200}',
868
+ 300: '{surface.300}',
869
+ 400: '{surface.400}',
870
+ 500: '{surface.500}',
871
+ 600: '{surface.600}',
872
+ 700: '{surface.700}',
873
+ 800: '{surface.800}',
874
+ 900: '{surface.900}',
875
+ 950: '{surface.950}',
876
+ },
877
+ colorScheme: {
878
+ light: {
879
+ primary: {
880
+ color: '{primary.950}',
881
+ contrastColor: '#ffffff',
882
+ hoverColor: '{primary.800}',
883
+ activeColor: '{primary.700}',
884
+ },
885
+ highlight: {
886
+ background: '{primary.950}',
887
+ focusBackground: '{primary.700}',
888
+ color: '#ffffff',
889
+ focusColor: '#ffffff',
890
+ },
891
+ },
892
+ dark: {
893
+ primary: {
894
+ color: '{primary.50}',
895
+ contrastColor: '{primary.950}',
896
+ hoverColor: '{primary.200}',
897
+ activeColor: '{primary.300}',
898
+ },
899
+ highlight: {
900
+ background: '{primary.50}',
901
+ focusBackground: '{primary.300}',
902
+ color: '{primary.950}',
903
+ focusColor: '{primary.950}',
904
+ },
905
+ },
906
+ },
907
+ },
908
+ };
909
+ }
910
+ else if (preset === 'Nora') {
911
+ return {
912
+ semantic: {
913
+ primary: color.palette,
914
+ colorScheme: {
915
+ light: {
916
+ primary: {
917
+ color: '{primary.600}',
918
+ contrastColor: '#ffffff',
919
+ hoverColor: '{primary.700}',
920
+ activeColor: '{primary.800}',
921
+ },
922
+ highlight: {
923
+ background: '{primary.600}',
924
+ focusBackground: '{primary.700}',
925
+ color: '#ffffff',
926
+ focusColor: '#ffffff',
927
+ },
928
+ },
929
+ dark: {
930
+ primary: {
931
+ color: '{primary.500}',
932
+ contrastColor: '{surface.900}',
933
+ hoverColor: '{primary.400}',
934
+ activeColor: '{primary.300}',
935
+ },
936
+ highlight: {
937
+ background: '{primary.500}',
938
+ focusBackground: '{primary.400}',
939
+ color: '{surface.900}',
940
+ focusColor: '{surface.900}',
941
+ },
942
+ },
943
+ },
944
+ },
945
+ };
946
+ }
947
+ else {
948
+ return {
949
+ semantic: {
950
+ primary: color.palette,
951
+ colorScheme: {
952
+ light: {
953
+ primary: {
954
+ color: '{primary.500}',
955
+ contrastColor: '#ffffff',
956
+ hoverColor: '{primary.600}',
957
+ activeColor: '{primary.700}',
958
+ },
959
+ highlight: {
960
+ background: '{primary.50}',
961
+ focusBackground: '{primary.100}',
962
+ color: '{primary.700}',
963
+ focusColor: '{primary.800}',
964
+ },
965
+ },
966
+ dark: {
967
+ primary: {
968
+ color: '{primary.400}',
969
+ contrastColor: '{surface.900}',
970
+ hoverColor: '{primary.300}',
971
+ activeColor: '{primary.200}',
972
+ },
973
+ highlight: {
974
+ background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
975
+ focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
976
+ color: 'rgba(255,255,255,.87)',
977
+ focusColor: 'rgba(255,255,255,.87)',
978
+ },
979
+ },
980
+ },
981
+ },
982
+ };
983
+ }
984
+ }
985
+ updateColors(event, type, color) {
986
+ if (type === 'primary') {
987
+ this.store.setPrimary(color.name);
988
+ }
989
+ else if (type === 'surface') {
990
+ this.store.setSurface(color.name);
991
+ }
992
+ this.applyTheme(type, color);
993
+ event.stopPropagation();
994
+ }
995
+ applyTheme(type, color) {
996
+ if (type === 'primary') {
997
+ updatePreset(this.getPresetExt());
998
+ }
999
+ else if (type === 'surface') {
1000
+ updateSurfacePalette(color.palette);
1001
+ }
1002
+ }
1003
+ onPresetChange(event) {
1004
+ this.store.setPreset(event);
1005
+ const preset = presets[event];
1006
+ const surfacePalette = this.surfaces.find((s) => s.name === this.selectedSurfaceColor())?.palette;
1007
+ $t()
1008
+ .preset(preset)
1009
+ .preset(this.getPresetExt())
1010
+ .surfacePalette(surfacePalette)
1011
+ .use({ useDefaultOptions: true });
1012
+ }
1013
+ onMenuModeChange(event) {
1014
+ this.store.setMenuMode(event);
1015
+ }
1016
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
1017
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: HelixConfigurator, isStandalone: true, selector: "helix-configurator", 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)]" }, ngImport: i0, 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 === selectedPrimaryColor() }\"\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", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i3$1.SelectButton, selector: "h-selectButton, h-selectbutton, h-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
1018
+ }
1019
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixConfigurator, decorators: [{
1020
+ type: Component,
1021
+ args: [{ selector: 'helix-configurator', standalone: true, imports: [CommonModule, FormsModule, SelectButtonModule], changeDetection: ChangeDetectionStrategy.Eager, host: {
1022
+ 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)]',
1023
+ }, 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 === selectedPrimaryColor() }\"\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" }]
1024
+ }] });
1025
+
1026
+ class HelixConfiguratorAction {
1027
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixConfiguratorAction, deps: [], target: i0.ɵɵFactoryTarget.Component });
1028
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: HelixConfiguratorAction, isStandalone: true, selector: "helix-configurator-action", ngImport: i0, template: `
1029
+ <div
1030
+ class="relative"
1031
+ style="display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;"
1032
+ >
1033
+ <button
1034
+ class="layout-topbar-action layout-topbar-action-highlight"
1035
+ hStyleClass="@next"
1036
+ enterFromClass="hidden"
1037
+ enterActiveClass="animate-scalein"
1038
+ leaveToClass="hidden"
1039
+ leaveActiveClass="animate-fadeout"
1040
+ [hideOnOutsideClick]="true"
1041
+ >
1042
+ <i class="pi pi-palette" style="font-size: 1.4rem;"></i>
1043
+ </button>
1044
+ <helix-configurator />
1045
+ </div>
1046
+ `, isInline: true, 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"], dependencies: [{ kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i1$2.StyleClass, selector: "[hStyleClass]", inputs: ["hStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: HelixConfigurator, selector: "helix-configurator" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
1047
+ }
1048
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixConfiguratorAction, decorators: [{
1049
+ type: Component,
1050
+ args: [{ selector: 'helix-configurator-action', standalone: true, imports: [StyleClassModule, HelixConfigurator], template: `
1051
+ <div
1052
+ class="relative"
1053
+ style="display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;"
1054
+ >
1055
+ <button
1056
+ class="layout-topbar-action layout-topbar-action-highlight"
1057
+ hStyleClass="@next"
1058
+ enterFromClass="hidden"
1059
+ enterActiveClass="animate-scalein"
1060
+ leaveToClass="hidden"
1061
+ leaveActiveClass="animate-fadeout"
1062
+ [hideOnOutsideClick]="true"
1063
+ >
1064
+ <i class="pi pi-palette" style="font-size: 1.4rem;"></i>
1065
+ </button>
1066
+ <helix-configurator />
1067
+ </div>
1068
+ `, changeDetection: ChangeDetectionStrategy.Eager, 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"] }]
1069
+ }] });
1070
+
1071
+ class HelixDarkModeAction {
1072
+ store = inject(LayoutStore);
1073
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixDarkModeAction, deps: [], target: i0.ɵɵFactoryTarget.Component });
1074
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: HelixDarkModeAction, isStandalone: true, selector: "helix-dark-mode-action", host: { styleAttribute: "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);" }, ngImport: i0, template: `
1075
+ <button type="button" class="layout-topbar-action" (click)="store.toggleDarkMode()">
1076
+ <i
1077
+ [ngClass]="{
1078
+ pi: true,
1079
+ 'pi-moon': store.isDarkTheme(),
1080
+ 'pi-sun': !store.isDarkTheme(),
1081
+ }"
1082
+ style="font-size: 1.4rem;"
1083
+ ></i>
1084
+ </button>
1085
+ `, isInline: true, styles: [":host(:hover){background-color:var(--surface-hover)}button{cursor:pointer}button i{cursor:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
1086
+ }
1087
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixDarkModeAction, decorators: [{
1088
+ type: Component,
1089
+ args: [{ selector: 'helix-dark-mode-action', standalone: true, imports: [CommonModule], template: `
1090
+ <button type="button" class="layout-topbar-action" (click)="store.toggleDarkMode()">
1091
+ <i
1092
+ [ngClass]="{
1093
+ pi: true,
1094
+ 'pi-moon': store.isDarkTheme(),
1095
+ 'pi-sun': !store.isDarkTheme(),
1096
+ }"
1097
+ style="font-size: 1.4rem;"
1098
+ ></i>
1099
+ </button>
1100
+ `, host: {
1101
+ style: '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);',
1102
+ }, changeDetection: ChangeDetectionStrategy.Eager, styles: [":host(:hover){background-color:var(--surface-hover)}button{cursor:pointer}button i{cursor:inherit}\n"] }]
1103
+ }] });
1104
+
1105
+ const DEFAULT_ACTIONS = [
1106
+ { icon: 'pi pi-calendar', label: 'Calendar' },
1107
+ { icon: 'pi pi-inbox', label: 'Messages' },
1108
+ { icon: 'pi pi-user', label: 'Profile' },
1109
+ ];
1110
+ const DEFAULT_ITEMS = [
1111
+ { type: 'darkmode' },
1112
+ { type: 'configurator' },
1113
+ { type: 'mobile' },
1114
+ ];
1115
+ class HelixTopbar {
1116
+ appTitle = input('Helix', /* @ts-ignore */
1117
+ ...(ngDevMode ? [{ debugName: "appTitle" }] : /* istanbul ignore next */ []));
1118
+ topbarActions = input(DEFAULT_ACTIONS, /* @ts-ignore */
1119
+ ...(ngDevMode ? [{ debugName: "topbarActions" }] : /* istanbul ignore next */ []));
1120
+ breadcrumbs = input(undefined, /* @ts-ignore */
1121
+ ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : /* istanbul ignore next */ []));
1122
+ items = input(DEFAULT_ITEMS, /* @ts-ignore */
1123
+ ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
1124
+ store = inject(LayoutStore);
1125
+ router = inject(Router);
1126
+ route = inject(ActivatedRoute);
1127
+ destroy$ = new Subject();
1128
+ routeChange = signal(0, /* @ts-ignore */
1129
+ ...(ngDevMode ? [{ debugName: "routeChange" }] : /* istanbul ignore next */ []));
1130
+ ngOnInit() {
1131
+ this.router.events
1132
+ .pipe(filter((event) => event instanceof NavigationEnd), takeUntil(this.destroy$))
1133
+ .subscribe(() => this.routeChange.update((n) => n + 1));
1134
+ }
1135
+ ngOnDestroy() {
1136
+ this.destroy$.next();
1137
+ this.destroy$.complete();
1138
+ }
1139
+ effectiveBreadcrumbs = computed(() => {
1140
+ const input = this.breadcrumbs();
1141
+ if (input !== undefined)
1142
+ return input;
1143
+ this.routeChange();
1144
+ return helixBreadcrumbsFromRoutes(this.route);
1145
+ }, /* @ts-ignore */
1146
+ ...(ngDevMode ? [{ debugName: "effectiveBreadcrumbs" }] : /* istanbul ignore next */ []));
1147
+ showBreadcrumbs = computed(() => this.effectiveBreadcrumbs().length > 1, /* @ts-ignore */
1148
+ ...(ngDevMode ? [{ debugName: "showBreadcrumbs" }] : /* istanbul ignore next */ []));
1149
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixTopbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
1150
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: HelixTopbar, isStandalone: true, selector: "helix-topbar", inputs: { appTitle: { classPropertyName: "appTitle", publicName: "appTitle", isSignal: true, isRequired: false, transformFunction: null }, topbarActions: { classPropertyName: "topbarActions", publicName: "topbarActions", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"layout-topbar\">\n <div class=\"layout-topbar-start\">\n <button class=\"layout-menu-button layout-topbar-action\" (click)=\"store.onMenuToggle()\">\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", 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}.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"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i1$2.StyleClass, selector: "[hStyleClass]", inputs: ["hStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: HelixAlertAction, selector: "helix-alert-action", inputs: ["count", "alerts"] }, { kind: "component", type: HelixConfiguratorAction, selector: "helix-configurator-action" }, { kind: "component", type: HelixDarkModeAction, selector: "helix-dark-mode-action" }, { kind: "component", type: Breadcrumb, selector: "h-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
1151
+ }
1152
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixTopbar, decorators: [{
1153
+ type: Component,
1154
+ args: [{ selector: 'helix-topbar', standalone: true, imports: [
1155
+ RouterModule,
1156
+ CommonModule,
1157
+ StyleClassModule,
1158
+ HelixAlertAction,
1159
+ HelixConfiguratorAction,
1160
+ HelixDarkModeAction,
1161
+ Breadcrumb,
1162
+ ], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"layout-topbar\">\n <div class=\"layout-topbar-start\">\n <button class=\"layout-menu-button layout-topbar-action\" (click)=\"store.onMenuToggle()\">\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", 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}.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"] }]
1163
+ }], propDecorators: { appTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTitle", required: false }] }], topbarActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarActions", required: false }] }], breadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumbs", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }] } });
1164
+
1165
+ class HelixAppLayout {
1166
+ appTitle = input('Helix', /* @ts-ignore */
1167
+ ...(ngDevMode ? [{ debugName: "appTitle" }] : /* istanbul ignore next */ []));
1168
+ environment = input(/* @ts-ignore */
1169
+ ...(ngDevMode ? [undefined, { debugName: "environment" }] : /* istanbul ignore next */ []));
1170
+ /** Topbar items. When provided, overrides the default darkmode / configurator / mobile items. */
1171
+ topbarItems = input(/* @ts-ignore */
1172
+ ...(ngDevMode ? [undefined, { debugName: "topbarItems" }] : /* istanbul ignore next */ []));
1173
+ /** Topbar actions rendered in the right-side dropdown. */
1174
+ topbarActions = input(/* @ts-ignore */
1175
+ ...(ngDevMode ? [undefined, { debugName: "topbarActions" }] : /* istanbul ignore next */ []));
1176
+ /**
1177
+ * Nav-rail brand icon: inline SVG (`<svg>…</svg>`) or a URL to an SVG file.
1178
+ * Falls back to the default hardcoded icon when not provided.
1179
+ */
1180
+ brandIcon = input(/* @ts-ignore */
1181
+ ...(ngDevMode ? [undefined, { debugName: "brandIcon" }] : /* istanbul ignore next */ []));
1182
+ /** Status bar inputs */
1183
+ statusBarEnvironment = input(/* @ts-ignore */
1184
+ ...(ngDevMode ? [undefined, { debugName: "statusBarEnvironment" }] : /* istanbul ignore next */ []));
1185
+ statusBarNote = input(/* @ts-ignore */
1186
+ ...(ngDevMode ? [undefined, { debugName: "statusBarNote" }] : /* istanbul ignore next */ []));
1187
+ statusBarTone = input('neutral', /* @ts-ignore */
1188
+ ...(ngDevMode ? [{ debugName: "statusBarTone" }] : /* istanbul ignore next */ []));
1189
+ statusBarVersions = input([], /* @ts-ignore */
1190
+ ...(ngDevMode ? [{ debugName: "statusBarVersions" }] : /* istanbul ignore next */ []));
1191
+ statusBarBrand = input('', /* @ts-ignore */
1192
+ ...(ngDevMode ? [{ debugName: "statusBarBrand" }] : /* istanbul ignore next */ []));
1193
+ /**
1194
+ * Menu model. When provided, overrides route data.
1195
+ * Also auto-populated from ActivatedRoute.data['menu'] when used as a route component.
1196
+ */
1197
+ menu = input([], /* @ts-ignore */
1198
+ ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
1199
+ static DEFAULT_TOP_ACTIONS = [
1200
+ { icon: 'pi pi-calendar', label: 'Calendar' },
1201
+ { icon: 'pi pi-inbox', label: 'Messages' },
1202
+ { icon: 'pi pi-user', label: 'Profile' },
1203
+ ];
1204
+ store = inject(LayoutStore);
1205
+ activatedRoute = inject(ActivatedRoute);
1206
+ /** Resolved menu: input takes priority, then route data, then empty. */
1207
+ effectiveMenu = computed(() => {
1208
+ const inputMenu = this.menu();
1209
+ if (inputMenu.length > 0)
1210
+ return inputMenu;
1211
+ return this.activatedRoute.snapshot.data['menu'] ?? [];
1212
+ }, /* @ts-ignore */
1213
+ ...(ngDevMode ? [{ debugName: "effectiveMenu" }] : /* istanbul ignore next */ []));
1214
+ effectiveNavGroups = computed(() => helixNavGroupsFromMenu(this.effectiveMenu()), /* @ts-ignore */
1215
+ ...(ngDevMode ? [{ debugName: "effectiveNavGroups" }] : /* istanbul ignore next */ []));
1216
+ effectiveEnvironment = computed(() => {
1217
+ const input = this.environment();
1218
+ if (input !== undefined)
1219
+ return input;
1220
+ return this.activatedRoute.snapshot.data['environment'];
1221
+ }, /* @ts-ignore */
1222
+ ...(ngDevMode ? [{ debugName: "effectiveEnvironment" }] : /* istanbul ignore next */ []));
1223
+ effectiveItems = computed(() => {
1224
+ const custom = this.topbarItems();
1225
+ if (custom !== undefined)
1226
+ return custom;
1227
+ return [{ type: 'darkmode' }, { type: 'configurator' }, { type: 'mobile' }];
1228
+ }, /* @ts-ignore */
1229
+ ...(ngDevMode ? [{ debugName: "effectiveItems" }] : /* istanbul ignore next */ []));
1230
+ effectiveTopbarActions = computed(() => this.topbarActions() ?? HelixAppLayout.DEFAULT_TOP_ACTIONS, /* @ts-ignore */
1231
+ ...(ngDevMode ? [{ debugName: "effectiveTopbarActions" }] : /* istanbul ignore next */ []));
1232
+ constructor() {
1233
+ effect(() => {
1234
+ if (this.store.mobileMenuActive()) {
1235
+ document.body.classList.add('blocked-scroll');
1236
+ }
1237
+ else {
1238
+ document.body.classList.remove('blocked-scroll');
1239
+ }
1240
+ });
1241
+ }
1242
+ containerClass = computed(() => ({
1243
+ 'layout-overlay': this.store.menuMode() === 'overlay',
1244
+ 'layout-static': this.store.menuMode() === 'static',
1245
+ 'layout-static-inactive': this.store.staticMenuDesktopInactive() && this.store.menuMode() === 'static',
1246
+ 'layout-overlay-active': this.store.overlayMenuActive(),
1247
+ 'layout-mobile-active': this.store.mobileMenuActive(),
1248
+ 'layout-sidebar-collapsed': this.store.isCollapsed(),
1249
+ }), /* @ts-ignore */
1250
+ ...(ngDevMode ? [{ debugName: "containerClass" }] : /* istanbul ignore next */ []));
1251
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixAppLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
1252
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: HelixAppLayout, isStandalone: true, selector: "helix-app-layout", inputs: { appTitle: { classPropertyName: "appTitle", publicName: "appTitle", isSignal: true, isRequired: false, transformFunction: null }, environment: { classPropertyName: "environment", publicName: "environment", isSignal: true, isRequired: false, transformFunction: null }, topbarItems: { classPropertyName: "topbarItems", publicName: "topbarItems", isSignal: true, isRequired: false, transformFunction: null }, topbarActions: { classPropertyName: "topbarActions", publicName: "topbarActions", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, statusBarEnvironment: { classPropertyName: "statusBarEnvironment", publicName: "statusBarEnvironment", isSignal: true, isRequired: false, transformFunction: null }, statusBarNote: { classPropertyName: "statusBarNote", publicName: "statusBarNote", isSignal: true, isRequired: false, transformFunction: null }, statusBarTone: { classPropertyName: "statusBarTone", publicName: "statusBarTone", isSignal: true, isRequired: false, transformFunction: null }, statusBarVersions: { classPropertyName: "statusBarVersions", publicName: "statusBarVersions", isSignal: true, isRequired: false, transformFunction: null }, statusBarBrand: { classPropertyName: "statusBarBrand", publicName: "statusBarBrand", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"layout-wrapper\" [ngClass]=\"containerClass()\">\n <helix-topbar\n [items]=\"effectiveItems()\"\n [topbarActions]=\"effectiveTopbarActions()\"\n ></helix-topbar>\n <helix-nav-rail\n [model]=\"effectiveNavGroups()\"\n [appTitle]=\"appTitle()\"\n [brandIcon]=\"brandIcon()\"\n ></helix-nav-rail>\n <div class=\"layout-main-container\">\n <div class=\"layout-main\">\n <router-outlet></router-outlet>\n </div>\n </div>\n <helix-status-bar\n [brand]=\"statusBarBrand()\"\n [environment]=\"statusBarEnvironment()\"\n [note]=\"statusBarNote()\"\n [tone]=\"statusBarTone()\"\n [versions]=\"statusBarVersions()\"\n />\n <div class=\"layout-mask\"></div>\n</div>\n", styles: [".layout-wrapper{min-height:100vh}.layout-main-container{display:flex;flex-direction:column;min-height:100vh;padding:calc(var(--helix-topbar-height) + var(--helix-layout-gap)) var(--helix-layout-gap) calc(var(--helix-status-bar-height) + var(--helix-layout-gap)) var(--helix-layout-gap);transition:margin-left var(--layout-section-transition-duration)}.layout-main{flex:1 1 auto}.layout-wrapper>helix-status-bar{position:fixed;bottom:0;left:0;right:0;z-index:996;transition:left var(--layout-section-transition-duration)}.layout-mask{display:none;position:fixed;top:0;left:0;z-index:998;width:100%;height:100%;background-color:var(--maskbg)}@media(min-width:992px){.layout-wrapper.layout-overlay .layout-main-container{margin-left:0}.layout-wrapper.layout-overlay .helix-nav-rail{transform:translate(-100%);left:0;border-right:1px solid var(--helix-border);transition:transform .4s cubic-bezier(.05,.74,.2,.99),left .4s cubic-bezier(.05,.74,.2,.99);box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014}.layout-wrapper.layout-overlay.layout-overlay-active .helix-nav-rail{transform:translate(0)}.layout-wrapper.layout-static .layout-main-container{margin-left:var(--helix-nav-width)}.layout-wrapper.layout-static .layout-topbar{left:var(--helix-nav-width);width:calc(100% - var(--helix-nav-width))}.layout-wrapper.layout-static>helix-status-bar{left:var(--helix-nav-width)}.layout-wrapper.layout-static.layout-static-inactive .helix-nav-rail{transform:translate(-100%);left:0}.layout-wrapper.layout-static.layout-static-inactive .layout-main-container{margin-left:0}.layout-wrapper.layout-static.layout-static-inactive .layout-topbar{left:0;width:100%}.layout-wrapper.layout-static.layout-static-inactive>helix-status-bar{left:0}.layout-wrapper.layout-static.layout-sidebar-collapsed .layout-main-container{margin-left:var(--helix-nav-width-collapsed)}.layout-wrapper.layout-static.layout-sidebar-collapsed .layout-topbar{left:var(--helix-nav-width-collapsed);width:calc(100% - var(--helix-nav-width-collapsed))}.layout-wrapper.layout-static.layout-sidebar-collapsed>helix-status-bar{left:var(--helix-nav-width-collapsed)}.layout-wrapper .layout-mask{display:none}}@media(max-width:991px){.blocked-scroll{overflow:hidden}.layout-wrapper .layout-main-container{margin-left:0}.layout-wrapper .layout-topbar{left:0;width:100%}.layout-wrapper .helix-nav-rail{transform:translate(-100%);left:0;transition:transform .4s cubic-bezier(.05,.74,.2,.99),left .4s cubic-bezier(.05,.74,.2,.99)}.layout-wrapper.layout-mobile-active .helix-nav-rail{transform:translate(0)}.layout-wrapper.layout-mobile-active .layout-mask{display:block}}@media screen and (min-width:1960px){.layout-main,.landing-wrapper{width:1760px;margin-left:auto!important;margin-right:auto!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HelixTopbar, selector: "helix-topbar", inputs: ["appTitle", "topbarActions", "breadcrumbs", "items"] }, { kind: "component", type: HelixNavRail, selector: "helix-nav-rail", inputs: ["model", "appTitle", "brandIcon"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: HelixStatusBar, selector: "helix-status-bar", inputs: ["brand", "environment", "note", "versions", "tone", "height"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
1253
+ }
1254
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixAppLayout, decorators: [{
1255
+ type: Component,
1256
+ args: [{ selector: 'helix-app-layout', standalone: true, imports: [CommonModule, HelixTopbar, HelixNavRail, RouterModule, HelixStatusBar], changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, template: "<div class=\"layout-wrapper\" [ngClass]=\"containerClass()\">\n <helix-topbar\n [items]=\"effectiveItems()\"\n [topbarActions]=\"effectiveTopbarActions()\"\n ></helix-topbar>\n <helix-nav-rail\n [model]=\"effectiveNavGroups()\"\n [appTitle]=\"appTitle()\"\n [brandIcon]=\"brandIcon()\"\n ></helix-nav-rail>\n <div class=\"layout-main-container\">\n <div class=\"layout-main\">\n <router-outlet></router-outlet>\n </div>\n </div>\n <helix-status-bar\n [brand]=\"statusBarBrand()\"\n [environment]=\"statusBarEnvironment()\"\n [note]=\"statusBarNote()\"\n [tone]=\"statusBarTone()\"\n [versions]=\"statusBarVersions()\"\n />\n <div class=\"layout-mask\"></div>\n</div>\n", styles: [".layout-wrapper{min-height:100vh}.layout-main-container{display:flex;flex-direction:column;min-height:100vh;padding:calc(var(--helix-topbar-height) + var(--helix-layout-gap)) var(--helix-layout-gap) calc(var(--helix-status-bar-height) + var(--helix-layout-gap)) var(--helix-layout-gap);transition:margin-left var(--layout-section-transition-duration)}.layout-main{flex:1 1 auto}.layout-wrapper>helix-status-bar{position:fixed;bottom:0;left:0;right:0;z-index:996;transition:left var(--layout-section-transition-duration)}.layout-mask{display:none;position:fixed;top:0;left:0;z-index:998;width:100%;height:100%;background-color:var(--maskbg)}@media(min-width:992px){.layout-wrapper.layout-overlay .layout-main-container{margin-left:0}.layout-wrapper.layout-overlay .helix-nav-rail{transform:translate(-100%);left:0;border-right:1px solid var(--helix-border);transition:transform .4s cubic-bezier(.05,.74,.2,.99),left .4s cubic-bezier(.05,.74,.2,.99);box-shadow:0 3px 5px #00000005,0 0 2px #0000000d,0 1px 4px #00000014}.layout-wrapper.layout-overlay.layout-overlay-active .helix-nav-rail{transform:translate(0)}.layout-wrapper.layout-static .layout-main-container{margin-left:var(--helix-nav-width)}.layout-wrapper.layout-static .layout-topbar{left:var(--helix-nav-width);width:calc(100% - var(--helix-nav-width))}.layout-wrapper.layout-static>helix-status-bar{left:var(--helix-nav-width)}.layout-wrapper.layout-static.layout-static-inactive .helix-nav-rail{transform:translate(-100%);left:0}.layout-wrapper.layout-static.layout-static-inactive .layout-main-container{margin-left:0}.layout-wrapper.layout-static.layout-static-inactive .layout-topbar{left:0;width:100%}.layout-wrapper.layout-static.layout-static-inactive>helix-status-bar{left:0}.layout-wrapper.layout-static.layout-sidebar-collapsed .layout-main-container{margin-left:var(--helix-nav-width-collapsed)}.layout-wrapper.layout-static.layout-sidebar-collapsed .layout-topbar{left:var(--helix-nav-width-collapsed);width:calc(100% - var(--helix-nav-width-collapsed))}.layout-wrapper.layout-static.layout-sidebar-collapsed>helix-status-bar{left:var(--helix-nav-width-collapsed)}.layout-wrapper .layout-mask{display:none}}@media(max-width:991px){.blocked-scroll{overflow:hidden}.layout-wrapper .layout-main-container{margin-left:0}.layout-wrapper .layout-topbar{left:0;width:100%}.layout-wrapper .helix-nav-rail{transform:translate(-100%);left:0;transition:transform .4s cubic-bezier(.05,.74,.2,.99),left .4s cubic-bezier(.05,.74,.2,.99)}.layout-wrapper.layout-mobile-active .helix-nav-rail{transform:translate(0)}.layout-wrapper.layout-mobile-active .layout-mask{display:block}}@media screen and (min-width:1960px){.layout-main,.landing-wrapper{width:1760px;margin-left:auto!important;margin-right:auto!important}}\n"] }]
1257
+ }], ctorParameters: () => [], propDecorators: { appTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTitle", required: false }] }], environment: [{ type: i0.Input, args: [{ isSignal: true, alias: "environment", required: false }] }], topbarItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarItems", required: false }] }], topbarActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarActions", required: false }] }], brandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIcon", required: false }] }], statusBarEnvironment: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusBarEnvironment", required: false }] }], statusBarNote: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusBarNote", required: false }] }], statusBarTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusBarTone", required: false }] }], statusBarVersions: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusBarVersions", required: false }] }], statusBarBrand: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusBarBrand", required: false }] }], menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu", required: false }] }] } });
1258
+
1259
+ class HelixFloatingConfigurator {
1260
+ store = inject(LayoutStore);
1261
+ float = input(true, /* @ts-ignore */
1262
+ ...(ngDevMode ? [{ debugName: "float" }] : /* istanbul ignore next */ []));
1263
+ isDarkTheme = computed(() => this.store.darkTheme(), /* @ts-ignore */
1264
+ ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : /* istanbul ignore next */ []));
1265
+ toggleDarkMode() {
1266
+ this.store.toggleDarkMode();
1267
+ }
1268
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixFloatingConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
1269
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: HelixFloatingConfigurator, isStandalone: true, selector: "helix-floating-configurator", inputs: { float: { classPropertyName: "float", publicName: "float", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$3.Button, selector: "h-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i1$2.StyleClass, selector: "[hStyleClass]", inputs: ["hStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: HelixConfigurator, selector: "helix-configurator" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
1270
+ }
1271
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixFloatingConfigurator, decorators: [{
1272
+ type: Component,
1273
+ args: [{ selector: 'helix-floating-configurator', standalone: true, imports: [CommonModule, ButtonModule, StyleClassModule, HelixConfigurator], changeDetection: ChangeDetectionStrategy.Eager, 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" }]
1274
+ }], propDecorators: { float: [{ type: i0.Input, args: [{ isSignal: true, alias: "float", required: false }] }] } });
1275
+
1276
+ class HelixFooter {
1277
+ brandName = input('Helix', /* @ts-ignore */
1278
+ ...(ngDevMode ? [{ debugName: "brandName" }] : /* istanbul ignore next */ []));
1279
+ brandUrl = input('https://primeng.org', /* @ts-ignore */
1280
+ ...(ngDevMode ? [{ debugName: "brandUrl" }] : /* istanbul ignore next */ []));
1281
+ columns = input([], /* @ts-ignore */
1282
+ ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
1283
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
1284
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: HelixFooter, isStandalone: true, selector: "helix-footer", inputs: { brandName: { classPropertyName: "brandName", publicName: "brandName", isSignal: true, isRequired: false, transformFunction: null }, brandUrl: { classPropertyName: "brandUrl", publicName: "brandUrl", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"layout-footer\">\n <ng-content select=\"[helixFooterStart]\" />\n {{ brandName() }} by\n <a\n [href]=\"brandUrl()\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"text-primary font-bold hover:underline\"\n >{{ brandUrl() | slice: 8 }}</a\n >\n\n @if (columns().length > 0) {\n <div class=\"layout-footer-columns\">\n @for (column of columns(); track column.title) {\n <div class=\"layout-footer-column\">\n <span class=\"font-semibold\">{{ column.title }}</span>\n <ul>\n @for (link of column.links; track link.label) {\n <li>\n @if (link.url) {\n <a [href]=\"link.url\" target=\"_blank\" rel=\"noopener noreferrer\">{{\n link.label\n }}</a>\n } @else if (link.route) {\n <a [routerLink]=\"link.route\">{{ link.label }}</a>\n } @else {\n {{ link.label }}\n }\n </li>\n }\n </ul>\n </div>\n }\n </div>\n }\n\n <ng-content />\n</div>\n", styles: [".layout-footer{display:flex;align-items:center;justify-content:center;padding:1rem 0;gap:.5rem;border-top:1px solid var(--surface-border)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "pipe", type: SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
1285
+ }
1286
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixFooter, decorators: [{
1287
+ type: Component,
1288
+ args: [{ standalone: true, selector: 'helix-footer', imports: [RouterModule, SlicePipe], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"layout-footer\">\n <ng-content select=\"[helixFooterStart]\" />\n {{ brandName() }} by\n <a\n [href]=\"brandUrl()\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"text-primary font-bold hover:underline\"\n >{{ brandUrl() | slice: 8 }}</a\n >\n\n @if (columns().length > 0) {\n <div class=\"layout-footer-columns\">\n @for (column of columns(); track column.title) {\n <div class=\"layout-footer-column\">\n <span class=\"font-semibold\">{{ column.title }}</span>\n <ul>\n @for (link of column.links; track link.label) {\n <li>\n @if (link.url) {\n <a [href]=\"link.url\" target=\"_blank\" rel=\"noopener noreferrer\">{{\n link.label\n }}</a>\n } @else if (link.route) {\n <a [routerLink]=\"link.route\">{{ link.label }}</a>\n } @else {\n {{ link.label }}\n }\n </li>\n }\n </ul>\n </div>\n }\n </div>\n }\n\n <ng-content />\n</div>\n", styles: [".layout-footer{display:flex;align-items:center;justify-content:center;padding:1rem 0;gap:.5rem;border-top:1px solid var(--surface-border)}\n"] }]
1289
+ }], propDecorators: { brandName: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandName", required: false }] }], brandUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandUrl", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }] } });
1290
+
1291
+ class HelixMobileMenuAction {
1292
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixMobileMenuAction, deps: [], target: i0.ɵɵFactoryTarget.Component });
1293
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: HelixMobileMenuAction, isStandalone: true, selector: "helix-mobile-menu-action", ngImport: i0, template: `
1294
+ <button
1295
+ class="layout-topbar-menu-button layout-topbar-action"
1296
+ hStyleClass="@next"
1297
+ enterFromClass="hidden"
1298
+ enterActiveClass="animate-scalein"
1299
+ leaveToClass="hidden"
1300
+ leaveActiveClass="animate-fadeout"
1301
+ [hideOnOutsideClick]="true"
1302
+ >
1303
+ <i class="pi pi-ellipsis-v"></i>
1304
+ </button>
1305
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i1$2.StyleClass, selector: "[hStyleClass]", inputs: ["hStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
1306
+ }
1307
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixMobileMenuAction, decorators: [{
1308
+ type: Component,
1309
+ args: [{
1310
+ selector: 'helix-mobile-menu-action',
1311
+ standalone: true,
1312
+ imports: [StyleClassModule],
1313
+ changeDetection: ChangeDetectionStrategy.Eager,
1314
+ template: `
1315
+ <button
1316
+ class="layout-topbar-menu-button layout-topbar-action"
1317
+ hStyleClass="@next"
1318
+ enterFromClass="hidden"
1319
+ enterActiveClass="animate-scalein"
1320
+ leaveToClass="hidden"
1321
+ leaveActiveClass="animate-fadeout"
1322
+ [hideOnOutsideClick]="true"
1323
+ >
1324
+ <i class="pi pi-ellipsis-v"></i>
1325
+ </button>
1326
+ `,
1327
+ }]
1328
+ }] });
1329
+
1330
+ /**
1331
+ * Recursively copies a HelixRouteMenuItem tree and auto-populates `routerLink`
1332
+ * from `path` for any item that does not already have a `routerLink`.
1333
+ *
1334
+ * @param items The source menu items.
1335
+ * @param basePath Absolute base path prefix (e.g. `'/uikit'`).
1336
+ *
1337
+ * @example
1338
+ * // uikit-menu-items.ts defines: { path: 'formlayout', label: '...', icon: '...' }
1339
+ * helixMenuLinksFrom(UIKIT_ITEMS, '/uikit')
1340
+ * // → { path: 'formlayout', label: '...', icon: '...', routerLink: ['/uikit/formlayout'] }
1341
+ */
1342
+ function helixMenuLinksFrom(items, basePath) {
1343
+ return items.map((item) => {
1344
+ const resolved = {
1345
+ ...item,
1346
+ items: item.items ? helixMenuLinksFrom(item.items, basePath) : undefined,
1347
+ };
1348
+ if (resolved.breadcrumb !== undefined) {
1349
+ resolved.data = { ...resolved.data, breadcrumb: resolved.breadcrumb };
1350
+ }
1351
+ if (!resolved.routerLink && resolved.path !== undefined) {
1352
+ const fullPath = `${basePath}/${resolved.path}`.replace(/\/+/g, '/');
1353
+ resolved.routerLink = [fullPath];
1354
+ }
1355
+ return resolved;
1356
+ });
1357
+ }
1358
+ /**
1359
+ * Converts a HelixRouteMenuItem tree into Angular Routes.
1360
+ *
1361
+ * - Items with `path` + `component` or `loadChildren` generate a route entry.
1362
+ * - Items without `path` (visual-only section headers) are skipped for routing
1363
+ * but their `items` children are still recursed.
1364
+ * - Items with only `routerLink` (e.g. links into lazy-loaded sub-modules) are
1365
+ * skipped — they do not need a route entry here.
1366
+ */
1367
+ function helixRoutesFrom(items) {
1368
+ const routes = [];
1369
+ for (const item of items) {
1370
+ if (item.path === undefined) {
1371
+ // Visual-only item (section header etc.) — recurse into children
1372
+ if (item.items?.length) {
1373
+ routes.push(...helixRoutesFrom(item.items));
1374
+ }
1375
+ continue;
1376
+ }
1377
+ const hasRoute = item.component != null || item.loadChildren != null;
1378
+ if (!hasRoute) {
1379
+ // Has a path but no component/loadChildren — skip as route, but recurse
1380
+ if (item.items?.length) {
1381
+ routes.push(...helixRoutesFrom(item.items));
1382
+ }
1383
+ continue;
1384
+ }
1385
+ const routeData = { ...item.data };
1386
+ if (item.breadcrumb !== undefined) {
1387
+ routeData['breadcrumb'] = item.breadcrumb;
1388
+ }
1389
+ const route = { path: item.path };
1390
+ if (item.component)
1391
+ route.component = item.component;
1392
+ if (item.loadChildren)
1393
+ route.loadChildren = item.loadChildren;
1394
+ if (item.canActivate)
1395
+ route.canActivate = item.canActivate;
1396
+ if (Object.keys(routeData).length > 0)
1397
+ route.data = routeData;
1398
+ // Items nested under a routable item become child routes (not recursed flat)
1399
+ if (item.items?.length) {
1400
+ const childRoutes = helixRoutesFrom(item.items);
1401
+ if (childRoutes.length) {
1402
+ route.children = childRoutes;
1403
+ }
1404
+ }
1405
+ routes.push(route);
1406
+ }
1407
+ return routes;
1408
+ }
1409
+
1410
+ class HelixAccess {
1411
+ title = input('Access Denied', /* @ts-ignore */
1412
+ ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
1413
+ message = input('You do not have the necessary permisions. Please contact admins.', /* @ts-ignore */
1414
+ ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
1415
+ buttonLabel = input('Go to Dashboard', /* @ts-ignore */
1416
+ ...(ngDevMode ? [{ debugName: "buttonLabel" }] : /* istanbul ignore next */ []));
1417
+ buttonRoute = input('/', /* @ts-ignore */
1418
+ ...(ngDevMode ? [{ debugName: "buttonRoute" }] : /* istanbul ignore next */ []));
1419
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixAccess, deps: [], target: i0.ɵɵFactoryTarget.Component });
1420
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: HelixAccess, isStandalone: true, selector: "helix-access", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, buttonRoute: { classPropertyName: "buttonRoute", publicName: "buttonRoute", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$3.Button, selector: "h-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "ngmodule", type: RippleModule }, { kind: "component", type: HelixFloatingConfigurator, selector: "helix-floating-configurator", inputs: ["float"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
1421
+ }
1422
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixAccess, decorators: [{
1423
+ type: Component,
1424
+ args: [{ selector: 'helix-access', standalone: true, imports: [ButtonModule, RouterModule, RippleModule, HelixFloatingConfigurator], changeDetection: ChangeDetectionStrategy.Eager, 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" }]
1425
+ }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], buttonRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonRoute", required: false }] }] } });
1426
+
1427
+ class HelixError {
1428
+ title = input('Error Occured', /* @ts-ignore */
1429
+ ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
1430
+ message = input('Requested resource is not available.', /* @ts-ignore */
1431
+ ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
1432
+ buttonLabel = input('Go to Dashboard', /* @ts-ignore */
1433
+ ...(ngDevMode ? [{ debugName: "buttonLabel" }] : /* istanbul ignore next */ []));
1434
+ buttonRoute = input('/', /* @ts-ignore */
1435
+ ...(ngDevMode ? [{ debugName: "buttonRoute" }] : /* istanbul ignore next */ []));
1436
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixError, deps: [], target: i0.ɵɵFactoryTarget.Component });
1437
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: HelixError, isStandalone: true, selector: "helix-error", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, buttonRoute: { classPropertyName: "buttonRoute", publicName: "buttonRoute", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$3.Button, selector: "h-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: RippleModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: HelixFloatingConfigurator, selector: "helix-floating-configurator", inputs: ["float"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
1438
+ }
1439
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixError, decorators: [{
1440
+ type: Component,
1441
+ args: [{ selector: 'helix-error', standalone: true, imports: [ButtonModule, RippleModule, RouterModule, HelixFloatingConfigurator], changeDetection: ChangeDetectionStrategy.Eager, 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" }]
1442
+ }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], buttonRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonRoute", required: false }] }] } });
1443
+
1444
+ class HelixLogin {
1445
+ title = input('Welcome!', /* @ts-ignore */
1446
+ ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
1447
+ subtitle = input('Sign in to continue', /* @ts-ignore */
1448
+ ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
1449
+ submitLabel = input('Sign In', /* @ts-ignore */
1450
+ ...(ngDevMode ? [{ debugName: "submitLabel" }] : /* istanbul ignore next */ []));
1451
+ forgotPasswordLabel = input('Forgot password?', /* @ts-ignore */
1452
+ ...(ngDevMode ? [{ debugName: "forgotPasswordLabel" }] : /* istanbul ignore next */ []));
1453
+ login = output();
1454
+ forgotPassword = output();
1455
+ email = '';
1456
+ password = '';
1457
+ checked = false;
1458
+ onSubmit() {
1459
+ this.login.emit({ email: this.email, password: this.password, rememberMe: this.checked });
1460
+ }
1461
+ onForgotPassword() {
1462
+ this.forgotPassword.emit();
1463
+ }
1464
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixLogin, deps: [], target: i0.ɵɵFactoryTarget.Component });
1465
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: HelixLogin, isStandalone: true, selector: "helix-login", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, forgotPasswordLabel: { classPropertyName: "forgotPasswordLabel", publicName: "forgotPasswordLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { login: "login", forgotPassword: "forgotPassword" }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$3.Button, selector: "h-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i2.Checkbox, selector: "h-checkbox, h-checkBox, h-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[hInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i4.Password, selector: "h-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, 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]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: RippleModule }, { kind: "component", type: HelixFloatingConfigurator, selector: "helix-floating-configurator", inputs: ["float"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
1466
+ }
1467
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixLogin, decorators: [{
1468
+ type: Component,
1469
+ args: [{ selector: 'helix-login', standalone: true, imports: [
1470
+ ButtonModule,
1471
+ CheckboxModule,
1472
+ InputTextModule,
1473
+ PasswordModule,
1474
+ FormsModule,
1475
+ RouterModule,
1476
+ RippleModule,
1477
+ HelixFloatingConfigurator,
1478
+ ], changeDetection: ChangeDetectionStrategy.Eager, 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" }]
1479
+ }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], forgotPasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "forgotPasswordLabel", required: false }] }], login: [{ type: i0.Output, args: ["login"] }], forgotPassword: [{ type: i0.Output, args: ["forgotPassword"] }] } });
1480
+
1481
+ const authRoutes = [
1482
+ { path: 'access', component: HelixAccess },
1483
+ { path: 'error', component: HelixError },
1484
+ { path: 'login', component: HelixLogin },
1485
+ ];
1486
+
1487
+ class HelixEmpty {
1488
+ title = input('Empty Page', /* @ts-ignore */
1489
+ ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
1490
+ description = input('Use this page to start from scratch and place your custom content.', /* @ts-ignore */
1491
+ ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
1492
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixEmpty, deps: [], target: i0.ɵɵFactoryTarget.Component });
1493
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: HelixEmpty, isStandalone: true, selector: "helix-empty", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"card\">\n <div class=\"font-semibold text-xl mb-4\">{{ title() }}</div>\n <p>{{ description() }}</p>\n <ng-content />\n</div>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.Eager });
1494
+ }
1495
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixEmpty, decorators: [{
1496
+ type: Component,
1497
+ args: [{ selector: 'helix-empty', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"card\">\n <div class=\"font-semibold text-xl mb-4\">{{ title() }}</div>\n <p>{{ description() }}</p>\n <ng-content />\n</div>\n" }]
1498
+ }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
1499
+
1500
+ const DEFAULT_FEATURES = [
1501
+ {
1502
+ icon: 'pi pi-fw pi-users',
1503
+ iconBgClass: 'bg-yellow-200',
1504
+ iconColorClass: 'text-yellow-700',
1505
+ title: 'Easy to Use',
1506
+ description: 'Posuere morbi leo urna molestie.',
1507
+ cardStyle: 'background: linear-gradient(90deg, rgba(253,228,165,.2), rgba(187,199,205,.2)), linear-gradient(180deg, rgba(253,228,165,.2), rgba(187,199,205,.2));',
1508
+ },
1509
+ {
1510
+ icon: 'pi pi-fw pi-palette',
1511
+ iconBgClass: 'bg-cyan-200',
1512
+ iconColorClass: 'text-cyan-700',
1513
+ title: 'Fresh Design',
1514
+ description: 'Semper risus in hendrerit.',
1515
+ cardStyle: 'background: linear-gradient(90deg, rgba(145,226,237,.2), rgba(251,199,145,.2)), linear-gradient(180deg, rgba(253,228,165,.2), rgba(172,180,223,.2));',
1516
+ },
1517
+ {
1518
+ icon: 'pi pi-fw pi-map',
1519
+ iconBgClass: 'bg-indigo-200',
1520
+ iconColorClass: 'text-indigo-700',
1521
+ title: 'Well Documented',
1522
+ description: 'Non arcu risus quis varius quam quisque.',
1523
+ cardStyle: 'background: linear-gradient(90deg, rgba(145,226,237,.2), rgba(172,180,223,.2)), linear-gradient(180deg, rgba(172,180,223,.2), rgba(246,158,188,.2));',
1524
+ },
1525
+ {
1526
+ icon: 'pi pi-fw pi-id-card',
1527
+ iconBgClass: 'bg-slate-200',
1528
+ iconColorClass: 'text-slate-700',
1529
+ title: 'Compatibility',
1530
+ description: 'Leo in vitae turpis massa sed.',
1531
+ cardStyle: 'background: linear-gradient(90deg, rgba(187,199,205,.2), rgba(251,199,145,.2)), linear-gradient(180deg, rgba(187,199,205,.2), rgba(145,210,204,.2));',
1532
+ },
1533
+ {
1534
+ icon: 'pi pi-fw pi-star',
1535
+ iconBgClass: 'bg-orange-200',
1536
+ iconColorClass: 'text-orange-700',
1537
+ title: 'Fast Support',
1538
+ description: 'Orci nulla pellentesque dignissim enim.',
1539
+ cardStyle: 'background: linear-gradient(90deg, rgba(251,199,145,.2), rgba(253,228,165,.2)), linear-gradient(180deg, rgba(172,180,223,.2), rgba(246,158,188,.2));',
1540
+ },
1541
+ {
1542
+ icon: 'pi pi-fw pi-moon',
1543
+ iconBgClass: 'bg-pink-200',
1544
+ iconColorClass: 'text-pink-700',
1545
+ title: 'Powered by Angular',
1546
+ description: 'Curabitur gravida arcu ac tortor.',
1547
+ cardStyle: 'background: linear-gradient(90deg, rgba(246,158,188,.2), rgba(212,162,221,.2)), linear-gradient(180deg, rgba(253,228,165,.2), rgba(172,180,223,.2));',
1548
+ },
1549
+ {
1550
+ icon: 'pi pi-fw pi-shopping-cart',
1551
+ iconBgClass: 'bg-teal-200',
1552
+ iconColorClass: 'text-teal-700',
1553
+ title: 'Helix Components',
1554
+ description: 'Feugiat pretium nibh ipsum consequat.',
1555
+ cardStyle: 'background: linear-gradient(90deg, rgba(145,210,204,.2), rgba(160,210,250,.2)), linear-gradient(180deg, rgba(187,199,205,.2), rgba(145,210,204,.2));',
1556
+ },
1557
+ {
1558
+ icon: 'pi pi-fw pi-globe',
1559
+ iconBgClass: 'bg-blue-200',
1560
+ iconColorClass: 'text-blue-700',
1561
+ title: 'Mobile Responsive',
1562
+ description: 'Amet nisl suscipit adipiscing bibendum.',
1563
+ cardStyle: 'background: linear-gradient(90deg, rgba(160,210,250,.2), rgba(212,162,221,.2)), linear-gradient(180deg, rgba(246,158,188,.2), rgba(212,162,221,.2));',
1564
+ },
1565
+ {
1566
+ icon: 'pi pi-fw pi-eye',
1567
+ iconBgClass: 'bg-purple-200',
1568
+ iconColorClass: 'text-purple-700',
1569
+ title: 'Privacy',
1570
+ description: 'Neque egestas congue quisque.',
1571
+ cardStyle: 'background: linear-gradient(90deg, rgba(160,210,250,.2), rgba(212,162,221,.2)), linear-gradient(180deg, rgba(246,158,188,.2), rgba(212,162,221,.2));',
1572
+ },
1573
+ ];
1574
+ const DEFAULT_TESTIMONIAL = {
1575
+ name: 'Joséphine Miller',
1576
+ company: 'Peak Interactive',
1577
+ text: '"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."',
1578
+ logoUrl: 'https://primefaces.org/cdn/templates/sakai/landing/peak-logo.svg',
1579
+ };
1580
+ class HelixFeaturesWidget {
1581
+ sectionTitle = input('Marvelous Features', /* @ts-ignore */
1582
+ ...(ngDevMode ? [{ debugName: "sectionTitle" }] : /* istanbul ignore next */ []));
1583
+ sectionSubtitle = input('Placerat in egestas erat...', /* @ts-ignore */
1584
+ ...(ngDevMode ? [{ debugName: "sectionSubtitle" }] : /* istanbul ignore next */ []));
1585
+ features = input(DEFAULT_FEATURES, /* @ts-ignore */
1586
+ ...(ngDevMode ? [{ debugName: "features" }] : /* istanbul ignore next */ []));
1587
+ testimonial = input(DEFAULT_TESTIMONIAL, /* @ts-ignore */
1588
+ ...(ngDevMode ? [{ debugName: "testimonial" }] : /* istanbul ignore next */ []));
1589
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixFeaturesWidget, deps: [], target: i0.ɵɵFactoryTarget.Component });
1590
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: HelixFeaturesWidget, isStandalone: true, selector: "helix-features-widget", inputs: { sectionTitle: { classPropertyName: "sectionTitle", publicName: "sectionTitle", isSignal: true, isRequired: false, transformFunction: null }, sectionSubtitle: { classPropertyName: "sectionSubtitle", publicName: "sectionSubtitle", isSignal: true, isRequired: false, transformFunction: null }, features: { classPropertyName: "features", publicName: "features", isSignal: true, isRequired: false, transformFunction: null }, testimonial: { classPropertyName: "testimonial", publicName: "testimonial", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div id=\"features\" class=\"py-6 px-6 lg:px-20 mt-8 mx-0 lg:mx-20\">\n <div class=\"grid grid-cols-12 gap-4 justify-center\">\n <div class=\"col-span-12 text-center mt-20 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 @for (feature of features(); track feature.title) {\n <div class=\"col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:p-2 mt-6 lg:mt-0\">\n <div style=\"height: 160px; padding: 2px; border-radius: 10px\" [style]=\"feature.cardStyle\">\n <div class=\"p-4 bg-surface-0 dark:bg-surface-900 h-full\" style=\"border-radius: 8px\">\n <div\n class=\"flex items-center justify-center mb-4\"\n [ngClass]=\"feature.iconBgClass\"\n style=\"width: 3.5rem; height: 3.5rem; border-radius: 10px\"\n >\n <i [ngClass]=\"[feature.icon, 'text-2xl!', feature.iconColorClass]\"></i>\n </div>\n <h5 class=\"mb-2 text-surface-900 dark:text-surface-0\">{{ feature.title }}</h5>\n <span class=\"text-surface-600 dark:text-surface-200\">{{ feature.description }}</span>\n </div>\n </div>\n </div>\n }\n\n @if (testimonial()) {\n <div\n class=\"col-span-12 mt-20 mb-20 p-2 md:p-20\"\n style=\"\n border-radius: 20px;\n background:\n linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),\n radial-gradient(77.36% 256.97% at 77.36% 57.52%, #efe1af 0%, #c3dcfa 100%);\n \"\n >\n <div class=\"flex flex-col justify-center items-center text-center px-4 py-4 md:py-0\">\n <div class=\"text-gray-900 mb-2 text-3xl font-semibold\">{{ testimonial()!.name }}</div>\n <span class=\"text-gray-600 text-2xl\">{{ testimonial()!.company }}</span>\n <p\n class=\"text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-6\"\n style=\"max-width: 800px\"\n >\n {{ testimonial()!.text }}\n </p>\n @if (testimonial()!.logoUrl) {\n <img [src]=\"testimonial()!.logoUrl\" class=\"mt-6\" alt=\"Company logo\" />\n }\n </div>\n </div>\n }\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
1591
+ }
1592
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixFeaturesWidget, decorators: [{
1593
+ type: Component,
1594
+ args: [{ selector: 'helix-features-widget', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.Eager, template: "<div id=\"features\" class=\"py-6 px-6 lg:px-20 mt-8 mx-0 lg:mx-20\">\n <div class=\"grid grid-cols-12 gap-4 justify-center\">\n <div class=\"col-span-12 text-center mt-20 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 @for (feature of features(); track feature.title) {\n <div class=\"col-span-12 md:col-span-12 lg:col-span-4 p-0 lg:p-2 mt-6 lg:mt-0\">\n <div style=\"height: 160px; padding: 2px; border-radius: 10px\" [style]=\"feature.cardStyle\">\n <div class=\"p-4 bg-surface-0 dark:bg-surface-900 h-full\" style=\"border-radius: 8px\">\n <div\n class=\"flex items-center justify-center mb-4\"\n [ngClass]=\"feature.iconBgClass\"\n style=\"width: 3.5rem; height: 3.5rem; border-radius: 10px\"\n >\n <i [ngClass]=\"[feature.icon, 'text-2xl!', feature.iconColorClass]\"></i>\n </div>\n <h5 class=\"mb-2 text-surface-900 dark:text-surface-0\">{{ feature.title }}</h5>\n <span class=\"text-surface-600 dark:text-surface-200\">{{ feature.description }}</span>\n </div>\n </div>\n </div>\n }\n\n @if (testimonial()) {\n <div\n class=\"col-span-12 mt-20 mb-20 p-2 md:p-20\"\n style=\"\n border-radius: 20px;\n background:\n linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),\n radial-gradient(77.36% 256.97% at 77.36% 57.52%, #efe1af 0%, #c3dcfa 100%);\n \"\n >\n <div class=\"flex flex-col justify-center items-center text-center px-4 py-4 md:py-0\">\n <div class=\"text-gray-900 mb-2 text-3xl font-semibold\">{{ testimonial()!.name }}</div>\n <span class=\"text-gray-600 text-2xl\">{{ testimonial()!.company }}</span>\n <p\n class=\"text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-6\"\n style=\"max-width: 800px\"\n >\n {{ testimonial()!.text }}\n </p>\n @if (testimonial()!.logoUrl) {\n <img [src]=\"testimonial()!.logoUrl\" class=\"mt-6\" alt=\"Company logo\" />\n }\n </div>\n </div>\n }\n </div>\n</div>\n" }]
1595
+ }], propDecorators: { sectionTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionTitle", required: false }] }], sectionSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionSubtitle", required: false }] }], features: [{ type: i0.Input, args: [{ isSignal: true, alias: "features", required: false }] }], testimonial: [{ type: i0.Input, args: [{ isSignal: true, alias: "testimonial", required: false }] }] } });
1596
+
1597
+ const DEFAULT_COLUMNS = [
1598
+ {
1599
+ title: 'Company',
1600
+ links: [
1601
+ { label: 'About Us' },
1602
+ { label: 'News' },
1603
+ { label: 'Investor Relations' },
1604
+ { label: 'Careers' },
1605
+ { label: 'Media Kit' },
1606
+ ],
1607
+ },
1608
+ {
1609
+ title: 'Resources',
1610
+ links: [{ label: 'Get Started' }, { label: 'Learn' }, { label: 'Case Studies' }],
1611
+ },
1612
+ {
1613
+ title: 'Community',
1614
+ links: [{ label: 'Discord' }, { label: 'Events' }, { label: 'FAQ' }, { label: 'Blog' }],
1615
+ },
1616
+ {
1617
+ title: 'Legal',
1618
+ links: [{ label: 'Brand Policy' }, { label: 'Privacy Policy' }, { label: 'Terms of Service' }],
1619
+ },
1620
+ ];
1621
+ class HelixFooterWidget {
1622
+ columns = input(DEFAULT_COLUMNS, /* @ts-ignore */
1623
+ ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
1624
+ homeRoute = input('/landing', /* @ts-ignore */
1625
+ ...(ngDevMode ? [{ debugName: "homeRoute" }] : /* istanbul ignore next */ []));
1626
+ brandName = input('SAKAI', /* @ts-ignore */
1627
+ ...(ngDevMode ? [{ debugName: "brandName" }] : /* istanbul ignore next */ []));
1628
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixFooterWidget, deps: [], target: i0.ɵɵFactoryTarget.Component });
1629
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: HelixFooterWidget, isStandalone: true, selector: "helix-footer-widget", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, homeRoute: { classPropertyName: "homeRoute", publicName: "homeRoute", isSignal: true, isRequired: false, transformFunction: null }, brandName: { classPropertyName: "brandName", publicName: "brandName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"py-12 px-12 mx-0 mt-20 lg:mx-20\">\n <div class=\"grid grid-cols-12 gap-4\">\n <div class=\"col-span-12 md:col-span-2\">\n <a\n [routerLink]=\"homeRoute()\"\n [fragment]=\"'home'\"\n class=\"flex flex-wrap items-center justify-center md:justify-start md:mb-0 mb-6 cursor-pointer\"\n >\n <svg viewBox=\"0 0 54 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-14 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.4538Z\"\n fill=\"var(--primary-color)\"\n />\n </svg>\n <h4 class=\"font-medium text-3xl text-surface-900 dark:text-surface-0\">{{ brandName() }}</h4>\n </a>\n </div>\n\n <div class=\"col-span-12 md:col-span-10\">\n <div\n class=\"grid text-center md:text-left\"\n [style.grid-template-columns]=\"'repeat(' + columns().length + ', 1fr)'\"\n >\n @for (column of columns(); track column.title) {\n <div class=\"px-4\">\n <h4\n class=\"font-medium text-2xl leading-normal mb-6 text-surface-900 dark:text-surface-0\"\n >\n {{ column.title }}\n </h4>\n @for (link of column.links; track link.label) {\n @if (link.url) {\n <a\n [href]=\"link.url\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100\"\n >{{ link.label }}</a\n >\n } @else if (link.route) {\n <a\n [routerLink]=\"link.route\"\n class=\"leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100\"\n >{{ link.label }}</a\n >\n } @else {\n <a\n class=\"leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100\"\n >\n {{ link.label }}\n </a>\n }\n }\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
1630
+ }
1631
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixFooterWidget, decorators: [{
1632
+ type: Component,
1633
+ args: [{ selector: 'helix-footer-widget', standalone: true, imports: [RouterModule], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"py-12 px-12 mx-0 mt-20 lg:mx-20\">\n <div class=\"grid grid-cols-12 gap-4\">\n <div class=\"col-span-12 md:col-span-2\">\n <a\n [routerLink]=\"homeRoute()\"\n [fragment]=\"'home'\"\n class=\"flex flex-wrap items-center justify-center md:justify-start md:mb-0 mb-6 cursor-pointer\"\n >\n <svg viewBox=\"0 0 54 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-14 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.4538Z\"\n fill=\"var(--primary-color)\"\n />\n </svg>\n <h4 class=\"font-medium text-3xl text-surface-900 dark:text-surface-0\">{{ brandName() }}</h4>\n </a>\n </div>\n\n <div class=\"col-span-12 md:col-span-10\">\n <div\n class=\"grid text-center md:text-left\"\n [style.grid-template-columns]=\"'repeat(' + columns().length + ', 1fr)'\"\n >\n @for (column of columns(); track column.title) {\n <div class=\"px-4\">\n <h4\n class=\"font-medium text-2xl leading-normal mb-6 text-surface-900 dark:text-surface-0\"\n >\n {{ column.title }}\n </h4>\n @for (link of column.links; track link.label) {\n @if (link.url) {\n <a\n [href]=\"link.url\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100\"\n >{{ link.label }}</a\n >\n } @else if (link.route) {\n <a\n [routerLink]=\"link.route\"\n class=\"leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100\"\n >{{ link.label }}</a\n >\n } @else {\n <a\n class=\"leading-normal text-xl block cursor-pointer mb-2 text-surface-700 dark:text-surface-100\"\n >\n {{ link.label }}\n </a>\n }\n }\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n" }]
1634
+ }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], homeRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "homeRoute", required: false }] }], brandName: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandName", required: false }] }] } });
1635
+
1636
+ class HelixHeroWidget {
1637
+ headlineLight = input('Eu sem integer', /* @ts-ignore */
1638
+ ...(ngDevMode ? [{ debugName: "headlineLight" }] : /* istanbul ignore next */ []));
1639
+ headline = input('eget magna fermentum', /* @ts-ignore */
1640
+ ...(ngDevMode ? [{ debugName: "headline" }] : /* istanbul ignore next */ []));
1641
+ description = input('Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat...', /* @ts-ignore */
1642
+ ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
1643
+ buttonLabel = input('Get Started', /* @ts-ignore */
1644
+ ...(ngDevMode ? [{ debugName: "buttonLabel" }] : /* istanbul ignore next */ []));
1645
+ imageUrl = input('https://primefaces.org/cdn/templates/sakai/landing/screen-1.png', /* @ts-ignore */
1646
+ ...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
1647
+ imageAlt = input('Hero Image', /* @ts-ignore */
1648
+ ...(ngDevMode ? [{ debugName: "imageAlt" }] : /* istanbul ignore next */ []));
1649
+ buttonClick = output();
1650
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixHeroWidget, deps: [], target: i0.ɵɵFactoryTarget.Component });
1651
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: HelixHeroWidget, isStandalone: true, selector: "helix-hero-widget", inputs: { headlineLight: { classPropertyName: "headlineLight", publicName: "headlineLight", isSignal: true, isRequired: false, transformFunction: null }, headline: { classPropertyName: "headline", publicName: "headline", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, imageAlt: { classPropertyName: "imageAlt", publicName: "imageAlt", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$3.ButtonDirective, selector: "[hButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i3.Ripple, selector: "[hRipple]" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
1652
+ }
1653
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixHeroWidget, decorators: [{
1654
+ type: Component,
1655
+ args: [{ selector: 'helix-hero-widget', standalone: true, imports: [ButtonModule, RippleModule], changeDetection: ChangeDetectionStrategy.Eager, 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" }]
1656
+ }], propDecorators: { headlineLight: [{ type: i0.Input, args: [{ isSignal: true, alias: "headlineLight", required: false }] }], headline: [{ type: i0.Input, args: [{ isSignal: true, alias: "headline", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], imageAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageAlt", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }] } });
1657
+
1658
+ const DEFAULT_HIGHLIGHTS = [
1659
+ {
1660
+ icon: 'pi pi-fw pi-mobile',
1661
+ iconBgClass: 'bg-purple-200',
1662
+ iconColorClass: 'text-purple-700',
1663
+ title: 'Congue Quisque Egestas',
1664
+ description: 'Lectus arcu bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.',
1665
+ imageUrl: 'https://primefaces.org/cdn/templates/sakai/landing/mockup.png',
1666
+ imageAlt: 'mockup mobile',
1667
+ imageBgClass: 'bg-purple-100',
1668
+ imageAlign: 'left',
1669
+ },
1670
+ {
1671
+ icon: 'pi pi-fw pi-desktop',
1672
+ iconBgClass: 'bg-yellow-200',
1673
+ iconColorClass: 'text-yellow-700',
1674
+ title: 'Celerisque Eu Ultrices',
1675
+ description: 'Adipiscing commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi.',
1676
+ imageUrl: 'https://primefaces.org/cdn/templates/sakai/landing/mockup-desktop.png',
1677
+ imageAlt: 'mockup',
1678
+ imageBgClass: 'bg-yellow-100',
1679
+ imageAlign: 'right',
1680
+ },
1681
+ ];
1682
+ class HelixHighlightsWidget {
1683
+ sectionTitle = input('Powerful Everywhere', /* @ts-ignore */
1684
+ ...(ngDevMode ? [{ debugName: "sectionTitle" }] : /* istanbul ignore next */ []));
1685
+ sectionSubtitle = input('Amet consectetur adipiscing elit...', /* @ts-ignore */
1686
+ ...(ngDevMode ? [{ debugName: "sectionSubtitle" }] : /* istanbul ignore next */ []));
1687
+ highlights = input(DEFAULT_HIGHLIGHTS, /* @ts-ignore */
1688
+ ...(ngDevMode ? [{ debugName: "highlights" }] : /* istanbul ignore next */ []));
1689
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixHighlightsWidget, deps: [], target: i0.ɵɵFactoryTarget.Component });
1690
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: HelixHighlightsWidget, isStandalone: true, selector: "helix-highlights-widget", inputs: { sectionTitle: { classPropertyName: "sectionTitle", publicName: "sectionTitle", isSignal: true, isRequired: false, transformFunction: null }, sectionSubtitle: { classPropertyName: "sectionSubtitle", publicName: "sectionSubtitle", isSignal: true, isRequired: false, transformFunction: null }, highlights: { classPropertyName: "highlights", publicName: "highlights", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div id=\"highlights\" class=\"py-6 px-6 lg:px-20 mx-0 my-12 lg:mx-20\">\n <div class=\"text-center\">\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 @for (highlight of highlights(); track highlight.title; let i = $index) {\n <div\n class=\"grid grid-cols-12 gap-4 mt-20\"\n [class.pb-2]=\"i === 0\"\n [class.md:pb-20]=\"i === 0\"\n [class.pt-2]=\"i > 0\"\n [class.md:pt-20]=\"i > 0\"\n >\n @if (highlight.imageAlign === 'left') {\n <div\n class=\"flex justify-center col-span-12 lg:col-span-6 p-0 order-1 lg:order-0\"\n [ngClass]=\"highlight.imageBgClass\"\n style=\"border-radius: 8px\"\n >\n <img [src]=\"highlight.imageUrl\" class=\"w-11/12\" [alt]=\"highlight.imageAlt\" />\n </div>\n <div\n class=\"col-span-12 lg:col-span-6 my-auto flex flex-col lg:items-end text-center lg:text-right gap-4\"\n >\n <div\n class=\"flex items-center justify-center self-center lg:self-end\"\n [ngClass]=\"highlight.iconBgClass\"\n style=\"width: 4.2rem; height: 4.2rem; border-radius: 10px\"\n >\n <i [ngClass]=\"[highlight.icon, 'text-4xl!', highlight.iconColorClass]\"></i>\n </div>\n <div class=\"leading-none text-surface-900 dark:text-surface-0 text-3xl font-normal\">\n {{ highlight.title }}\n </div>\n <span\n class=\"text-surface-700 dark:text-surface-100 text-2xl leading-normal ml-0 md:ml-2\"\n style=\"max-width: 650px\"\n >\n {{ highlight.description }}\n </span>\n </div>\n } @else {\n <div\n class=\"col-span-12 lg:col-span-6 my-auto flex flex-col text-center lg:text-left lg:items-start gap-4\"\n >\n <div\n class=\"flex items-center justify-center self-center lg:self-start\"\n [ngClass]=\"highlight.iconBgClass\"\n style=\"width: 4.2rem; height: 4.2rem; border-radius: 10px\"\n >\n <i [ngClass]=\"[highlight.icon, 'text-3xl!', highlight.iconColorClass]\"></i>\n </div>\n <div class=\"leading-none text-surface-900 dark:text-surface-0 text-3xl font-normal\">\n {{ highlight.title }}\n </div>\n <span\n class=\"text-surface-700 dark:text-surface-100 text-2xl leading-normal mr-0 md:mr-2\"\n style=\"max-width: 650px\"\n >\n {{ highlight.description }}\n </span>\n </div>\n <div\n class=\"flex justify-end order-1 sm:order-2 col-span-12 lg:col-span-6 p-0\"\n [ngClass]=\"highlight.imageBgClass\"\n style=\"border-radius: 8px\"\n >\n <img [src]=\"highlight.imageUrl\" class=\"w-11/12\" [alt]=\"highlight.imageAlt\" />\n </div>\n }\n </div>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
1691
+ }
1692
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixHighlightsWidget, decorators: [{
1693
+ type: Component,
1694
+ args: [{ selector: 'helix-highlights-widget', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.Eager, template: "<div id=\"highlights\" class=\"py-6 px-6 lg:px-20 mx-0 my-12 lg:mx-20\">\n <div class=\"text-center\">\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 @for (highlight of highlights(); track highlight.title; let i = $index) {\n <div\n class=\"grid grid-cols-12 gap-4 mt-20\"\n [class.pb-2]=\"i === 0\"\n [class.md:pb-20]=\"i === 0\"\n [class.pt-2]=\"i > 0\"\n [class.md:pt-20]=\"i > 0\"\n >\n @if (highlight.imageAlign === 'left') {\n <div\n class=\"flex justify-center col-span-12 lg:col-span-6 p-0 order-1 lg:order-0\"\n [ngClass]=\"highlight.imageBgClass\"\n style=\"border-radius: 8px\"\n >\n <img [src]=\"highlight.imageUrl\" class=\"w-11/12\" [alt]=\"highlight.imageAlt\" />\n </div>\n <div\n class=\"col-span-12 lg:col-span-6 my-auto flex flex-col lg:items-end text-center lg:text-right gap-4\"\n >\n <div\n class=\"flex items-center justify-center self-center lg:self-end\"\n [ngClass]=\"highlight.iconBgClass\"\n style=\"width: 4.2rem; height: 4.2rem; border-radius: 10px\"\n >\n <i [ngClass]=\"[highlight.icon, 'text-4xl!', highlight.iconColorClass]\"></i>\n </div>\n <div class=\"leading-none text-surface-900 dark:text-surface-0 text-3xl font-normal\">\n {{ highlight.title }}\n </div>\n <span\n class=\"text-surface-700 dark:text-surface-100 text-2xl leading-normal ml-0 md:ml-2\"\n style=\"max-width: 650px\"\n >\n {{ highlight.description }}\n </span>\n </div>\n } @else {\n <div\n class=\"col-span-12 lg:col-span-6 my-auto flex flex-col text-center lg:text-left lg:items-start gap-4\"\n >\n <div\n class=\"flex items-center justify-center self-center lg:self-start\"\n [ngClass]=\"highlight.iconBgClass\"\n style=\"width: 4.2rem; height: 4.2rem; border-radius: 10px\"\n >\n <i [ngClass]=\"[highlight.icon, 'text-3xl!', highlight.iconColorClass]\"></i>\n </div>\n <div class=\"leading-none text-surface-900 dark:text-surface-0 text-3xl font-normal\">\n {{ highlight.title }}\n </div>\n <span\n class=\"text-surface-700 dark:text-surface-100 text-2xl leading-normal mr-0 md:mr-2\"\n style=\"max-width: 650px\"\n >\n {{ highlight.description }}\n </span>\n </div>\n <div\n class=\"flex justify-end order-1 sm:order-2 col-span-12 lg:col-span-6 p-0\"\n [ngClass]=\"highlight.imageBgClass\"\n style=\"border-radius: 8px\"\n >\n <img [src]=\"highlight.imageUrl\" class=\"w-11/12\" [alt]=\"highlight.imageAlt\" />\n </div>\n }\n </div>\n }\n</div>\n" }]
1695
+ }], propDecorators: { sectionTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionTitle", required: false }] }], sectionSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionSubtitle", required: false }] }], highlights: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlights", required: false }] }] } });
1696
+
1697
+ const DEFAULT_PLANS = [
1698
+ {
1699
+ title: 'Free',
1700
+ price: '$0',
1701
+ pricePeriod: 'per month',
1702
+ imageUrl: 'https://primefaces.org/cdn/templates/sakai/landing/free.svg',
1703
+ imageAlt: 'free',
1704
+ buttonLabel: 'Get Started',
1705
+ features: [
1706
+ 'Responsive Layout',
1707
+ 'Unlimited Push Messages',
1708
+ '50 Support Ticket',
1709
+ 'Free Shipping',
1710
+ ],
1711
+ },
1712
+ {
1713
+ title: 'Startup',
1714
+ price: '$1',
1715
+ pricePeriod: 'per month',
1716
+ imageUrl: 'https://primefaces.org/cdn/templates/sakai/landing/startup.svg',
1717
+ imageAlt: 'startup',
1718
+ buttonLabel: 'Get Started',
1719
+ features: [
1720
+ 'Responsive Layout',
1721
+ 'Unlimited Push Messages',
1722
+ '50 Support Ticket',
1723
+ 'Free Shipping',
1724
+ ],
1725
+ },
1726
+ {
1727
+ title: 'Enterprise',
1728
+ price: '$5',
1729
+ pricePeriod: 'per month',
1730
+ imageUrl: 'https://primefaces.org/cdn/templates/sakai/landing/enterprise.svg',
1731
+ imageAlt: 'enterprise',
1732
+ buttonLabel: 'Try Free',
1733
+ features: [
1734
+ 'Responsive Layout',
1735
+ 'Unlimited Push Messages',
1736
+ '50 Support Ticket',
1737
+ 'Free Shipping',
1738
+ ],
1739
+ },
1740
+ ];
1741
+ class HelixPricingWidget {
1742
+ sectionTitle = input('Matchless Pricing', /* @ts-ignore */
1743
+ ...(ngDevMode ? [{ debugName: "sectionTitle" }] : /* istanbul ignore next */ []));
1744
+ sectionSubtitle = input('Amet consectetur adipiscing elit...', /* @ts-ignore */
1745
+ ...(ngDevMode ? [{ debugName: "sectionSubtitle" }] : /* istanbul ignore next */ []));
1746
+ plans = input(DEFAULT_PLANS, /* @ts-ignore */
1747
+ ...(ngDevMode ? [{ debugName: "plans" }] : /* istanbul ignore next */ []));
1748
+ planSelect = output();
1749
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixPricingWidget, deps: [], target: i0.ɵɵFactoryTarget.Component });
1750
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: HelixPricingWidget, isStandalone: true, selector: "helix-pricing-widget", inputs: { sectionTitle: { classPropertyName: "sectionTitle", publicName: "sectionTitle", isSignal: true, isRequired: false, transformFunction: null }, sectionSubtitle: { classPropertyName: "sectionSubtitle", publicName: "sectionSubtitle", isSignal: true, isRequired: false, transformFunction: null }, plans: { classPropertyName: "plans", publicName: "plans", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { planSelect: "planSelect" }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "ngmodule", type: DividerModule }, { kind: "component", type: i1$4.Divider, selector: "h-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$3.ButtonDirective, selector: "[hButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i3.Ripple, selector: "[hRipple]" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
1751
+ }
1752
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixPricingWidget, decorators: [{
1753
+ type: Component,
1754
+ args: [{ selector: 'helix-pricing-widget', standalone: true, imports: [DividerModule, ButtonModule, RippleModule], changeDetection: ChangeDetectionStrategy.Eager, 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" }]
1755
+ }], propDecorators: { sectionTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionTitle", required: false }] }], sectionSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionSubtitle", required: false }] }], plans: [{ type: i0.Input, args: [{ isSignal: true, alias: "plans", required: false }] }], planSelect: [{ type: i0.Output, args: ["planSelect"] }] } });
1756
+
1757
+ const DEFAULT_NAV_LINKS = [
1758
+ { label: 'Home', route: '/landing', fragment: 'home' },
1759
+ { label: 'Features', route: '/landing', fragment: 'features' },
1760
+ { label: 'Highlights', route: '/landing', fragment: 'highlights' },
1761
+ { label: 'Pricing', route: '/landing', fragment: 'pricing' },
1762
+ ];
1763
+ class HelixTopbarWidget {
1764
+ router;
1765
+ navLinks = input(DEFAULT_NAV_LINKS, /* @ts-ignore */
1766
+ ...(ngDevMode ? [{ debugName: "navLinks" }] : /* istanbul ignore next */ []));
1767
+ loginLabel = input('Login', /* @ts-ignore */
1768
+ ...(ngDevMode ? [{ debugName: "loginLabel" }] : /* istanbul ignore next */ []));
1769
+ loginRoute = input('/auth/login', /* @ts-ignore */
1770
+ ...(ngDevMode ? [{ debugName: "loginRoute" }] : /* istanbul ignore next */ []));
1771
+ registerLabel = input('Register', /* @ts-ignore */
1772
+ ...(ngDevMode ? [{ debugName: "registerLabel" }] : /* istanbul ignore next */ []));
1773
+ registerRoute = input('/auth/login', /* @ts-ignore */
1774
+ ...(ngDevMode ? [{ debugName: "registerRoute" }] : /* istanbul ignore next */ []));
1775
+ constructor(router) {
1776
+ this.router = router;
1777
+ }
1778
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixTopbarWidget, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
1779
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: HelixTopbarWidget, isStandalone: true, selector: "helix-topbar-widget", inputs: { navLinks: { classPropertyName: "navLinks", publicName: "navLinks", isSignal: true, isRequired: false, transformFunction: null }, loginLabel: { classPropertyName: "loginLabel", publicName: "loginLabel", isSignal: true, isRequired: false, transformFunction: null }, loginRoute: { classPropertyName: "loginRoute", publicName: "loginRoute", isSignal: true, isRequired: false, transformFunction: null }, registerLabel: { classPropertyName: "registerLabel", publicName: "registerLabel", isSignal: true, isRequired: false, transformFunction: null }, registerRoute: { classPropertyName: "registerRoute", publicName: "registerRoute", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i1$2.StyleClass, selector: "[hStyleClass]", inputs: ["hStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$3.ButtonDirective, selector: "[hButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i3.Ripple, selector: "[hRipple]" }, { kind: "component", type: HelixFloatingConfigurator, selector: "helix-floating-configurator", inputs: ["float"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
1780
+ }
1781
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixTopbarWidget, decorators: [{
1782
+ type: Component,
1783
+ args: [{ selector: 'helix-topbar-widget', standalone: true, imports: [RouterModule, StyleClassModule, ButtonModule, RippleModule, HelixFloatingConfigurator], changeDetection: ChangeDetectionStrategy.Eager, 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" }]
1784
+ }], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { navLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "navLinks", required: false }] }], loginLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loginLabel", required: false }] }], loginRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "loginRoute", required: false }] }], registerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "registerLabel", required: false }] }], registerRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "registerRoute", required: false }] }] } });
1785
+
1786
+ class HelixLanding {
1787
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixLanding, deps: [], target: i0.ɵɵFactoryTarget.Component });
1788
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: HelixLanding, isStandalone: true, selector: "helix-landing", ngImport: i0, 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", styles: [""], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "component", type: HelixTopbarWidget, selector: "helix-topbar-widget", inputs: ["navLinks", "loginLabel", "loginRoute", "registerLabel", "registerRoute"] }, { kind: "component", type: HelixHeroWidget, selector: "helix-hero-widget", inputs: ["headlineLight", "headline", "description", "buttonLabel", "imageUrl", "imageAlt"], outputs: ["buttonClick"] }, { kind: "component", type: HelixFeaturesWidget, selector: "helix-features-widget", inputs: ["sectionTitle", "sectionSubtitle", "features", "testimonial"] }, { kind: "component", type: HelixHighlightsWidget, selector: "helix-highlights-widget", inputs: ["sectionTitle", "sectionSubtitle", "highlights"] }, { kind: "component", type: HelixPricingWidget, selector: "helix-pricing-widget", inputs: ["sectionTitle", "sectionSubtitle", "plans"], outputs: ["planSelect"] }, { kind: "component", type: HelixFooterWidget, selector: "helix-footer-widget", inputs: ["columns", "homeRoute", "brandName"] }, { kind: "ngmodule", type: RippleModule }, { kind: "ngmodule", type: StyleClassModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: DividerModule }], changeDetection: i0.ChangeDetectionStrategy.Eager });
1789
+ }
1790
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixLanding, decorators: [{
1791
+ type: Component,
1792
+ args: [{ selector: 'helix-landing', standalone: true, imports: [
1793
+ RouterModule,
1794
+ HelixTopbarWidget,
1795
+ HelixHeroWidget,
1796
+ HelixFeaturesWidget,
1797
+ HelixHighlightsWidget,
1798
+ HelixPricingWidget,
1799
+ HelixFooterWidget,
1800
+ RippleModule,
1801
+ StyleClassModule,
1802
+ ButtonModule,
1803
+ DividerModule,
1804
+ ], changeDetection: ChangeDetectionStrategy.Eager, 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" }]
1805
+ }] });
1806
+
1807
+ const DEFAULT_SUGGESTIONS = [
1808
+ {
1809
+ icon: 'pi pi-fw pi-table',
1810
+ title: 'Frequently Asked Questions',
1811
+ description: 'Ultricies mi quis hendrerit dolor.',
1812
+ route: '/',
1813
+ },
1814
+ {
1815
+ icon: 'pi pi-fw pi-question-circle',
1816
+ title: 'Solution Center',
1817
+ description: 'Phasellus faucibus scelerisque eleifend.',
1818
+ route: '/',
1819
+ },
1820
+ {
1821
+ icon: 'pi pi-fw pi-unlock',
1822
+ title: 'Permission Manager',
1823
+ description: 'Accumsan in nisl nisi scelerisque',
1824
+ route: '/',
1825
+ },
1826
+ ];
1827
+ class HelixNotfound {
1828
+ errorCode = input('404', /* @ts-ignore */
1829
+ ...(ngDevMode ? [{ debugName: "errorCode" }] : /* istanbul ignore next */ []));
1830
+ title = input('Not Found', /* @ts-ignore */
1831
+ ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
1832
+ message = input('Requested resource is not available.', /* @ts-ignore */
1833
+ ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
1834
+ buttonLabel = input('Go to Dashboard', /* @ts-ignore */
1835
+ ...(ngDevMode ? [{ debugName: "buttonLabel" }] : /* istanbul ignore next */ []));
1836
+ buttonRoute = input('/', /* @ts-ignore */
1837
+ ...(ngDevMode ? [{ debugName: "buttonRoute" }] : /* istanbul ignore next */ []));
1838
+ suggestions = input(DEFAULT_SUGGESTIONS, /* @ts-ignore */
1839
+ ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
1840
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixNotfound, deps: [], target: i0.ɵɵFactoryTarget.Component });
1841
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: HelixNotfound, isStandalone: true, selector: "helix-notfound", inputs: { errorCode: { classPropertyName: "errorCode", publicName: "errorCode", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, buttonRoute: { classPropertyName: "buttonRoute", publicName: "buttonRoute", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: HelixFloatingConfigurator, selector: "helix-floating-configurator", inputs: ["float"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$3.Button, selector: "h-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
1842
+ }
1843
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: HelixNotfound, decorators: [{
1844
+ type: Component,
1845
+ args: [{ selector: 'helix-notfound', standalone: true, imports: [RouterModule, HelixFloatingConfigurator, ButtonModule], changeDetection: ChangeDetectionStrategy.Eager, 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" }]
1846
+ }], propDecorators: { errorCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorCode", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], buttonRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonRoute", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }] } });
1847
+
1848
+ /*
1849
+ * Public API Surface of @gravionlabs/helix-core
1850
+ */
1851
+ // Form — form field
1852
+
1853
+ /**
1854
+ * Generated bundle index. Do not edit.
1855
+ */
1856
+
1857
+ export { HELIX_BREADCRUMB, HelixAccess, HelixAlertAction, HelixAppLayout, HelixBadge, HelixConfigurator, HelixConfiguratorAction, HelixDarkModeAction, HelixEmpty, HelixEnvironmentBadge, HelixError, HelixFeaturesWidget, HelixFloatingConfigurator, HelixFooter, HelixFooterWidget, HelixFormField, HelixHeroWidget, HelixHighlightsWidget, HelixLanding, HelixLogin, HelixMobileMenuAction, HelixNavRail, HelixNavRailItem, HelixNotfound, HelixPricingWidget, HelixSelect, HelixStatusBar, HelixTopbar, HelixTopbarWidget, LayoutStore, authRoutes, helixBreadcrumbsFromRoutes, helixMenuLinksFrom, helixNavGroupsFromMenu, helixRoutesFrom };
1858
+ //# sourceMappingURL=gravionlabs-helix-shell.mjs.map