@educarehq/solaris-components 0.0.2 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/educarehq-solaris-components.mjs +1337 -240
  2. package/fesm2022/educarehq-solaris-components.mjs.map +1 -1
  3. package/package.json +3 -3
  4. package/types/educarehq-solaris-components.d.ts +347 -43
package/fesm2022/educarehq-solaris-components.mjs CHANGED
@@ -1,252 +1,1205 @@
1
1
  import * as i0 from '@angular/core';
2
- import { InjectionToken, inject, signal, effect, Optional, Injectable, Directive, HostBinding, Input, ChangeDetectionStrategy, Component, computed, ContentChild, forwardRef, ElementRef } from '@angular/core';
3
- import { NgForm, FormGroupDirective, NgControl, NG_VALIDATORS } from '@angular/forms';
2
+ import { EventEmitter, Output, HostBinding, Input, ChangeDetectionStrategy, Component, signal, ContentChildren, HostListener, Optional, Directive, ContentChild, inject, ElementRef, computed, booleanAttribute, InjectionToken, Renderer2, forwardRef, ViewChild, effect, Injectable } from '@angular/core';
3
+ import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
4
+ import { RouterLink } from '@angular/router';
5
+ import { NgClass, NgTemplateOutlet } from '@angular/common';
6
+ import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgForm, FormGroupDirective, NgControl } from '@angular/forms';
7
+ import { getCountries, getCountryCallingCode, parsePhoneNumberFromString, AsYouType } from 'libphonenumber-js';
8
+ import intlTelInput from 'intl-tel-input';
4
9
  import { SolarisTranslationPipe } from '@educarehq/solaris-services';
5
10
 
6
- const SOLARIS_FORM_FIELD_FEATURES = new InjectionToken('SOLARIS_FORM_FIELD_FEATURES');
11
+ class SolarisBreadcrumb {
12
+ minItems = 2;
13
+ maxItems = 4;
14
+ responsive = true;
15
+ items = [];
16
+ hostClass = 'solaris-breadcrumb-host';
17
+ itemSelect = new EventEmitter();
18
+ get viewModel() {
19
+ const items = this.items ?? [];
20
+ const total = items.length;
21
+ const max = Math.max(this.minItems, this.effectiveMaxItems);
22
+ if (total <= max) {
23
+ return { head: items, overflow: [], tail: [] };
24
+ }
25
+ const keepHead = 1;
26
+ const keepTail = 1;
27
+ const remaining = max - keepHead - keepTail;
28
+ const extraTail = Math.max(0, remaining);
29
+ const head = items.slice(0, keepHead);
30
+ const tail = items.slice(total - (keepTail + extraTail), total);
31
+ const overflow = items.slice(keepHead, total - tail.length);
32
+ return { head, overflow, tail };
33
+ }
34
+ get effectiveMaxItems() {
35
+ if (!this.responsive)
36
+ return this.maxItems;
37
+ const isSmall = typeof globalThis.matchMedia === "function" &&
38
+ globalThis.matchMedia("(max-width: 640px)").matches;
39
+ return isSmall ? Math.max(this.minItems, 3) : this.maxItems;
40
+ }
41
+ getRouterCommands(it) {
42
+ return it.target?.kind === 'router' ? it.target.commands : null;
43
+ }
44
+ getRouterQueryParams(it) {
45
+ return it.target?.kind === 'router' ? (it.target.extras?.queryParams ?? null) : null;
46
+ }
47
+ shouldRenderSeparatorAfterHead(headIndex) {
48
+ if (headIndex < this.viewModel.head.length - 1)
49
+ return true;
50
+ return this.viewModel.overflow.length > 0 || this.viewModel.tail.length > 0;
51
+ }
52
+ onAction(item) {
53
+ if (item.disabled)
54
+ return;
55
+ const t = item.target;
56
+ if (t?.kind === 'action')
57
+ this.itemSelect.emit({ id: t.id, item });
58
+ }
59
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
60
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisBreadcrumb, isStandalone: true, selector: "solaris-breadcrumb", inputs: { minItems: ["min-items", "minItems"], maxItems: ["max-items", "maxItems"], responsive: "responsive", items: "items" }, outputs: { itemSelect: "itemSelect" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<nav class=\"solaris-breadcrumb\" aria-label=\"Breadcrumb\">\r\n <ol class=\"solaris-breadcrumb__list\">\r\n @for (it of viewModel.head; track it.label; let i = $index) {\r\n <li class=\"solaris-breadcrumb__item\">\r\n <ng-container [ngTemplateOutlet]=\"itemTpl\" [ngTemplateOutletContext]=\"{ $implicit: it }\"/>\r\n @if (shouldRenderSeparatorAfterHead(i)) {\r\n <span class=\"solaris-breadcrumb__sep\" aria-hidden=\"true\">\r\n <i class=\"ph ph-caret-right\"></i>\r\n </span>\r\n }\r\n </li>\r\n }\r\n\r\n @if (viewModel.overflow.length > 0) {\r\n <li class=\"solaris-breadcrumb__item\">\r\n <button type=\"button\" class=\"solaris-breadcrumb__ellipsis\" aria-label=\"Mostrar mais\" [cdkMenuTriggerFor]=\"overflowMenu\">\r\n <i class=\"ph ph-dots-three\"></i>\r\n </button>\r\n\r\n <ng-template #overflowMenu>\r\n <div class=\"solaris-breadcrumb__menu\" cdkMenu>\r\n @for (it of viewModel.overflow; track it.label) {\r\n <button type=\"button\" class=\"solaris-breadcrumb__menu-item\" cdkMenuItem (click)=\"onAction(it)\"\r\n [disabled]=\"it.disabled\" [routerLink]=\"getRouterCommands(it)\"\r\n [queryParams]=\"getRouterQueryParams(it)\">\r\n @if (it.icon) {\r\n <i class=\"solaris-breadcrumb__icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\r\n }\r\n <span class=\"solaris-breadcrumb__label\">{{ it.label }}</span>\r\n </button>\r\n }\r\n </div>\r\n </ng-template>\r\n\r\n @if (viewModel.tail.length > 0) {\r\n <span class=\"solaris-breadcrumb__sep\" aria-hidden=\"true\">\r\n <i class=\"ph ph-caret-right\"></i>\r\n </span>\r\n }\r\n </li>\r\n }\r\n\r\n @for (it of viewModel.tail; track it.label; let i = $index) {\r\n <li class=\"solaris-breadcrumb__item\" [class.is-current]=\"i === viewModel.tail.length - 1\">\r\n <ng-container [ngTemplateOutlet]=\"itemTpl\" [ngTemplateOutletContext]=\"{ $implicit: it, current: i === viewModel.tail.length - 1 }\"/>\r\n @if (it !== viewModel.tail[viewModel.tail.length - 1]) {\r\n <span class=\"solaris-breadcrumb__sep\" aria-hidden=\"true\">\r\n <i class=\"ph ph-caret-right\"></i>\r\n </span>\r\n }\r\n </li>\r\n }\r\n </ol>\r\n\r\n <ng-template #itemTpl let-it let-current=\"current\">\r\n @if (it.target?.kind === 'router') {\r\n <a class=\"solaris-breadcrumb__link\" [class.is-disabled]=\"it.disabled\" [class.is-current]=\"current\"\r\n [routerLink]=\"it.disabled ? null : it.target!.commands\" [attr.aria-current]=\"current ? 'page' : null\"\r\n [attr.aria-label]=\"it.ariaLabel || it.label\">\r\n @if (it.icon) {\r\n <i class=\"solaris-breadcrumb__icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\r\n }\r\n <span class=\"solaris-breadcrumb__label\">{{ it.label }}</span>\r\n </a>\r\n }\r\n @else if (it.target?.kind === 'href') {\r\n <a class=\"solaris-breadcrumb__link\" [class.is-disabled]=\"it.disabled\" [class.is-current]=\"current\"\r\n [href]=\"it.disabled ? null : it.target!.href\" [target]=\"it.target!.target || '_self'\"\r\n [attr.aria-current]=\"current ? 'page' : null\" [attr.aria-label]=\"it.ariaLabel || it.label\">\r\n @if (it.icon) {\r\n <i class=\"solaris-breadcrumb__icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\r\n }\r\n <span class=\"solaris-breadcrumb__label\">{{ it.label }}</span>\r\n </a>\r\n }\r\n @else if (it.target?.kind === 'action') {\r\n <button type=\"button\" class=\"solaris-breadcrumb__link as-button\" [class.is-current]=\"current\"\r\n [disabled]=\"it.disabled\" (click)=\"onAction(it)\" [attr.aria-current]=\"current ? 'page' : null\"\r\n [attr.aria-label]=\"it.ariaLabel || it.label\">\r\n @if (it.icon) {\r\n <i class=\"solaris-breadcrumb__icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\r\n }\r\n <span class=\"solaris-breadcrumb__label\">{{ it.label }}</span>\r\n </button>\r\n }\r\n @else {\r\n <span class=\"solaris-breadcrumb__text\" [attr.aria-current]=\"current ? 'page' : null\">\r\n @if (it.icon) {\r\n <i class=\"solaris-breadcrumb__icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\r\n }\r\n <span class=\"solaris-breadcrumb__label\">{{ it.label }}</span>\r\n </span>\r\n }\r\n </ng-template>\r\n</nav>\r\n", styles: [":host.solaris-breadcrumb-host{display:block}.solaris-breadcrumb{font-size:var(--solaris-bc-fs);--solaris-bc-fs: var(--solaris-fs-14);color:var(--solaris-color-text-muted);--solaris-bc-gap: var(--solaris-space-2);--solaris-bc-radius: var(--solaris-radius-sm)}.solaris-breadcrumb__list{margin:0;padding:0;min-width:0;display:flex;list-style:none;flex-wrap:nowrap;align-items:center;gap:var(--solaris-bc-gap)}.solaris-breadcrumb__item{min-width:0;align-items:center;display:inline-flex}.solaris-breadcrumb__item i.ph{display:flex}.solaris-breadcrumb__sep{-webkit-user-select:none;user-select:none;margin-inline:var(--solaris-space-2);color:color-mix(in srgb,var(--solaris-color-text-muted) 60%,transparent)}.solaris-breadcrumb__icon{line-height:1;font-size:var(--solaris-fs-16);margin-right:var(--solaris-space-2);color:color-mix(in srgb,var(--solaris-color-text-muted) 75%,transparent)}.solaris-breadcrumb__label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-breadcrumb__link,.solaris-breadcrumb__text{min-width:0;color:inherit;align-items:center;display:inline-flex;text-decoration:none;border-radius:var(--solaris-bc-radius)}.solaris-breadcrumb__link{padding:.2rem .5rem;transition:all .15s ease-in-out}.solaris-breadcrumb__link:hover{color:var(--solaris-color-text);background:color-mix(in srgb,var(--solaris-color-surface-2) 70%,transparent)}.solaris-breadcrumb__link.is-current{font-weight:600;color:var(--solaris-color-text)}.solaris-breadcrumb__link.is-disabled{opacity:.55;pointer-events:none}.solaris-breadcrumb__link.as-button{border:0;font:inherit;cursor:pointer;background:transparent}.solaris-breadcrumb__ellipsis{padding:.2rem .6rem;cursor:pointer;color:var(--solaris-color-text-muted);border-radius:var(--solaris-bc-radius);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border)}.solaris-breadcrumb__ellipsis:hover{color:var(--solaris-color-text);box-shadow:var(--solaris-shadow-xs)}.solaris-breadcrumb__menu{min-width:22rem;padding:var(--solaris-space-2);margin-top:var(--solaris-space-2);box-shadow:var(--solaris-shadow-md);border-radius:var(--solaris-radius-md);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border)}.solaris-breadcrumb__menu-item{border:0;width:100%;font:inherit;display:flex;cursor:pointer;text-align:left;align-items:center;background:transparent;gap:var(--solaris-space-2);color:var(--solaris-color-text);border-radius:var(--solaris-radius-sm);padding:var(--solaris-space-2) var(--solaris-space-3)}.solaris-breadcrumb__menu-item:hover{background:var(--solaris-color-surface-2)}.solaris-breadcrumb__menu-item:disabled{opacity:.55;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
61
+ }
62
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisBreadcrumb, decorators: [{
63
+ type: Component,
64
+ args: [{ selector: 'solaris-breadcrumb', standalone: true, imports: [
65
+ NgClass,
66
+ RouterLink,
67
+ CdkMenu,
68
+ CdkMenuItem,
69
+ CdkMenuTrigger,
70
+ NgTemplateOutlet
71
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"solaris-breadcrumb\" aria-label=\"Breadcrumb\">\r\n <ol class=\"solaris-breadcrumb__list\">\r\n @for (it of viewModel.head; track it.label; let i = $index) {\r\n <li class=\"solaris-breadcrumb__item\">\r\n <ng-container [ngTemplateOutlet]=\"itemTpl\" [ngTemplateOutletContext]=\"{ $implicit: it }\"/>\r\n @if (shouldRenderSeparatorAfterHead(i)) {\r\n <span class=\"solaris-breadcrumb__sep\" aria-hidden=\"true\">\r\n <i class=\"ph ph-caret-right\"></i>\r\n </span>\r\n }\r\n </li>\r\n }\r\n\r\n @if (viewModel.overflow.length > 0) {\r\n <li class=\"solaris-breadcrumb__item\">\r\n <button type=\"button\" class=\"solaris-breadcrumb__ellipsis\" aria-label=\"Mostrar mais\" [cdkMenuTriggerFor]=\"overflowMenu\">\r\n <i class=\"ph ph-dots-three\"></i>\r\n </button>\r\n\r\n <ng-template #overflowMenu>\r\n <div class=\"solaris-breadcrumb__menu\" cdkMenu>\r\n @for (it of viewModel.overflow; track it.label) {\r\n <button type=\"button\" class=\"solaris-breadcrumb__menu-item\" cdkMenuItem (click)=\"onAction(it)\"\r\n [disabled]=\"it.disabled\" [routerLink]=\"getRouterCommands(it)\"\r\n [queryParams]=\"getRouterQueryParams(it)\">\r\n @if (it.icon) {\r\n <i class=\"solaris-breadcrumb__icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\r\n }\r\n <span class=\"solaris-breadcrumb__label\">{{ it.label }}</span>\r\n </button>\r\n }\r\n </div>\r\n </ng-template>\r\n\r\n @if (viewModel.tail.length > 0) {\r\n <span class=\"solaris-breadcrumb__sep\" aria-hidden=\"true\">\r\n <i class=\"ph ph-caret-right\"></i>\r\n </span>\r\n }\r\n </li>\r\n }\r\n\r\n @for (it of viewModel.tail; track it.label; let i = $index) {\r\n <li class=\"solaris-breadcrumb__item\" [class.is-current]=\"i === viewModel.tail.length - 1\">\r\n <ng-container [ngTemplateOutlet]=\"itemTpl\" [ngTemplateOutletContext]=\"{ $implicit: it, current: i === viewModel.tail.length - 1 }\"/>\r\n @if (it !== viewModel.tail[viewModel.tail.length - 1]) {\r\n <span class=\"solaris-breadcrumb__sep\" aria-hidden=\"true\">\r\n <i class=\"ph ph-caret-right\"></i>\r\n </span>\r\n }\r\n </li>\r\n }\r\n </ol>\r\n\r\n <ng-template #itemTpl let-it let-current=\"current\">\r\n @if (it.target?.kind === 'router') {\r\n <a class=\"solaris-breadcrumb__link\" [class.is-disabled]=\"it.disabled\" [class.is-current]=\"current\"\r\n [routerLink]=\"it.disabled ? null : it.target!.commands\" [attr.aria-current]=\"current ? 'page' : null\"\r\n [attr.aria-label]=\"it.ariaLabel || it.label\">\r\n @if (it.icon) {\r\n <i class=\"solaris-breadcrumb__icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\r\n }\r\n <span class=\"solaris-breadcrumb__label\">{{ it.label }}</span>\r\n </a>\r\n }\r\n @else if (it.target?.kind === 'href') {\r\n <a class=\"solaris-breadcrumb__link\" [class.is-disabled]=\"it.disabled\" [class.is-current]=\"current\"\r\n [href]=\"it.disabled ? null : it.target!.href\" [target]=\"it.target!.target || '_self'\"\r\n [attr.aria-current]=\"current ? 'page' : null\" [attr.aria-label]=\"it.ariaLabel || it.label\">\r\n @if (it.icon) {\r\n <i class=\"solaris-breadcrumb__icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\r\n }\r\n <span class=\"solaris-breadcrumb__label\">{{ it.label }}</span>\r\n </a>\r\n }\r\n @else if (it.target?.kind === 'action') {\r\n <button type=\"button\" class=\"solaris-breadcrumb__link as-button\" [class.is-current]=\"current\"\r\n [disabled]=\"it.disabled\" (click)=\"onAction(it)\" [attr.aria-current]=\"current ? 'page' : null\"\r\n [attr.aria-label]=\"it.ariaLabel || it.label\">\r\n @if (it.icon) {\r\n <i class=\"solaris-breadcrumb__icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\r\n }\r\n <span class=\"solaris-breadcrumb__label\">{{ it.label }}</span>\r\n </button>\r\n }\r\n @else {\r\n <span class=\"solaris-breadcrumb__text\" [attr.aria-current]=\"current ? 'page' : null\">\r\n @if (it.icon) {\r\n <i class=\"solaris-breadcrumb__icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\r\n }\r\n <span class=\"solaris-breadcrumb__label\">{{ it.label }}</span>\r\n </span>\r\n }\r\n </ng-template>\r\n</nav>\r\n", styles: [":host.solaris-breadcrumb-host{display:block}.solaris-breadcrumb{font-size:var(--solaris-bc-fs);--solaris-bc-fs: var(--solaris-fs-14);color:var(--solaris-color-text-muted);--solaris-bc-gap: var(--solaris-space-2);--solaris-bc-radius: var(--solaris-radius-sm)}.solaris-breadcrumb__list{margin:0;padding:0;min-width:0;display:flex;list-style:none;flex-wrap:nowrap;align-items:center;gap:var(--solaris-bc-gap)}.solaris-breadcrumb__item{min-width:0;align-items:center;display:inline-flex}.solaris-breadcrumb__item i.ph{display:flex}.solaris-breadcrumb__sep{-webkit-user-select:none;user-select:none;margin-inline:var(--solaris-space-2);color:color-mix(in srgb,var(--solaris-color-text-muted) 60%,transparent)}.solaris-breadcrumb__icon{line-height:1;font-size:var(--solaris-fs-16);margin-right:var(--solaris-space-2);color:color-mix(in srgb,var(--solaris-color-text-muted) 75%,transparent)}.solaris-breadcrumb__label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-breadcrumb__link,.solaris-breadcrumb__text{min-width:0;color:inherit;align-items:center;display:inline-flex;text-decoration:none;border-radius:var(--solaris-bc-radius)}.solaris-breadcrumb__link{padding:.2rem .5rem;transition:all .15s ease-in-out}.solaris-breadcrumb__link:hover{color:var(--solaris-color-text);background:color-mix(in srgb,var(--solaris-color-surface-2) 70%,transparent)}.solaris-breadcrumb__link.is-current{font-weight:600;color:var(--solaris-color-text)}.solaris-breadcrumb__link.is-disabled{opacity:.55;pointer-events:none}.solaris-breadcrumb__link.as-button{border:0;font:inherit;cursor:pointer;background:transparent}.solaris-breadcrumb__ellipsis{padding:.2rem .6rem;cursor:pointer;color:var(--solaris-color-text-muted);border-radius:var(--solaris-bc-radius);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border)}.solaris-breadcrumb__ellipsis:hover{color:var(--solaris-color-text);box-shadow:var(--solaris-shadow-xs)}.solaris-breadcrumb__menu{min-width:22rem;padding:var(--solaris-space-2);margin-top:var(--solaris-space-2);box-shadow:var(--solaris-shadow-md);border-radius:var(--solaris-radius-md);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border)}.solaris-breadcrumb__menu-item{border:0;width:100%;font:inherit;display:flex;cursor:pointer;text-align:left;align-items:center;background:transparent;gap:var(--solaris-space-2);color:var(--solaris-color-text);border-radius:var(--solaris-radius-sm);padding:var(--solaris-space-2) var(--solaris-space-3)}.solaris-breadcrumb__menu-item:hover{background:var(--solaris-color-surface-2)}.solaris-breadcrumb__menu-item:disabled{opacity:.55;cursor:not-allowed}\n"] }]
72
+ }], propDecorators: { minItems: [{
73
+ type: Input,
74
+ args: [{ alias: 'min-items' }]
75
+ }], maxItems: [{
76
+ type: Input,
77
+ args: [{ alias: 'max-items' }]
78
+ }], responsive: [{
79
+ type: Input
80
+ }], items: [{
81
+ type: Input,
82
+ args: [{ required: true }]
83
+ }], hostClass: [{
84
+ type: HostBinding,
85
+ args: ['class']
86
+ }], itemSelect: [{
87
+ type: Output
88
+ }] } });
7
89
 
8
- class SolarisFormFieldController {
9
- features = inject(SOLARIS_FORM_FIELD_FEATURES, { optional: true }) ?? [];
10
- ngForm = inject(NgForm, { optional: true });
11
- formGroupDir = inject(FormGroupDirective, { optional: true });
12
- submitted = signal(false, ...(ngDevMode ? [{ debugName: "submitted" }] : []));
13
- control = signal(null, ...(ngDevMode ? [{ debugName: "control" }] : []));
14
- email = signal(null, ...(ngDevMode ? [{ debugName: "email" }] : []));
15
- password = signal(null, ...(ngDevMode ? [{ debugName: "password" }] : []));
16
- constructor() {
17
- effect(() => {
18
- const fgSubmitted = this.formGroupDir?.submitted ?? false;
19
- const nfSubmitted = this.ngForm?.submitted ?? false;
20
- this.submitted.set((fgSubmitted || nfSubmitted));
21
- }, { allowSignalWrites: true });
90
+ class SolarisTabs {
91
+ size = 'md';
92
+ disabled = false;
93
+ variant = 'underline';
94
+ activeId;
95
+ activeIdChange = new EventEmitter();
96
+ tabChange = new EventEmitter();
97
+ hostClass = 'solaris-tabs-host';
98
+ tabs;
99
+ focusId = signal(null, ...(ngDevMode ? [{ debugName: "focusId" }] : []));
100
+ ngAfterContentInit() {
101
+ queueMicrotask(() => {
102
+ const first = this.tabs?.get(0);
103
+ if (!this.activeId && first?.id) {
104
+ this.setActive(first.id, false);
105
+ }
106
+ if (!this.focusId() && (this.activeId ?? first?.id)) {
107
+ this.focusId.set(this.activeId ?? first?.id ?? null);
108
+ }
109
+ this.syncTabs();
110
+ this.tabs.changes.subscribe(() => this.syncTabs());
111
+ });
22
112
  }
23
- registerPassword(dir) {
24
- this.password.set(dir);
113
+ syncTabs() {
114
+ const list = this.tabs?.toArray() ?? [];
115
+ for (const t of list) {
116
+ t._setParent(this);
117
+ t._setDisabled(this.disabled || t.disabled);
118
+ }
25
119
  }
26
- registerEmail(dir) {
27
- this.email.set(dir);
120
+ isActive(id) {
121
+ return this.activeId === id;
28
122
  }
29
- registerControl(ctrl) {
30
- if (!ctrl && this.control())
123
+ isFocusable(id) {
124
+ const fid = this.focusId();
125
+ return (fid ?? this.activeId) === id;
126
+ }
127
+ setActive(id, emit = true) {
128
+ if (!id)
31
129
  return;
32
- this.control.set(ctrl);
130
+ this.activeId = id;
131
+ this.focusId.set(id);
132
+ if (emit) {
133
+ this.activeIdChange.emit(id);
134
+ this.tabChange.emit({ id });
135
+ }
33
136
  }
34
- passwordVisible() {
35
- return this.password()?.visible() ?? false;
137
+ onKeydown(ev) {
138
+ if (this.disabled)
139
+ return;
140
+ const keys = ['ArrowLeft', 'ArrowRight', 'Home', 'End'];
141
+ if (!keys.includes(ev.key))
142
+ return;
143
+ const list = (this.tabs?.toArray() ?? []).filter(t => !t._isDisabled());
144
+ if (!list.length)
145
+ return;
146
+ ev.preventDefault();
147
+ const currentId = this.focusId() ?? this.activeId ?? list[0].id;
148
+ const idx = Math.max(0, list.findIndex(t => t.id === currentId));
149
+ let next = idx;
150
+ if (ev.key === 'ArrowLeft')
151
+ next = (idx - 1 + list.length) % list.length;
152
+ if (ev.key === 'ArrowRight')
153
+ next = (idx + 1) % list.length;
154
+ if (ev.key === 'Home')
155
+ next = 0;
156
+ if (ev.key === 'End')
157
+ next = list.length - 1;
158
+ const nextTab = list[next];
159
+ this.focusId.set(nextTab.id);
160
+ nextTab._focus();
36
161
  }
37
- togglePasswordVisibility() {
38
- this.password()?.toggle();
162
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
163
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: SolarisTabs, isStandalone: true, selector: "solaris-tabs", inputs: { size: "size", disabled: "disabled", variant: "variant", activeId: ["active-id", "activeId"] }, outputs: { activeIdChange: "active-idChange", tabChange: "tabChange" }, host: { properties: { "class": "this.hostClass" } }, queries: [{ propertyName: "tabs", predicate: SolarisTab }], ngImport: i0, template: "<div [ngClass]=\"['size-' + size, 'variant-' + variant, disabled ? 'is-disabled' : '']\"\r\n class=\"solaris-tabs\" role=\"tablist\" (keydown)=\"onKeydown($event)\">\r\n <ng-content/>\r\n</div>\r\n", styles: [":host.solaris-tabs-host{display:block}.solaris-tabs{--solaris-tabs-gap: var(--solaris-space-2);--solaris-tabs-radius: var(--solaris-radius-sm);min-width:0;display:inline-flex;align-items:stretch;gap:var(--solaris-tabs-gap)}.solaris-tabs.size-sm{--solaris-tab-py: .4rem;--solaris-tab-px: .8rem;font-size:var(--solaris-fs-12)}.solaris-tabs.size-md{--solaris-tab-py: .6rem;--solaris-tab-px: 1.2rem;font-size:var(--solaris-fs-14)}.solaris-tabs.variant-pill{--solaris-tabs-gap: 0;border-radius:var(--solaris-tabs-radius);border:1px solid var(--solaris-color-border);background:color-mix(in srgb,var(--solaris-color-surface) 80%,transparent)}.solaris-tabs.variant-pill ::ng-deep>solaris-tab{display:inline-flex;align-items:stretch}.solaris-tabs.variant-pill ::ng-deep>solaris-tab:not(:first-child){border-left:1px solid color-mix(in srgb,var(--solaris-color-border) 70%,transparent)}.solaris-tabs.variant-underline{padding-bottom:var(--solaris-space-1);border-bottom:1px solid var(--solaris-color-border)}.solaris-tabs.is-disabled{opacity:.6;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
164
+ }
165
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisTabs, decorators: [{
166
+ type: Component,
167
+ args: [{ selector: 'solaris-tabs', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['size-' + size, 'variant-' + variant, disabled ? 'is-disabled' : '']\"\r\n class=\"solaris-tabs\" role=\"tablist\" (keydown)=\"onKeydown($event)\">\r\n <ng-content/>\r\n</div>\r\n", styles: [":host.solaris-tabs-host{display:block}.solaris-tabs{--solaris-tabs-gap: var(--solaris-space-2);--solaris-tabs-radius: var(--solaris-radius-sm);min-width:0;display:inline-flex;align-items:stretch;gap:var(--solaris-tabs-gap)}.solaris-tabs.size-sm{--solaris-tab-py: .4rem;--solaris-tab-px: .8rem;font-size:var(--solaris-fs-12)}.solaris-tabs.size-md{--solaris-tab-py: .6rem;--solaris-tab-px: 1.2rem;font-size:var(--solaris-fs-14)}.solaris-tabs.variant-pill{--solaris-tabs-gap: 0;border-radius:var(--solaris-tabs-radius);border:1px solid var(--solaris-color-border);background:color-mix(in srgb,var(--solaris-color-surface) 80%,transparent)}.solaris-tabs.variant-pill ::ng-deep>solaris-tab{display:inline-flex;align-items:stretch}.solaris-tabs.variant-pill ::ng-deep>solaris-tab:not(:first-child){border-left:1px solid color-mix(in srgb,var(--solaris-color-border) 70%,transparent)}.solaris-tabs.variant-underline{padding-bottom:var(--solaris-space-1);border-bottom:1px solid var(--solaris-color-border)}.solaris-tabs.is-disabled{opacity:.6;pointer-events:none}\n"] }]
168
+ }], propDecorators: { size: [{
169
+ type: Input
170
+ }], disabled: [{
171
+ type: Input
172
+ }], variant: [{
173
+ type: Input
174
+ }], activeId: [{
175
+ type: Input,
176
+ args: [{ alias: 'active-id' }]
177
+ }], activeIdChange: [{
178
+ type: Output,
179
+ args: ['active-idChange']
180
+ }], tabChange: [{
181
+ type: Output
182
+ }], hostClass: [{
183
+ type: HostBinding,
184
+ args: ['class']
185
+ }], tabs: [{
186
+ type: ContentChildren,
187
+ args: [SolarisTab]
188
+ }] } });
189
+
190
+ class SolarisTab {
191
+ elementRef;
192
+ disabled = false;
193
+ routerLink;
194
+ id;
195
+ parent;
196
+ disabledByParent = false;
197
+ constructor(elementRef, parent) {
198
+ this.elementRef = elementRef;
199
+ this.parent = parent;
39
200
  }
40
- resetSubmitted() {
41
- this.submitted.set(false);
201
+ _setParent(p) { this.parent = p; }
202
+ _setDisabled(v) { this.disabledByParent = v; }
203
+ _isDisabled() {
204
+ return this.disabled || this.disabledByParent;
42
205
  }
43
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFormFieldController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
44
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFormFieldController });
206
+ _focus() {
207
+ this.elementRef.nativeElement.focus();
208
+ }
209
+ get hostClass() {
210
+ const active = this.parent?.isActive(this.id);
211
+ return [
212
+ 'solaris-tab',
213
+ active ? 'is-active' : '',
214
+ this._isDisabled() ? 'is-disabled' : '',
215
+ this.routerLink ? 'is-link' : '',
216
+ ].filter(Boolean).join(' ');
217
+ }
218
+ role = 'tab';
219
+ get tabIndex() {
220
+ if (this._isDisabled())
221
+ return -1;
222
+ return this.parent?.isFocusable(this.id) ? 0 : -1;
223
+ }
224
+ get ariaSelected() {
225
+ return this.parent?.isActive(this.id) ? 'true' : 'false';
226
+ }
227
+ onClick() {
228
+ if (this._isDisabled())
229
+ return;
230
+ this.parent?.setActive(this.id, true);
231
+ }
232
+ onFocus() {
233
+ if (this._isDisabled())
234
+ return;
235
+ this.parent?.focusId.set(this.id);
236
+ }
237
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisTab, deps: [{ token: i0.ElementRef }, { token: SolarisTabs, optional: true }], target: i0.ɵɵFactoryTarget.Component });
238
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisTab, isStandalone: true, selector: "solaris-tab", inputs: { disabled: "disabled", routerLink: "routerLink", id: "id" }, host: { listeners: { "click": "onClick()", "focus": "onFocus()" }, properties: { "class": "this.hostClass", "attr.role": "this.role", "attr.tabindex": "this.tabIndex", "attr.aria-selected": "this.ariaSelected" } }, ngImport: i0, template: "@if (routerLink) {\r\n <a class=\"solaris-tab__inner\" [routerLink]=\"routerLink\">\r\n <ng-content />\r\n </a>\r\n} @else {\r\n <button type=\"button\" class=\"solaris-tab__inner\">\r\n <ng-content />\r\n </button>\r\n}\r\n", styles: [":host{min-width:0;display:inline-flex;align-items:stretch}.solaris-tab__inner{border:0;min-width:0;height:100%;font:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:transparent;gap:var(--solaris-space-2);transition:all .15s ease-in-out;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-md);padding:var(--solaris-tab-py, .6rem) var(--solaris-tab-px, 1.2rem)}:host(:hover) .solaris-tab__inner{color:var(--solaris-color-text);background:color-mix(in srgb,var(--solaris-color-surface-2) 75%,transparent)}:host(.is-active) .solaris-tab__inner{color:var(--solaris-color-text)}:host(.is-disabled) .solaris-tab__inner{opacity:.6;cursor:not-allowed}:host-context(.solaris-tabs.variant-underline) :host(.is-active) .solaris-tab__inner{border-radius:0;box-shadow:inset 0 -2px 0 var(--solaris-color-primary)}:host-context(.solaris-tabs.variant-pill) .solaris-tab__inner{border-radius:0}:host-context(.solaris-tabs.variant-pill) :host(:first-child:hover) .solaris-tab__inner,:host-context(.solaris-tabs.variant-pill) :host(:first-child.is-active) .solaris-tab__inner{border-top-left-radius:var(--solaris-tabs-radius);border-bottom-left-radius:var(--solaris-tabs-radius)}:host-context(.solaris-tabs.variant-pill) :host(:last-child:hover) .solaris-tab__inner,:host-context(.solaris-tabs.variant-pill) :host(:last-child.is-active) .solaris-tab__inner{border-top-right-radius:var(--solaris-tabs-radius);border-bottom-right-radius:var(--solaris-tabs-radius)}:host-context(.solaris-tabs.variant-pill) :host(.is-active) .solaris-tab__inner{background:var(--solaris-color-surface-2);box-shadow:var(--solaris-shadow-xs);color:var(--solaris-color-text)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
45
239
  }
46
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFormFieldController, decorators: [{
47
- type: Injectable
48
- }], ctorParameters: () => [], propDecorators: { ngForm: [{
49
- type: Optional
50
- }], formGroupDir: [{
51
- type: Optional
240
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisTab, decorators: [{
241
+ type: Component,
242
+ args: [{ selector: 'solaris-tab', standalone: true, imports: [RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (routerLink) {\r\n <a class=\"solaris-tab__inner\" [routerLink]=\"routerLink\">\r\n <ng-content />\r\n </a>\r\n} @else {\r\n <button type=\"button\" class=\"solaris-tab__inner\">\r\n <ng-content />\r\n </button>\r\n}\r\n", styles: [":host{min-width:0;display:inline-flex;align-items:stretch}.solaris-tab__inner{border:0;min-width:0;height:100%;font:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:transparent;gap:var(--solaris-space-2);transition:all .15s ease-in-out;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-md);padding:var(--solaris-tab-py, .6rem) var(--solaris-tab-px, 1.2rem)}:host(:hover) .solaris-tab__inner{color:var(--solaris-color-text);background:color-mix(in srgb,var(--solaris-color-surface-2) 75%,transparent)}:host(.is-active) .solaris-tab__inner{color:var(--solaris-color-text)}:host(.is-disabled) .solaris-tab__inner{opacity:.6;cursor:not-allowed}:host-context(.solaris-tabs.variant-underline) :host(.is-active) .solaris-tab__inner{border-radius:0;box-shadow:inset 0 -2px 0 var(--solaris-color-primary)}:host-context(.solaris-tabs.variant-pill) .solaris-tab__inner{border-radius:0}:host-context(.solaris-tabs.variant-pill) :host(:first-child:hover) .solaris-tab__inner,:host-context(.solaris-tabs.variant-pill) :host(:first-child.is-active) .solaris-tab__inner{border-top-left-radius:var(--solaris-tabs-radius);border-bottom-left-radius:var(--solaris-tabs-radius)}:host-context(.solaris-tabs.variant-pill) :host(:last-child:hover) .solaris-tab__inner,:host-context(.solaris-tabs.variant-pill) :host(:last-child.is-active) .solaris-tab__inner{border-top-right-radius:var(--solaris-tabs-radius);border-bottom-right-radius:var(--solaris-tabs-radius)}:host-context(.solaris-tabs.variant-pill) :host(.is-active) .solaris-tab__inner{background:var(--solaris-color-surface-2);box-shadow:var(--solaris-shadow-xs);color:var(--solaris-color-text)}\n"] }]
243
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: SolarisTabs, decorators: [{
244
+ type: Optional
245
+ }] }], propDecorators: { disabled: [{
246
+ type: Input
247
+ }], routerLink: [{
248
+ type: Input
249
+ }], id: [{
250
+ type: Input,
251
+ args: [{ required: true }]
252
+ }], hostClass: [{
253
+ type: HostBinding,
254
+ args: ['class']
255
+ }], role: [{
256
+ type: HostBinding,
257
+ args: ['attr.role']
258
+ }], tabIndex: [{
259
+ type: HostBinding,
260
+ args: ['attr.tabindex']
261
+ }], ariaSelected: [{
262
+ type: HostBinding,
263
+ args: ['attr.aria-selected']
264
+ }], onClick: [{
265
+ type: HostListener,
266
+ args: ['click']
267
+ }], onFocus: [{
268
+ type: HostListener,
269
+ args: ['focus']
52
270
  }] } });
53
271
 
54
- class SolarisControlBridgeDirective {
55
- ctrl = inject(NgControl, { optional: true });
56
- field = inject(SolarisFormFieldController, { optional: true });
57
- constructor() {
58
- if (this.ctrl)
59
- this.field?.registerControl(this.ctrl);
272
+ class SolarisBadge {
273
+ hostClass = 'solaris-badge-host';
274
+ pill = false;
275
+ size = 'md';
276
+ interactive = false;
277
+ color = 'surface';
278
+ variant = 'subtle';
279
+ ariaHidden = null;
280
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
281
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: SolarisBadge, isStandalone: true, selector: "solaris-badge", inputs: { pill: "pill", size: "size", interactive: "interactive", color: "color", variant: "variant", ariaHidden: ["aria-hidden", "ariaHidden"] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<span class=\"solaris-badge\" [attr.aria-hidden]=\"ariaHidden\"\r\n [ngClass]=\"[\r\n 'variant-' + variant,\r\n 'color-' + color,\r\n 'size-' + size,\r\n pill ? 'is-pill' : '',\r\n interactive ? 'is-interactive' : ''\r\n ]\">\r\n <ng-content></ng-content>\r\n</span>\r\n", styles: [":host.solaris-badge-host{display:inline-flex}.solaris-badge{--solaris-badge-radius: var(--solaris-radius-md);line-height:1;font-weight:600;-webkit-user-select:none;user-select:none;white-space:nowrap;align-items:center;display:inline-flex;gap:var(--solaris-space-2);border:1px solid transparent;letter-spacing:var(--solaris-ls-sm);border-radius:var(--solaris-badge-radius)}.solaris-badge.size-sm{padding:.3rem .6rem;font-size:var(--solaris-fs-10)}.solaris-badge.size-md{padding:.4rem .8rem;font-size:var(--solaris-fs-12)}.solaris-badge.is-pill{--solaris-badge-radius: var(--solaris-radius-full)}.solaris-badge.is-interactive{cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}.solaris-badge.is-interactive:hover{box-shadow:var(--solaris-shadow-xs)}.solaris-badge.color-surface{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: var(--solaris-color-surface-2);--solaris-badge-border: var(--solaris-color-border)}.solaris-badge.color-primary{--solaris-badge-fg: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-primary) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-primary) 55%, var(--solaris-color-border))}.solaris-badge.color-success{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-success) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-success) 45%, var(--solaris-color-border))}.solaris-badge.color-warning{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-warning) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-warning) 45%, var(--solaris-color-border))}.solaris-badge.color-error{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-error) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-error) 45%, var(--solaris-color-border))}.solaris-badge.color-info{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-info) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-info) 45%, var(--solaris-color-border))}.solaris-badge.variant-solid{color:var(--solaris-badge-fg);background:var(--solaris-badge-bg);border-color:var(--solaris-badge-border)}.solaris-badge.variant-subtle{color:var(--solaris-color-text);background:var(--solaris-badge-bg);border-color:var(--solaris-badge-border)}.solaris-badge.variant-outline{background:transparent;color:var(--solaris-color-text);border-color:var(--solaris-badge-border)}.solaris-badge.variant-solid.color-surface{color:var(--solaris-color-text);border-color:var(--solaris-color-border);background:var(--solaris-color-surface-2)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
282
+ }
283
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisBadge, decorators: [{
284
+ type: Component,
285
+ args: [{ selector: 'solaris-badge', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"solaris-badge\" [attr.aria-hidden]=\"ariaHidden\"\r\n [ngClass]=\"[\r\n 'variant-' + variant,\r\n 'color-' + color,\r\n 'size-' + size,\r\n pill ? 'is-pill' : '',\r\n interactive ? 'is-interactive' : ''\r\n ]\">\r\n <ng-content></ng-content>\r\n</span>\r\n", styles: [":host.solaris-badge-host{display:inline-flex}.solaris-badge{--solaris-badge-radius: var(--solaris-radius-md);line-height:1;font-weight:600;-webkit-user-select:none;user-select:none;white-space:nowrap;align-items:center;display:inline-flex;gap:var(--solaris-space-2);border:1px solid transparent;letter-spacing:var(--solaris-ls-sm);border-radius:var(--solaris-badge-radius)}.solaris-badge.size-sm{padding:.3rem .6rem;font-size:var(--solaris-fs-10)}.solaris-badge.size-md{padding:.4rem .8rem;font-size:var(--solaris-fs-12)}.solaris-badge.is-pill{--solaris-badge-radius: var(--solaris-radius-full)}.solaris-badge.is-interactive{cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}.solaris-badge.is-interactive:hover{box-shadow:var(--solaris-shadow-xs)}.solaris-badge.color-surface{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: var(--solaris-color-surface-2);--solaris-badge-border: var(--solaris-color-border)}.solaris-badge.color-primary{--solaris-badge-fg: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-primary) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-primary) 55%, var(--solaris-color-border))}.solaris-badge.color-success{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-success) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-success) 45%, var(--solaris-color-border))}.solaris-badge.color-warning{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-warning) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-warning) 45%, var(--solaris-color-border))}.solaris-badge.color-error{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-error) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-error) 45%, var(--solaris-color-border))}.solaris-badge.color-info{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-info) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-info) 45%, var(--solaris-color-border))}.solaris-badge.variant-solid{color:var(--solaris-badge-fg);background:var(--solaris-badge-bg);border-color:var(--solaris-badge-border)}.solaris-badge.variant-subtle{color:var(--solaris-color-text);background:var(--solaris-badge-bg);border-color:var(--solaris-badge-border)}.solaris-badge.variant-outline{background:transparent;color:var(--solaris-color-text);border-color:var(--solaris-badge-border)}.solaris-badge.variant-solid.color-surface{color:var(--solaris-color-text);border-color:var(--solaris-color-border);background:var(--solaris-color-surface-2)}\n"] }]
286
+ }], propDecorators: { hostClass: [{
287
+ type: HostBinding,
288
+ args: ['class']
289
+ }], pill: [{
290
+ type: Input
291
+ }], size: [{
292
+ type: Input
293
+ }], interactive: [{
294
+ type: Input
295
+ }], color: [{
296
+ type: Input
297
+ }], variant: [{
298
+ type: Input
299
+ }], ariaHidden: [{
300
+ type: Input,
301
+ args: [{ alias: 'aria-hidden' }]
302
+ }] } });
303
+
304
+ class SolarisSectionComponent {
305
+ title;
306
+ description;
307
+ appearance = 'plain';
308
+ density = 'comfortable';
309
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
310
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisSectionComponent, isStandalone: true, selector: "solaris-section", inputs: { title: "title", description: "description", appearance: "appearance", density: "density" }, ngImport: i0, template: "<section class=\"solaris-section\" [ngClass]=\"['appearance-' + appearance, 'density-' + density]\">\r\n @if (title || description) {\r\n <header class=\"solaris-section__header\">\r\n @if (title) { <h2 class=\"solaris-section__title\">{{ title }}</h2> }\r\n @if (description) { <p class=\"solaris-section__description\">{{ description }}</p> }\r\n </header>\r\n }\r\n\r\n <div class=\"solaris-section__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n</section>\r\n", styles: [".solaris-section{--solaris-section-gap: var(--solaris-space-4);--solaris-section-padding: var(--solaris-space-6);min-width:0;display:flex;flex-direction:column;gap:var(--solaris-section-gap)}.solaris-section.density-compact{--solaris-section-gap: var(--solaris-space-3);--solaris-section-padding: var(--solaris-space-4)}.solaris-section.appearance-plain{padding:0}.solaris-section.appearance-card{box-shadow:var(--solaris-shadow-xs);padding:var(--solaris-section-padding);border-radius:var(--solaris-radius-md);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border)}.solaris-section__header{display:flex;flex-direction:column;gap:var(--solaris-space-2);font-size:var(--solaris-fs-16)}.solaris-section__title{margin:0;font-size:var(--solaris-h-5);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight)}.solaris-section__description{margin:0;font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text-muted)}.solaris-section__content{min-width:0;font-size:var(--solaris-fs-16)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
311
+ }
312
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisSectionComponent, decorators: [{
313
+ type: Component,
314
+ args: [{ selector: 'solaris-section', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"solaris-section\" [ngClass]=\"['appearance-' + appearance, 'density-' + density]\">\r\n @if (title || description) {\r\n <header class=\"solaris-section__header\">\r\n @if (title) { <h2 class=\"solaris-section__title\">{{ title }}</h2> }\r\n @if (description) { <p class=\"solaris-section__description\">{{ description }}</p> }\r\n </header>\r\n }\r\n\r\n <div class=\"solaris-section__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n</section>\r\n", styles: [".solaris-section{--solaris-section-gap: var(--solaris-space-4);--solaris-section-padding: var(--solaris-space-6);min-width:0;display:flex;flex-direction:column;gap:var(--solaris-section-gap)}.solaris-section.density-compact{--solaris-section-gap: var(--solaris-space-3);--solaris-section-padding: var(--solaris-space-4)}.solaris-section.appearance-plain{padding:0}.solaris-section.appearance-card{box-shadow:var(--solaris-shadow-xs);padding:var(--solaris-section-padding);border-radius:var(--solaris-radius-md);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border)}.solaris-section__header{display:flex;flex-direction:column;gap:var(--solaris-space-2);font-size:var(--solaris-fs-16)}.solaris-section__title{margin:0;font-size:var(--solaris-h-5);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight)}.solaris-section__description{margin:0;font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text-muted)}.solaris-section__content{min-width:0;font-size:var(--solaris-fs-16)}\n"] }]
315
+ }], propDecorators: { title: [{
316
+ type: Input
317
+ }], description: [{
318
+ type: Input
319
+ }], appearance: [{
320
+ type: Input
321
+ }], density: [{
322
+ type: Input
323
+ }] } });
324
+
325
+ class SolarisDivider {
326
+ label;
327
+ inset = false;
328
+ spacing = 'none';
329
+ variant = 'solid';
330
+ strength = 'normal';
331
+ orientation = 'horizontal';
332
+ labelAlign = 'center';
333
+ hostClass = 'solaris-divider-host';
334
+ get ariaOrientation() {
335
+ return this.orientation === 'vertical' ? 'vertical' : 'horizontal';
60
336
  }
61
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisControlBridgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
62
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisControlBridgeDirective, isStandalone: true, selector: "input[solaris-password],input[solaris-email],input[solaris-input],textarea[solaris-input]", ngImport: i0 });
337
+ get hasLabel() {
338
+ return !!this.label && this.orientation === 'horizontal';
339
+ }
340
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
341
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisDivider, isStandalone: true, selector: "solaris-divider", inputs: { label: "label", inset: "inset", spacing: "spacing", variant: "variant", strength: "strength", orientation: "orientation", labelAlign: ["label-align", "labelAlign"] }, host: { attributes: { "role": "separator" }, properties: { "class": "this.hostClass", "attr.aria-orientation": "this.ariaOrientation" } }, ngImport: i0, template: "<div\r\n class=\"solaris-divider\"\r\n [ngClass]=\"[\r\n 'orientation-' + orientation,\r\n 'spacing-' + spacing,\r\n 'strength-' + strength,\r\n 'variant-' + variant,\r\n inset ? 'is-inset' : '',\r\n hasLabel ? 'has-label' : '',\r\n hasLabel ? 'label-' + labelAlign : ''\r\n ]\">\r\n @if (hasLabel) {\r\n <span class=\"solaris-divider__line\"></span>\r\n <span class=\"solaris-divider__label\">{{ label }}</span>\r\n <span class=\"solaris-divider__line\"></span>\r\n }\r\n</div>\r\n", styles: [":host.solaris-divider-host{display:block}.solaris-divider{--solaris-divider-thickness: 1px;--solaris-divider-label-fs: var(--solaris-fs-12);--solaris-divider-inset-x: var(--solaris-space-8);--solaris-divider-label-gap: var(--solaris-space-3);--solaris-divider-color: var(--solaris-color-border);--solaris-divider-label-color: var(--solaris-color-text-muted);opacity:1}.solaris-divider.strength-soft{opacity:.65}.solaris-divider.orientation-horizontal:not(.has-label){width:100%;height:var(--solaris-divider-thickness);background:var(--solaris-divider-color)}.solaris-divider.orientation-vertical:not(.has-label){height:100%;align-self:stretch;width:var(--solaris-divider-thickness);background:var(--solaris-divider-color)}.solaris-divider.variant-dashed.orientation-horizontal:not(.has-label){height:0;background:transparent;border-top:var(--solaris-divider-thickness) dashed var(--solaris-divider-color)}.solaris-divider.variant-dashed.orientation-vertical:not(.has-label){width:0;background:transparent;border-left:var(--solaris-divider-thickness) dashed var(--solaris-divider-color)}.solaris-divider.is-inset.orientation-horizontal{width:auto;margin-inline:var(--solaris-divider-inset-x)}.solaris-divider.is-inset.orientation-vertical{height:auto;margin-block:var(--solaris-divider-inset-x)}.solaris-divider.spacing-none{margin:0}.solaris-divider.orientation-horizontal.spacing-sm{margin-block:var(--solaris-space-3)}.solaris-divider.orientation-horizontal.spacing-md{margin-block:var(--solaris-space-6)}.solaris-divider.orientation-horizontal.spacing-lg{margin-block:var(--solaris-space-8)}.solaris-divider.orientation-vertical.spacing-sm{margin-inline:var(--solaris-space-3)}.solaris-divider.orientation-vertical.spacing-md{margin-inline:var(--solaris-space-6)}.solaris-divider.orientation-vertical.spacing-lg{margin-inline:var(--solaris-space-8)}.solaris-divider.has-label{width:100%;display:flex;align-items:center;gap:var(--solaris-divider-label-gap)}.solaris-divider.has-label .solaris-divider__label{white-space:nowrap;text-transform:uppercase;letter-spacing:var(--solaris-ls-md);line-height:var(--solaris-lh-normal);color:var(--solaris-divider-label-color);font-size:var(--solaris-divider-label-fs)}.solaris-divider.has-label .solaris-divider__line{flex:1;min-width:0;height:var(--solaris-divider-thickness);background:var(--solaris-divider-color)}.solaris-divider.variant-dashed.has-label .solaris-divider__line{height:0;background:transparent;border-top:var(--solaris-divider-thickness) dashed var(--solaris-divider-color)}.solaris-divider.label-start .solaris-divider__line:first-child{flex:.35}.solaris-divider.label-start .solaris-divider__line:last-child{flex:1}.solaris-divider.label-center .solaris-divider__line,.solaris-divider.label-end .solaris-divider__line:first-child{flex:1}.solaris-divider.label-end .solaris-divider__line:last-child{flex:.35}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
63
342
  }
64
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisControlBridgeDirective, decorators: [{
343
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDivider, decorators: [{
344
+ type: Component,
345
+ args: [{ selector: 'solaris-divider', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, host: { role: 'separator' }, template: "<div\r\n class=\"solaris-divider\"\r\n [ngClass]=\"[\r\n 'orientation-' + orientation,\r\n 'spacing-' + spacing,\r\n 'strength-' + strength,\r\n 'variant-' + variant,\r\n inset ? 'is-inset' : '',\r\n hasLabel ? 'has-label' : '',\r\n hasLabel ? 'label-' + labelAlign : ''\r\n ]\">\r\n @if (hasLabel) {\r\n <span class=\"solaris-divider__line\"></span>\r\n <span class=\"solaris-divider__label\">{{ label }}</span>\r\n <span class=\"solaris-divider__line\"></span>\r\n }\r\n</div>\r\n", styles: [":host.solaris-divider-host{display:block}.solaris-divider{--solaris-divider-thickness: 1px;--solaris-divider-label-fs: var(--solaris-fs-12);--solaris-divider-inset-x: var(--solaris-space-8);--solaris-divider-label-gap: var(--solaris-space-3);--solaris-divider-color: var(--solaris-color-border);--solaris-divider-label-color: var(--solaris-color-text-muted);opacity:1}.solaris-divider.strength-soft{opacity:.65}.solaris-divider.orientation-horizontal:not(.has-label){width:100%;height:var(--solaris-divider-thickness);background:var(--solaris-divider-color)}.solaris-divider.orientation-vertical:not(.has-label){height:100%;align-self:stretch;width:var(--solaris-divider-thickness);background:var(--solaris-divider-color)}.solaris-divider.variant-dashed.orientation-horizontal:not(.has-label){height:0;background:transparent;border-top:var(--solaris-divider-thickness) dashed var(--solaris-divider-color)}.solaris-divider.variant-dashed.orientation-vertical:not(.has-label){width:0;background:transparent;border-left:var(--solaris-divider-thickness) dashed var(--solaris-divider-color)}.solaris-divider.is-inset.orientation-horizontal{width:auto;margin-inline:var(--solaris-divider-inset-x)}.solaris-divider.is-inset.orientation-vertical{height:auto;margin-block:var(--solaris-divider-inset-x)}.solaris-divider.spacing-none{margin:0}.solaris-divider.orientation-horizontal.spacing-sm{margin-block:var(--solaris-space-3)}.solaris-divider.orientation-horizontal.spacing-md{margin-block:var(--solaris-space-6)}.solaris-divider.orientation-horizontal.spacing-lg{margin-block:var(--solaris-space-8)}.solaris-divider.orientation-vertical.spacing-sm{margin-inline:var(--solaris-space-3)}.solaris-divider.orientation-vertical.spacing-md{margin-inline:var(--solaris-space-6)}.solaris-divider.orientation-vertical.spacing-lg{margin-inline:var(--solaris-space-8)}.solaris-divider.has-label{width:100%;display:flex;align-items:center;gap:var(--solaris-divider-label-gap)}.solaris-divider.has-label .solaris-divider__label{white-space:nowrap;text-transform:uppercase;letter-spacing:var(--solaris-ls-md);line-height:var(--solaris-lh-normal);color:var(--solaris-divider-label-color);font-size:var(--solaris-divider-label-fs)}.solaris-divider.has-label .solaris-divider__line{flex:1;min-width:0;height:var(--solaris-divider-thickness);background:var(--solaris-divider-color)}.solaris-divider.variant-dashed.has-label .solaris-divider__line{height:0;background:transparent;border-top:var(--solaris-divider-thickness) dashed var(--solaris-divider-color)}.solaris-divider.label-start .solaris-divider__line:first-child{flex:.35}.solaris-divider.label-start .solaris-divider__line:last-child{flex:1}.solaris-divider.label-center .solaris-divider__line,.solaris-divider.label-end .solaris-divider__line:first-child{flex:1}.solaris-divider.label-end .solaris-divider__line:last-child{flex:.35}\n"] }]
346
+ }], propDecorators: { label: [{
347
+ type: Input
348
+ }], inset: [{
349
+ type: Input
350
+ }], spacing: [{
351
+ type: Input
352
+ }], variant: [{
353
+ type: Input
354
+ }], strength: [{
355
+ type: Input
356
+ }], orientation: [{
357
+ type: Input
358
+ }], labelAlign: [{
359
+ type: Input,
360
+ args: [{ alias: 'label-align' }]
361
+ }], hostClass: [{
362
+ type: HostBinding,
363
+ args: ['class']
364
+ }], ariaOrientation: [{
365
+ type: HostBinding,
366
+ args: ['attr.aria-orientation']
367
+ }] } });
368
+
369
+ class SolarisHeaderDirective {
370
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
371
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisHeaderDirective, isStandalone: true, selector: "[solaris-header]", ngImport: i0 });
372
+ }
373
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisHeaderDirective, decorators: [{
65
374
  type: Directive,
66
375
  args: [{
67
- selector: 'input[solaris-password],input[solaris-email],input[solaris-input],textarea[solaris-input]',
376
+ selector: '[solaris-header]',
68
377
  standalone: true,
69
378
  }]
70
- }], ctorParameters: () => [], propDecorators: { ctrl: [{
71
- type: Optional
72
- }], field: [{
73
- type: Optional
74
- }] } });
379
+ }] });
75
380
 
76
- class SolarisPrefixDirective {
77
- attr = '';
78
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
79
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisPrefixDirective, isStandalone: true, selector: "[solaris-prefix]", host: { properties: { "attr.solaris-prefix": "this.attr" } }, ngImport: i0 });
381
+ class SolarisFooterDirective {
382
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
383
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisFooterDirective, isStandalone: true, selector: "[solaris-footer]", ngImport: i0 });
80
384
  }
81
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPrefixDirective, decorators: [{
385
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFooterDirective, decorators: [{
82
386
  type: Directive,
83
387
  args: [{
84
- selector: '[solaris-prefix]',
388
+ selector: '[solaris-footer]',
389
+ standalone: true,
85
390
  }]
86
- }], propDecorators: { attr: [{
87
- type: HostBinding,
88
- args: ['attr.solaris-prefix']
391
+ }] });
392
+
393
+ class SolarisBodyDirective {
394
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisBodyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
395
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisBodyDirective, isStandalone: true, selector: "[solaris-body]", ngImport: i0 });
396
+ }
397
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisBodyDirective, decorators: [{
398
+ type: Directive,
399
+ args: [{
400
+ selector: '[solaris-body]',
401
+ standalone: true,
402
+ }]
403
+ }] });
404
+
405
+ class SolarisPageComponent {
406
+ stickyHeader = false;
407
+ container = 'contained';
408
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
409
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisPageComponent, isStandalone: true, selector: "solaris-page", inputs: { stickyHeader: "stickyHeader", container: "container" }, host: { classAttribute: "solaris-page-host" }, ngImport: i0, template: "<div class=\"solaris-page\" [ngClass]=\"['container-' + container]\">\r\n <header class=\"solaris-page__header\" [ngClass]=\"{ 'is-sticky': stickyHeader }\">\r\n <ng-content select=\"[solaris-header]\"></ng-content>\r\n @if (stickyHeader) { <solaris-divider class=\"solaris-page__header-divider\"/> }\r\n </header>\r\n\r\n <main class=\"solaris-page__body\">\r\n <ng-content select=\"[solaris-body]\"></ng-content>\r\n </main>\r\n\r\n <footer class=\"solaris-page__footer\">\r\n <solaris-divider class=\"solaris-page__footer-divider\"/>\r\n\r\n <div class=\"solaris-page__footer-content\">\r\n <ng-content select=\"[solaris-footer]\"></ng-content>\r\n </div>\r\n </footer>\r\n</div>\r\n", styles: [":host.solaris-page-host{display:block}.solaris-page{--solaris-page-gap: var(--solaris-space-8);--solaris-header-gap: var(--solaris-space-4);--solaris-footer-gap: var(--solaris-space-4);--solaris-page-padding-x: var(--solaris-space-8);--solaris-page-padding-y: var(--solaris-space-8);display:grid;min-height:100%;gap:var(--solaris-page-gap);color:var(--solaris-color-text);grid-template-rows:auto 1fr auto;padding:var(--solaris-page-padding-y) var(--solaris-page-padding-x)}.solaris-page.container-contained{margin-inline:auto}.solaris-page.container-fluid{max-width:none}.solaris-page__header{display:flex;flex-direction:column;gap:var(--solaris-header-gap)}.solaris-page__header.is-sticky{position:sticky;top:0;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);z-index:var(--solaris-z-sticky, 100);padding:var(--solaris-page-padding-y) var(--solaris-page-padding-x) var(--solaris-space-4)}.solaris-page__body{min-width:0;display:flex;flex-direction:column;gap:var(--solaris-space-8)}.solaris-page__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--solaris-footer-gap);padding-top:var(--solaris-space-4)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SolarisDivider, selector: "solaris-divider", inputs: ["label", "inset", "spacing", "variant", "strength", "orientation", "label-align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
410
+ }
411
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageComponent, decorators: [{
412
+ type: Component,
413
+ args: [{ selector: 'solaris-page', standalone: true, imports: [NgClass, SolarisDivider], changeDetection: ChangeDetectionStrategy.OnPush, host: {
414
+ class: 'solaris-page-host',
415
+ }, template: "<div class=\"solaris-page\" [ngClass]=\"['container-' + container]\">\r\n <header class=\"solaris-page__header\" [ngClass]=\"{ 'is-sticky': stickyHeader }\">\r\n <ng-content select=\"[solaris-header]\"></ng-content>\r\n @if (stickyHeader) { <solaris-divider class=\"solaris-page__header-divider\"/> }\r\n </header>\r\n\r\n <main class=\"solaris-page__body\">\r\n <ng-content select=\"[solaris-body]\"></ng-content>\r\n </main>\r\n\r\n <footer class=\"solaris-page__footer\">\r\n <solaris-divider class=\"solaris-page__footer-divider\"/>\r\n\r\n <div class=\"solaris-page__footer-content\">\r\n <ng-content select=\"[solaris-footer]\"></ng-content>\r\n </div>\r\n </footer>\r\n</div>\r\n", styles: [":host.solaris-page-host{display:block}.solaris-page{--solaris-page-gap: var(--solaris-space-8);--solaris-header-gap: var(--solaris-space-4);--solaris-footer-gap: var(--solaris-space-4);--solaris-page-padding-x: var(--solaris-space-8);--solaris-page-padding-y: var(--solaris-space-8);display:grid;min-height:100%;gap:var(--solaris-page-gap);color:var(--solaris-color-text);grid-template-rows:auto 1fr auto;padding:var(--solaris-page-padding-y) var(--solaris-page-padding-x)}.solaris-page.container-contained{margin-inline:auto}.solaris-page.container-fluid{max-width:none}.solaris-page__header{display:flex;flex-direction:column;gap:var(--solaris-header-gap)}.solaris-page__header.is-sticky{position:sticky;top:0;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);z-index:var(--solaris-z-sticky, 100);padding:var(--solaris-page-padding-y) var(--solaris-page-padding-x) var(--solaris-space-4)}.solaris-page__body{min-width:0;display:flex;flex-direction:column;gap:var(--solaris-space-8)}.solaris-page__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--solaris-footer-gap);padding-top:var(--solaris-space-4)}\n"] }]
416
+ }], propDecorators: { stickyHeader: [{
417
+ type: Input
418
+ }], container: [{
419
+ type: Input
89
420
  }] } });
90
421
 
91
- class SolarisSuffixDirective {
92
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
93
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisSuffixDirective, isStandalone: true, selector: "[solaris-suffix]", ngImport: i0 });
422
+ class SolarisPageHeaderDescriptionDirective {
423
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageHeaderDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
424
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisPageHeaderDescriptionDirective, isStandalone: true, selector: "[solaris-page-header-description]", ngImport: i0 });
94
425
  }
95
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisSuffixDirective, decorators: [{
426
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageHeaderDescriptionDirective, decorators: [{
96
427
  type: Directive,
97
428
  args: [{
98
- selector: '[solaris-suffix]',
99
- standalone: true
429
+ selector: '[solaris-page-header-description]',
430
+ standalone: true,
100
431
  }]
101
432
  }] });
102
433
 
103
- const SOLARIS_FORM_FIELD_CONTROLLER = new InjectionToken('SOLARIS_FORM_FIELD_CONTROLLER');
434
+ class SolarisPageHeaderBreadcrumbDirective {
435
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageHeaderBreadcrumbDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
436
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisPageHeaderBreadcrumbDirective, isStandalone: true, selector: "[solaris-page-header-breadcrumb]", ngImport: i0 });
437
+ }
438
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageHeaderBreadcrumbDirective, decorators: [{
439
+ type: Directive,
440
+ args: [{
441
+ selector: '[solaris-page-header-breadcrumb]',
442
+ standalone: true,
443
+ }]
444
+ }] });
104
445
 
105
- class FieldErrorComponent {
106
- text;
107
- textKey;
108
- textParams;
109
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FieldErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
110
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: FieldErrorComponent, isStandalone: true, selector: "solaris-field-error", inputs: { text: "text", textKey: "textKey", textParams: "textParams" }, ngImport: i0, template: "<div class=\"solaris-field-error\" role=\"alert\" aria-live=\"polite\">\r\n <span class=\"solaris-field-error__text\">\r\n @if (textKey) { {{ textKey | translate:textParams }} }\r\n @else { {{ text }} }\r\n </span>\r\n</div>\r\n", styles: [".solaris-field-error{line-height:1.25;padding-left:.5rem;font-size:var(--solaris-fs-10);color:var(--solaris-color-error)}\n"], dependencies: [{ kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
446
+ class SolarisPageHeaderTitleDirective {
447
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageHeaderTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
448
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisPageHeaderTitleDirective, isStandalone: true, selector: "[solaris-page-header-title]", ngImport: i0 });
111
449
  }
112
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FieldErrorComponent, decorators: [{
450
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageHeaderTitleDirective, decorators: [{
451
+ type: Directive,
452
+ args: [{
453
+ selector: '[solaris-page-header-title]',
454
+ standalone: true,
455
+ }]
456
+ }] });
457
+
458
+ class SolarisPageHeaderTitle {
459
+ title = '';
460
+ overline;
461
+ description;
462
+ size = 'lg';
463
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageHeaderTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
464
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisPageHeaderTitle, isStandalone: true, selector: "solaris-page-header-title", inputs: { title: "title", overline: "overline", description: "description", size: "size" }, ngImport: i0, template: "<div class=\"solaris-page-title\" [ngClass]=\"['size-' + size]\">\r\n @if (overline) {\r\n <div class=\"solaris-page-title__overline\">{{ overline }}</div>\r\n }\r\n\r\n <h1 class=\"solaris-page-title__title\">{{ title }}</h1>\r\n\r\n @if (description) {\r\n <p class=\"solaris-page-title__description\">{{ description }}</p>\r\n }\r\n</div>\r\n", styles: [".solaris-page-title{--solaris-page-title-gap: var(--solaris-space-2);min-width:0;display:flex;flex-direction:column;gap:var(--solaris-page-title-gap)}.solaris-page-title__overline{text-transform:uppercase;font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-normal);letter-spacing:var(--solaris-ls-md);color:var(--solaris-color-text-muted)}.solaris-page-title__title{margin:0;color:var(--solaris-color-text);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight);min-width:0}.solaris-page-title__description{margin:0;min-width:0;font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text-muted)}.solaris-page-title.size-lg .solaris-page-title__title{font-size:var(--solaris-h-2)}.solaris-page-title.size-md .solaris-page-title__title{font-size:var(--solaris-h-4)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
465
+ }
466
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageHeaderTitle, decorators: [{
113
467
  type: Component,
114
- args: [{ selector: 'solaris-field-error', standalone: true, imports: [SolarisTranslationPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-field-error\" role=\"alert\" aria-live=\"polite\">\r\n <span class=\"solaris-field-error__text\">\r\n @if (textKey) { {{ textKey | translate:textParams }} }\r\n @else { {{ text }} }\r\n </span>\r\n</div>\r\n", styles: [".solaris-field-error{line-height:1.25;padding-left:.5rem;font-size:var(--solaris-fs-10);color:var(--solaris-color-error)}\n"] }]
115
- }], propDecorators: { text: [{
468
+ args: [{ selector: 'solaris-page-header-title', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-page-title\" [ngClass]=\"['size-' + size]\">\r\n @if (overline) {\r\n <div class=\"solaris-page-title__overline\">{{ overline }}</div>\r\n }\r\n\r\n <h1 class=\"solaris-page-title__title\">{{ title }}</h1>\r\n\r\n @if (description) {\r\n <p class=\"solaris-page-title__description\">{{ description }}</p>\r\n }\r\n</div>\r\n", styles: [".solaris-page-title{--solaris-page-title-gap: var(--solaris-space-2);min-width:0;display:flex;flex-direction:column;gap:var(--solaris-page-title-gap)}.solaris-page-title__overline{text-transform:uppercase;font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-normal);letter-spacing:var(--solaris-ls-md);color:var(--solaris-color-text-muted)}.solaris-page-title__title{margin:0;color:var(--solaris-color-text);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight);min-width:0}.solaris-page-title__description{margin:0;min-width:0;font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text-muted)}.solaris-page-title.size-lg .solaris-page-title__title{font-size:var(--solaris-h-2)}.solaris-page-title.size-md .solaris-page-title__title{font-size:var(--solaris-h-4)}\n"] }]
469
+ }], propDecorators: { title: [{
116
470
  type: Input
117
- }], textKey: [{
471
+ }], overline: [{
118
472
  type: Input
119
- }], textParams: [{
473
+ }], description: [{
474
+ type: Input
475
+ }], size: [{
120
476
  type: Input
121
477
  }] } });
122
478
 
123
- class PasswordToggle {
124
- solarisSuffix = '';
125
- field = inject(SOLARIS_FORM_FIELD_CONTROLLER, { optional: true });
126
- visible = () => this.field?.passwordVisible() ?? false;
127
- toggle() {
128
- this.field?.togglePasswordVisibility();
129
- }
130
- get ariaLabelHide() { return 'Hide password'; }
131
- get ariaLabelShow() { return 'Show password'; }
132
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PasswordToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
133
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: PasswordToggle, isStandalone: true, selector: "solaris-password-toggle", host: { properties: { "attr.solaris-suffix": "this.solarisSuffix" } }, ngImport: i0, template: "<button class=\"solaris-password-toggle\" type=\"button\" (click)=\"toggle()\" [attr.aria-pressed]=\"visible() ? 'true' : 'false'\"\r\n [attr.aria-label]=\"visible() ? ariaLabelHide : ariaLabelShow\">\r\n @if (visible()) { <i class=\"ph ph-eye-slash\"></i> }\r\n @else { <i class=\"ph ph-eye\"></i> }\r\n</button>\r\n", styles: [".solaris-password-toggle{border:0;opacity:.6;display:grid;width:3.8rem;height:3.8rem;cursor:pointer;place-items:center;background:transparent;color:var(--solaris-color-text-muted);transition:opacity .16s ease,filter .16s ease}.solaris-password-toggle:hover,.solaris-password-toggle:focus-visible{opacity:1;filter:brightness(1.1)}.solaris-password-toggle:focus-visible{outline-offset:.2rem;border-radius:var(--solaris-radius-md);outline:.2rem solid color-mix(in srgb,var(--solaris-color-primary) 35%,transparent)}.solaris-password-toggle i.ph{font-size:var(--solaris-fs-14)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
479
+ class SolarisPageHeaderActionsDirective {
480
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageHeaderActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
481
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisPageHeaderActionsDirective, isStandalone: true, selector: "[solaris-page-header-actions]", ngImport: i0 });
134
482
  }
135
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PasswordToggle, decorators: [{
483
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageHeaderActionsDirective, decorators: [{
484
+ type: Directive,
485
+ args: [{
486
+ selector: '[solaris-page-header-actions]',
487
+ standalone: true,
488
+ }]
489
+ }] });
490
+
491
+ class SolarisPageHeader {
492
+ layout = 'split';
493
+ density = 'md';
494
+ titleSlot;
495
+ actionsSlot;
496
+ breadcrumbSlot;
497
+ descriptionSlot;
498
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
499
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: SolarisPageHeader, isStandalone: true, selector: "solaris-page-header", inputs: { layout: "layout", density: "density" }, queries: [{ propertyName: "titleSlot", first: true, predicate: SolarisPageHeaderTitleDirective, descendants: true }, { propertyName: "actionsSlot", first: true, predicate: SolarisPageHeaderActionsDirective, descendants: true }, { propertyName: "breadcrumbSlot", first: true, predicate: SolarisPageHeaderBreadcrumbDirective, descendants: true }, { propertyName: "descriptionSlot", first: true, predicate: SolarisPageHeaderDescriptionDirective, descendants: true }], ngImport: i0, template: "<header class=\"solaris-page-header\" [ngClass]=\"['layout-' + layout, 'density-' + density]\">\r\n <div class=\"solaris-page-header__left\">\r\n <div class=\"solaris-page-header__breadcrumb\">\r\n <ng-content select=\"[solaris-page-header-breadcrumb]\" />\r\n </div>\r\n\r\n <div class=\"solaris-page-header__titles\">\r\n <div class=\"solaris-page-header__title-row\">\r\n <h1 class=\"solaris-page-header__title\">\r\n <span class=\"solaris-page-header__title-slot\">\r\n <ng-content select=\"[solaris-page-header-title]\" />\r\n </span>\r\n\r\n <span class=\"solaris-page-header__title-meta\">\r\n <ng-content select=\"[solaris-page-header-title-meta]\" />\r\n </span>\r\n </h1>\r\n\r\n <div class=\"solaris-page-header__title-meta\">\r\n <ng-content select=\"[solaris-page-header-title-meta]\" />\r\n </div>\r\n </div>\r\n\r\n <p class=\"solaris-page-header__description\">\r\n <ng-content select=\"[solaris-page-header-description]\" />\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"solaris-page-header__actions\">\r\n <ng-content select=\"[solaris-page-header-actions]\" />\r\n </div>\r\n</header>\r\n", styles: [".solaris-page-header{--solaris-page-header-gap: var(--solaris-space-6);--solaris-page-header-left-gap: var(--solaris-space-3);--solaris-page-header-title-gap: var(--solaris-space-2);min-width:0;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-page-header-gap)}.solaris-page-header__breadcrumb:empty,.solaris-page-header__actions:empty,.solaris-page-header__title:empty,.solaris-page-header__description:empty{display:none}.solaris-page-header.density-sm{--solaris-page-header-gap: var(--solaris-space-4);--solaris-page-header-left-gap: var(--solaris-space-2)}.solaris-page-header.density-md{--solaris-page-header-gap: var(--solaris-space-6);--solaris-page-header-left-gap: var(--solaris-space-3)}.solaris-page-header.density-lg{--solaris-page-header-gap: var(--solaris-space-8);--solaris-page-header-left-gap: var(--solaris-space-12)}.solaris-page-header.layout-stacked{align-items:stretch;flex-direction:column}.solaris-page-header__left{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-space-8)}.solaris-page-header__breadcrumb{min-width:0}.solaris-page-header__titles{min-width:0;display:flex;flex-direction:column;gap:var(--solaris-page-header-title-gap)}.solaris-page-header__title{margin:0;min-width:0;display:flex;align-items:center;gap:var(--solaris-space-3);font-size:var(--solaris-h-2);color:var(--solaris-color-text);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight)}.solaris-page-header__title-slot{min-width:0;display:inline-flex;align-items:center;gap:var(--solaris-space-3)}.solaris-page-header__title-content{min-width:0;align-items:center;display:inline-flex;gap:var(--solaris-space-3)}.solaris-page-header__title-content>[solaris-page-header-title]{display:inline-flex;align-items:center;gap:var(--solaris-space-3);min-width:0}.solaris-page-header__title-content solaris-badge{align-self:center}.solaris-page-header__description{margin:0;min-width:0;font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text-muted)}.solaris-page-header__actions{display:flex;flex:0 0 auto;align-items:center;gap:var(--solaris-space-3)}@media(max-width:64rem){.solaris-page-header.layout-split{align-items:stretch;flex-direction:column}.solaris-page-header__actions{justify-content:flex-start}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
500
+ }
501
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageHeader, decorators: [{
136
502
  type: Component,
137
- args: [{ selector: 'solaris-password-toggle', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"solaris-password-toggle\" type=\"button\" (click)=\"toggle()\" [attr.aria-pressed]=\"visible() ? 'true' : 'false'\"\r\n [attr.aria-label]=\"visible() ? ariaLabelHide : ariaLabelShow\">\r\n @if (visible()) { <i class=\"ph ph-eye-slash\"></i> }\r\n @else { <i class=\"ph ph-eye\"></i> }\r\n</button>\r\n", styles: [".solaris-password-toggle{border:0;opacity:.6;display:grid;width:3.8rem;height:3.8rem;cursor:pointer;place-items:center;background:transparent;color:var(--solaris-color-text-muted);transition:opacity .16s ease,filter .16s ease}.solaris-password-toggle:hover,.solaris-password-toggle:focus-visible{opacity:1;filter:brightness(1.1)}.solaris-password-toggle:focus-visible{outline-offset:.2rem;border-radius:var(--solaris-radius-md);outline:.2rem solid color-mix(in srgb,var(--solaris-color-primary) 35%,transparent)}.solaris-password-toggle i.ph{font-size:var(--solaris-fs-14)}\n"] }]
138
- }], propDecorators: { solarisSuffix: [{
503
+ args: [{ selector: 'solaris-page-header', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"solaris-page-header\" [ngClass]=\"['layout-' + layout, 'density-' + density]\">\r\n <div class=\"solaris-page-header__left\">\r\n <div class=\"solaris-page-header__breadcrumb\">\r\n <ng-content select=\"[solaris-page-header-breadcrumb]\" />\r\n </div>\r\n\r\n <div class=\"solaris-page-header__titles\">\r\n <div class=\"solaris-page-header__title-row\">\r\n <h1 class=\"solaris-page-header__title\">\r\n <span class=\"solaris-page-header__title-slot\">\r\n <ng-content select=\"[solaris-page-header-title]\" />\r\n </span>\r\n\r\n <span class=\"solaris-page-header__title-meta\">\r\n <ng-content select=\"[solaris-page-header-title-meta]\" />\r\n </span>\r\n </h1>\r\n\r\n <div class=\"solaris-page-header__title-meta\">\r\n <ng-content select=\"[solaris-page-header-title-meta]\" />\r\n </div>\r\n </div>\r\n\r\n <p class=\"solaris-page-header__description\">\r\n <ng-content select=\"[solaris-page-header-description]\" />\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"solaris-page-header__actions\">\r\n <ng-content select=\"[solaris-page-header-actions]\" />\r\n </div>\r\n</header>\r\n", styles: [".solaris-page-header{--solaris-page-header-gap: var(--solaris-space-6);--solaris-page-header-left-gap: var(--solaris-space-3);--solaris-page-header-title-gap: var(--solaris-space-2);min-width:0;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-page-header-gap)}.solaris-page-header__breadcrumb:empty,.solaris-page-header__actions:empty,.solaris-page-header__title:empty,.solaris-page-header__description:empty{display:none}.solaris-page-header.density-sm{--solaris-page-header-gap: var(--solaris-space-4);--solaris-page-header-left-gap: var(--solaris-space-2)}.solaris-page-header.density-md{--solaris-page-header-gap: var(--solaris-space-6);--solaris-page-header-left-gap: var(--solaris-space-3)}.solaris-page-header.density-lg{--solaris-page-header-gap: var(--solaris-space-8);--solaris-page-header-left-gap: var(--solaris-space-12)}.solaris-page-header.layout-stacked{align-items:stretch;flex-direction:column}.solaris-page-header__left{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-space-8)}.solaris-page-header__breadcrumb{min-width:0}.solaris-page-header__titles{min-width:0;display:flex;flex-direction:column;gap:var(--solaris-page-header-title-gap)}.solaris-page-header__title{margin:0;min-width:0;display:flex;align-items:center;gap:var(--solaris-space-3);font-size:var(--solaris-h-2);color:var(--solaris-color-text);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight)}.solaris-page-header__title-slot{min-width:0;display:inline-flex;align-items:center;gap:var(--solaris-space-3)}.solaris-page-header__title-content{min-width:0;align-items:center;display:inline-flex;gap:var(--solaris-space-3)}.solaris-page-header__title-content>[solaris-page-header-title]{display:inline-flex;align-items:center;gap:var(--solaris-space-3);min-width:0}.solaris-page-header__title-content solaris-badge{align-self:center}.solaris-page-header__description{margin:0;min-width:0;font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text-muted)}.solaris-page-header__actions{display:flex;flex:0 0 auto;align-items:center;gap:var(--solaris-space-3)}@media(max-width:64rem){.solaris-page-header.layout-split{align-items:stretch;flex-direction:column}.solaris-page-header__actions{justify-content:flex-start}}\n"] }]
504
+ }], propDecorators: { layout: [{
505
+ type: Input
506
+ }], density: [{
507
+ type: Input
508
+ }], titleSlot: [{
509
+ type: ContentChild,
510
+ args: [SolarisPageHeaderTitleDirective]
511
+ }], actionsSlot: [{
512
+ type: ContentChild,
513
+ args: [SolarisPageHeaderActionsDirective]
514
+ }], breadcrumbSlot: [{
515
+ type: ContentChild,
516
+ args: [SolarisPageHeaderBreadcrumbDirective]
517
+ }], descriptionSlot: [{
518
+ type: ContentChild,
519
+ args: [SolarisPageHeaderDescriptionDirective]
520
+ }] } });
521
+
522
+ class SolarisButtonGroupDirective {
523
+ attr = '';
524
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisButtonGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
525
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisButtonGroupDirective, isStandalone: true, selector: "[solaris-button-group]", host: { properties: { "attr.solaris-button-group": "this.attr" } }, ngImport: i0 });
526
+ }
527
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisButtonGroupDirective, decorators: [{
528
+ type: Directive,
529
+ args: [{
530
+ selector: '[solaris-button-group]',
531
+ standalone: true,
532
+ }]
533
+ }], propDecorators: { attr: [{
139
534
  type: HostBinding,
140
- args: ['attr.solaris-suffix']
141
- }], field: [{
142
- type: Optional
535
+ args: ['attr.solaris-button-group']
143
536
  }] } });
144
537
 
145
- class FormField {
146
- field = inject(SolarisFormFieldController);
147
- prefix;
148
- suffix;
149
- hint = '';
150
- label = '';
151
- hintKey = '';
152
- labelKey = '';
153
- invalid = null;
154
- showErrors = 'dirtyOrTouched';
155
- get hasPrefix() { return !!this.prefix; }
156
- get hasSuffix() { return !!this.suffix; }
157
- getDirectErrorKey(errors) {
158
- if (errors['required'])
159
- return 'ui.solaris.validation.required';
160
- if (errors['email'] || errors['solarisEmail'])
161
- return 'ui.solaris.validation.email';
162
- return '';
538
+ class SolarisButtonDirective {
539
+ el = inject((ElementRef));
540
+ isAnchor = computed(() => this.el.nativeElement.tagName.toLowerCase() === 'a', ...(ngDevMode ? [{ debugName: "isAnchor" }] : []));
541
+ _loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
542
+ _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
543
+ _iconOnly = signal(false, ...(ngDevMode ? [{ debugName: "_iconOnly" }] : []));
544
+ _fullWidth = signal(false, ...(ngDevMode ? [{ debugName: "_fullWidth" }] : []));
545
+ _size = signal('md', ...(ngDevMode ? [{ debugName: "_size" }] : []));
546
+ _color = signal('primary', ...(ngDevMode ? [{ debugName: "_color" }] : []));
547
+ _variant = signal('solid', ...(ngDevMode ? [{ debugName: "_variant" }] : []));
548
+ set size(v) { if (v)
549
+ this._size.set(v); }
550
+ set color(v) { if (v)
551
+ this._color.set(v); }
552
+ set fullWidth(v) {
553
+ this._fullWidth.set(v);
163
554
  }
164
- getPasswordErrorKey(bag) {
165
- if (bag?.minLength)
166
- return 'ui.solaris.validation.password.minLength';
167
- if (bag?.uppercase)
168
- return 'ui.solaris.validation.password.uppercase';
169
- if (bag?.lowercase)
170
- return 'ui.solaris.validation.password.lowercase';
171
- if (bag?.number)
172
- return 'ui.solaris.validation.password.number';
173
- if (bag?.special)
174
- return 'ui.solaris.validation.password.special';
175
- return 'ui.solaris.validation.password.invalid';
555
+ set variant(v) { if (v)
556
+ this._variant.set(v); }
557
+ set loading(v) { this._loading.set(v); }
558
+ set disabled(v) { this._disabled.set(v); }
559
+ set iconOnly(v) { this._iconOnly.set(v); }
560
+ get tabIndex() {
561
+ return this.isAnchor() && (this._disabled() || this._loading()) ? -1 : null;
176
562
  }
177
- showPasswordToggle = computed(() => !!this.field.password(), ...(ngDevMode ? [{ debugName: "showPasswordToggle" }] : []));
178
- errorParams = computed(() => {
179
- if (!this.invalidComputed())
180
- return undefined;
181
- const errors = this.field.control()?.errors;
182
- if (!errors)
183
- return undefined;
184
- const bag = errors['solarisPassword'];
185
- if (bag?.minLength)
186
- return { requiredLength: bag.minLength.requiredLength };
187
- return undefined;
188
- }, ...(ngDevMode ? [{ debugName: "errorParams" }] : []));
189
- invalidComputed = computed(() => {
190
- if (this.invalid !== null)
191
- return this.invalid;
192
- const c = this.field.control();
193
- if (!c)
194
- return false;
195
- if (this.showErrors === 'always')
196
- return !!c.invalid;
197
- if (this.showErrors === 'submitted')
198
- return !!(c.invalid && this.field.submitted());
199
- return !!(c.invalid && (c.touched || c.dirty));
200
- }, ...(ngDevMode ? [{ debugName: "invalidComputed" }] : []));
201
- errorKey = computed(() => {
202
- if (!this.invalidComputed())
203
- return '';
204
- const c = this.field.control();
205
- console.log('status', c?.status, 'errors', c?.errors, 'value', c?.value);
206
- const errors = this.field.control()?.errors;
207
- if (!errors)
208
- return '';
209
- const direct = this.getDirectErrorKey(errors);
210
- if (direct)
211
- return direct;
212
- if (errors['solarisPassword'])
213
- return this.getPasswordErrorKey(errors['solarisPassword']);
214
- return 'solaris.validation.invalid';
215
- }, ...(ngDevMode ? [{ debugName: "errorKey" }] : []));
216
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
217
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: FormField, isStandalone: true, selector: "solaris-form-field", inputs: { hint: "hint", label: "label", hintKey: "hintKey", labelKey: "labelKey", invalid: "invalid", showErrors: "showErrors" }, providers: [
218
- SolarisFormFieldController,
219
- { provide: SOLARIS_FORM_FIELD_CONTROLLER, useExisting: SolarisFormFieldController }
220
- ], queries: [{ propertyName: "prefix", first: true, predicate: SolarisPrefixDirective, descendants: true }, { propertyName: "suffix", first: true, predicate: SolarisSuffixDirective, descendants: true }], ngImport: i0, template: "<div class=\"solaris-form-field\" [class.solaris-form-field--has-prefix]=\"hasPrefix\"\r\n [attr.data-invalid]=\"invalidComputed() ? 'true' : null\">\r\n @if ((label || labelKey)) {\r\n <label class=\"solaris-form-field__label\">\r\n @if (labelKey) { {{ labelKey | translate }} }\r\n @else if (label) { {{ label }} }\r\n </label>\r\n }\r\n\r\n <div class=\"solaris-form-field__frame\">\r\n @if (hasPrefix) {\r\n <span class=\"solaris-form-field__prefix\" aria-hidden=\"true\">\r\n <ng-content select=\"[solaris-prefix]\"></ng-content>\r\n </span>\r\n }\r\n\r\n <div class=\"solaris-form-field__body\">\r\n <div class=\"solaris-form-field__control-slot\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n @if (hasSuffix || showPasswordToggle() || invalidComputed()) {\r\n <span class=\"solaris-form-field__suffix\">\r\n <ng-content select=\"[solaris-suffix]\"></ng-content>\r\n\r\n @if (showPasswordToggle()) {\r\n <solaris-password-toggle></solaris-password-toggle>\r\n }\r\n\r\n @if (invalidComputed()) {\r\n <span class=\"solaris-form-field__status\" aria-hidden=\"true\">\r\n <i class=\"ph ph-warning-circle\"></i>\r\n </span>\r\n }\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (errorKey()) {\r\n <solaris-field-error [textKey]=\"errorKey()\" [textParams]=\"errorParams()\"></solaris-field-error>\r\n } @else {\r\n <ng-content select=\"[form-field-message]\"></ng-content>\r\n }\r\n\r\n @if (hint || hintKey) {\r\n <div class=\"solaris-form-field__hint\">\r\n @if (hintKey) { {{ hintKey | translate }} }\r\n @else { {{ hint }} }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".solaris-form-field{display:grid;gap:var(--solaris-space-2)}.solaris-form-field__label{font-weight:600;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);margin-left:var(--solaris-space-1)}.solaris-form-field__frame{display:grid;min-height:3.8rem;align-items:stretch;grid-template-columns:1fr;border-radius:var(--solaris-radius-sm);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border);transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease}.solaris-form-field--has-prefix .solaris-form-field__frame{grid-template-columns:3.8rem 1fr}.solaris-form-field__prefix{opacity:.5;display:grid;width:3.8rem;line-height:0;place-items:center;font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted);transition:opacity .3s ease,filter .3s ease;border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-form-field__frame:hover .solaris-form-field__prefix,.solaris-form-field__frame:focus-within .solaris-form-field__prefix{opacity:1;filter:brightness(1.05)}.solaris-form-field__prefix :is(i,svg,[solarisPrefixIcon]){display:block;line-height:1}.solaris-form-field__prefix i.ph{opacity:.6;font-size:1.9rem}.solaris-form-field__prefix svg{width:1.9rem;height:1.9rem}.solaris-form-field__body{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;position:relative;padding-left:var(--solaris-space-3);padding-right:0}.solaris-form-field__control-slot{width:100%;min-width:0;display:flex;align-items:center;flex:1 1 auto}.solaris-form-field__control-slot>*{flex:1 1 0;min-width:0;width:100%}.solaris-form-field__control-slot :is(input,textarea){margin:0;border:0;outline:none;width:100%;min-width:0;padding:.9rem 0;background:transparent;font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text)}.solaris-form-field__control-slot :is(input,textarea)::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-form-field__suffix{display:inline-flex;align-items:center;justify-content:center;padding-right:var(--solaris-space-3);gap:var(--solaris-space-2)}.solaris-form-field__suffix :is(button,a){align-self:stretch;display:inline-flex;align-items:center;height:3.6rem}.solaris-form-field__status{width:3.8rem;height:3.8rem;display:grid;place-items:center;color:var(--solaris-color-error);opacity:.95}.solaris-form-field__status i.ph{font-size:1.9rem;line-height:1}.solaris-form-field__hint{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-form-field__frame:has(:is(input,textarea)[disabled]){opacity:.45}.solaris-form-field__frame:has(:is(input,textarea)[disabled]) .solaris-form-field__prefix,.solaris-form-field__frame:has(:is(input,textarea)[disabled]) :is(.solaris-form-field__label,.solaris-form-field__hint){color:var(--solaris-color-text-muted)}.solaris-form-field__frame:has(:focus-visible){box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-primary) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame{box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-error) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame:focus-within{border-color:color-mix(in srgb,var(--solaris-color-error) 80%,var(--solaris-color-border));box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 16%,transparent)}.solaris-form-field[data-invalid=true] .solaris-form-field__prefix{border-right-color:color-mix(in srgb,var(--solaris-color-error) 30%,var(--solaris-color-border));color:color-mix(in srgb,var(--solaris-color-error) 75%,var(--solaris-color-text-muted))}.solaris-form-field[data-invalid=true] .solaris-form-field__control-slot :is(input,textarea)::placeholder{color:color-mix(in srgb,var(--solaris-color-error) 45%,var(--solaris-color-text-muted))}\n"], dependencies: [{ kind: "component", type: PasswordToggle, selector: "solaris-password-toggle" }, { kind: "component", type: FieldErrorComponent, selector: "solaris-field-error", inputs: ["text", "textKey", "textParams"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
563
+ get nativeDisabled() {
564
+ const isButton = !this.isAnchor();
565
+ return isButton && (this._disabled() || this._loading()) ? '' : null;
566
+ }
567
+ attr = '';
568
+ get ariaDisabled() {
569
+ return this.isAnchor() && (this._disabled() || this._loading()) ? 'true' : null;
570
+ }
571
+ get dataSize() { return this._size(); }
572
+ get dataColor() { return this._color(); }
573
+ get dataVariant() { return this._variant(); }
574
+ get ariaBusy() { return this._loading() ? 'true' : null; }
575
+ get dataIconOnly() { return this._iconOnly() ? 'true' : null; }
576
+ get dataFullWidth() { return this._fullWidth() ? 'true' : null; }
577
+ onClick(ev) {
578
+ if (!this.isAnchor())
579
+ return;
580
+ if (this._disabled() || this._loading()) {
581
+ ev.preventDefault();
582
+ ev.stopImmediatePropagation();
583
+ }
584
+ }
585
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
586
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.1", type: SolarisButtonDirective, isStandalone: true, selector: "button[solaris-button], a[solaris-button]", inputs: { size: "size", color: "color", fullWidth: ["fullWidth", "fullWidth", booleanAttribute], variant: "variant", loading: ["loading", "loading", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], iconOnly: ["iconOnly", "iconOnly", booleanAttribute] }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.tabindex": "this.tabIndex", "attr.disabled": "this.nativeDisabled", "attr.solaris-button": "this.attr", "attr.aria-disabled": "this.ariaDisabled", "attr.data-size": "this.dataSize", "attr.data-color": "this.dataColor", "attr.data-variant": "this.dataVariant", "attr.aria-busy": "this.ariaBusy", "attr.data-icon-only": "this.dataIconOnly", "attr.data-full-width": "this.dataFullWidth" } }, ngImport: i0 });
221
587
  }
222
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormField, decorators: [{
223
- type: Component,
224
- args: [{ selector: 'solaris-form-field', standalone: true, imports: [
225
- PasswordToggle,
226
- FieldErrorComponent,
227
- SolarisTranslationPipe
228
- ], providers: [
229
- SolarisFormFieldController,
230
- { provide: SOLARIS_FORM_FIELD_CONTROLLER, useExisting: SolarisFormFieldController }
231
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-form-field\" [class.solaris-form-field--has-prefix]=\"hasPrefix\"\r\n [attr.data-invalid]=\"invalidComputed() ? 'true' : null\">\r\n @if ((label || labelKey)) {\r\n <label class=\"solaris-form-field__label\">\r\n @if (labelKey) { {{ labelKey | translate }} }\r\n @else if (label) { {{ label }} }\r\n </label>\r\n }\r\n\r\n <div class=\"solaris-form-field__frame\">\r\n @if (hasPrefix) {\r\n <span class=\"solaris-form-field__prefix\" aria-hidden=\"true\">\r\n <ng-content select=\"[solaris-prefix]\"></ng-content>\r\n </span>\r\n }\r\n\r\n <div class=\"solaris-form-field__body\">\r\n <div class=\"solaris-form-field__control-slot\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n @if (hasSuffix || showPasswordToggle() || invalidComputed()) {\r\n <span class=\"solaris-form-field__suffix\">\r\n <ng-content select=\"[solaris-suffix]\"></ng-content>\r\n\r\n @if (showPasswordToggle()) {\r\n <solaris-password-toggle></solaris-password-toggle>\r\n }\r\n\r\n @if (invalidComputed()) {\r\n <span class=\"solaris-form-field__status\" aria-hidden=\"true\">\r\n <i class=\"ph ph-warning-circle\"></i>\r\n </span>\r\n }\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (errorKey()) {\r\n <solaris-field-error [textKey]=\"errorKey()\" [textParams]=\"errorParams()\"></solaris-field-error>\r\n } @else {\r\n <ng-content select=\"[form-field-message]\"></ng-content>\r\n }\r\n\r\n @if (hint || hintKey) {\r\n <div class=\"solaris-form-field__hint\">\r\n @if (hintKey) { {{ hintKey | translate }} }\r\n @else { {{ hint }} }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".solaris-form-field{display:grid;gap:var(--solaris-space-2)}.solaris-form-field__label{font-weight:600;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);margin-left:var(--solaris-space-1)}.solaris-form-field__frame{display:grid;min-height:3.8rem;align-items:stretch;grid-template-columns:1fr;border-radius:var(--solaris-radius-sm);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border);transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease}.solaris-form-field--has-prefix .solaris-form-field__frame{grid-template-columns:3.8rem 1fr}.solaris-form-field__prefix{opacity:.5;display:grid;width:3.8rem;line-height:0;place-items:center;font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted);transition:opacity .3s ease,filter .3s ease;border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-form-field__frame:hover .solaris-form-field__prefix,.solaris-form-field__frame:focus-within .solaris-form-field__prefix{opacity:1;filter:brightness(1.05)}.solaris-form-field__prefix :is(i,svg,[solarisPrefixIcon]){display:block;line-height:1}.solaris-form-field__prefix i.ph{opacity:.6;font-size:1.9rem}.solaris-form-field__prefix svg{width:1.9rem;height:1.9rem}.solaris-form-field__body{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;position:relative;padding-left:var(--solaris-space-3);padding-right:0}.solaris-form-field__control-slot{width:100%;min-width:0;display:flex;align-items:center;flex:1 1 auto}.solaris-form-field__control-slot>*{flex:1 1 0;min-width:0;width:100%}.solaris-form-field__control-slot :is(input,textarea){margin:0;border:0;outline:none;width:100%;min-width:0;padding:.9rem 0;background:transparent;font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text)}.solaris-form-field__control-slot :is(input,textarea)::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-form-field__suffix{display:inline-flex;align-items:center;justify-content:center;padding-right:var(--solaris-space-3);gap:var(--solaris-space-2)}.solaris-form-field__suffix :is(button,a){align-self:stretch;display:inline-flex;align-items:center;height:3.6rem}.solaris-form-field__status{width:3.8rem;height:3.8rem;display:grid;place-items:center;color:var(--solaris-color-error);opacity:.95}.solaris-form-field__status i.ph{font-size:1.9rem;line-height:1}.solaris-form-field__hint{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-form-field__frame:has(:is(input,textarea)[disabled]){opacity:.45}.solaris-form-field__frame:has(:is(input,textarea)[disabled]) .solaris-form-field__prefix,.solaris-form-field__frame:has(:is(input,textarea)[disabled]) :is(.solaris-form-field__label,.solaris-form-field__hint){color:var(--solaris-color-text-muted)}.solaris-form-field__frame:has(:focus-visible){box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-primary) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame{box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-error) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame:focus-within{border-color:color-mix(in srgb,var(--solaris-color-error) 80%,var(--solaris-color-border));box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 16%,transparent)}.solaris-form-field[data-invalid=true] .solaris-form-field__prefix{border-right-color:color-mix(in srgb,var(--solaris-color-error) 30%,var(--solaris-color-border));color:color-mix(in srgb,var(--solaris-color-error) 75%,var(--solaris-color-text-muted))}.solaris-form-field[data-invalid=true] .solaris-form-field__control-slot :is(input,textarea)::placeholder{color:color-mix(in srgb,var(--solaris-color-error) 45%,var(--solaris-color-text-muted))}\n"] }]
232
- }], propDecorators: { prefix: [{
233
- type: ContentChild,
234
- args: [SolarisPrefixDirective]
235
- }], suffix: [{
236
- type: ContentChild,
237
- args: [SolarisSuffixDirective]
238
- }], hint: [{
239
- type: Input
240
- }], label: [{
588
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisButtonDirective, decorators: [{
589
+ type: Directive,
590
+ args: [{
591
+ selector: 'button[solaris-button], a[solaris-button]',
592
+ standalone: true,
593
+ }]
594
+ }], propDecorators: { size: [{
241
595
  type: Input
242
- }], hintKey: [{
596
+ }], color: [{
243
597
  type: Input
244
- }], labelKey: [{
598
+ }], fullWidth: [{
599
+ type: Input,
600
+ args: [{ transform: booleanAttribute }]
601
+ }], variant: [{
245
602
  type: Input
246
- }], invalid: [{
603
+ }], loading: [{
604
+ type: Input,
605
+ args: [{ transform: booleanAttribute }]
606
+ }], disabled: [{
607
+ type: Input,
608
+ args: [{ transform: booleanAttribute }]
609
+ }], iconOnly: [{
610
+ type: Input,
611
+ args: [{ transform: booleanAttribute }]
612
+ }], tabIndex: [{
613
+ type: HostBinding,
614
+ args: ['attr.tabindex']
615
+ }], nativeDisabled: [{
616
+ type: HostBinding,
617
+ args: ['attr.disabled']
618
+ }], attr: [{
619
+ type: HostBinding,
620
+ args: ['attr.solaris-button']
621
+ }], ariaDisabled: [{
622
+ type: HostBinding,
623
+ args: ['attr.aria-disabled']
624
+ }], dataSize: [{
625
+ type: HostBinding,
626
+ args: ['attr.data-size']
627
+ }], dataColor: [{
628
+ type: HostBinding,
629
+ args: ['attr.data-color']
630
+ }], dataVariant: [{
631
+ type: HostBinding,
632
+ args: ['attr.data-variant']
633
+ }], ariaBusy: [{
634
+ type: HostBinding,
635
+ args: ['attr.aria-busy']
636
+ }], dataIconOnly: [{
637
+ type: HostBinding,
638
+ args: ['attr.data-icon-only']
639
+ }], dataFullWidth: [{
640
+ type: HostBinding,
641
+ args: ['attr.data-full-width']
642
+ }], onClick: [{
643
+ type: HostListener,
644
+ args: ['click', ['$event']]
645
+ }] } });
646
+
647
+ function sanitizePhoneInput(v) {
648
+ let s = (v ?? '').replace(/[^\d+\-\s().]/g, '');
649
+ s = s.replace(/\+/g, (_m, offset) => (offset === 0 ? '+' : ''));
650
+ return s;
651
+ }
652
+ function insertAtCursor(input, text) {
653
+ const start = input.selectionStart ?? input.value.length;
654
+ const end = input.selectionEnd ?? input.value.length;
655
+ input.value = input.value.slice(0, start) + text + input.value.slice(end);
656
+ const pos = start + text.length;
657
+ input.setSelectionRange(pos, pos);
658
+ }
659
+ function enforceMaxDigitsInPlace(input, maxDigits) {
660
+ if (!maxDigits)
661
+ return;
662
+ const v = input.value ?? '';
663
+ const sanitized = sanitizePhoneInput(v);
664
+ const digits = (sanitized.match(/\d/g) ?? []).length;
665
+ if (digits <= maxDigits) {
666
+ if (sanitized !== v)
667
+ input.value = sanitized;
668
+ return;
669
+ }
670
+ let digitCount = 0;
671
+ let out = '';
672
+ for (const ch of sanitized) {
673
+ if (/\d/.test(ch)) {
674
+ if (digitCount >= maxDigits)
675
+ break;
676
+ digitCount++;
677
+ }
678
+ out += ch;
679
+ }
680
+ input.value = out;
681
+ }
682
+ function shouldBlockBeforeInput(ev, cfg) {
683
+ return !!ev.data && !cfg.allowedChars.test(ev.data);
684
+ }
685
+ function shouldBlockKeyDown(ev) {
686
+ if (ev.ctrlKey || ev.metaKey || ev.altKey)
687
+ return false;
688
+ const k = ev.key;
689
+ const allowedControl = [
690
+ 'Backspace', 'Delete', 'Tab', 'Enter', 'Escape',
691
+ 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End',
692
+ ];
693
+ if (allowedControl.includes(k))
694
+ return false;
695
+ if (/^\d$/.test(k))
696
+ return false;
697
+ return !(k === '+' || k === '-' || k === ' ' || k === '(' || k === ')' || k === '.');
698
+ }
699
+
700
+ function buildCallingCodeIndex() {
701
+ const m = new Map();
702
+ for (const c of getCountries()) {
703
+ const code = getCountryCallingCode(c);
704
+ const arr = m.get(code) ?? [];
705
+ arr.push(c.toLowerCase());
706
+ m.set(code, arr);
707
+ }
708
+ return m;
709
+ }
710
+ function pickIso2ForCallingCode(callingCode, selectedIso2, index, preferredCountries) {
711
+ const list = index.get(callingCode) ?? [];
712
+ if (!list.length)
713
+ return null;
714
+ const sel = selectedIso2?.toLowerCase() ?? null;
715
+ if (sel && list.includes(sel))
716
+ return sel;
717
+ if (callingCode === '1') {
718
+ if (list.includes('us'))
719
+ return 'us';
720
+ if (list.includes('ca'))
721
+ return 'ca';
722
+ }
723
+ const preferred = (preferredCountries ?? []).map((x) => x.toLowerCase());
724
+ for (const p of preferred) {
725
+ if (list.includes(p))
726
+ return p;
727
+ }
728
+ return list[0] ?? null;
729
+ }
730
+ function getInitialCountryFromBrowser(fallbackIso2) {
731
+ const lang = globalThis?.navigator?.language ?? '';
732
+ const region = lang.split('-')[1]?.toLowerCase() ?? '';
733
+ return region.length === 2 ? region : fallbackIso2;
734
+ }
735
+
736
+ const SOLARIS_INPUT = new InjectionToken('SOLARIS_INPUT');
737
+
738
+ class InputTextDirective {
739
+ el = inject((ElementRef));
740
+ attr = '';
741
+ get placeholderAttr() {
742
+ return this.el.nativeElement.getAttribute('placeholder');
743
+ }
744
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: InputTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
745
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: InputTextDirective, isStandalone: true, selector: "input[solaris-input],textarea[solaris-input]", host: { properties: { "attr.solaris-input": "this.attr", "attr.placeholder": "this.placeholderAttr" } }, providers: [
746
+ {
747
+ provide: SOLARIS_INPUT,
748
+ useFactory: () => {
749
+ const el = inject((ElementRef)).nativeElement;
750
+ return {
751
+ element: el,
752
+ setType: (type) => {
753
+ if (el instanceof HTMLInputElement)
754
+ el.type = type;
755
+ },
756
+ getType: () => (el instanceof HTMLInputElement ? el.type : 'textarea'),
757
+ };
758
+ },
759
+ },
760
+ ], ngImport: i0 });
761
+ }
762
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: InputTextDirective, decorators: [{
763
+ type: Directive,
764
+ args: [{
765
+ selector: 'input[solaris-input],textarea[solaris-input]',
766
+ standalone: true,
767
+ providers: [
768
+ {
769
+ provide: SOLARIS_INPUT,
770
+ useFactory: () => {
771
+ const el = inject((ElementRef)).nativeElement;
772
+ return {
773
+ element: el,
774
+ setType: (type) => {
775
+ if (el instanceof HTMLInputElement)
776
+ el.type = type;
777
+ },
778
+ getType: () => (el instanceof HTMLInputElement ? el.type : 'textarea'),
779
+ };
780
+ },
781
+ },
782
+ ],
783
+ }]
784
+ }], propDecorators: { attr: [{
785
+ type: HostBinding,
786
+ args: ['attr.solaris-input']
787
+ }], placeholderAttr: [{
788
+ type: HostBinding,
789
+ args: ['attr.placeholder']
790
+ }] } });
791
+
792
+ class SolarisPhoneInput {
793
+ renderer = inject(Renderer2);
794
+ marker = '';
795
+ inputRef;
796
+ set placeholder(v) {
797
+ this._placeholder = v;
798
+ this.applyPlaceholderIfCustom();
799
+ }
800
+ get placeholder() {
801
+ return this._placeholder;
802
+ }
803
+ format = 'e164';
804
+ onlyCountries;
805
+ defaultCountry = 'br';
806
+ preferredCountries;
807
+ _raw = '';
808
+ maxDigits;
809
+ _placeholder;
810
+ _disabled = false;
811
+ iti = null;
812
+ _lastE164 = null;
813
+ allowedChars = /^[0-9+\-\s().]*$/;
814
+ callingCodeIndex = new Map();
815
+ onChange = () => { };
816
+ onTouched = () => { };
817
+ onValidatorChange;
818
+ ngAfterViewInit() {
819
+ const el = this.el;
820
+ if (!el)
821
+ return;
822
+ this.callingCodeIndex = buildCallingCodeIndex();
823
+ this.initIntlTelInput(el);
824
+ this.setupListeners(el);
825
+ if (this._raw)
826
+ el.value = this._raw;
827
+ this.normalizeAndFormat(true);
828
+ this.recalculateLimits();
829
+ this.afterUtilsReady();
830
+ }
831
+ ngOnDestroy() {
832
+ const el = this.el;
833
+ if (el)
834
+ this.teardownListeners(el);
835
+ this.iti?.destroy?.();
836
+ this.iti = null;
837
+ }
838
+ writeValue(value) {
839
+ this._lastE164 = value ?? null;
840
+ const el = this.el;
841
+ if (!el)
842
+ return;
843
+ if (!value) {
844
+ this._raw = '';
845
+ el.value = '';
846
+ this.recomputeFromRaw(true);
847
+ return;
848
+ }
849
+ const iso2 = this.getSelectedIso2();
850
+ const cc = iso2 ? iso2.toUpperCase() : undefined;
851
+ const parsed = parsePhoneNumberFromString(value, cc);
852
+ const next = parsed ? parsed.formatNational() : value;
853
+ this._raw = next;
854
+ el.value = next;
855
+ this.recomputeFromRaw(true);
856
+ }
857
+ registerOnChange(fn) {
858
+ this.onChange = fn;
859
+ }
860
+ registerOnTouched(fn) {
861
+ this.onTouched = fn;
862
+ }
863
+ setDisabledState(isDisabled) {
864
+ this._disabled = isDisabled;
865
+ const el = this.el;
866
+ if (el)
867
+ el.disabled = isDisabled;
868
+ }
869
+ validate() {
870
+ if (!this._raw?.trim())
871
+ return null;
872
+ return this._lastE164 ? null : { solarisPhone: true };
873
+ }
874
+ registerOnValidatorChange(fn) {
875
+ this.onValidatorChange = fn;
876
+ }
877
+ onInput(silent = false) {
878
+ this.normalizeAndFormat(silent);
879
+ }
880
+ onBlur() {
881
+ this.onTouched();
882
+ const el = this.el;
883
+ if (!el)
884
+ return;
885
+ this._raw = el.value ?? '';
886
+ this.recomputeFromRaw(false);
887
+ }
888
+ onFocus() {
889
+ const el = this.el;
890
+ if (!el || this._disabled)
891
+ return;
892
+ if ((el.value ?? '').trim().length)
893
+ return;
894
+ const dial = this.getSelectedDialCode();
895
+ if (!dial)
896
+ return;
897
+ const v = `+${dial} `;
898
+ el.value = v;
899
+ this._raw = v;
900
+ queueMicrotask(() => el.setSelectionRange(v.length, v.length));
901
+ this.recomputeFromRaw(false);
902
+ }
903
+ normalizeAndFormat(silent) {
904
+ const el = this.el;
905
+ if (!el)
906
+ return;
907
+ const raw = sanitizePhoneInput(el.value ?? '');
908
+ const selectedIso2 = this.getSelectedIso2();
909
+ const selectedCountry = selectedIso2 ? selectedIso2.toUpperCase() : undefined;
910
+ const ayt = raw.trim().startsWith('+')
911
+ ? new AsYouType()
912
+ : new AsYouType(selectedCountry);
913
+ const formatted = ayt.input(raw);
914
+ el.value = formatted;
915
+ this._raw = formatted;
916
+ const number = ayt.getNumber();
917
+ if (number?.countryCallingCode && this.iti) {
918
+ const nextIso2 = pickIso2ForCallingCode(number.countryCallingCode, selectedIso2, this.callingCodeIndex, this.preferredCountries);
919
+ if (nextIso2 && nextIso2 !== selectedIso2) {
920
+ this.setCountrySafely(nextIso2);
921
+ }
922
+ }
923
+ enforceMaxDigitsInPlace(el, this.maxDigits);
924
+ this.recomputeFromRaw(silent);
925
+ }
926
+ recomputeFromRaw(silent) {
927
+ const raw = (this._raw ?? '').trim();
928
+ if (!raw) {
929
+ this._lastE164 = null;
930
+ if (!silent)
931
+ this.emit(null);
932
+ return;
933
+ }
934
+ const iso2 = this.getSelectedIso2();
935
+ const cc = iso2 ? iso2.toUpperCase() : undefined;
936
+ const parsed = raw.startsWith('+')
937
+ ? parsePhoneNumberFromString(raw)
938
+ : parsePhoneNumberFromString(raw, cc);
939
+ if (parsed?.isValid()) {
940
+ this._lastE164 = parsed.number;
941
+ if (!silent)
942
+ this.emit(parsed.number);
943
+ return;
944
+ }
945
+ this._lastE164 = null;
946
+ if (!silent)
947
+ this.emit(null);
948
+ }
949
+ emit(v) {
950
+ this.onChange(v);
951
+ this.onValidatorChange?.();
952
+ }
953
+ initIntlTelInput(el) {
954
+ const options = {
955
+ initialCountry: getInitialCountryFromBrowser((this.defaultCountry || 'br').toLowerCase()),
956
+ separateDialCode: false,
957
+ nationalMode: false,
958
+ formatOnDisplay: true,
959
+ autoPlaceholder: 'aggressive',
960
+ loadUtils: () => import('intl-tel-input/build/js/utils.js'),
961
+ };
962
+ const only = this.onlyCountries?.map((x) => x.toLowerCase());
963
+ if (only?.length)
964
+ options['onlyCountries'] = only;
965
+ const preferred = this.preferredCountries?.map((x) => x.toLowerCase());
966
+ if (preferred?.length)
967
+ options['preferredCountries'] = preferred;
968
+ this.iti = intlTelInput(el, options);
969
+ this.applyPlaceholderIfCustom();
970
+ }
971
+ afterUtilsReady() {
972
+ const itiAny = this.iti;
973
+ const p = itiAny?.promise;
974
+ const run = () => {
975
+ const iso2 = this.getSelectedIso2();
976
+ if (iso2)
977
+ this.setCountrySafely(iso2);
978
+ this.recalculateLimits();
979
+ };
980
+ if (p?.then)
981
+ p.then(run);
982
+ else
983
+ queueMicrotask(run);
984
+ }
985
+ setCountrySafely(iso2) {
986
+ try {
987
+ this.iti?.setCountry?.(iso2);
988
+ }
989
+ catch { }
990
+ }
991
+ recalculateLimits() {
992
+ this.updateMaxDigits();
993
+ const el = this.el;
994
+ if (el)
995
+ enforceMaxDigitsInPlace(el, this.maxDigits);
996
+ }
997
+ updateMaxDigits() {
998
+ if (!this.iti) {
999
+ this.maxDigits = undefined;
1000
+ return;
1001
+ }
1002
+ const c = this.iti.getSelectedCountryData?.();
1003
+ const iso2 = String(c?.iso2 ?? '').toLowerCase();
1004
+ const dialDigits = String(c?.dialCode ?? '').replace(/\D/g, '').length;
1005
+ const u = this.getUtils();
1006
+ const exNationalDigits = this.safe(() => {
1007
+ if (!u?.getExampleNumber)
1008
+ return undefined;
1009
+ const t = u.numberType?.MOBILE;
1010
+ const ex = u.getExampleNumber?.(iso2, true, t);
1011
+ return ex ? (String(ex).match(/\d/g) ?? []).length : undefined;
1012
+ });
1013
+ if (exNationalDigits && exNationalDigits > 0) {
1014
+ this.maxDigits = dialDigits + exNationalDigits;
1015
+ return;
1016
+ }
1017
+ const el = this.el;
1018
+ const ph = el?.getAttribute('placeholder') ?? '';
1019
+ const phDigits = (ph.match(/\d/g) ?? []).length;
1020
+ this.maxDigits = phDigits > 0 ? phDigits : undefined;
1021
+ }
1022
+ setupListeners(el) {
1023
+ el.addEventListener('beforeinput', this.onBeforeInput);
1024
+ el.addEventListener('keydown', this.onKeyDown);
1025
+ el.addEventListener('paste', this.onPaste);
1026
+ el.addEventListener('countrychange', this.onCountryChange);
1027
+ }
1028
+ teardownListeners(el) {
1029
+ el.removeEventListener('beforeinput', this.onBeforeInput);
1030
+ el.removeEventListener('keydown', this.onKeyDown);
1031
+ el.removeEventListener('paste', this.onPaste);
1032
+ el.removeEventListener('countrychange', this.onCountryChange);
1033
+ }
1034
+ onCountryChange = () => {
1035
+ this.recalculateLimits();
1036
+ const el = this.el;
1037
+ if (!el || !(el.value ?? '').trim())
1038
+ return;
1039
+ this._raw = el.value ?? '';
1040
+ this.normalizeAndFormat(false);
1041
+ };
1042
+ onBeforeInput = (ev) => {
1043
+ if (shouldBlockBeforeInput(ev, { allowedChars: this.allowedChars })) {
1044
+ ev.preventDefault();
1045
+ }
1046
+ };
1047
+ onKeyDown = (ev) => {
1048
+ if (shouldBlockKeyDown(ev))
1049
+ ev.preventDefault();
1050
+ };
1051
+ onPaste = (ev) => {
1052
+ const el = this.el;
1053
+ if (!el)
1054
+ return;
1055
+ const text = ev.clipboardData?.getData('text') ?? '';
1056
+ if (!text)
1057
+ return;
1058
+ const sanitized = sanitizePhoneInput(text);
1059
+ if (sanitized === text)
1060
+ return;
1061
+ ev.preventDefault();
1062
+ insertAtCursor(el, sanitized);
1063
+ queueMicrotask(() => {
1064
+ this.recalculateLimits();
1065
+ this.normalizeAndFormat(false);
1066
+ });
1067
+ };
1068
+ applyPlaceholderIfCustom() {
1069
+ const el = this.el;
1070
+ if (!el)
1071
+ return;
1072
+ const ph = this._placeholder?.trim();
1073
+ if (ph)
1074
+ this.renderer.setAttribute(el, 'placeholder', ph);
1075
+ }
1076
+ getSelectedIso2() {
1077
+ try {
1078
+ const data = this.iti?.getSelectedCountryData?.();
1079
+ return data?.iso2?.toLowerCase() ?? null;
1080
+ }
1081
+ catch {
1082
+ return null;
1083
+ }
1084
+ }
1085
+ getSelectedDialCode() {
1086
+ try {
1087
+ const data = this.iti?.getSelectedCountryData?.();
1088
+ return data?.dialCode ?? null;
1089
+ }
1090
+ catch {
1091
+ return null;
1092
+ }
1093
+ }
1094
+ getUtils() {
1095
+ return globalThis.intlTelInputUtils;
1096
+ }
1097
+ safe(fn) {
1098
+ try {
1099
+ return fn();
1100
+ }
1101
+ catch {
1102
+ return undefined;
1103
+ }
1104
+ }
1105
+ get el() {
1106
+ return this.inputRef?.nativeElement ?? null;
1107
+ }
1108
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPhoneInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
1109
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: SolarisPhoneInput, isStandalone: true, selector: "solaris-phone-input", inputs: { placeholder: "placeholder", format: "format", onlyCountries: ["only-countries", "onlyCountries"], defaultCountry: ["default-country", "defaultCountry"], preferredCountries: ["preferred-countries", "preferredCountries"] }, host: { properties: { "attr.solaris-phone-input": "this.marker" } }, providers: [
1110
+ {
1111
+ provide: NG_VALUE_ACCESSOR,
1112
+ useExisting: forwardRef(() => SolarisPhoneInput),
1113
+ multi: true,
1114
+ },
1115
+ {
1116
+ provide: NG_VALIDATORS,
1117
+ useExisting: forwardRef(() => SolarisPhoneInput),
1118
+ multi: true,
1119
+ },
1120
+ ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<input\r\n #input\r\n solaris-input\r\n type=\"tel\"\r\n [disabled]=\"_disabled\"\r\n (focus)=\"onFocus()\"\r\n (input)=\"onInput()\"\r\n (blur)=\"onBlur()\"\r\n/>\r\n", styles: [":host{min-width:0;width:100%;display:block}:host ::ng-deep .iti{width:100%}:host ::ng-deep .iti__flag-container{width:3.8rem;height:3.8rem;display:grid;place-items:center;border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}:host ::ng-deep .iti__selected-flag{padding:0;width:100%;height:100%;display:grid;place-items:center;border-radius:var(--solaris-radius-sm)}:host ::ng-deep .iti__arrow{margin-left:.4rem;opacity:.5}:host ::ng-deep input[type=tel]{height:3.8rem;padding-left:var(--solaris-space-3)!important}:host ::ng-deep .iti input[type=tel]{padding-left:calc(3.8rem + var(--solaris-space-5))!important}:host ::ng-deep .iti__country-container{border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}:host ::ng-deep .iti__dropdown-content{width:100%;max-width:32rem;margin-top:.4rem;background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border);border-radius:var(--solaris-radius-md);box-shadow:var(--solaris-shadow-lg);overflow:hidden}:host ::ng-deep .iti__search-input{border:0;width:100%;outline:none;height:3.2rem;color:var(--solaris-color-text);padding:0 var(--solaris-space-10);background:var(--solaris-color-surface);border-bottom:1px solid var(--solaris-color-border)}:host ::ng-deep .iti__search-input::placeholder{opacity:1;color:color-mix(in srgb,var(--solaris-color-text) 45%,transparent)}:host ::ng-deep .iti__country-list{max-height:22rem;margin:0}:host ::ng-deep .iti__country{display:grid;grid-template-columns:2.4rem 1fr auto;align-items:center;gap:var(--solaris-space-2);padding:var(--solaris-space-2) var(--solaris-space-3)}:host ::ng-deep .iti__country:hover{background:color-mix(in srgb,var(--solaris-color-primary) 12%,transparent)}:host ::ng-deep .iti__country.iti__active{background:color-mix(in srgb,var(--solaris-color-primary) 18%,transparent)}:host ::ng-deep .iti__flag-box{width:2rem;display:grid;height:1.4rem;place-items:center}:host ::ng-deep .iti__country-name{font:inherit;font-size:var(--solaris-fs-12);color:var(--solaris-color-text)}:host ::ng-deep .iti__dial-code{color:color-mix(in srgb,var(--solaris-color-text) 55%,transparent);font-variant-numeric:tabular-nums}\n"], dependencies: [{ kind: "directive", type: InputTextDirective, selector: "input[solaris-input],textarea[solaris-input]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1121
+ }
1122
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPhoneInput, decorators: [{
1123
+ type: Component,
1124
+ args: [{ selector: 'solaris-phone-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
1125
+ {
1126
+ provide: NG_VALUE_ACCESSOR,
1127
+ useExisting: forwardRef(() => SolarisPhoneInput),
1128
+ multi: true,
1129
+ },
1130
+ {
1131
+ provide: NG_VALIDATORS,
1132
+ useExisting: forwardRef(() => SolarisPhoneInput),
1133
+ multi: true,
1134
+ },
1135
+ ], imports: [InputTextDirective], template: "<input\r\n #input\r\n solaris-input\r\n type=\"tel\"\r\n [disabled]=\"_disabled\"\r\n (focus)=\"onFocus()\"\r\n (input)=\"onInput()\"\r\n (blur)=\"onBlur()\"\r\n/>\r\n", styles: [":host{min-width:0;width:100%;display:block}:host ::ng-deep .iti{width:100%}:host ::ng-deep .iti__flag-container{width:3.8rem;height:3.8rem;display:grid;place-items:center;border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}:host ::ng-deep .iti__selected-flag{padding:0;width:100%;height:100%;display:grid;place-items:center;border-radius:var(--solaris-radius-sm)}:host ::ng-deep .iti__arrow{margin-left:.4rem;opacity:.5}:host ::ng-deep input[type=tel]{height:3.8rem;padding-left:var(--solaris-space-3)!important}:host ::ng-deep .iti input[type=tel]{padding-left:calc(3.8rem + var(--solaris-space-5))!important}:host ::ng-deep .iti__country-container{border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}:host ::ng-deep .iti__dropdown-content{width:100%;max-width:32rem;margin-top:.4rem;background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border);border-radius:var(--solaris-radius-md);box-shadow:var(--solaris-shadow-lg);overflow:hidden}:host ::ng-deep .iti__search-input{border:0;width:100%;outline:none;height:3.2rem;color:var(--solaris-color-text);padding:0 var(--solaris-space-10);background:var(--solaris-color-surface);border-bottom:1px solid var(--solaris-color-border)}:host ::ng-deep .iti__search-input::placeholder{opacity:1;color:color-mix(in srgb,var(--solaris-color-text) 45%,transparent)}:host ::ng-deep .iti__country-list{max-height:22rem;margin:0}:host ::ng-deep .iti__country{display:grid;grid-template-columns:2.4rem 1fr auto;align-items:center;gap:var(--solaris-space-2);padding:var(--solaris-space-2) var(--solaris-space-3)}:host ::ng-deep .iti__country:hover{background:color-mix(in srgb,var(--solaris-color-primary) 12%,transparent)}:host ::ng-deep .iti__country.iti__active{background:color-mix(in srgb,var(--solaris-color-primary) 18%,transparent)}:host ::ng-deep .iti__flag-box{width:2rem;display:grid;height:1.4rem;place-items:center}:host ::ng-deep .iti__country-name{font:inherit;font-size:var(--solaris-fs-12);color:var(--solaris-color-text)}:host ::ng-deep .iti__dial-code{color:color-mix(in srgb,var(--solaris-color-text) 55%,transparent);font-variant-numeric:tabular-nums}\n"] }]
1136
+ }], propDecorators: { marker: [{
1137
+ type: HostBinding,
1138
+ args: ['attr.solaris-phone-input']
1139
+ }], inputRef: [{
1140
+ type: ViewChild,
1141
+ args: ['input', { static: false }]
1142
+ }], placeholder: [{
247
1143
  type: Input
248
- }], showErrors: [{
1144
+ }], format: [{
249
1145
  type: Input
1146
+ }], onlyCountries: [{
1147
+ type: Input,
1148
+ args: [{ alias: 'only-countries' }]
1149
+ }], defaultCountry: [{
1150
+ type: Input,
1151
+ args: [{ alias: 'default-country' }]
1152
+ }], preferredCountries: [{
1153
+ type: Input,
1154
+ args: [{ alias: 'preferred-countries' }]
1155
+ }] } });
1156
+
1157
+ const SOLARIS_FORM_FIELD_FEATURES = new InjectionToken('SOLARIS_FORM_FIELD_FEATURES');
1158
+
1159
+ class SolarisFormFieldController {
1160
+ features = inject(SOLARIS_FORM_FIELD_FEATURES, { optional: true }) ?? [];
1161
+ ngForm = inject(NgForm, { optional: true });
1162
+ formGroupDir = inject(FormGroupDirective, { optional: true });
1163
+ submitted = signal(false, ...(ngDevMode ? [{ debugName: "submitted" }] : []));
1164
+ control = signal(null, ...(ngDevMode ? [{ debugName: "control" }] : []));
1165
+ email = signal(null, ...(ngDevMode ? [{ debugName: "email" }] : []));
1166
+ password = signal(null, ...(ngDevMode ? [{ debugName: "password" }] : []));
1167
+ constructor() {
1168
+ effect(() => {
1169
+ const fgSubmitted = this.formGroupDir?.submitted ?? false;
1170
+ const nfSubmitted = this.ngForm?.submitted ?? false;
1171
+ this.submitted.set(fgSubmitted || nfSubmitted);
1172
+ });
1173
+ }
1174
+ registerPassword(dir) {
1175
+ this.password.set(dir);
1176
+ }
1177
+ registerEmail(dir) {
1178
+ this.email.set(dir);
1179
+ }
1180
+ registerControl(ctrl) {
1181
+ if (!ctrl && this.control())
1182
+ return;
1183
+ this.control.set(ctrl);
1184
+ }
1185
+ passwordVisible() {
1186
+ return this.password()?.visible() ?? false;
1187
+ }
1188
+ togglePasswordVisibility() {
1189
+ this.password()?.toggle();
1190
+ }
1191
+ resetSubmitted() {
1192
+ this.submitted.set(false);
1193
+ }
1194
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFormFieldController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1195
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFormFieldController });
1196
+ }
1197
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFormFieldController, decorators: [{
1198
+ type: Injectable
1199
+ }], ctorParameters: () => [], propDecorators: { ngForm: [{
1200
+ type: Optional
1201
+ }], formGroupDir: [{
1202
+ type: Optional
250
1203
  }] } });
251
1204
 
252
1205
  class SolarisPasswordDirective {
@@ -419,65 +1372,209 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
419
1372
  type: Optional
420
1373
  }] } });
421
1374
 
422
- const SOLARIS_INPUT = new InjectionToken('SOLARIS_INPUT');
1375
+ const SOLARIS_FORM_FIELD_CONTROLLER = new InjectionToken('SOLARIS_FORM_FIELD_CONTROLLER');
423
1376
 
424
- class InputTextDirective {
425
- el = inject((ElementRef));
426
- attr = '';
427
- get placeholderAttr() {
428
- return this.el.nativeElement.getAttribute('placeholder');
1377
+ class PasswordToggle {
1378
+ solarisSuffix = '';
1379
+ field = inject(SOLARIS_FORM_FIELD_CONTROLLER, { optional: true });
1380
+ visible = () => this.field?.passwordVisible() ?? false;
1381
+ toggle() {
1382
+ this.field?.togglePasswordVisibility();
429
1383
  }
430
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: InputTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
431
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: InputTextDirective, isStandalone: true, selector: "input[solaris-input],textarea[solaris-input]", host: { properties: { "attr.solaris-input": "this.attr", "attr.placeholder": "this.placeholderAttr" } }, providers: [
432
- {
433
- provide: SOLARIS_INPUT,
434
- useFactory: () => {
435
- const el = inject((ElementRef)).nativeElement;
436
- return {
437
- element: el,
438
- setType: (type) => {
439
- if (el instanceof HTMLInputElement)
440
- el.type = type;
441
- },
442
- getType: () => (el instanceof HTMLInputElement ? el.type : 'textarea'),
443
- };
444
- },
445
- },
446
- ], ngImport: i0 });
1384
+ get ariaLabelHide() { return 'Hide password'; }
1385
+ get ariaLabelShow() { return 'Show password'; }
1386
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PasswordToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
1387
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: PasswordToggle, isStandalone: true, selector: "solaris-password-toggle", host: { properties: { "attr.solaris-suffix": "this.solarisSuffix" } }, ngImport: i0, template: "<button class=\"solaris-password-toggle\" type=\"button\" (click)=\"toggle()\" [attr.aria-pressed]=\"visible() ? 'true' : 'false'\"\r\n [attr.aria-label]=\"visible() ? ariaLabelHide : ariaLabelShow\">\r\n @if (visible()) { <i class=\"ph ph-eye-slash\"></i> }\r\n @else { <i class=\"ph ph-eye\"></i> }\r\n</button>\r\n", styles: [".solaris-password-toggle{border:0;opacity:.6;display:grid;width:3.8rem;height:3.8rem;cursor:pointer;place-items:center;background:transparent;color:var(--solaris-color-text-muted);transition:opacity .16s ease,filter .16s ease}.solaris-password-toggle:hover,.solaris-password-toggle:focus-visible{opacity:1;filter:brightness(1.1)}.solaris-password-toggle:focus-visible{outline-offset:.2rem;border-radius:var(--solaris-radius-md);outline:.2rem solid color-mix(in srgb,var(--solaris-color-primary) 35%,transparent)}.solaris-password-toggle i.ph{font-size:var(--solaris-fs-14)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
447
1388
  }
448
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: InputTextDirective, decorators: [{
1389
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PasswordToggle, decorators: [{
1390
+ type: Component,
1391
+ args: [{ selector: 'solaris-password-toggle', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"solaris-password-toggle\" type=\"button\" (click)=\"toggle()\" [attr.aria-pressed]=\"visible() ? 'true' : 'false'\"\r\n [attr.aria-label]=\"visible() ? ariaLabelHide : ariaLabelShow\">\r\n @if (visible()) { <i class=\"ph ph-eye-slash\"></i> }\r\n @else { <i class=\"ph ph-eye\"></i> }\r\n</button>\r\n", styles: [".solaris-password-toggle{border:0;opacity:.6;display:grid;width:3.8rem;height:3.8rem;cursor:pointer;place-items:center;background:transparent;color:var(--solaris-color-text-muted);transition:opacity .16s ease,filter .16s ease}.solaris-password-toggle:hover,.solaris-password-toggle:focus-visible{opacity:1;filter:brightness(1.1)}.solaris-password-toggle:focus-visible{outline-offset:.2rem;border-radius:var(--solaris-radius-md);outline:.2rem solid color-mix(in srgb,var(--solaris-color-primary) 35%,transparent)}.solaris-password-toggle i.ph{font-size:var(--solaris-fs-14)}\n"] }]
1392
+ }], propDecorators: { solarisSuffix: [{
1393
+ type: HostBinding,
1394
+ args: ['attr.solaris-suffix']
1395
+ }], field: [{
1396
+ type: Optional
1397
+ }] } });
1398
+
1399
+ class SolarisControlBridgeDirective {
1400
+ ctrl = inject(NgControl, { optional: true });
1401
+ field = inject(SolarisFormFieldController, { optional: true });
1402
+ constructor() {
1403
+ if (this.ctrl)
1404
+ this.field?.registerControl(this.ctrl);
1405
+ }
1406
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisControlBridgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1407
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisControlBridgeDirective, isStandalone: true, selector: "input[solaris-password],input[solaris-email],input[solaris-input],textarea[solaris-input]", ngImport: i0 });
1408
+ }
1409
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisControlBridgeDirective, decorators: [{
449
1410
  type: Directive,
450
1411
  args: [{
451
- selector: 'input[solaris-input],textarea[solaris-input]',
1412
+ selector: 'input[solaris-password],input[solaris-email],input[solaris-input],textarea[solaris-input]',
452
1413
  standalone: true,
453
- providers: [
454
- {
455
- provide: SOLARIS_INPUT,
456
- useFactory: () => {
457
- const el = inject((ElementRef)).nativeElement;
458
- return {
459
- element: el,
460
- setType: (type) => {
461
- if (el instanceof HTMLInputElement)
462
- el.type = type;
463
- },
464
- getType: () => (el instanceof HTMLInputElement ? el.type : 'textarea'),
465
- };
466
- },
467
- },
468
- ],
1414
+ }]
1415
+ }], ctorParameters: () => [], propDecorators: { ctrl: [{
1416
+ type: Optional
1417
+ }], field: [{
1418
+ type: Optional
1419
+ }] } });
1420
+
1421
+ class SolarisPrefixDirective {
1422
+ attr = '';
1423
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1424
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisPrefixDirective, isStandalone: true, selector: "[solaris-prefix]", host: { properties: { "attr.solaris-prefix": "this.attr" } }, ngImport: i0 });
1425
+ }
1426
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPrefixDirective, decorators: [{
1427
+ type: Directive,
1428
+ args: [{
1429
+ selector: '[solaris-prefix]',
469
1430
  }]
470
1431
  }], propDecorators: { attr: [{
471
1432
  type: HostBinding,
472
- args: ['attr.solaris-input']
473
- }], placeholderAttr: [{
474
- type: HostBinding,
475
- args: ['attr.placeholder']
1433
+ args: ['attr.solaris-prefix']
1434
+ }] } });
1435
+
1436
+ class SolarisSuffixDirective {
1437
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1438
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisSuffixDirective, isStandalone: true, selector: "[solaris-suffix]", ngImport: i0 });
1439
+ }
1440
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisSuffixDirective, decorators: [{
1441
+ type: Directive,
1442
+ args: [{
1443
+ selector: '[solaris-suffix]',
1444
+ standalone: true
1445
+ }]
1446
+ }] });
1447
+
1448
+ class FieldErrorComponent {
1449
+ text;
1450
+ textKey;
1451
+ textParams;
1452
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FieldErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1453
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: FieldErrorComponent, isStandalone: true, selector: "solaris-field-error", inputs: { text: "text", textKey: "textKey", textParams: "textParams" }, ngImport: i0, template: "<div class=\"solaris-field-error\" role=\"alert\" aria-live=\"polite\">\r\n <span class=\"solaris-field-error__text\">\r\n @if (textKey) { {{ textKey | translate:textParams }} }\r\n @else { {{ text }} }\r\n </span>\r\n</div>\r\n", styles: [".solaris-field-error{line-height:1.25;padding-left:.5rem;font-size:var(--solaris-fs-10);color:var(--solaris-color-error)}\n"], dependencies: [{ kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1454
+ }
1455
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FieldErrorComponent, decorators: [{
1456
+ type: Component,
1457
+ args: [{ selector: 'solaris-field-error', standalone: true, imports: [SolarisTranslationPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-field-error\" role=\"alert\" aria-live=\"polite\">\r\n <span class=\"solaris-field-error__text\">\r\n @if (textKey) { {{ textKey | translate:textParams }} }\r\n @else { {{ text }} }\r\n </span>\r\n</div>\r\n", styles: [".solaris-field-error{line-height:1.25;padding-left:.5rem;font-size:var(--solaris-fs-10);color:var(--solaris-color-error)}\n"] }]
1458
+ }], propDecorators: { text: [{
1459
+ type: Input
1460
+ }], textKey: [{
1461
+ type: Input
1462
+ }], textParams: [{
1463
+ type: Input
1464
+ }] } });
1465
+
1466
+ class FormField {
1467
+ field = inject(SolarisFormFieldController);
1468
+ prefix;
1469
+ suffix;
1470
+ hint = '';
1471
+ label = '';
1472
+ hintKey = '';
1473
+ labelKey = '';
1474
+ invalid = null;
1475
+ showErrors = 'dirtyOrTouched';
1476
+ get hasPrefix() { return !!this.prefix; }
1477
+ get hasSuffix() { return !!this.suffix; }
1478
+ getDirectErrorKey(errors) {
1479
+ if (errors['required'])
1480
+ return 'ui.solaris.validation.required';
1481
+ if (errors['email'] || errors['solarisEmail'])
1482
+ return 'ui.solaris.validation.email';
1483
+ return '';
1484
+ }
1485
+ getPasswordErrorKey(bag) {
1486
+ if (bag?.minLength)
1487
+ return 'ui.solaris.validation.password.minLength';
1488
+ if (bag?.uppercase)
1489
+ return 'ui.solaris.validation.password.uppercase';
1490
+ if (bag?.lowercase)
1491
+ return 'ui.solaris.validation.password.lowercase';
1492
+ if (bag?.number)
1493
+ return 'ui.solaris.validation.password.number';
1494
+ if (bag?.special)
1495
+ return 'ui.solaris.validation.password.special';
1496
+ return 'ui.solaris.validation.password.invalid';
1497
+ }
1498
+ showPasswordToggle = computed(() => !!this.field.password(), ...(ngDevMode ? [{ debugName: "showPasswordToggle" }] : []));
1499
+ errorParams = computed(() => {
1500
+ if (!this.invalidComputed())
1501
+ return undefined;
1502
+ const errors = this.field.control()?.errors;
1503
+ if (!errors)
1504
+ return undefined;
1505
+ const bag = errors['solarisPassword'];
1506
+ if (bag?.minLength)
1507
+ return { requiredLength: bag.minLength.requiredLength };
1508
+ return undefined;
1509
+ }, ...(ngDevMode ? [{ debugName: "errorParams" }] : []));
1510
+ invalidComputed = computed(() => {
1511
+ if (this.invalid !== null)
1512
+ return this.invalid;
1513
+ const c = this.field.control();
1514
+ if (!c)
1515
+ return false;
1516
+ if (this.showErrors === 'always')
1517
+ return !!c.invalid;
1518
+ if (this.showErrors === 'submitted')
1519
+ return !!(c.invalid && this.field.submitted());
1520
+ return !!(c.invalid && (c.touched || c.dirty));
1521
+ }, ...(ngDevMode ? [{ debugName: "invalidComputed" }] : []));
1522
+ errorKey = computed(() => {
1523
+ if (!this.invalidComputed())
1524
+ return '';
1525
+ const c = this.field.control();
1526
+ console.log('status', c?.status, 'errors', c?.errors, 'value', c?.value);
1527
+ const errors = this.field.control()?.errors;
1528
+ if (!errors)
1529
+ return '';
1530
+ const direct = this.getDirectErrorKey(errors);
1531
+ if (direct)
1532
+ return direct;
1533
+ if (errors['solarisPassword'])
1534
+ return this.getPasswordErrorKey(errors['solarisPassword']);
1535
+ return 'solaris.validation.invalid';
1536
+ }, ...(ngDevMode ? [{ debugName: "errorKey" }] : []));
1537
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
1538
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: FormField, isStandalone: true, selector: "solaris-form-field", inputs: { hint: "hint", label: "label", hintKey: "hintKey", labelKey: "labelKey", invalid: "invalid", showErrors: "showErrors" }, providers: [
1539
+ SolarisFormFieldController,
1540
+ { provide: SOLARIS_FORM_FIELD_CONTROLLER, useExisting: SolarisFormFieldController }
1541
+ ], queries: [{ propertyName: "prefix", first: true, predicate: SolarisPrefixDirective, descendants: true }, { propertyName: "suffix", first: true, predicate: SolarisSuffixDirective, descendants: true }], ngImport: i0, template: "<div class=\"solaris-form-field\" [class.solaris-form-field--has-prefix]=\"hasPrefix\"\r\n [attr.data-invalid]=\"invalidComputed() ? 'true' : null\">\r\n @if ((label || labelKey)) {\r\n <label class=\"solaris-form-field__label\">\r\n @if (labelKey) { {{ labelKey | translate }} }\r\n @else if (label) { {{ label }} }\r\n </label>\r\n }\r\n\r\n <div class=\"solaris-form-field__frame\">\r\n @if (hasPrefix) {\r\n <span class=\"solaris-form-field__prefix\" aria-hidden=\"true\">\r\n <ng-content select=\"[solaris-prefix]\"></ng-content>\r\n </span>\r\n }\r\n\r\n <div class=\"solaris-form-field__body\">\r\n <div class=\"solaris-form-field__control-slot\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n @if (hasSuffix || showPasswordToggle() || invalidComputed()) {\r\n <span class=\"solaris-form-field__suffix\">\r\n <ng-content select=\"[solaris-suffix]\"></ng-content>\r\n\r\n @if (showPasswordToggle()) {\r\n <solaris-password-toggle></solaris-password-toggle>\r\n }\r\n\r\n @if (invalidComputed()) {\r\n <span class=\"solaris-form-field__status\" aria-hidden=\"true\">\r\n <i class=\"ph ph-warning-circle\"></i>\r\n </span>\r\n }\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (errorKey()) {\r\n <solaris-field-error [textKey]=\"errorKey()\" [textParams]=\"errorParams()\"></solaris-field-error>\r\n } @else {\r\n <ng-content select=\"[form-field-message]\"></ng-content>\r\n }\r\n\r\n @if (hint || hintKey) {\r\n <div class=\"solaris-form-field__hint\">\r\n @if (hintKey) { {{ hintKey | translate }} }\r\n @else { {{ hint }} }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".solaris-form-field{display:grid;gap:var(--solaris-space-2)}.solaris-form-field__label{font-weight:600;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);margin-left:var(--solaris-space-1)}.solaris-form-field__frame{display:grid;min-height:3.8rem;align-items:stretch;grid-template-columns:1fr;border-radius:var(--solaris-radius-sm);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border);transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease}.solaris-form-field--has-prefix .solaris-form-field__frame{grid-template-columns:3.8rem 1fr}.solaris-form-field__prefix{opacity:.5;display:grid;width:3.8rem;line-height:0;place-items:center;font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted);transition:opacity .3s ease,filter .3s ease;border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-form-field__frame:hover .solaris-form-field__prefix,.solaris-form-field__frame:focus-within .solaris-form-field__prefix{opacity:1;filter:brightness(1.05)}.solaris-form-field__prefix :is(i,svg,[solarisPrefixIcon]){display:block;line-height:1}.solaris-form-field__prefix i.ph{opacity:.6;font-size:1.9rem}.solaris-form-field__prefix svg{width:1.9rem;height:1.9rem}.solaris-form-field__body{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;position:relative;padding-left:var(--solaris-space-3);padding-right:0}.solaris-form-field__control-slot{width:100%;min-width:0;display:flex;align-items:center;flex:1 1 auto}.solaris-form-field__control-slot>*{flex:1 1 0;min-width:0;width:100%}.solaris-form-field__control-slot :is(input,textarea){margin:0;border:0;outline:none;width:100%;min-width:0;padding:.9rem 0;background:transparent;font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text)}.solaris-form-field__control-slot :is(input,textarea)::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-form-field__suffix{display:inline-flex;align-items:center;justify-content:center;padding-right:var(--solaris-space-3);gap:var(--solaris-space-2)}.solaris-form-field__suffix :is(button,a){align-self:stretch;display:inline-flex;align-items:center;height:3.6rem}.solaris-form-field__status{width:3.8rem;height:3.8rem;display:grid;place-items:center;color:var(--solaris-color-error);opacity:.95}.solaris-form-field__status i.ph{font-size:1.9rem;line-height:1}.solaris-form-field__hint{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-form-field__frame:has(:is(input,textarea)[disabled]){opacity:.45}.solaris-form-field__frame:has(:is(input,textarea)[disabled]) .solaris-form-field__prefix,.solaris-form-field__frame:has(:is(input,textarea)[disabled]) :is(.solaris-form-field__label,.solaris-form-field__hint){color:var(--solaris-color-text-muted)}.solaris-form-field__frame:has(:focus-visible){box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-primary) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame{box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-error) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame:focus-within{border-color:color-mix(in srgb,var(--solaris-color-error) 80%,var(--solaris-color-border));box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 16%,transparent)}.solaris-form-field[data-invalid=true] .solaris-form-field__prefix{border-right-color:color-mix(in srgb,var(--solaris-color-error) 30%,var(--solaris-color-border));color:color-mix(in srgb,var(--solaris-color-error) 75%,var(--solaris-color-text-muted))}.solaris-form-field[data-invalid=true] .solaris-form-field__control-slot :is(input,textarea)::placeholder{color:color-mix(in srgb,var(--solaris-color-error) 45%,var(--solaris-color-text-muted))}.solaris-form-field__body:has(solaris-phone-input){padding-left:0}\n"], dependencies: [{ kind: "component", type: PasswordToggle, selector: "solaris-password-toggle" }, { kind: "component", type: FieldErrorComponent, selector: "solaris-field-error", inputs: ["text", "textKey", "textParams"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1542
+ }
1543
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormField, decorators: [{
1544
+ type: Component,
1545
+ args: [{ selector: 'solaris-form-field', standalone: true, imports: [
1546
+ PasswordToggle,
1547
+ FieldErrorComponent,
1548
+ SolarisTranslationPipe
1549
+ ], providers: [
1550
+ SolarisFormFieldController,
1551
+ { provide: SOLARIS_FORM_FIELD_CONTROLLER, useExisting: SolarisFormFieldController }
1552
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-form-field\" [class.solaris-form-field--has-prefix]=\"hasPrefix\"\r\n [attr.data-invalid]=\"invalidComputed() ? 'true' : null\">\r\n @if ((label || labelKey)) {\r\n <label class=\"solaris-form-field__label\">\r\n @if (labelKey) { {{ labelKey | translate }} }\r\n @else if (label) { {{ label }} }\r\n </label>\r\n }\r\n\r\n <div class=\"solaris-form-field__frame\">\r\n @if (hasPrefix) {\r\n <span class=\"solaris-form-field__prefix\" aria-hidden=\"true\">\r\n <ng-content select=\"[solaris-prefix]\"></ng-content>\r\n </span>\r\n }\r\n\r\n <div class=\"solaris-form-field__body\">\r\n <div class=\"solaris-form-field__control-slot\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n @if (hasSuffix || showPasswordToggle() || invalidComputed()) {\r\n <span class=\"solaris-form-field__suffix\">\r\n <ng-content select=\"[solaris-suffix]\"></ng-content>\r\n\r\n @if (showPasswordToggle()) {\r\n <solaris-password-toggle></solaris-password-toggle>\r\n }\r\n\r\n @if (invalidComputed()) {\r\n <span class=\"solaris-form-field__status\" aria-hidden=\"true\">\r\n <i class=\"ph ph-warning-circle\"></i>\r\n </span>\r\n }\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (errorKey()) {\r\n <solaris-field-error [textKey]=\"errorKey()\" [textParams]=\"errorParams()\"></solaris-field-error>\r\n } @else {\r\n <ng-content select=\"[form-field-message]\"></ng-content>\r\n }\r\n\r\n @if (hint || hintKey) {\r\n <div class=\"solaris-form-field__hint\">\r\n @if (hintKey) { {{ hintKey | translate }} }\r\n @else { {{ hint }} }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".solaris-form-field{display:grid;gap:var(--solaris-space-2)}.solaris-form-field__label{font-weight:600;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);margin-left:var(--solaris-space-1)}.solaris-form-field__frame{display:grid;min-height:3.8rem;align-items:stretch;grid-template-columns:1fr;border-radius:var(--solaris-radius-sm);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border);transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease}.solaris-form-field--has-prefix .solaris-form-field__frame{grid-template-columns:3.8rem 1fr}.solaris-form-field__prefix{opacity:.5;display:grid;width:3.8rem;line-height:0;place-items:center;font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted);transition:opacity .3s ease,filter .3s ease;border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-form-field__frame:hover .solaris-form-field__prefix,.solaris-form-field__frame:focus-within .solaris-form-field__prefix{opacity:1;filter:brightness(1.05)}.solaris-form-field__prefix :is(i,svg,[solarisPrefixIcon]){display:block;line-height:1}.solaris-form-field__prefix i.ph{opacity:.6;font-size:1.9rem}.solaris-form-field__prefix svg{width:1.9rem;height:1.9rem}.solaris-form-field__body{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;position:relative;padding-left:var(--solaris-space-3);padding-right:0}.solaris-form-field__control-slot{width:100%;min-width:0;display:flex;align-items:center;flex:1 1 auto}.solaris-form-field__control-slot>*{flex:1 1 0;min-width:0;width:100%}.solaris-form-field__control-slot :is(input,textarea){margin:0;border:0;outline:none;width:100%;min-width:0;padding:.9rem 0;background:transparent;font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text)}.solaris-form-field__control-slot :is(input,textarea)::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-form-field__suffix{display:inline-flex;align-items:center;justify-content:center;padding-right:var(--solaris-space-3);gap:var(--solaris-space-2)}.solaris-form-field__suffix :is(button,a){align-self:stretch;display:inline-flex;align-items:center;height:3.6rem}.solaris-form-field__status{width:3.8rem;height:3.8rem;display:grid;place-items:center;color:var(--solaris-color-error);opacity:.95}.solaris-form-field__status i.ph{font-size:1.9rem;line-height:1}.solaris-form-field__hint{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-form-field__frame:has(:is(input,textarea)[disabled]){opacity:.45}.solaris-form-field__frame:has(:is(input,textarea)[disabled]) .solaris-form-field__prefix,.solaris-form-field__frame:has(:is(input,textarea)[disabled]) :is(.solaris-form-field__label,.solaris-form-field__hint){color:var(--solaris-color-text-muted)}.solaris-form-field__frame:has(:focus-visible){box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-primary) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame{box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-error) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame:focus-within{border-color:color-mix(in srgb,var(--solaris-color-error) 80%,var(--solaris-color-border));box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 16%,transparent)}.solaris-form-field[data-invalid=true] .solaris-form-field__prefix{border-right-color:color-mix(in srgb,var(--solaris-color-error) 30%,var(--solaris-color-border));color:color-mix(in srgb,var(--solaris-color-error) 75%,var(--solaris-color-text-muted))}.solaris-form-field[data-invalid=true] .solaris-form-field__control-slot :is(input,textarea)::placeholder{color:color-mix(in srgb,var(--solaris-color-error) 45%,var(--solaris-color-text-muted))}.solaris-form-field__body:has(solaris-phone-input){padding-left:0}\n"] }]
1553
+ }], propDecorators: { prefix: [{
1554
+ type: ContentChild,
1555
+ args: [SolarisPrefixDirective]
1556
+ }], suffix: [{
1557
+ type: ContentChild,
1558
+ args: [SolarisSuffixDirective]
1559
+ }], hint: [{
1560
+ type: Input
1561
+ }], label: [{
1562
+ type: Input
1563
+ }], hintKey: [{
1564
+ type: Input
1565
+ }], labelKey: [{
1566
+ type: Input
1567
+ }], invalid: [{
1568
+ type: Input
1569
+ }], showErrors: [{
1570
+ type: Input
476
1571
  }] } });
477
1572
 
1573
+ /// <reference path="./typings/intl-tel-input-utils.d.ts" />
1574
+
478
1575
  /**
479
1576
  * Generated bundle index. Do not edit.
480
1577
  */
481
1578
 
482
- export { FieldErrorComponent, FormField, InputTextDirective, PasswordToggle, SOLARIS_FORM_FIELD_CONTROLLER, SOLARIS_FORM_FIELD_FEATURES, SOLARIS_INPUT, SolarisControlBridgeDirective, SolarisEmailDirective, SolarisFormFieldController, SolarisPasswordDirective, SolarisPrefixDirective, SolarisSuffixDirective };
1579
+ export { FieldErrorComponent, FormField, InputTextDirective, PasswordToggle, SOLARIS_FORM_FIELD_CONTROLLER, SOLARIS_FORM_FIELD_FEATURES, SOLARIS_INPUT, SolarisBadge, SolarisBodyDirective, SolarisBreadcrumb, SolarisButtonDirective, SolarisButtonGroupDirective, SolarisControlBridgeDirective, SolarisDivider, SolarisEmailDirective, SolarisFooterDirective, SolarisFormFieldController, SolarisHeaderDirective, SolarisPageComponent, SolarisPageHeader, SolarisPageHeaderBreadcrumbDirective, SolarisPageHeaderDescriptionDirective, SolarisPageHeaderTitle, SolarisPageHeaderTitleDirective, SolarisPasswordDirective, SolarisPhoneInput, SolarisPrefixDirective, SolarisSectionComponent, SolarisSuffixDirective, SolarisTab, SolarisTabs };
483
1580
  //# sourceMappingURL=educarehq-solaris-components.mjs.map