@educarehq/solaris-components 0.7.2 → 0.7.3
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.
|
@@ -440,11 +440,11 @@ class SolarisBreadcrumb {
|
|
|
440
440
|
this.itemSelect.emit({ id: t.id, item });
|
|
441
441
|
}
|
|
442
442
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
443
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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\">\n <ol class=\"solaris-
|
|
443
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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\">\n <ol class=\"solaris-breadcrumb-list\">\n @for (it of viewModel.head; track it.label; let i = $index) {\n <li class=\"solaris-breadcrumb-item\">\n <ng-container [ngTemplateOutlet]=\"itemTpl\" [ngTemplateOutletContext]=\"{ $implicit: it }\" />\n @if (shouldRenderSeparatorAfterHead(i)) {\n <span class=\"solaris-breadcrumb-sep\" aria-hidden=\"true\">\n <i class=\"ph ph-caret-right\"></i>\n </span>\n }\n </li>\n }\n\n @if (viewModel.overflow.length > 0) {\n <li class=\"solaris-breadcrumb-item\">\n <button\n type=\"button\"\n class=\"solaris-breadcrumb-ellipsis\"\n aria-label=\"Mostrar mais\"\n [cdkMenuTriggerFor]=\"overflowMenu\"\n >\n <i class=\"ph ph-dots-three\"></i>\n </button>\n\n <ng-template #overflowMenu>\n <div class=\"solaris-breadcrumb-menu\" cdkMenu>\n @for (it of viewModel.overflow; track it.label) {\n <button\n type=\"button\"\n class=\"solaris-breadcrumb-menu-item\"\n cdkMenuItem\n (click)=\"onAction(it)\"\n [disabled]=\"it.disabled\"\n [routerLink]=\"getRouterCommands(it)\"\n [queryParams]=\"getRouterQueryParams(it)\"\n >\n @if (it.icon) {\n <i class=\"solaris-breadcrumb-icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\n }\n <span class=\"solaris-breadcrumb-label\">{{ it.label }}</span>\n </button>\n }\n </div>\n </ng-template>\n\n @if (viewModel.tail.length > 0) {\n <span class=\"solaris-breadcrumb-sep\" aria-hidden=\"true\">\n <i class=\"ph ph-caret-right\"></i>\n </span>\n }\n </li>\n }\n\n @for (it of viewModel.tail; track it.label; let i = $index) {\n <li class=\"solaris-breadcrumb-item\" [class.is-current]=\"i === viewModel.tail.length - 1\">\n <ng-container\n [ngTemplateOutlet]=\"itemTpl\"\n [ngTemplateOutletContext]=\"{ $implicit: it, current: i === viewModel.tail.length - 1 }\"\n />\n @if (it !== viewModel.tail[viewModel.tail.length - 1]) {\n <span class=\"solaris-breadcrumb-sep\" aria-hidden=\"true\">\n <i class=\"ph ph-caret-right\"></i>\n </span>\n }\n </li>\n }\n </ol>\n\n <ng-template #itemTpl let-it let-current=\"current\">\n @if (it.target?.kind === 'router') {\n <a\n class=\"solaris-breadcrumb-link\"\n [class.is-disabled]=\"it.disabled\"\n [class.is-current]=\"current\"\n [routerLink]=\"it.disabled ? null : it.target!.commands\"\n [attr.aria-current]=\"current ? 'page' : null\"\n [attr.aria-label]=\"it.ariaLabel || it.label\"\n >\n @if (it.icon) {\n <i class=\"solaris-breadcrumb-icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\n }\n <span class=\"solaris-breadcrumb-label\">{{ it.label }}</span>\n </a>\n } @else if (it.target?.kind === 'href') {\n <a\n class=\"solaris-breadcrumb-link\"\n [class.is-disabled]=\"it.disabled\"\n [class.is-current]=\"current\"\n [href]=\"it.disabled ? null : it.target!.href\"\n [target]=\"it.target!.target || '_self'\"\n [attr.aria-current]=\"current ? 'page' : null\"\n [attr.aria-label]=\"it.ariaLabel || it.label\"\n >\n @if (it.icon) {\n <i class=\"solaris-breadcrumb-icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\n }\n <span class=\"solaris-breadcrumb-label\">{{ it.label }}</span>\n </a>\n } @else if (it.target?.kind === 'action') {\n <button\n type=\"button\"\n class=\"solaris-breadcrumb-link as-button\"\n [class.is-current]=\"current\"\n [disabled]=\"it.disabled\"\n (click)=\"onAction(it)\"\n [attr.aria-current]=\"current ? 'page' : null\"\n [attr.aria-label]=\"it.ariaLabel || it.label\"\n >\n @if (it.icon) {\n <i class=\"solaris-breadcrumb-icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\n }\n <span class=\"solaris-breadcrumb-label\">{{ it.label }}</span>\n </button>\n } @else {\n <span class=\"solaris-breadcrumb-text\" [attr.aria-current]=\"current ? 'page' : null\">\n @if (it.icon) {\n <i class=\"solaris-breadcrumb-icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\n }\n <span class=\"solaris-breadcrumb-label\">{{ it.label }}</span>\n </span>\n }\n </ng-template>\n</nav>\n\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 var(--solaris-motion-duration-base) var(--solaris-motion-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 });
|
|
444
444
|
}
|
|
445
445
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisBreadcrumb, decorators: [{
|
|
446
446
|
type: Component,
|
|
447
|
-
args: [{ selector: 'solaris-breadcrumb', standalone: true, imports: [NgClass, RouterLink, CdkMenu, CdkMenuItem, CdkMenuTrigger, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"solaris-breadcrumb\" aria-label=\"Breadcrumb\">\n <ol class=\"solaris-
|
|
447
|
+
args: [{ selector: 'solaris-breadcrumb', standalone: true, imports: [NgClass, RouterLink, CdkMenu, CdkMenuItem, CdkMenuTrigger, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"solaris-breadcrumb\" aria-label=\"Breadcrumb\">\n <ol class=\"solaris-breadcrumb-list\">\n @for (it of viewModel.head; track it.label; let i = $index) {\n <li class=\"solaris-breadcrumb-item\">\n <ng-container [ngTemplateOutlet]=\"itemTpl\" [ngTemplateOutletContext]=\"{ $implicit: it }\" />\n @if (shouldRenderSeparatorAfterHead(i)) {\n <span class=\"solaris-breadcrumb-sep\" aria-hidden=\"true\">\n <i class=\"ph ph-caret-right\"></i>\n </span>\n }\n </li>\n }\n\n @if (viewModel.overflow.length > 0) {\n <li class=\"solaris-breadcrumb-item\">\n <button\n type=\"button\"\n class=\"solaris-breadcrumb-ellipsis\"\n aria-label=\"Mostrar mais\"\n [cdkMenuTriggerFor]=\"overflowMenu\"\n >\n <i class=\"ph ph-dots-three\"></i>\n </button>\n\n <ng-template #overflowMenu>\n <div class=\"solaris-breadcrumb-menu\" cdkMenu>\n @for (it of viewModel.overflow; track it.label) {\n <button\n type=\"button\"\n class=\"solaris-breadcrumb-menu-item\"\n cdkMenuItem\n (click)=\"onAction(it)\"\n [disabled]=\"it.disabled\"\n [routerLink]=\"getRouterCommands(it)\"\n [queryParams]=\"getRouterQueryParams(it)\"\n >\n @if (it.icon) {\n <i class=\"solaris-breadcrumb-icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\n }\n <span class=\"solaris-breadcrumb-label\">{{ it.label }}</span>\n </button>\n }\n </div>\n </ng-template>\n\n @if (viewModel.tail.length > 0) {\n <span class=\"solaris-breadcrumb-sep\" aria-hidden=\"true\">\n <i class=\"ph ph-caret-right\"></i>\n </span>\n }\n </li>\n }\n\n @for (it of viewModel.tail; track it.label; let i = $index) {\n <li class=\"solaris-breadcrumb-item\" [class.is-current]=\"i === viewModel.tail.length - 1\">\n <ng-container\n [ngTemplateOutlet]=\"itemTpl\"\n [ngTemplateOutletContext]=\"{ $implicit: it, current: i === viewModel.tail.length - 1 }\"\n />\n @if (it !== viewModel.tail[viewModel.tail.length - 1]) {\n <span class=\"solaris-breadcrumb-sep\" aria-hidden=\"true\">\n <i class=\"ph ph-caret-right\"></i>\n </span>\n }\n </li>\n }\n </ol>\n\n <ng-template #itemTpl let-it let-current=\"current\">\n @if (it.target?.kind === 'router') {\n <a\n class=\"solaris-breadcrumb-link\"\n [class.is-disabled]=\"it.disabled\"\n [class.is-current]=\"current\"\n [routerLink]=\"it.disabled ? null : it.target!.commands\"\n [attr.aria-current]=\"current ? 'page' : null\"\n [attr.aria-label]=\"it.ariaLabel || it.label\"\n >\n @if (it.icon) {\n <i class=\"solaris-breadcrumb-icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\n }\n <span class=\"solaris-breadcrumb-label\">{{ it.label }}</span>\n </a>\n } @else if (it.target?.kind === 'href') {\n <a\n class=\"solaris-breadcrumb-link\"\n [class.is-disabled]=\"it.disabled\"\n [class.is-current]=\"current\"\n [href]=\"it.disabled ? null : it.target!.href\"\n [target]=\"it.target!.target || '_self'\"\n [attr.aria-current]=\"current ? 'page' : null\"\n [attr.aria-label]=\"it.ariaLabel || it.label\"\n >\n @if (it.icon) {\n <i class=\"solaris-breadcrumb-icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\n }\n <span class=\"solaris-breadcrumb-label\">{{ it.label }}</span>\n </a>\n } @else if (it.target?.kind === 'action') {\n <button\n type=\"button\"\n class=\"solaris-breadcrumb-link as-button\"\n [class.is-current]=\"current\"\n [disabled]=\"it.disabled\"\n (click)=\"onAction(it)\"\n [attr.aria-current]=\"current ? 'page' : null\"\n [attr.aria-label]=\"it.ariaLabel || it.label\"\n >\n @if (it.icon) {\n <i class=\"solaris-breadcrumb-icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\n }\n <span class=\"solaris-breadcrumb-label\">{{ it.label }}</span>\n </button>\n } @else {\n <span class=\"solaris-breadcrumb-text\" [attr.aria-current]=\"current ? 'page' : null\">\n @if (it.icon) {\n <i class=\"solaris-breadcrumb-icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\n }\n <span class=\"solaris-breadcrumb-label\">{{ it.label }}</span>\n </span>\n }\n </ng-template>\n</nav>\n\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 var(--solaris-motion-duration-base) var(--solaris-motion-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"] }]
|
|
448
448
|
}], propDecorators: { minItems: [{
|
|
449
449
|
type: Input,
|
|
450
450
|
args: [{ alias: 'min-items' }]
|
|
@@ -486,11 +486,11 @@ class SolarisStepperItem {
|
|
|
486
486
|
headerId = '';
|
|
487
487
|
panelId = '';
|
|
488
488
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisStepperItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
489
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: SolarisStepperItem, isStandalone: true, selector: "solaris-stepper-item", inputs: { stepId: "stepId", label: "label", labelKey: "labelKey", title: "title", titleKey: "titleKey", description: "description", descriptionKey: "descriptionKey", icon: "icon", optional: "optional", phase: "phase", status: "status", badgeText: "badgeText", badgeTextKey: "badgeTextKey", badgeColor: "badgeColor", badgeSize: "badgeSize", badgeVariant: "badgeVariant", badgePill: "badgePill" }, ngImport: i0, template: "<section\n class=\"solaris-stepper-
|
|
489
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: SolarisStepperItem, isStandalone: true, selector: "solaris-stepper-item", inputs: { stepId: "stepId", label: "label", labelKey: "labelKey", title: "title", titleKey: "titleKey", description: "description", descriptionKey: "descriptionKey", icon: "icon", optional: "optional", phase: "phase", status: "status", badgeText: "badgeText", badgeTextKey: "badgeTextKey", badgeColor: "badgeColor", badgeSize: "badgeSize", badgeVariant: "badgeVariant", badgePill: "badgePill" }, ngImport: i0, template: "<section\n class=\"solaris-stepper-item-panel\"\n role=\"tabpanel\"\n [id]=\"panelId\"\n [attr.aria-labelledby]=\"headerId\"\n [attr.aria-hidden]=\"!active\"\n [attr.hidden]=\"active ? null : ''\"\n>\n <ng-content></ng-content>\n</section>\n\r\n", styles: [":host{display:block;min-width:0}.solaris-stepper-item-panel{min-width:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
490
490
|
}
|
|
491
491
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisStepperItem, decorators: [{
|
|
492
492
|
type: Component,
|
|
493
|
-
args: [{ selector: 'solaris-stepper-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"solaris-stepper-
|
|
493
|
+
args: [{ selector: 'solaris-stepper-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"solaris-stepper-item-panel\"\n role=\"tabpanel\"\n [id]=\"panelId\"\n [attr.aria-labelledby]=\"headerId\"\n [attr.aria-hidden]=\"!active\"\n [attr.hidden]=\"active ? null : ''\"\n>\n <ng-content></ng-content>\n</section>\n\r\n", styles: [":host{display:block;min-width:0}.solaris-stepper-item-panel{min-width:0}\n"] }]
|
|
494
494
|
}], propDecorators: { stepId: [{
|
|
495
495
|
type: Input
|
|
496
496
|
}], label: [{
|
|
@@ -901,11 +901,11 @@ class SolarisStepper {
|
|
|
901
901
|
button?.focus();
|
|
902
902
|
}
|
|
903
903
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisStepper, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
904
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisStepper, isStandalone: true, selector: "solaris-stepper", inputs: { orientation: "orientation", appearance: "appearance", linear: "linear", interactive: "interactive", activeIndex: "activeIndex", defaultActiveIndex: "defaultActiveIndex", allowBackNavigation: "allowBackNavigation", allowFutureNavigation: "allowFutureNavigation", allowSkip: "allowSkip", renderPanels: "renderPanels", showStateBadges: "showStateBadges" }, outputs: { activeIndexChange: "activeIndexChange", nextChange: "next", previousChange: "previous", stepChange: "stepChange" }, queries: [{ propertyName: "itemsQuery", predicate: SolarisStepperItem }], viewQueries: [{ propertyName: "stepButtons", predicate: ["stepButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"solaris-stepper\" [ngClass]=\"['orientation-' + orientation, 'appearance-' + appearance]\">\n <div class=\"solaris-stepper__rail\" role=\"tablist\" [attr.aria-orientation]=\"orientation\">\n @for (item of items; track trackByIndex($index); let i = $index; let last = $last) {\n <div class=\"solaris-stepper__node\">\n <button\n #stepButton\n type=\"button\"\n role=\"tab\"\n class=\"solaris-stepper__step\"\n [id]=\"item.headerId\"\n [attr.aria-controls]=\"item.panelId\"\n [attr.aria-selected]=\"isCurrent(i)\"\n [attr.aria-current]=\"isCurrent(i) ? 'step' : null\"\n [attr.aria-disabled]=\"item.status === 'disabled' || item.status === 'locked'\"\n [attr.tabindex]=\"isCurrent(i) ? 0 : -1\"\n [ngClass]=\"getStepClasses(item, i)\"\n (click)=\"onStepHeaderClick(i)\"\n (keydown)=\"onStepKeydown($event, i)\"\n >\n <span class=\"solaris-stepper__marker\" [ngClass]=\"getStepClasses(item, i)\">\n @if (getMarkerIcon(item, i)) {\n <i class=\"ph\" [ngClass]=\"getMarkerIcon(item, i)\" aria-hidden=\"true\"></i>\n }\n\n @if (getMarkerText(item, i)) {\n <span>{{ getMarkerText(item, i) }}</span>\n }\n </span>\n\n <span class=\"solaris-stepper__meta\">\n <span class=\"solaris-stepper__label\">\n @if (item.labelKey) {\n {{ item.labelKey | translate }}\n } @else if (item.label) {\n {{ item.label }}\n } @else {\n {{ 'ui.solaris.stepper.step' | translate }} {{ i + 1 }}\n }\n </span>\n\n <span class=\"solaris-stepper__title\">\n @if (item.titleKey) {\n {{ item.titleKey | translate }}\n } @else {\n {{ item.title }}\n }\n </span>\n\n @if (item.descriptionKey || item.description) {\n <span class=\"solaris-stepper__description\">\n @if (item.descriptionKey) {\n {{ item.descriptionKey | translate }}\n } @else {\n {{ item.description }}\n }\n </span>\n }\n\n @if (item.optional) {\n <span class=\"solaris-stepper__optional\">\n {{ 'ui.solaris.stepper.optional' | translate }}\n </span>\n }\n </span>\n\n @if (hasBadge(item, i)) {\n <solaris-badge class=\"solaris-stepper__badge\" [size]=\"item.badgeSize\" [color]=\"getResolvedBadgeColor(item, i)\"\n aria-hidden=\"true\">\n @if (item.badgeTextKey) {\n {{ item.badgeTextKey | translate }}\n } @else if (item.badgeText) {\n {{ item.badgeText }}\n } @else {\n {{ getAutoBadgeTranslationKey(item, i) | translate }}\n }\n </solaris-badge>\n }\n </button>\n\n @if (!last) {\n <span class=\"solaris-stepper__connector\" [ngClass]=\"getConnectorClasses(i)\" aria-hidden=\"true\"></span>\n }\n </div>\n }\n </div>\n\n @if (renderPanels) {\n <div class=\"solaris-stepper__content\">\n <ng-content></ng-content>\n </div>\n }\n</div>\n", styles: [":host{display:block;min-width:0}.solaris-stepper{--solaris-stepper-marker-size: var(--solaris-indicator-size-md);--solaris-stepper-marker-icon-size: var(--solaris-indicator-icon-size-sm);--solaris-stepper-marker-check-size: var(--solaris-indicator-check-size-sm);--solaris-stepper-marker-check-stroke: var(--solaris-indicator-check-stroke-sm);display:grid;gap:var(--solaris-space-6);min-width:0}.solaris-stepper.orientation-horizontal{grid-template-columns:minmax(0,1fr)}.solaris-stepper.orientation-vertical{grid-template-columns:minmax(16rem,20rem) minmax(0,1fr);align-items:start}.solaris-stepper__rail{min-width:0}.solaris-stepper.orientation-horizontal .solaris-stepper__rail{display:flex;align-items:stretch;overflow-x:auto;gap:var(--solaris-space-2);padding-bottom:var(--solaris-space-1)}.solaris-stepper.orientation-vertical .solaris-stepper__rail{display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-stepper__node{min-width:0}.solaris-stepper.orientation-horizontal .solaris-stepper__node{flex:1 1 0;display:flex;align-items:center;min-width:11rem}.solaris-stepper.orientation-vertical .solaris-stepper__node{display:flex;flex-direction:column;align-items:stretch}.solaris-stepper__step{width:100%;min-width:0;display:flex;align-items:flex-start;gap:var(--solaris-space-2);padding:var(--solaris-space-2) var(--solaris-space-3);border:1px solid transparent;background:transparent;border-radius:var(--solaris-radius-md);color:var(--solaris-color-text);text-align:left;transition:background var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-stepper__step.is-clickable{cursor:pointer}.solaris-stepper__step.is-clickable:hover{background:color-mix(in srgb,var(--solaris-color-surface-2) 78%,transparent)}.solaris-stepper__step.is-current{background:color-mix(in srgb,var(--solaris-color-primary) 8%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-primary) 35%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-disabled,.solaris-stepper__step.is-locked{opacity:.65;cursor:not-allowed}.solaris-stepper__step:focus-visible{outline:none;box-shadow:0 0 0 .2rem color-mix(in srgb,var(--solaris-color-primary) 28%,transparent),var(--solaris-shadow-xs)}.solaris-stepper__marker{inline-size:var(--solaris-stepper-marker-size);block-size:var(--solaris-stepper-marker-size);min-inline-size:var(--solaris-stepper-marker-size);min-block-size:var(--solaris-stepper-marker-size);aspect-ratio:1/1;display:inline-grid;place-items:center;box-sizing:border-box;line-height:0;border-radius:var(--solaris-indicator-radius);border:var(--solaris-indicator-border-width) solid var(--solaris-indicator-border);background:var(--solaris-indicator-bg);color:var(--solaris-indicator-fg);box-shadow:var(--solaris-indicator-shadow);flex:0 0 var(--solaris-stepper-marker-size);overflow:hidden;font-size:var(--solaris-fs-12);font-weight:700}.solaris-stepper__marker>span{display:inline-grid;place-items:center;inline-size:100%;block-size:100%;line-height:1;text-align:center}.solaris-stepper__marker i{display:inline-grid;place-items:center;inline-size:100%;block-size:100%;margin:0;padding:0;color:currentColor;font-size:var(--solaris-stepper-marker-icon-size);line-height:1;text-align:center}.solaris-stepper__marker i:before{display:block;margin:0;line-height:1}.solaris-stepper__marker i.ph-check{font-size:var(--solaris-stepper-marker-check-size);font-weight:700;-webkit-text-stroke:var(--solaris-stepper-marker-check-stroke) currentColor}.solaris-stepper__marker.is-current{background:var(--solaris-color-primary);border-color:var(--solaris-color-primary);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-completed{background:var(--solaris-color-success);border-color:var(--solaris-color-success);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-warning{border-color:var(--solaris-color-warning);color:var(--solaris-color-warning)}.solaris-stepper__marker.is-error{border-color:var(--solaris-color-error);color:var(--solaris-color-error)}.solaris-stepper__marker.is-locked,.solaris-stepper__marker.is-disabled{background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border);color:var(--solaris-color-text-muted)}.solaris-stepper__meta{display:grid;gap:var(--solaris-space-1);min-width:0;flex:1 1 auto}.solaris-stepper__label{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-10);line-height:var(--solaris-lh-tight);letter-spacing:var(--solaris-ls-lg);text-transform:uppercase;font-weight:700}.solaris-stepper__title{color:var(--solaris-color-text);font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);font-weight:700}.solaris-stepper__description{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed)}.solaris-stepper__optional{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-10);line-height:var(--solaris-lh-tight)}.solaris-stepper__badge{align-self:flex-start}.solaris-stepper__connector{background:var(--solaris-color-border);opacity:.8}.solaris-stepper.orientation-horizontal .solaris-stepper__connector{height:1px;flex:1 1 auto;min-width:var(--solaris-space-10)}.solaris-stepper.orientation-vertical .solaris-stepper__connector{width:1px;min-height:var(--solaris-space-8);margin-left:calc(var(--solaris-space-3) + 1rem)}.solaris-stepper__connector.is-completed,.solaris-stepper__connector.is-current{background:color-mix(in srgb,var(--solaris-color-primary) 75%,var(--solaris-color-success))}.solaris-stepper__step.is-current.is-warning,.solaris-stepper__step.is-completed.is-warning{background:color-mix(in srgb,var(--solaris-color-warning) 10%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-warning) 45%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-current.is-error,.solaris-stepper__step.is-completed.is-error{background:color-mix(in srgb,var(--solaris-color-error) 10%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-error) 45%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-current.is-locked,.solaris-stepper__step.is-completed.is-locked,.solaris-stepper__step.is-current.is-disabled,.solaris-stepper__step.is-completed.is-disabled{background:color-mix(in srgb,var(--solaris-color-surface-2) 65%,transparent);border-color:var(--solaris-color-border);box-shadow:none}.solaris-stepper__marker.is-current.is-warning,.solaris-stepper__marker.is-completed.is-warning{background:var(--solaris-color-warning);border-color:var(--solaris-color-warning);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-current.is-error,.solaris-stepper__marker.is-completed.is-error{background:var(--solaris-color-error);border-color:var(--solaris-color-error);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-current.is-locked,.solaris-stepper__marker.is-completed.is-locked,.solaris-stepper__marker.is-current.is-disabled,.solaris-stepper__marker.is-completed.is-disabled{background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border);color:var(--solaris-color-text-muted)}.solaris-stepper__content{min-width:0}.solaris-stepper.appearance-compact{gap:var(--solaris-space-4)}.solaris-stepper.appearance-compact .solaris-stepper__rail{display:flex;align-items:stretch;overflow-x:auto;gap:var(--solaris-space-4);padding-bottom:var(--solaris-space-1)}.solaris-stepper.appearance-compact .solaris-stepper__node{flex:1 0 auto;min-width:8rem}.solaris-stepper.appearance-compact .solaris-stepper__step{position:relative;padding:0 0 var(--solaris-space-3);gap:var(--solaris-space-1);background:transparent;border:0;border-radius:0;box-shadow:none;align-items:center}.solaris-stepper.appearance-compact .solaris-stepper__step.is-clickable:hover{background:transparent}.solaris-stepper.appearance-compact .solaris-stepper__step:after{content:\"\";position:absolute;left:0;right:0;bottom:-.25rem;height:.75rem;border-radius:var(--solaris-radius-full);background:var(--solaris-color-surface-2)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed:after{background:var(--solaris-color-primary)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning:after{background:var(--solaris-color-warning)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error:after{background:var(--solaris-color-error)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending:after{background:var(--solaris-color-surface-2)}.solaris-stepper.appearance-compact .solaris-stepper__marker{inline-size:auto;block-size:auto;min-inline-size:auto;min-block-size:auto;flex:0 0 auto;aspect-ratio:auto;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-12);font-weight:700;line-height:var(--solaris-lh-tight)}.solaris-stepper.appearance-compact .solaris-stepper__meta{display:block}.solaris-stepper.appearance-compact .solaris-stepper__label,.solaris-stepper.appearance-compact .solaris-stepper__description,.solaris-stepper.appearance-compact .solaris-stepper__optional,.solaris-stepper.appearance-compact .solaris-stepper__badge{display:none}.solaris-stepper.appearance-compact .solaris-stepper__title{font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-tight);font-weight:600;color:var(--solaris-color-text-muted);white-space:nowrap}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed .solaris-stepper__title{color:color-mix(in srgb,var(--solaris-color-primary) 65%,var(--solaris-color-white))}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning .solaris-stepper__title{color:var(--solaris-color-warning)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error .solaris-stepper__title{color:var(--solaris-color-error)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending .solaris-stepper__title{color:var(--solaris-color-text-muted)}.solaris-stepper.appearance-compact .solaris-stepper__connector{display:none}@media(max-width:768px){.solaris-stepper.orientation-vertical{grid-template-columns:minmax(0,1fr)}.solaris-stepper.orientation-vertical .solaris-stepper__rail{overflow-x:auto;flex-direction:row;gap:var(--solaris-space-4)}.solaris-stepper.orientation-vertical .solaris-stepper__node,.solaris-stepper.orientation-horizontal .solaris-stepper__node{min-width:10rem}.solaris-stepper.orientation-horizontal .solaris-stepper__connector,.solaris-stepper.orientation-vertical .solaris-stepper__connector{min-width:var(--solaris-space-8);min-height:1px;height:1px;width:auto;margin-left:0;flex:1 1 auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SolarisBadge, selector: "solaris-badge", inputs: ["shape", "size", "density", "color", "appearance", "customTextColor", "interactive", "aria-hidden"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
904
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisStepper, isStandalone: true, selector: "solaris-stepper", inputs: { orientation: "orientation", appearance: "appearance", linear: "linear", interactive: "interactive", activeIndex: "activeIndex", defaultActiveIndex: "defaultActiveIndex", allowBackNavigation: "allowBackNavigation", allowFutureNavigation: "allowFutureNavigation", allowSkip: "allowSkip", renderPanels: "renderPanels", showStateBadges: "showStateBadges" }, outputs: { activeIndexChange: "activeIndexChange", nextChange: "next", previousChange: "previous", stepChange: "stepChange" }, queries: [{ propertyName: "itemsQuery", predicate: SolarisStepperItem }], viewQueries: [{ propertyName: "stepButtons", predicate: ["stepButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"solaris-stepper\" [ngClass]=\"['orientation-' + orientation, 'appearance-' + appearance]\">\n <div class=\"solaris-stepper-rail\" role=\"tablist\" [attr.aria-orientation]=\"orientation\">\n @for (item of items; track trackByIndex($index); let i = $index; let last = $last) {\n <div class=\"solaris-stepper-node\">\n <button\n #stepButton\n type=\"button\"\n role=\"tab\"\n class=\"solaris-stepper-step\"\n [id]=\"item.headerId\"\n [attr.aria-controls]=\"item.panelId\"\n [attr.aria-selected]=\"isCurrent(i)\"\n [attr.aria-current]=\"isCurrent(i) ? 'step' : null\"\n [attr.aria-disabled]=\"item.status === 'disabled' || item.status === 'locked'\"\n [attr.tabindex]=\"isCurrent(i) ? 0 : -1\"\n [ngClass]=\"getStepClasses(item, i)\"\n (click)=\"onStepHeaderClick(i)\"\n (keydown)=\"onStepKeydown($event, i)\"\n >\n <span class=\"solaris-stepper-marker\" [ngClass]=\"getStepClasses(item, i)\">\n @if (getMarkerIcon(item, i)) {\n <i class=\"ph\" [ngClass]=\"getMarkerIcon(item, i)\" aria-hidden=\"true\"></i>\n }\n\n @if (getMarkerText(item, i)) {\n <span>{{ getMarkerText(item, i) }}</span>\n }\n </span>\n\n <span class=\"solaris-stepper-meta\">\n <span class=\"solaris-stepper-label\">\n @if (item.labelKey) {\n {{ item.labelKey | translate }}\n } @else if (item.label) {\n {{ item.label }}\n } @else {\n {{ 'ui.solaris.stepper.step' | translate }} {{ i + 1 }}\n }\n </span>\n\n <span class=\"solaris-stepper-title\">\n @if (item.titleKey) {\n {{ item.titleKey | translate }}\n } @else {\n {{ item.title }}\n }\n </span>\n\n @if (item.descriptionKey || item.description) {\n <span class=\"solaris-stepper-description\">\n @if (item.descriptionKey) {\n {{ item.descriptionKey | translate }}\n } @else {\n {{ item.description }}\n }\n </span>\n }\n\n @if (item.optional) {\n <span class=\"solaris-stepper-optional\">\n {{ 'ui.solaris.stepper.optional' | translate }}\n </span>\n }\n </span>\n\n @if (hasBadge(item, i)) {\n <solaris-badge class=\"solaris-stepper-badge\" [size]=\"item.badgeSize\" [color]=\"getResolvedBadgeColor(item, i)\"\n aria-hidden=\"true\">\n @if (item.badgeTextKey) {\n {{ item.badgeTextKey | translate }}\n } @else if (item.badgeText) {\n {{ item.badgeText }}\n } @else {\n {{ getAutoBadgeTranslationKey(item, i) | translate }}\n }\n </solaris-badge>\n }\n </button>\n\n @if (!last) {\n <span class=\"solaris-stepper-connector\" [ngClass]=\"getConnectorClasses(i)\" aria-hidden=\"true\"></span>\n }\n </div>\n }\n </div>\n\n @if (renderPanels) {\n <div class=\"solaris-stepper-content\">\n <ng-content></ng-content>\n </div>\n }\n</div>\n\r\n", styles: [":host{display:block;min-width:0}.solaris-stepper{--solaris-stepper-marker-size: var(--solaris-indicator-size-md);--solaris-stepper-marker-icon-size: var(--solaris-indicator-icon-size-sm);--solaris-stepper-marker-check-size: var(--solaris-indicator-check-size-sm);--solaris-stepper-marker-check-stroke: var(--solaris-indicator-check-stroke-sm);display:grid;gap:var(--solaris-space-6);min-width:0}.solaris-stepper.orientation-horizontal{grid-template-columns:minmax(0,1fr)}.solaris-stepper.orientation-vertical{grid-template-columns:minmax(16rem,20rem) minmax(0,1fr);align-items:start}.solaris-stepper-rail{min-width:0}.solaris-stepper.orientation-horizontal .solaris-stepper-rail{display:flex;align-items:stretch;overflow-x:auto;gap:var(--solaris-space-2);padding-bottom:var(--solaris-space-1)}.solaris-stepper.orientation-vertical .solaris-stepper-rail{display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-stepper-node{min-width:0}.solaris-stepper.orientation-horizontal .solaris-stepper-node{flex:1 1 0;display:flex;align-items:center;min-width:11rem}.solaris-stepper.orientation-vertical .solaris-stepper-node{display:flex;flex-direction:column;align-items:stretch}.solaris-stepper-step{width:100%;min-width:0;display:flex;align-items:flex-start;gap:var(--solaris-space-2);padding:var(--solaris-space-2) var(--solaris-space-3);border:1px solid transparent;background:transparent;border-radius:var(--solaris-radius-md);color:var(--solaris-color-text);text-align:left;transition:background var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-stepper-step.is-clickable{cursor:pointer}.solaris-stepper-step.is-clickable:hover{background:color-mix(in srgb,var(--solaris-color-surface-2) 78%,transparent)}.solaris-stepper-step.is-current{background:color-mix(in srgb,var(--solaris-color-primary) 8%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-primary) 35%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper-step.is-disabled,.solaris-stepper-step.is-locked{opacity:.65;cursor:not-allowed}.solaris-stepper-step:focus-visible{outline:none;box-shadow:0 0 0 .2rem color-mix(in srgb,var(--solaris-color-primary) 28%,transparent),var(--solaris-shadow-xs)}.solaris-stepper-marker{inline-size:var(--solaris-stepper-marker-size);block-size:var(--solaris-stepper-marker-size);min-inline-size:var(--solaris-stepper-marker-size);min-block-size:var(--solaris-stepper-marker-size);aspect-ratio:1/1;display:inline-grid;place-items:center;box-sizing:border-box;line-height:0;border-radius:var(--solaris-indicator-radius);border:var(--solaris-indicator-border-width) solid var(--solaris-indicator-border);background:var(--solaris-indicator-bg);color:var(--solaris-indicator-fg);box-shadow:var(--solaris-indicator-shadow);flex:0 0 var(--solaris-stepper-marker-size);overflow:hidden;font-size:var(--solaris-fs-12);font-weight:700}.solaris-stepper-marker>span{display:inline-grid;place-items:center;inline-size:100%;block-size:100%;line-height:1;text-align:center}.solaris-stepper-marker i{display:inline-grid;place-items:center;inline-size:100%;block-size:100%;margin:0;padding:0;color:currentColor;font-size:var(--solaris-stepper-marker-icon-size);line-height:1;text-align:center}.solaris-stepper-marker i:before{display:block;margin:0;line-height:1}.solaris-stepper-marker i.ph-check{font-size:var(--solaris-stepper-marker-check-size);font-weight:700;-webkit-text-stroke:var(--solaris-stepper-marker-check-stroke) currentColor}.solaris-stepper-marker.is-current{background:var(--solaris-color-primary);border-color:var(--solaris-color-primary);color:var(--solaris-color-primary-contrast)}.solaris-stepper-marker.is-completed{background:var(--solaris-color-success);border-color:var(--solaris-color-success);color:var(--solaris-color-primary-contrast)}.solaris-stepper-marker.is-warning{border-color:var(--solaris-color-warning);color:var(--solaris-color-warning)}.solaris-stepper-marker.is-error{border-color:var(--solaris-color-error);color:var(--solaris-color-error)}.solaris-stepper-marker.is-locked,.solaris-stepper-marker.is-disabled{background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border);color:var(--solaris-color-text-muted)}.solaris-stepper-meta{display:grid;gap:var(--solaris-space-1);min-width:0;flex:1 1 auto}.solaris-stepper-label{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-10);line-height:var(--solaris-lh-tight);letter-spacing:var(--solaris-ls-lg);text-transform:uppercase;font-weight:700}.solaris-stepper-title{color:var(--solaris-color-text);font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);font-weight:700}.solaris-stepper-description{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed)}.solaris-stepper-optional{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-10);line-height:var(--solaris-lh-tight)}.solaris-stepper-badge{align-self:flex-start}.solaris-stepper-connector{background:var(--solaris-color-border);opacity:.8}.solaris-stepper.orientation-horizontal .solaris-stepper-connector{height:1px;flex:1 1 auto;min-width:var(--solaris-space-10)}.solaris-stepper.orientation-vertical .solaris-stepper-connector{width:1px;min-height:var(--solaris-space-8);margin-left:calc(var(--solaris-space-3) + 1rem)}.solaris-stepper-connector.is-completed,.solaris-stepper-connector.is-current{background:color-mix(in srgb,var(--solaris-color-primary) 75%,var(--solaris-color-success))}.solaris-stepper-step.is-current.is-warning,.solaris-stepper-step.is-completed.is-warning{background:color-mix(in srgb,var(--solaris-color-warning) 10%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-warning) 45%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper-step.is-current.is-error,.solaris-stepper-step.is-completed.is-error{background:color-mix(in srgb,var(--solaris-color-error) 10%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-error) 45%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper-step.is-current.is-locked,.solaris-stepper-step.is-completed.is-locked,.solaris-stepper-step.is-current.is-disabled,.solaris-stepper-step.is-completed.is-disabled{background:color-mix(in srgb,var(--solaris-color-surface-2) 65%,transparent);border-color:var(--solaris-color-border);box-shadow:none}.solaris-stepper-marker.is-current.is-warning,.solaris-stepper-marker.is-completed.is-warning{background:var(--solaris-color-warning);border-color:var(--solaris-color-warning);color:var(--solaris-color-primary-contrast)}.solaris-stepper-marker.is-current.is-error,.solaris-stepper-marker.is-completed.is-error{background:var(--solaris-color-error);border-color:var(--solaris-color-error);color:var(--solaris-color-primary-contrast)}.solaris-stepper-marker.is-current.is-locked,.solaris-stepper-marker.is-completed.is-locked,.solaris-stepper-marker.is-current.is-disabled,.solaris-stepper-marker.is-completed.is-disabled{background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border);color:var(--solaris-color-text-muted)}.solaris-stepper-content{min-width:0}.solaris-stepper.appearance-compact{gap:var(--solaris-space-4)}.solaris-stepper.appearance-compact .solaris-stepper-rail{display:flex;align-items:stretch;overflow-x:auto;gap:var(--solaris-space-4);padding-bottom:var(--solaris-space-1)}.solaris-stepper.appearance-compact .solaris-stepper-node{flex:1 0 auto;min-width:8rem}.solaris-stepper.appearance-compact .solaris-stepper-step{position:relative;padding:0 0 var(--solaris-space-3);gap:var(--solaris-space-1);background:transparent;border:0;border-radius:0;box-shadow:none;align-items:center}.solaris-stepper.appearance-compact .solaris-stepper-step.is-clickable:hover{background:transparent}.solaris-stepper.appearance-compact .solaris-stepper-step:after{content:\"\";position:absolute;left:0;right:0;bottom:-.25rem;height:.75rem;border-radius:var(--solaris-radius-full);background:var(--solaris-color-surface-2)}.solaris-stepper.appearance-compact .solaris-stepper-step.is-current:after,.solaris-stepper.appearance-compact .solaris-stepper-step.is-completed:after{background:var(--solaris-color-primary)}.solaris-stepper.appearance-compact .solaris-stepper-step.is-current.is-warning:after,.solaris-stepper.appearance-compact .solaris-stepper-step.is-completed.is-warning:after{background:var(--solaris-color-warning)}.solaris-stepper.appearance-compact .solaris-stepper-step.is-current.is-error:after,.solaris-stepper.appearance-compact .solaris-stepper-step.is-completed.is-error:after{background:var(--solaris-color-error)}.solaris-stepper.appearance-compact .solaris-stepper-step.is-disabled:after,.solaris-stepper.appearance-compact .solaris-stepper-step.is-locked:after,.solaris-stepper.appearance-compact .solaris-stepper-step.is-pending:after{background:var(--solaris-color-surface-2)}.solaris-stepper.appearance-compact .solaris-stepper-marker{inline-size:auto;block-size:auto;min-inline-size:auto;min-block-size:auto;flex:0 0 auto;aspect-ratio:auto;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-12);font-weight:700;line-height:var(--solaris-lh-tight)}.solaris-stepper.appearance-compact .solaris-stepper-meta{display:block}.solaris-stepper.appearance-compact .solaris-stepper-label,.solaris-stepper.appearance-compact .solaris-stepper-description,.solaris-stepper.appearance-compact .solaris-stepper-optional,.solaris-stepper.appearance-compact .solaris-stepper-badge{display:none}.solaris-stepper.appearance-compact .solaris-stepper-title{font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-tight);font-weight:600;color:var(--solaris-color-text-muted);white-space:nowrap}.solaris-stepper.appearance-compact .solaris-stepper-step.is-current .solaris-stepper-marker,.solaris-stepper.appearance-compact .solaris-stepper-step.is-current .solaris-stepper-title,.solaris-stepper.appearance-compact .solaris-stepper-step.is-completed .solaris-stepper-marker,.solaris-stepper.appearance-compact .solaris-stepper-step.is-completed .solaris-stepper-title{color:color-mix(in srgb,var(--solaris-color-primary) 65%,var(--solaris-color-white))}.solaris-stepper.appearance-compact .solaris-stepper-step.is-current.is-warning .solaris-stepper-marker,.solaris-stepper.appearance-compact .solaris-stepper-step.is-current.is-warning .solaris-stepper-title,.solaris-stepper.appearance-compact .solaris-stepper-step.is-completed.is-warning .solaris-stepper-marker,.solaris-stepper.appearance-compact .solaris-stepper-step.is-completed.is-warning .solaris-stepper-title{color:var(--solaris-color-warning)}.solaris-stepper.appearance-compact .solaris-stepper-step.is-current.is-error .solaris-stepper-marker,.solaris-stepper.appearance-compact .solaris-stepper-step.is-current.is-error .solaris-stepper-title,.solaris-stepper.appearance-compact .solaris-stepper-step.is-completed.is-error .solaris-stepper-marker,.solaris-stepper.appearance-compact .solaris-stepper-step.is-completed.is-error .solaris-stepper-title{color:var(--solaris-color-error)}.solaris-stepper.appearance-compact .solaris-stepper-step.is-disabled .solaris-stepper-marker,.solaris-stepper.appearance-compact .solaris-stepper-step.is-disabled .solaris-stepper-title,.solaris-stepper.appearance-compact .solaris-stepper-step.is-locked .solaris-stepper-marker,.solaris-stepper.appearance-compact .solaris-stepper-step.is-locked .solaris-stepper-title,.solaris-stepper.appearance-compact .solaris-stepper-step.is-pending .solaris-stepper-marker,.solaris-stepper.appearance-compact .solaris-stepper-step.is-pending .solaris-stepper-title{color:var(--solaris-color-text-muted)}.solaris-stepper.appearance-compact .solaris-stepper-connector{display:none}@media(max-width:768px){.solaris-stepper.orientation-vertical{grid-template-columns:minmax(0,1fr)}.solaris-stepper.orientation-vertical .solaris-stepper-rail{overflow-x:auto;flex-direction:row;gap:var(--solaris-space-4)}.solaris-stepper.orientation-vertical .solaris-stepper-node,.solaris-stepper.orientation-horizontal .solaris-stepper-node{min-width:10rem}.solaris-stepper.orientation-horizontal .solaris-stepper-connector,.solaris-stepper.orientation-vertical .solaris-stepper-connector{min-width:var(--solaris-space-8);min-height:1px;height:1px;width:auto;margin-left:0;flex:1 1 auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SolarisBadge, selector: "solaris-badge", inputs: ["shape", "size", "density", "color", "appearance", "customTextColor", "interactive", "aria-hidden"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
905
905
|
}
|
|
906
906
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisStepper, decorators: [{
|
|
907
907
|
type: Component,
|
|
908
|
-
args: [{ selector: 'solaris-stepper', standalone: true, imports: [CommonModule, SolarisTranslationPipe, SolarisBadge], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-stepper\" [ngClass]=\"['orientation-' + orientation, 'appearance-' + appearance]\">\n <div class=\"solaris-stepper__rail\" role=\"tablist\" [attr.aria-orientation]=\"orientation\">\n @for (item of items; track trackByIndex($index); let i = $index; let last = $last) {\n <div class=\"solaris-stepper__node\">\n <button\n #stepButton\n type=\"button\"\n role=\"tab\"\n class=\"solaris-stepper__step\"\n [id]=\"item.headerId\"\n [attr.aria-controls]=\"item.panelId\"\n [attr.aria-selected]=\"isCurrent(i)\"\n [attr.aria-current]=\"isCurrent(i) ? 'step' : null\"\n [attr.aria-disabled]=\"item.status === 'disabled' || item.status === 'locked'\"\n [attr.tabindex]=\"isCurrent(i) ? 0 : -1\"\n [ngClass]=\"getStepClasses(item, i)\"\n (click)=\"onStepHeaderClick(i)\"\n (keydown)=\"onStepKeydown($event, i)\"\n >\n <span class=\"solaris-stepper__marker\" [ngClass]=\"getStepClasses(item, i)\">\n @if (getMarkerIcon(item, i)) {\n <i class=\"ph\" [ngClass]=\"getMarkerIcon(item, i)\" aria-hidden=\"true\"></i>\n }\n\n @if (getMarkerText(item, i)) {\n <span>{{ getMarkerText(item, i) }}</span>\n }\n </span>\n\n <span class=\"solaris-stepper__meta\">\n <span class=\"solaris-stepper__label\">\n @if (item.labelKey) {\n {{ item.labelKey | translate }}\n } @else if (item.label) {\n {{ item.label }}\n } @else {\n {{ 'ui.solaris.stepper.step' | translate }} {{ i + 1 }}\n }\n </span>\n\n <span class=\"solaris-stepper__title\">\n @if (item.titleKey) {\n {{ item.titleKey | translate }}\n } @else {\n {{ item.title }}\n }\n </span>\n\n @if (item.descriptionKey || item.description) {\n <span class=\"solaris-stepper__description\">\n @if (item.descriptionKey) {\n {{ item.descriptionKey | translate }}\n } @else {\n {{ item.description }}\n }\n </span>\n }\n\n @if (item.optional) {\n <span class=\"solaris-stepper__optional\">\n {{ 'ui.solaris.stepper.optional' | translate }}\n </span>\n }\n </span>\n\n @if (hasBadge(item, i)) {\n <solaris-badge class=\"solaris-stepper__badge\" [size]=\"item.badgeSize\" [color]=\"getResolvedBadgeColor(item, i)\"\n aria-hidden=\"true\">\n @if (item.badgeTextKey) {\n {{ item.badgeTextKey | translate }}\n } @else if (item.badgeText) {\n {{ item.badgeText }}\n } @else {\n {{ getAutoBadgeTranslationKey(item, i) | translate }}\n }\n </solaris-badge>\n }\n </button>\n\n @if (!last) {\n <span class=\"solaris-stepper__connector\" [ngClass]=\"getConnectorClasses(i)\" aria-hidden=\"true\"></span>\n }\n </div>\n }\n </div>\n\n @if (renderPanels) {\n <div class=\"solaris-stepper__content\">\n <ng-content></ng-content>\n </div>\n }\n</div>\n", styles: [":host{display:block;min-width:0}.solaris-stepper{--solaris-stepper-marker-size: var(--solaris-indicator-size-md);--solaris-stepper-marker-icon-size: var(--solaris-indicator-icon-size-sm);--solaris-stepper-marker-check-size: var(--solaris-indicator-check-size-sm);--solaris-stepper-marker-check-stroke: var(--solaris-indicator-check-stroke-sm);display:grid;gap:var(--solaris-space-6);min-width:0}.solaris-stepper.orientation-horizontal{grid-template-columns:minmax(0,1fr)}.solaris-stepper.orientation-vertical{grid-template-columns:minmax(16rem,20rem) minmax(0,1fr);align-items:start}.solaris-stepper__rail{min-width:0}.solaris-stepper.orientation-horizontal .solaris-stepper__rail{display:flex;align-items:stretch;overflow-x:auto;gap:var(--solaris-space-2);padding-bottom:var(--solaris-space-1)}.solaris-stepper.orientation-vertical .solaris-stepper__rail{display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-stepper__node{min-width:0}.solaris-stepper.orientation-horizontal .solaris-stepper__node{flex:1 1 0;display:flex;align-items:center;min-width:11rem}.solaris-stepper.orientation-vertical .solaris-stepper__node{display:flex;flex-direction:column;align-items:stretch}.solaris-stepper__step{width:100%;min-width:0;display:flex;align-items:flex-start;gap:var(--solaris-space-2);padding:var(--solaris-space-2) var(--solaris-space-3);border:1px solid transparent;background:transparent;border-radius:var(--solaris-radius-md);color:var(--solaris-color-text);text-align:left;transition:background var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-stepper__step.is-clickable{cursor:pointer}.solaris-stepper__step.is-clickable:hover{background:color-mix(in srgb,var(--solaris-color-surface-2) 78%,transparent)}.solaris-stepper__step.is-current{background:color-mix(in srgb,var(--solaris-color-primary) 8%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-primary) 35%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-disabled,.solaris-stepper__step.is-locked{opacity:.65;cursor:not-allowed}.solaris-stepper__step:focus-visible{outline:none;box-shadow:0 0 0 .2rem color-mix(in srgb,var(--solaris-color-primary) 28%,transparent),var(--solaris-shadow-xs)}.solaris-stepper__marker{inline-size:var(--solaris-stepper-marker-size);block-size:var(--solaris-stepper-marker-size);min-inline-size:var(--solaris-stepper-marker-size);min-block-size:var(--solaris-stepper-marker-size);aspect-ratio:1/1;display:inline-grid;place-items:center;box-sizing:border-box;line-height:0;border-radius:var(--solaris-indicator-radius);border:var(--solaris-indicator-border-width) solid var(--solaris-indicator-border);background:var(--solaris-indicator-bg);color:var(--solaris-indicator-fg);box-shadow:var(--solaris-indicator-shadow);flex:0 0 var(--solaris-stepper-marker-size);overflow:hidden;font-size:var(--solaris-fs-12);font-weight:700}.solaris-stepper__marker>span{display:inline-grid;place-items:center;inline-size:100%;block-size:100%;line-height:1;text-align:center}.solaris-stepper__marker i{display:inline-grid;place-items:center;inline-size:100%;block-size:100%;margin:0;padding:0;color:currentColor;font-size:var(--solaris-stepper-marker-icon-size);line-height:1;text-align:center}.solaris-stepper__marker i:before{display:block;margin:0;line-height:1}.solaris-stepper__marker i.ph-check{font-size:var(--solaris-stepper-marker-check-size);font-weight:700;-webkit-text-stroke:var(--solaris-stepper-marker-check-stroke) currentColor}.solaris-stepper__marker.is-current{background:var(--solaris-color-primary);border-color:var(--solaris-color-primary);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-completed{background:var(--solaris-color-success);border-color:var(--solaris-color-success);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-warning{border-color:var(--solaris-color-warning);color:var(--solaris-color-warning)}.solaris-stepper__marker.is-error{border-color:var(--solaris-color-error);color:var(--solaris-color-error)}.solaris-stepper__marker.is-locked,.solaris-stepper__marker.is-disabled{background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border);color:var(--solaris-color-text-muted)}.solaris-stepper__meta{display:grid;gap:var(--solaris-space-1);min-width:0;flex:1 1 auto}.solaris-stepper__label{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-10);line-height:var(--solaris-lh-tight);letter-spacing:var(--solaris-ls-lg);text-transform:uppercase;font-weight:700}.solaris-stepper__title{color:var(--solaris-color-text);font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);font-weight:700}.solaris-stepper__description{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed)}.solaris-stepper__optional{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-10);line-height:var(--solaris-lh-tight)}.solaris-stepper__badge{align-self:flex-start}.solaris-stepper__connector{background:var(--solaris-color-border);opacity:.8}.solaris-stepper.orientation-horizontal .solaris-stepper__connector{height:1px;flex:1 1 auto;min-width:var(--solaris-space-10)}.solaris-stepper.orientation-vertical .solaris-stepper__connector{width:1px;min-height:var(--solaris-space-8);margin-left:calc(var(--solaris-space-3) + 1rem)}.solaris-stepper__connector.is-completed,.solaris-stepper__connector.is-current{background:color-mix(in srgb,var(--solaris-color-primary) 75%,var(--solaris-color-success))}.solaris-stepper__step.is-current.is-warning,.solaris-stepper__step.is-completed.is-warning{background:color-mix(in srgb,var(--solaris-color-warning) 10%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-warning) 45%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-current.is-error,.solaris-stepper__step.is-completed.is-error{background:color-mix(in srgb,var(--solaris-color-error) 10%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-error) 45%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper__step.is-current.is-locked,.solaris-stepper__step.is-completed.is-locked,.solaris-stepper__step.is-current.is-disabled,.solaris-stepper__step.is-completed.is-disabled{background:color-mix(in srgb,var(--solaris-color-surface-2) 65%,transparent);border-color:var(--solaris-color-border);box-shadow:none}.solaris-stepper__marker.is-current.is-warning,.solaris-stepper__marker.is-completed.is-warning{background:var(--solaris-color-warning);border-color:var(--solaris-color-warning);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-current.is-error,.solaris-stepper__marker.is-completed.is-error{background:var(--solaris-color-error);border-color:var(--solaris-color-error);color:var(--solaris-color-primary-contrast)}.solaris-stepper__marker.is-current.is-locked,.solaris-stepper__marker.is-completed.is-locked,.solaris-stepper__marker.is-current.is-disabled,.solaris-stepper__marker.is-completed.is-disabled{background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border);color:var(--solaris-color-text-muted)}.solaris-stepper__content{min-width:0}.solaris-stepper.appearance-compact{gap:var(--solaris-space-4)}.solaris-stepper.appearance-compact .solaris-stepper__rail{display:flex;align-items:stretch;overflow-x:auto;gap:var(--solaris-space-4);padding-bottom:var(--solaris-space-1)}.solaris-stepper.appearance-compact .solaris-stepper__node{flex:1 0 auto;min-width:8rem}.solaris-stepper.appearance-compact .solaris-stepper__step{position:relative;padding:0 0 var(--solaris-space-3);gap:var(--solaris-space-1);background:transparent;border:0;border-radius:0;box-shadow:none;align-items:center}.solaris-stepper.appearance-compact .solaris-stepper__step.is-clickable:hover{background:transparent}.solaris-stepper.appearance-compact .solaris-stepper__step:after{content:\"\";position:absolute;left:0;right:0;bottom:-.25rem;height:.75rem;border-radius:var(--solaris-radius-full);background:var(--solaris-color-surface-2)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed:after{background:var(--solaris-color-primary)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning:after{background:var(--solaris-color-warning)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error:after{background:var(--solaris-color-error)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked:after,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending:after{background:var(--solaris-color-surface-2)}.solaris-stepper.appearance-compact .solaris-stepper__marker{inline-size:auto;block-size:auto;min-inline-size:auto;min-block-size:auto;flex:0 0 auto;aspect-ratio:auto;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-12);font-weight:700;line-height:var(--solaris-lh-tight)}.solaris-stepper.appearance-compact .solaris-stepper__meta{display:block}.solaris-stepper.appearance-compact .solaris-stepper__label,.solaris-stepper.appearance-compact .solaris-stepper__description,.solaris-stepper.appearance-compact .solaris-stepper__optional,.solaris-stepper.appearance-compact .solaris-stepper__badge{display:none}.solaris-stepper.appearance-compact .solaris-stepper__title{font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-tight);font-weight:600;color:var(--solaris-color-text-muted);white-space:nowrap}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed .solaris-stepper__title{color:color-mix(in srgb,var(--solaris-color-primary) 65%,var(--solaris-color-white))}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-warning .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-warning .solaris-stepper__title{color:var(--solaris-color-warning)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-current.is-error .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-completed.is-error .solaris-stepper__title{color:var(--solaris-color-error)}.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-disabled .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-locked .solaris-stepper__title,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending .solaris-stepper__marker,.solaris-stepper.appearance-compact .solaris-stepper__step.is-pending .solaris-stepper__title{color:var(--solaris-color-text-muted)}.solaris-stepper.appearance-compact .solaris-stepper__connector{display:none}@media(max-width:768px){.solaris-stepper.orientation-vertical{grid-template-columns:minmax(0,1fr)}.solaris-stepper.orientation-vertical .solaris-stepper__rail{overflow-x:auto;flex-direction:row;gap:var(--solaris-space-4)}.solaris-stepper.orientation-vertical .solaris-stepper__node,.solaris-stepper.orientation-horizontal .solaris-stepper__node{min-width:10rem}.solaris-stepper.orientation-horizontal .solaris-stepper__connector,.solaris-stepper.orientation-vertical .solaris-stepper__connector{min-width:var(--solaris-space-8);min-height:1px;height:1px;width:auto;margin-left:0;flex:1 1 auto}}\n"] }]
|
|
908
|
+
args: [{ selector: 'solaris-stepper', standalone: true, imports: [CommonModule, SolarisTranslationPipe, SolarisBadge], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-stepper\" [ngClass]=\"['orientation-' + orientation, 'appearance-' + appearance]\">\n <div class=\"solaris-stepper-rail\" role=\"tablist\" [attr.aria-orientation]=\"orientation\">\n @for (item of items; track trackByIndex($index); let i = $index; let last = $last) {\n <div class=\"solaris-stepper-node\">\n <button\n #stepButton\n type=\"button\"\n role=\"tab\"\n class=\"solaris-stepper-step\"\n [id]=\"item.headerId\"\n [attr.aria-controls]=\"item.panelId\"\n [attr.aria-selected]=\"isCurrent(i)\"\n [attr.aria-current]=\"isCurrent(i) ? 'step' : null\"\n [attr.aria-disabled]=\"item.status === 'disabled' || item.status === 'locked'\"\n [attr.tabindex]=\"isCurrent(i) ? 0 : -1\"\n [ngClass]=\"getStepClasses(item, i)\"\n (click)=\"onStepHeaderClick(i)\"\n (keydown)=\"onStepKeydown($event, i)\"\n >\n <span class=\"solaris-stepper-marker\" [ngClass]=\"getStepClasses(item, i)\">\n @if (getMarkerIcon(item, i)) {\n <i class=\"ph\" [ngClass]=\"getMarkerIcon(item, i)\" aria-hidden=\"true\"></i>\n }\n\n @if (getMarkerText(item, i)) {\n <span>{{ getMarkerText(item, i) }}</span>\n }\n </span>\n\n <span class=\"solaris-stepper-meta\">\n <span class=\"solaris-stepper-label\">\n @if (item.labelKey) {\n {{ item.labelKey | translate }}\n } @else if (item.label) {\n {{ item.label }}\n } @else {\n {{ 'ui.solaris.stepper.step' | translate }} {{ i + 1 }}\n }\n </span>\n\n <span class=\"solaris-stepper-title\">\n @if (item.titleKey) {\n {{ item.titleKey | translate }}\n } @else {\n {{ item.title }}\n }\n </span>\n\n @if (item.descriptionKey || item.description) {\n <span class=\"solaris-stepper-description\">\n @if (item.descriptionKey) {\n {{ item.descriptionKey | translate }}\n } @else {\n {{ item.description }}\n }\n </span>\n }\n\n @if (item.optional) {\n <span class=\"solaris-stepper-optional\">\n {{ 'ui.solaris.stepper.optional' | translate }}\n </span>\n }\n </span>\n\n @if (hasBadge(item, i)) {\n <solaris-badge class=\"solaris-stepper-badge\" [size]=\"item.badgeSize\" [color]=\"getResolvedBadgeColor(item, i)\"\n aria-hidden=\"true\">\n @if (item.badgeTextKey) {\n {{ item.badgeTextKey | translate }}\n } @else if (item.badgeText) {\n {{ item.badgeText }}\n } @else {\n {{ getAutoBadgeTranslationKey(item, i) | translate }}\n }\n </solaris-badge>\n }\n </button>\n\n @if (!last) {\n <span class=\"solaris-stepper-connector\" [ngClass]=\"getConnectorClasses(i)\" aria-hidden=\"true\"></span>\n }\n </div>\n }\n </div>\n\n @if (renderPanels) {\n <div class=\"solaris-stepper-content\">\n <ng-content></ng-content>\n </div>\n }\n</div>\n\r\n", styles: [":host{display:block;min-width:0}.solaris-stepper{--solaris-stepper-marker-size: var(--solaris-indicator-size-md);--solaris-stepper-marker-icon-size: var(--solaris-indicator-icon-size-sm);--solaris-stepper-marker-check-size: var(--solaris-indicator-check-size-sm);--solaris-stepper-marker-check-stroke: var(--solaris-indicator-check-stroke-sm);display:grid;gap:var(--solaris-space-6);min-width:0}.solaris-stepper.orientation-horizontal{grid-template-columns:minmax(0,1fr)}.solaris-stepper.orientation-vertical{grid-template-columns:minmax(16rem,20rem) minmax(0,1fr);align-items:start}.solaris-stepper-rail{min-width:0}.solaris-stepper.orientation-horizontal .solaris-stepper-rail{display:flex;align-items:stretch;overflow-x:auto;gap:var(--solaris-space-2);padding-bottom:var(--solaris-space-1)}.solaris-stepper.orientation-vertical .solaris-stepper-rail{display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-stepper-node{min-width:0}.solaris-stepper.orientation-horizontal .solaris-stepper-node{flex:1 1 0;display:flex;align-items:center;min-width:11rem}.solaris-stepper.orientation-vertical .solaris-stepper-node{display:flex;flex-direction:column;align-items:stretch}.solaris-stepper-step{width:100%;min-width:0;display:flex;align-items:flex-start;gap:var(--solaris-space-2);padding:var(--solaris-space-2) var(--solaris-space-3);border:1px solid transparent;background:transparent;border-radius:var(--solaris-radius-md);color:var(--solaris-color-text);text-align:left;transition:background var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-stepper-step.is-clickable{cursor:pointer}.solaris-stepper-step.is-clickable:hover{background:color-mix(in srgb,var(--solaris-color-surface-2) 78%,transparent)}.solaris-stepper-step.is-current{background:color-mix(in srgb,var(--solaris-color-primary) 8%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-primary) 35%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper-step.is-disabled,.solaris-stepper-step.is-locked{opacity:.65;cursor:not-allowed}.solaris-stepper-step:focus-visible{outline:none;box-shadow:0 0 0 .2rem color-mix(in srgb,var(--solaris-color-primary) 28%,transparent),var(--solaris-shadow-xs)}.solaris-stepper-marker{inline-size:var(--solaris-stepper-marker-size);block-size:var(--solaris-stepper-marker-size);min-inline-size:var(--solaris-stepper-marker-size);min-block-size:var(--solaris-stepper-marker-size);aspect-ratio:1/1;display:inline-grid;place-items:center;box-sizing:border-box;line-height:0;border-radius:var(--solaris-indicator-radius);border:var(--solaris-indicator-border-width) solid var(--solaris-indicator-border);background:var(--solaris-indicator-bg);color:var(--solaris-indicator-fg);box-shadow:var(--solaris-indicator-shadow);flex:0 0 var(--solaris-stepper-marker-size);overflow:hidden;font-size:var(--solaris-fs-12);font-weight:700}.solaris-stepper-marker>span{display:inline-grid;place-items:center;inline-size:100%;block-size:100%;line-height:1;text-align:center}.solaris-stepper-marker i{display:inline-grid;place-items:center;inline-size:100%;block-size:100%;margin:0;padding:0;color:currentColor;font-size:var(--solaris-stepper-marker-icon-size);line-height:1;text-align:center}.solaris-stepper-marker i:before{display:block;margin:0;line-height:1}.solaris-stepper-marker i.ph-check{font-size:var(--solaris-stepper-marker-check-size);font-weight:700;-webkit-text-stroke:var(--solaris-stepper-marker-check-stroke) currentColor}.solaris-stepper-marker.is-current{background:var(--solaris-color-primary);border-color:var(--solaris-color-primary);color:var(--solaris-color-primary-contrast)}.solaris-stepper-marker.is-completed{background:var(--solaris-color-success);border-color:var(--solaris-color-success);color:var(--solaris-color-primary-contrast)}.solaris-stepper-marker.is-warning{border-color:var(--solaris-color-warning);color:var(--solaris-color-warning)}.solaris-stepper-marker.is-error{border-color:var(--solaris-color-error);color:var(--solaris-color-error)}.solaris-stepper-marker.is-locked,.solaris-stepper-marker.is-disabled{background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border);color:var(--solaris-color-text-muted)}.solaris-stepper-meta{display:grid;gap:var(--solaris-space-1);min-width:0;flex:1 1 auto}.solaris-stepper-label{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-10);line-height:var(--solaris-lh-tight);letter-spacing:var(--solaris-ls-lg);text-transform:uppercase;font-weight:700}.solaris-stepper-title{color:var(--solaris-color-text);font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);font-weight:700}.solaris-stepper-description{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed)}.solaris-stepper-optional{color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-10);line-height:var(--solaris-lh-tight)}.solaris-stepper-badge{align-self:flex-start}.solaris-stepper-connector{background:var(--solaris-color-border);opacity:.8}.solaris-stepper.orientation-horizontal .solaris-stepper-connector{height:1px;flex:1 1 auto;min-width:var(--solaris-space-10)}.solaris-stepper.orientation-vertical .solaris-stepper-connector{width:1px;min-height:var(--solaris-space-8);margin-left:calc(var(--solaris-space-3) + 1rem)}.solaris-stepper-connector.is-completed,.solaris-stepper-connector.is-current{background:color-mix(in srgb,var(--solaris-color-primary) 75%,var(--solaris-color-success))}.solaris-stepper-step.is-current.is-warning,.solaris-stepper-step.is-completed.is-warning{background:color-mix(in srgb,var(--solaris-color-warning) 10%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-warning) 45%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper-step.is-current.is-error,.solaris-stepper-step.is-completed.is-error{background:color-mix(in srgb,var(--solaris-color-error) 10%,var(--solaris-color-surface));border-color:color-mix(in srgb,var(--solaris-color-error) 45%,transparent);box-shadow:var(--solaris-shadow-xs)}.solaris-stepper-step.is-current.is-locked,.solaris-stepper-step.is-completed.is-locked,.solaris-stepper-step.is-current.is-disabled,.solaris-stepper-step.is-completed.is-disabled{background:color-mix(in srgb,var(--solaris-color-surface-2) 65%,transparent);border-color:var(--solaris-color-border);box-shadow:none}.solaris-stepper-marker.is-current.is-warning,.solaris-stepper-marker.is-completed.is-warning{background:var(--solaris-color-warning);border-color:var(--solaris-color-warning);color:var(--solaris-color-primary-contrast)}.solaris-stepper-marker.is-current.is-error,.solaris-stepper-marker.is-completed.is-error{background:var(--solaris-color-error);border-color:var(--solaris-color-error);color:var(--solaris-color-primary-contrast)}.solaris-stepper-marker.is-current.is-locked,.solaris-stepper-marker.is-completed.is-locked,.solaris-stepper-marker.is-current.is-disabled,.solaris-stepper-marker.is-completed.is-disabled{background:var(--solaris-color-surface-2);border-color:var(--solaris-color-border);color:var(--solaris-color-text-muted)}.solaris-stepper-content{min-width:0}.solaris-stepper.appearance-compact{gap:var(--solaris-space-4)}.solaris-stepper.appearance-compact .solaris-stepper-rail{display:flex;align-items:stretch;overflow-x:auto;gap:var(--solaris-space-4);padding-bottom:var(--solaris-space-1)}.solaris-stepper.appearance-compact .solaris-stepper-node{flex:1 0 auto;min-width:8rem}.solaris-stepper.appearance-compact .solaris-stepper-step{position:relative;padding:0 0 var(--solaris-space-3);gap:var(--solaris-space-1);background:transparent;border:0;border-radius:0;box-shadow:none;align-items:center}.solaris-stepper.appearance-compact .solaris-stepper-step.is-clickable:hover{background:transparent}.solaris-stepper.appearance-compact .solaris-stepper-step:after{content:\"\";position:absolute;left:0;right:0;bottom:-.25rem;height:.75rem;border-radius:var(--solaris-radius-full);background:var(--solaris-color-surface-2)}.solaris-stepper.appearance-compact .solaris-stepper-step.is-current:after,.solaris-stepper.appearance-compact .solaris-stepper-step.is-completed:after{background:var(--solaris-color-primary)}.solaris-stepper.appearance-compact .solaris-stepper-step.is-current.is-warning:after,.solaris-stepper.appearance-compact .solaris-stepper-step.is-completed.is-warning:after{background:var(--solaris-color-warning)}.solaris-stepper.appearance-compact .solaris-stepper-step.is-current.is-error:after,.solaris-stepper.appearance-compact .solaris-stepper-step.is-completed.is-error:after{background:var(--solaris-color-error)}.solaris-stepper.appearance-compact .solaris-stepper-step.is-disabled:after,.solaris-stepper.appearance-compact .solaris-stepper-step.is-locked:after,.solaris-stepper.appearance-compact .solaris-stepper-step.is-pending:after{background:var(--solaris-color-surface-2)}.solaris-stepper.appearance-compact .solaris-stepper-marker{inline-size:auto;block-size:auto;min-inline-size:auto;min-block-size:auto;flex:0 0 auto;aspect-ratio:auto;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--solaris-color-text-muted);font-size:var(--solaris-fs-12);font-weight:700;line-height:var(--solaris-lh-tight)}.solaris-stepper.appearance-compact .solaris-stepper-meta{display:block}.solaris-stepper.appearance-compact .solaris-stepper-label,.solaris-stepper.appearance-compact .solaris-stepper-description,.solaris-stepper.appearance-compact .solaris-stepper-optional,.solaris-stepper.appearance-compact .solaris-stepper-badge{display:none}.solaris-stepper.appearance-compact .solaris-stepper-title{font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-tight);font-weight:600;color:var(--solaris-color-text-muted);white-space:nowrap}.solaris-stepper.appearance-compact .solaris-stepper-step.is-current .solaris-stepper-marker,.solaris-stepper.appearance-compact .solaris-stepper-step.is-current .solaris-stepper-title,.solaris-stepper.appearance-compact .solaris-stepper-step.is-completed .solaris-stepper-marker,.solaris-stepper.appearance-compact .solaris-stepper-step.is-completed .solaris-stepper-title{color:color-mix(in srgb,var(--solaris-color-primary) 65%,var(--solaris-color-white))}.solaris-stepper.appearance-compact .solaris-stepper-step.is-current.is-warning .solaris-stepper-marker,.solaris-stepper.appearance-compact .solaris-stepper-step.is-current.is-warning .solaris-stepper-title,.solaris-stepper.appearance-compact .solaris-stepper-step.is-completed.is-warning .solaris-stepper-marker,.solaris-stepper.appearance-compact .solaris-stepper-step.is-completed.is-warning .solaris-stepper-title{color:var(--solaris-color-warning)}.solaris-stepper.appearance-compact .solaris-stepper-step.is-current.is-error .solaris-stepper-marker,.solaris-stepper.appearance-compact .solaris-stepper-step.is-current.is-error .solaris-stepper-title,.solaris-stepper.appearance-compact .solaris-stepper-step.is-completed.is-error .solaris-stepper-marker,.solaris-stepper.appearance-compact .solaris-stepper-step.is-completed.is-error .solaris-stepper-title{color:var(--solaris-color-error)}.solaris-stepper.appearance-compact .solaris-stepper-step.is-disabled .solaris-stepper-marker,.solaris-stepper.appearance-compact .solaris-stepper-step.is-disabled .solaris-stepper-title,.solaris-stepper.appearance-compact .solaris-stepper-step.is-locked .solaris-stepper-marker,.solaris-stepper.appearance-compact .solaris-stepper-step.is-locked .solaris-stepper-title,.solaris-stepper.appearance-compact .solaris-stepper-step.is-pending .solaris-stepper-marker,.solaris-stepper.appearance-compact .solaris-stepper-step.is-pending .solaris-stepper-title{color:var(--solaris-color-text-muted)}.solaris-stepper.appearance-compact .solaris-stepper-connector{display:none}@media(max-width:768px){.solaris-stepper.orientation-vertical{grid-template-columns:minmax(0,1fr)}.solaris-stepper.orientation-vertical .solaris-stepper-rail{overflow-x:auto;flex-direction:row;gap:var(--solaris-space-4)}.solaris-stepper.orientation-vertical .solaris-stepper-node,.solaris-stepper.orientation-horizontal .solaris-stepper-node{min-width:10rem}.solaris-stepper.orientation-horizontal .solaris-stepper-connector,.solaris-stepper.orientation-vertical .solaris-stepper-connector{min-width:var(--solaris-space-8);min-height:1px;height:1px;width:auto;margin-left:0;flex:1 1 auto}}\n"] }]
|
|
909
909
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { orientation: [{
|
|
910
910
|
type: Input
|
|
911
911
|
}], appearance: [{
|
|
@@ -1434,11 +1434,11 @@ class SolarisTab {
|
|
|
1434
1434
|
this.parent?.focusId.set(this.id);
|
|
1435
1435
|
}
|
|
1436
1436
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisTab, deps: [{ token: i0.ElementRef }, { token: SolarisTabs, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1437
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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) {\n <a class=\"solaris-
|
|
1437
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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) {\n <a class=\"solaris-tab-inner\" [routerLink]=\"routerLink\">\n <ng-content />\n </a>\n} @else {\n <button type=\"button\" class=\"solaris-tab-inner\">\n <ng-content />\n </button>\n}\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 var(--solaris-motion-duration-base) var(--solaris-motion-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 });
|
|
1438
1438
|
}
|
|
1439
1439
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisTab, decorators: [{
|
|
1440
1440
|
type: Component,
|
|
1441
|
-
args: [{ selector: 'solaris-tab', standalone: true, imports: [RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (routerLink) {\n <a class=\"solaris-
|
|
1441
|
+
args: [{ selector: 'solaris-tab', standalone: true, imports: [RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (routerLink) {\n <a class=\"solaris-tab-inner\" [routerLink]=\"routerLink\">\n <ng-content />\n </a>\n} @else {\n <button type=\"button\" class=\"solaris-tab-inner\">\n <ng-content />\n </button>\n}\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 var(--solaris-motion-duration-base) var(--solaris-motion-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"] }]
|
|
1442
1442
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: SolarisTabs, decorators: [{
|
|
1443
1443
|
type: Optional
|
|
1444
1444
|
}] }], propDecorators: { disabled: [{
|
|
@@ -1490,11 +1490,11 @@ class SolarisLoadingOverlay {
|
|
|
1490
1490
|
return this.zIndex == null ? null : { 'z-index': String(this.zIndex) };
|
|
1491
1491
|
}
|
|
1492
1492
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisLoadingOverlay, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1493
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisLoadingOverlay, isStandalone: true, selector: "solaris-loading-overlay", inputs: { zIndex: ["z-index", "zIndex"], backdrop: "backdrop", appearance: "appearance", blur: ["blur", "blur", coerceBoolean$2], open: ["open", "open", coerceBoolean$2], lockScroll: ["lock-scroll", "lockScroll", coerceBoolean$2] }, host: { properties: { "attr.solaris-loading-overlay": "this.marker" } }, usesOnChanges: true, ngImport: i0, template: "@if (open) {\n <div\n class=\"solaris-loading-overlay\"\n [class.backdrop-soft]=\"backdrop === 'soft'\"\n [class.backdrop-strong]=\"backdrop === 'strong'\"\n [class.is-blur]=\"blur\"\n [class.appearance-card]=\"appearance === 'card'\"\n [class.appearance-minimal]=\"appearance === 'minimal'\"\n [ngStyle]=\"overlayStyle\"\n role=\"presentation\"\n >\n <div class=\"solaris-loading-
|
|
1493
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisLoadingOverlay, isStandalone: true, selector: "solaris-loading-overlay", inputs: { zIndex: ["z-index", "zIndex"], backdrop: "backdrop", appearance: "appearance", blur: ["blur", "blur", coerceBoolean$2], open: ["open", "open", coerceBoolean$2], lockScroll: ["lock-scroll", "lockScroll", coerceBoolean$2] }, host: { properties: { "attr.solaris-loading-overlay": "this.marker" } }, usesOnChanges: true, ngImport: i0, template: "@if (open) {\n <div\n class=\"solaris-loading-overlay\"\n [class.backdrop-soft]=\"backdrop === 'soft'\"\n [class.backdrop-strong]=\"backdrop === 'strong'\"\n [class.is-blur]=\"blur\"\n [class.appearance-card]=\"appearance === 'card'\"\n [class.appearance-minimal]=\"appearance === 'minimal'\"\n [ngStyle]=\"overlayStyle\"\n role=\"presentation\"\n >\n <div class=\"solaris-loading-overlay-backdrop\" aria-hidden=\"true\"></div>\n\n <div class=\"solaris-loading-overlay-content\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\">\n <ng-content></ng-content>\n </div>\n </div>\n}\n\r\n", styles: [":host{display:contents}.solaris-loading-overlay{--solaris-overlay-z: var(--solaris-z-overlay, 2000);position:fixed;inset:0;z-index:var(--solaris-overlay-z);display:grid;place-items:center;pointer-events:auto}.solaris-loading-overlay-backdrop{position:absolute;inset:0;background:var(--solaris-overlay-backdrop)}.solaris-loading-overlay.backdrop-strong .solaris-loading-overlay-backdrop{background:var(--solaris-overlay-backdrop-strong)}.solaris-loading-overlay.is-blur .solaris-loading-overlay-backdrop{-webkit-backdrop-filter:blur(.8rem);backdrop-filter:blur(.8rem)}.solaris-loading-overlay-content{position:relative;z-index:1;display:grid;place-items:center;gap:var(--solaris-space-3);color:var(--solaris-color-text);outline:none}.solaris-loading-overlay.appearance-card .solaris-loading-overlay-content{min-width:18rem;max-width:min(42rem,100vw - 4rem);padding:var(--solaris-space-6);border-radius:var(--solaris-radius-md);border:1px solid color-mix(in srgb,var(--solaris-color-border) 70%,transparent);background:color-mix(in srgb,var(--solaris-color-surface) 88%,transparent);box-shadow:var(--solaris-shadow-md)}.solaris-loading-overlay.appearance-minimal .solaris-loading-overlay-content{padding:0;border:0;background:transparent;box-shadow:none}:host ::ng-deep [solaris-loading-overlay-text]{font-size:var(--solaris-fs-14);color:color-mix(in srgb,var(--solaris-color-text) 85%,transparent);text-align:center}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1494
1494
|
}
|
|
1495
1495
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisLoadingOverlay, decorators: [{
|
|
1496
1496
|
type: Component,
|
|
1497
|
-
args: [{ selector: 'solaris-loading-overlay', standalone: true, imports: [NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open) {\n <div\n class=\"solaris-loading-overlay\"\n [class.backdrop-soft]=\"backdrop === 'soft'\"\n [class.backdrop-strong]=\"backdrop === 'strong'\"\n [class.is-blur]=\"blur\"\n [class.appearance-card]=\"appearance === 'card'\"\n [class.appearance-minimal]=\"appearance === 'minimal'\"\n [ngStyle]=\"overlayStyle\"\n role=\"presentation\"\n >\n <div class=\"solaris-loading-
|
|
1497
|
+
args: [{ selector: 'solaris-loading-overlay', standalone: true, imports: [NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open) {\n <div\n class=\"solaris-loading-overlay\"\n [class.backdrop-soft]=\"backdrop === 'soft'\"\n [class.backdrop-strong]=\"backdrop === 'strong'\"\n [class.is-blur]=\"blur\"\n [class.appearance-card]=\"appearance === 'card'\"\n [class.appearance-minimal]=\"appearance === 'minimal'\"\n [ngStyle]=\"overlayStyle\"\n role=\"presentation\"\n >\n <div class=\"solaris-loading-overlay-backdrop\" aria-hidden=\"true\"></div>\n\n <div class=\"solaris-loading-overlay-content\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\">\n <ng-content></ng-content>\n </div>\n </div>\n}\n\r\n", styles: [":host{display:contents}.solaris-loading-overlay{--solaris-overlay-z: var(--solaris-z-overlay, 2000);position:fixed;inset:0;z-index:var(--solaris-overlay-z);display:grid;place-items:center;pointer-events:auto}.solaris-loading-overlay-backdrop{position:absolute;inset:0;background:var(--solaris-overlay-backdrop)}.solaris-loading-overlay.backdrop-strong .solaris-loading-overlay-backdrop{background:var(--solaris-overlay-backdrop-strong)}.solaris-loading-overlay.is-blur .solaris-loading-overlay-backdrop{-webkit-backdrop-filter:blur(.8rem);backdrop-filter:blur(.8rem)}.solaris-loading-overlay-content{position:relative;z-index:1;display:grid;place-items:center;gap:var(--solaris-space-3);color:var(--solaris-color-text);outline:none}.solaris-loading-overlay.appearance-card .solaris-loading-overlay-content{min-width:18rem;max-width:min(42rem,100vw - 4rem);padding:var(--solaris-space-6);border-radius:var(--solaris-radius-md);border:1px solid color-mix(in srgb,var(--solaris-color-border) 70%,transparent);background:color-mix(in srgb,var(--solaris-color-surface) 88%,transparent);box-shadow:var(--solaris-shadow-md)}.solaris-loading-overlay.appearance-minimal .solaris-loading-overlay-content{padding:0;border:0;background:transparent;box-shadow:none}:host ::ng-deep [solaris-loading-overlay-text]{font-size:var(--solaris-fs-14);color:color-mix(in srgb,var(--solaris-color-text) 85%,transparent);text-align:center}\n"] }]
|
|
1498
1498
|
}], propDecorators: { marker: [{
|
|
1499
1499
|
type: HostBinding,
|
|
1500
1500
|
args: ['attr.solaris-loading-overlay']
|
|
@@ -1681,11 +1681,11 @@ class SolarisRichTooltipPanel {
|
|
|
1681
1681
|
variant = input('inverse', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
1682
1682
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1683
1683
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisRichTooltipPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1684
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisRichTooltipPanel, isStandalone: true, selector: "solaris-rich-tooltip-panel", inputs: { template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"solaris-rich-tooltip\"\n [attr.data-position]=\"position()\"\n [attr.data-variant]=\"variant()\"\n [attr.data-size]=\"size()\"\n role=\"tooltip\"\n>\n <div class=\"solaris-rich-
|
|
1684
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisRichTooltipPanel, isStandalone: true, selector: "solaris-rich-tooltip-panel", inputs: { template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"solaris-rich-tooltip\"\n [attr.data-position]=\"position()\"\n [attr.data-variant]=\"variant()\"\n [attr.data-size]=\"size()\"\n role=\"tooltip\"\n>\n <div class=\"solaris-rich-tooltip-content\">\n @if (template()) {\n <ng-container [ngTemplateOutlet]=\"template()\"></ng-container>\n }\n </div>\n\n <span class=\"solaris-rich-tooltip-arrow\" aria-hidden=\"true\"></span>\n</div>\n\r\n", styles: [":host{display:block;inline-size:max-content;max-inline-size:max-content}.solaris-rich-tooltip{--solaris-tooltip-padding-x: 1rem;--solaris-tooltip-padding-y: 1rem;--solaris-tooltip-max-width: 32rem;--solaris-tooltip-arrow-size: .8rem;--solaris-tooltip-fg: var(--solaris-color-text);--solaris-tooltip-shadow: var(--solaris-shadow-md);--solaris-tooltip-radius: var(--solaris-radius-md);--solaris-tooltip-bg: var(--solaris-color-surface-2);--solaris-tooltip-border: color-mix(in srgb, var(--solaris-color-border) 75%, transparent);text-align:start;isolation:isolate;position:relative;pointer-events:auto;font-size:var(--solaris-fs-13);color:var(--solaris-tooltip-fg);background:var(--solaris-tooltip-bg);line-height:var(--solaris-lh-normal);box-shadow:var(--solaris-tooltip-shadow);border-radius:var(--solaris-tooltip-radius);animation:solaris-rich-tooltip-in var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard);border:1px solid var(--solaris-tooltip-border);max-inline-size:var(--solaris-tooltip-max-width);padding:var(--solaris-tooltip-padding-y) var(--solaris-tooltip-padding-x)}.solaris-rich-tooltip[data-size=sm]{--solaris-tooltip-max-width: 24rem;--solaris-tooltip-padding-y: .75rem;--solaris-tooltip-padding-x: .85rem;--solaris-tooltip-radius: var(--solaris-radius-sm)}.solaris-rich-tooltip[data-size=md]{--solaris-tooltip-max-width: 32rem}.solaris-rich-tooltip[data-size=lg]{--solaris-tooltip-max-width: 42rem;--solaris-tooltip-padding-y: 1.2rem;--solaris-tooltip-padding-x: 1.2rem;--solaris-tooltip-radius: var(--solaris-radius-lg)}.solaris-rich-tooltip[data-variant=default]{--solaris-tooltip-fg: var(--solaris-color-text);--solaris-tooltip-bg: var(--solaris-color-surface);--solaris-tooltip-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent)}.solaris-rich-tooltip[data-variant=inverse]{--solaris-tooltip-fg: var(--solaris-color-surface);--solaris-tooltip-bg: color-mix( in srgb, var(--solaris-color-text) 92%, var(--solaris-color-black) );--solaris-tooltip-border: color-mix( in srgb, var(--solaris-tooltip-bg) 82%, var(--solaris-color-white) )}.solaris-rich-tooltip[data-variant=primary]{--solaris-tooltip-fg: var(--solaris-color-white);--solaris-tooltip-bg: var(--solaris-color-primary);--solaris-tooltip-border: color-mix( in srgb, var(--solaris-color-primary) 75%, var(--solaris-color-white) )}.solaris-rich-tooltip-content{z-index:1;position:relative;min-inline-size:0}.solaris-rich-tooltip-arrow{z-index:0;position:absolute;transform:rotate(45deg);background:var(--solaris-tooltip-bg);block-size:var(--solaris-tooltip-arrow-size);inline-size:var(--solaris-tooltip-arrow-size);border:1px solid var(--solaris-tooltip-border)}.solaris-rich-tooltip[data-position=top] .solaris-rich-tooltip-arrow{inset-inline-start:50%;border-block-start-color:transparent;border-inline-start-color:transparent;transform:translate(-50%) rotate(45deg);inset-block-end:calc(var(--solaris-tooltip-arrow-size) / -2)}.solaris-rich-tooltip[data-position=bottom] .solaris-rich-tooltip-arrow{inset-inline-start:50%;border-block-end-color:transparent;border-inline-end-color:transparent;transform:translate(-50%) rotate(45deg);inset-block-start:calc(var(--solaris-tooltip-arrow-size) / -2)}.solaris-rich-tooltip[data-position=right] .solaris-rich-tooltip-arrow{inset-block-start:50%;border-inline-end-color:transparent;border-block-start-color:transparent;transform:translateY(-50%) rotate(45deg);inset-inline-start:calc(var(--solaris-tooltip-arrow-size) / -2)}.solaris-rich-tooltip[data-position=left] .solaris-rich-tooltip-arrow{inset-block-start:50%;border-block-end-color:transparent;border-inline-start-color:transparent;transform:translateY(-50%) rotate(45deg);inset-inline-end:calc(var(--solaris-tooltip-arrow-size) / -2)}@keyframes solaris-rich-tooltip-in{0%{opacity:0;filter:blur(.1rem);transform:scale(.98)}to{opacity:1;filter:blur(0);transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1685
1685
|
}
|
|
1686
1686
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisRichTooltipPanel, decorators: [{
|
|
1687
1687
|
type: Component,
|
|
1688
|
-
args: [{ selector: 'solaris-rich-tooltip-panel', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"solaris-rich-tooltip\"\n [attr.data-position]=\"position()\"\n [attr.data-variant]=\"variant()\"\n [attr.data-size]=\"size()\"\n role=\"tooltip\"\n>\n <div class=\"solaris-rich-
|
|
1688
|
+
args: [{ selector: 'solaris-rich-tooltip-panel', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"solaris-rich-tooltip\"\n [attr.data-position]=\"position()\"\n [attr.data-variant]=\"variant()\"\n [attr.data-size]=\"size()\"\n role=\"tooltip\"\n>\n <div class=\"solaris-rich-tooltip-content\">\n @if (template()) {\n <ng-container [ngTemplateOutlet]=\"template()\"></ng-container>\n }\n </div>\n\n <span class=\"solaris-rich-tooltip-arrow\" aria-hidden=\"true\"></span>\n</div>\n\r\n", styles: [":host{display:block;inline-size:max-content;max-inline-size:max-content}.solaris-rich-tooltip{--solaris-tooltip-padding-x: 1rem;--solaris-tooltip-padding-y: 1rem;--solaris-tooltip-max-width: 32rem;--solaris-tooltip-arrow-size: .8rem;--solaris-tooltip-fg: var(--solaris-color-text);--solaris-tooltip-shadow: var(--solaris-shadow-md);--solaris-tooltip-radius: var(--solaris-radius-md);--solaris-tooltip-bg: var(--solaris-color-surface-2);--solaris-tooltip-border: color-mix(in srgb, var(--solaris-color-border) 75%, transparent);text-align:start;isolation:isolate;position:relative;pointer-events:auto;font-size:var(--solaris-fs-13);color:var(--solaris-tooltip-fg);background:var(--solaris-tooltip-bg);line-height:var(--solaris-lh-normal);box-shadow:var(--solaris-tooltip-shadow);border-radius:var(--solaris-tooltip-radius);animation:solaris-rich-tooltip-in var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard);border:1px solid var(--solaris-tooltip-border);max-inline-size:var(--solaris-tooltip-max-width);padding:var(--solaris-tooltip-padding-y) var(--solaris-tooltip-padding-x)}.solaris-rich-tooltip[data-size=sm]{--solaris-tooltip-max-width: 24rem;--solaris-tooltip-padding-y: .75rem;--solaris-tooltip-padding-x: .85rem;--solaris-tooltip-radius: var(--solaris-radius-sm)}.solaris-rich-tooltip[data-size=md]{--solaris-tooltip-max-width: 32rem}.solaris-rich-tooltip[data-size=lg]{--solaris-tooltip-max-width: 42rem;--solaris-tooltip-padding-y: 1.2rem;--solaris-tooltip-padding-x: 1.2rem;--solaris-tooltip-radius: var(--solaris-radius-lg)}.solaris-rich-tooltip[data-variant=default]{--solaris-tooltip-fg: var(--solaris-color-text);--solaris-tooltip-bg: var(--solaris-color-surface);--solaris-tooltip-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent)}.solaris-rich-tooltip[data-variant=inverse]{--solaris-tooltip-fg: var(--solaris-color-surface);--solaris-tooltip-bg: color-mix( in srgb, var(--solaris-color-text) 92%, var(--solaris-color-black) );--solaris-tooltip-border: color-mix( in srgb, var(--solaris-tooltip-bg) 82%, var(--solaris-color-white) )}.solaris-rich-tooltip[data-variant=primary]{--solaris-tooltip-fg: var(--solaris-color-white);--solaris-tooltip-bg: var(--solaris-color-primary);--solaris-tooltip-border: color-mix( in srgb, var(--solaris-color-primary) 75%, var(--solaris-color-white) )}.solaris-rich-tooltip-content{z-index:1;position:relative;min-inline-size:0}.solaris-rich-tooltip-arrow{z-index:0;position:absolute;transform:rotate(45deg);background:var(--solaris-tooltip-bg);block-size:var(--solaris-tooltip-arrow-size);inline-size:var(--solaris-tooltip-arrow-size);border:1px solid var(--solaris-tooltip-border)}.solaris-rich-tooltip[data-position=top] .solaris-rich-tooltip-arrow{inset-inline-start:50%;border-block-start-color:transparent;border-inline-start-color:transparent;transform:translate(-50%) rotate(45deg);inset-block-end:calc(var(--solaris-tooltip-arrow-size) / -2)}.solaris-rich-tooltip[data-position=bottom] .solaris-rich-tooltip-arrow{inset-inline-start:50%;border-block-end-color:transparent;border-inline-end-color:transparent;transform:translate(-50%) rotate(45deg);inset-block-start:calc(var(--solaris-tooltip-arrow-size) / -2)}.solaris-rich-tooltip[data-position=right] .solaris-rich-tooltip-arrow{inset-block-start:50%;border-inline-end-color:transparent;border-block-start-color:transparent;transform:translateY(-50%) rotate(45deg);inset-inline-start:calc(var(--solaris-tooltip-arrow-size) / -2)}.solaris-rich-tooltip[data-position=left] .solaris-rich-tooltip-arrow{inset-block-start:50%;border-block-end-color:transparent;border-inline-start-color:transparent;transform:translateY(-50%) rotate(45deg);inset-inline-end:calc(var(--solaris-tooltip-arrow-size) / -2)}@keyframes solaris-rich-tooltip-in{0%{opacity:0;filter:blur(.1rem);transform:scale(.98)}to{opacity:1;filter:blur(0);transform:scale(1)}}\n"] }]
|
|
1689
1689
|
}], propDecorators: { template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
1690
1690
|
|
|
1691
1691
|
class SolarisRichTooltipDirective {
|
|
@@ -2554,11 +2554,11 @@ class SolarisNotificationItemComponent {
|
|
|
2554
2554
|
return action.label ?? '';
|
|
2555
2555
|
}
|
|
2556
2556
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisNotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2557
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisNotificationItemComponent, isStandalone: true, selector: "solaris-notification-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article\n class=\"sn\"\n [attr.data-kind]=\"item().kind\"\n [attr.data-mode]=\"mode()\"\n [attr.data-expanded]=\"item().expanded ? 'true' : 'false'\"\n [attr.data-paused]=\"paused() ? 'true' : 'false'\"\n [attr.aria-live]=\"mode() === 'toast' ? item().ariaLive : null\"\n [attr.role]=\"item().ariaLive === 'assertive' ? 'alert' : 'status'\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n>\n <div
|
|
2557
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisNotificationItemComponent, isStandalone: true, selector: "solaris-notification-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article\n class=\"solaris-notification-item sn\"\n [attr.data-kind]=\"item().kind\"\n [attr.data-mode]=\"mode()\"\n [attr.data-expanded]=\"item().expanded ? 'true' : 'false'\"\n [attr.data-paused]=\"paused() ? 'true' : 'false'\"\n [attr.aria-live]=\"mode() === 'toast' ? item().ariaLive : null\"\n [attr.role]=\"item().ariaLive === 'assertive' ? 'alert' : 'status'\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n>\n <div\n class=\"solaris-notification-item-header sn-header\"\n [attr.data-align]=\"isCompactHeader() ? 'center' : 'start'\"\n >\n <div class=\"solaris-notification-item-leading sn-leading\">\n <span class=\"solaris-notification-item-icon sn-icon\" aria-hidden=\"true\">\n <i class=\"ph\" [ngClass]=\"iconClass()\"></i>\n </span>\n\n <div class=\"solaris-notification-item-heading sn-heading\">\n <strong class=\"solaris-notification-item-title sn-title\">{{ item().title }}</strong>\n\n @if (!item().expanded && item().description) {\n <p\n class=\"solaris-notification-item-description sn-description solaris-notification-item-description-clamped sn-description-clamped\"\n >\n {{ item().description }}\n </p>\n }\n </div>\n </div>\n\n <div class=\"solaris-notification-item-controls sn-controls\">\n @if (item().expandable && item().description) {\n <button\n type=\"button\"\n class=\"solaris-notification-item-icon-button sn-icon-btn\"\n [attr.aria-expanded]=\"item().expanded\"\n [attr.aria-label]=\"item().expanded ? intl.collapse() : intl.expand()\"\n (click)=\"toggleExpanded()\"\n >\n <i\n class=\"ph\"\n [ngClass]=\"item().expanded ? 'ph-caret-up' : 'ph-caret-down'\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n\n @if (item().closeable) {\n <button\n type=\"button\"\n class=\"solaris-notification-item-icon-button sn-icon-btn\"\n [attr.aria-label]=\"intl.close()\"\n (click)=\"close()\"\n >\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n </button>\n }\n </div>\n </div>\n\n @if (item().expanded && item().description) {\n <div class=\"solaris-notification-item-body sn-body\">\n <p class=\"solaris-notification-item-body-text sn-body-text\">{{ item().description }}</p>\n @if (item().actions.length) {\n <div class=\"solaris-notification-item-actions sn-actions\">\n @for (action of item().actions; track action.id) {\n <button\n type=\"button\"\n solaris-button\n [variant]=\"action.variant ?? 'outline'\"\n [color]=\"action.color ?? 'surface'\"\n [size]=\"action.size ?? 'sm'\"\n [radius]=\"action.radius ?? 'md'\"\n [disabled]=\"action.disabled ?? false\"\n (click)=\"runAction(action)\"\n >\n {{ resolveActionLabel(action) }}\n </button>\n }\n </div>\n }\n </div>\n }\n\n @if (mode() === 'toast' && item().duration !== null) {\n <div class=\"solaris-notification-item-footer sn-footer\">\n @if (!paused()) {\n <p class=\"solaris-notification-item-timer sn-timer\">\n {{ intl.autoClose(secondsLeft()) }}\n <button\n type=\"button\"\n class=\"solaris-notification-item-timer-link sn-timer-link\"\n (click)=\"toggleUserPause()\"\n >\n {{ intl.stopTimer() }}</button\n >.\n </p>\n } @else {\n <p class=\"solaris-notification-item-timer sn-timer\">\n {{ intl.paused() }}\n <button\n type=\"button\"\n class=\"solaris-notification-item-timer-link sn-timer-link\"\n (click)=\"toggleUserPause()\"\n >\n {{ intl.resumeTimer() }}</button\n >.\n </p>\n }\n </div>\n\n <div class=\"solaris-notification-item-progress sn-progress\" aria-hidden=\"true\">\n <span class=\"solaris-notification-item-progress-value\" [style.width.%]=\"progress()\"></span>\n </div>\n }\n</article>\n\r\n", styles: [":host{display:block;pointer-events:auto}.solaris-notification-item,.sn{--sn-accent: var(--solaris-color-info);overflow:hidden;color:var(--solaris-color-text);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(42rem,100vw - var(--solaris-space-4) * 2)}.solaris-notification-item[data-kind=success],.sn[data-kind=success]{--sn-accent: var(--solaris-color-success)}.solaris-notification-item[data-kind=warning],.sn[data-kind=warning]{--sn-accent: var(--solaris-color-warning)}.solaris-notification-item[data-kind=error],.sn[data-kind=error]{--sn-accent: var(--solaris-color-error)}.solaris-notification-item[data-kind=info],.sn[data-kind=info]{--sn-accent: var(--solaris-color-info)}.solaris-notification-item-header,.sn-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3);padding:var(--solaris-space-4)}.solaris-notification-item-leading,.sn-leading{display:flex;align-items:flex-start;gap:var(--solaris-space-3);min-width:0;flex:1}.solaris-notification-item-header[data-align=center],.sn-header[data-align=center],.solaris-notification-item-header[data-align=center] .solaris-notification-item-leading,.sn-header[data-align=center] .sn-leading,.solaris-notification-item-header[data-align=center] .solaris-notification-item-controls,.sn-header[data-align=center] .sn-controls{align-items:center}.solaris-notification-item[data-expanded=true] .solaris-notification-item-header,.sn[data-expanded=true] .sn-header{padding-bottom:0}.solaris-notification-item-icon,.sn-icon{display:grid;flex:0 0 auto;block-size:3.2rem;inline-size:3.2rem;place-items:center;color:var(--sn-accent);border-radius:var(--solaris-radius-full)}.solaris-notification-item-icon .ph,.sn-icon .ph{line-height:1;font-size:var(--solaris-fs-24)}.solaris-notification-item-heading,.sn-heading{flex:1;min-width:0}.solaris-notification-item-title,.sn-title{display:block;margin:0;font-size:var(--solaris-fs-16);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight);font-family:var(--solaris-font-sans-primary),ui-sans-serif,system-ui}.solaris-notification-item-description,.sn-description,.solaris-notification-item-body-text,.sn-body-text,.solaris-notification-item-timer,.sn-timer{margin:0;font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed);color:var(--solaris-color-text-muted)}.solaris-notification-item-description-clamped,.sn-description-clamped{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:var(--solaris-space-1)}.solaris-notification-item-controls,.sn-controls{flex:0 0 auto;align-items:center;display:inline-flex;gap:var(--solaris-space-1)}.solaris-notification-item-icon-button,.sn-icon-btn{border:0;display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;background:transparent;cursor:pointer;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);transition:background-color var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard)}.solaris-notification-item-icon-button:hover,.sn-icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.solaris-notification-item-icon-button:focus-visible,.sn-icon-btn:focus-visible{outline-offset:.2rem;outline:.2rem solid var(--solaris-color-primary)}.solaris-notification-item-icon-button .ph,.sn-icon-btn .ph{line-height:1;font-size:var(--solaris-fs-18)}.solaris-notification-item-body,.sn-body{padding:0 var(--solaris-space-4) var(--solaris-space-4) calc(var(--solaris-space-4) + 3.2rem + var(--solaris-space-3))}.solaris-notification-item-actions,.sn-actions{display:flex;flex-wrap:wrap;gap:var(--solaris-space-2);margin-top:var(--solaris-space-4)}.solaris-notification-item-footer,.sn-footer{background:var(--solaris-color-surface-2);border-top:.1rem solid var(--solaris-color-border);padding:var(--solaris-space-3) var(--solaris-space-4)}.solaris-notification-item-timer-link,.sn-timer-link{margin:0;padding:0;border:0;font:inherit;cursor:pointer;font-weight:700;background:transparent;color:var(--solaris-color-text)}.solaris-notification-item-timer-link:focus-visible,.sn-timer-link:focus-visible{outline-offset:.2rem;border-radius:var(--solaris-radius-xs);outline:.2rem solid var(--solaris-color-primary)}.solaris-notification-item-progress,.sn-progress{block-size:.4rem;background:transparent}.solaris-notification-item-progress-value{display:block;block-size:100%;inline-size:100%;background:var(--sn-accent);transition:width var(--solaris-motion-duration-xfast) var(--solaris-motion-ease-linear)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: SolarisButtonDirective, selector: "button[solaris-button], a[solaris-button]", inputs: ["size", "variant", "color", "textColor", "radius", "loading", "iconOnly", "disabled", "fullWidth", "badgeOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2558
2558
|
}
|
|
2559
2559
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisNotificationItemComponent, decorators: [{
|
|
2560
2560
|
type: Component,
|
|
2561
|
-
args: [{ selector: 'solaris-notification-item', standalone: true, imports: [NgClass, SolarisButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article\n class=\"sn\"\n [attr.data-kind]=\"item().kind\"\n [attr.data-mode]=\"mode()\"\n [attr.data-expanded]=\"item().expanded ? 'true' : 'false'\"\n [attr.data-paused]=\"paused() ? 'true' : 'false'\"\n [attr.aria-live]=\"mode() === 'toast' ? item().ariaLive : null\"\n [attr.role]=\"item().ariaLive === 'assertive' ? 'alert' : 'status'\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n>\n <div
|
|
2561
|
+
args: [{ selector: 'solaris-notification-item', standalone: true, imports: [NgClass, SolarisButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article\n class=\"solaris-notification-item sn\"\n [attr.data-kind]=\"item().kind\"\n [attr.data-mode]=\"mode()\"\n [attr.data-expanded]=\"item().expanded ? 'true' : 'false'\"\n [attr.data-paused]=\"paused() ? 'true' : 'false'\"\n [attr.aria-live]=\"mode() === 'toast' ? item().ariaLive : null\"\n [attr.role]=\"item().ariaLive === 'assertive' ? 'alert' : 'status'\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n>\n <div\n class=\"solaris-notification-item-header sn-header\"\n [attr.data-align]=\"isCompactHeader() ? 'center' : 'start'\"\n >\n <div class=\"solaris-notification-item-leading sn-leading\">\n <span class=\"solaris-notification-item-icon sn-icon\" aria-hidden=\"true\">\n <i class=\"ph\" [ngClass]=\"iconClass()\"></i>\n </span>\n\n <div class=\"solaris-notification-item-heading sn-heading\">\n <strong class=\"solaris-notification-item-title sn-title\">{{ item().title }}</strong>\n\n @if (!item().expanded && item().description) {\n <p\n class=\"solaris-notification-item-description sn-description solaris-notification-item-description-clamped sn-description-clamped\"\n >\n {{ item().description }}\n </p>\n }\n </div>\n </div>\n\n <div class=\"solaris-notification-item-controls sn-controls\">\n @if (item().expandable && item().description) {\n <button\n type=\"button\"\n class=\"solaris-notification-item-icon-button sn-icon-btn\"\n [attr.aria-expanded]=\"item().expanded\"\n [attr.aria-label]=\"item().expanded ? intl.collapse() : intl.expand()\"\n (click)=\"toggleExpanded()\"\n >\n <i\n class=\"ph\"\n [ngClass]=\"item().expanded ? 'ph-caret-up' : 'ph-caret-down'\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n\n @if (item().closeable) {\n <button\n type=\"button\"\n class=\"solaris-notification-item-icon-button sn-icon-btn\"\n [attr.aria-label]=\"intl.close()\"\n (click)=\"close()\"\n >\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n </button>\n }\n </div>\n </div>\n\n @if (item().expanded && item().description) {\n <div class=\"solaris-notification-item-body sn-body\">\n <p class=\"solaris-notification-item-body-text sn-body-text\">{{ item().description }}</p>\n @if (item().actions.length) {\n <div class=\"solaris-notification-item-actions sn-actions\">\n @for (action of item().actions; track action.id) {\n <button\n type=\"button\"\n solaris-button\n [variant]=\"action.variant ?? 'outline'\"\n [color]=\"action.color ?? 'surface'\"\n [size]=\"action.size ?? 'sm'\"\n [radius]=\"action.radius ?? 'md'\"\n [disabled]=\"action.disabled ?? false\"\n (click)=\"runAction(action)\"\n >\n {{ resolveActionLabel(action) }}\n </button>\n }\n </div>\n }\n </div>\n }\n\n @if (mode() === 'toast' && item().duration !== null) {\n <div class=\"solaris-notification-item-footer sn-footer\">\n @if (!paused()) {\n <p class=\"solaris-notification-item-timer sn-timer\">\n {{ intl.autoClose(secondsLeft()) }}\n <button\n type=\"button\"\n class=\"solaris-notification-item-timer-link sn-timer-link\"\n (click)=\"toggleUserPause()\"\n >\n {{ intl.stopTimer() }}</button\n >.\n </p>\n } @else {\n <p class=\"solaris-notification-item-timer sn-timer\">\n {{ intl.paused() }}\n <button\n type=\"button\"\n class=\"solaris-notification-item-timer-link sn-timer-link\"\n (click)=\"toggleUserPause()\"\n >\n {{ intl.resumeTimer() }}</button\n >.\n </p>\n }\n </div>\n\n <div class=\"solaris-notification-item-progress sn-progress\" aria-hidden=\"true\">\n <span class=\"solaris-notification-item-progress-value\" [style.width.%]=\"progress()\"></span>\n </div>\n }\n</article>\n\r\n", styles: [":host{display:block;pointer-events:auto}.solaris-notification-item,.sn{--sn-accent: var(--solaris-color-info);overflow:hidden;color:var(--solaris-color-text);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(42rem,100vw - var(--solaris-space-4) * 2)}.solaris-notification-item[data-kind=success],.sn[data-kind=success]{--sn-accent: var(--solaris-color-success)}.solaris-notification-item[data-kind=warning],.sn[data-kind=warning]{--sn-accent: var(--solaris-color-warning)}.solaris-notification-item[data-kind=error],.sn[data-kind=error]{--sn-accent: var(--solaris-color-error)}.solaris-notification-item[data-kind=info],.sn[data-kind=info]{--sn-accent: var(--solaris-color-info)}.solaris-notification-item-header,.sn-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3);padding:var(--solaris-space-4)}.solaris-notification-item-leading,.sn-leading{display:flex;align-items:flex-start;gap:var(--solaris-space-3);min-width:0;flex:1}.solaris-notification-item-header[data-align=center],.sn-header[data-align=center],.solaris-notification-item-header[data-align=center] .solaris-notification-item-leading,.sn-header[data-align=center] .sn-leading,.solaris-notification-item-header[data-align=center] .solaris-notification-item-controls,.sn-header[data-align=center] .sn-controls{align-items:center}.solaris-notification-item[data-expanded=true] .solaris-notification-item-header,.sn[data-expanded=true] .sn-header{padding-bottom:0}.solaris-notification-item-icon,.sn-icon{display:grid;flex:0 0 auto;block-size:3.2rem;inline-size:3.2rem;place-items:center;color:var(--sn-accent);border-radius:var(--solaris-radius-full)}.solaris-notification-item-icon .ph,.sn-icon .ph{line-height:1;font-size:var(--solaris-fs-24)}.solaris-notification-item-heading,.sn-heading{flex:1;min-width:0}.solaris-notification-item-title,.sn-title{display:block;margin:0;font-size:var(--solaris-fs-16);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight);font-family:var(--solaris-font-sans-primary),ui-sans-serif,system-ui}.solaris-notification-item-description,.sn-description,.solaris-notification-item-body-text,.sn-body-text,.solaris-notification-item-timer,.sn-timer{margin:0;font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed);color:var(--solaris-color-text-muted)}.solaris-notification-item-description-clamped,.sn-description-clamped{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:var(--solaris-space-1)}.solaris-notification-item-controls,.sn-controls{flex:0 0 auto;align-items:center;display:inline-flex;gap:var(--solaris-space-1)}.solaris-notification-item-icon-button,.sn-icon-btn{border:0;display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;background:transparent;cursor:pointer;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);transition:background-color var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard)}.solaris-notification-item-icon-button:hover,.sn-icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.solaris-notification-item-icon-button:focus-visible,.sn-icon-btn:focus-visible{outline-offset:.2rem;outline:.2rem solid var(--solaris-color-primary)}.solaris-notification-item-icon-button .ph,.sn-icon-btn .ph{line-height:1;font-size:var(--solaris-fs-18)}.solaris-notification-item-body,.sn-body{padding:0 var(--solaris-space-4) var(--solaris-space-4) calc(var(--solaris-space-4) + 3.2rem + var(--solaris-space-3))}.solaris-notification-item-actions,.sn-actions{display:flex;flex-wrap:wrap;gap:var(--solaris-space-2);margin-top:var(--solaris-space-4)}.solaris-notification-item-footer,.sn-footer{background:var(--solaris-color-surface-2);border-top:.1rem solid var(--solaris-color-border);padding:var(--solaris-space-3) var(--solaris-space-4)}.solaris-notification-item-timer-link,.sn-timer-link{margin:0;padding:0;border:0;font:inherit;cursor:pointer;font-weight:700;background:transparent;color:var(--solaris-color-text)}.solaris-notification-item-timer-link:focus-visible,.sn-timer-link:focus-visible{outline-offset:.2rem;border-radius:var(--solaris-radius-xs);outline:.2rem solid var(--solaris-color-primary)}.solaris-notification-item-progress,.sn-progress{block-size:.4rem;background:transparent}.solaris-notification-item-progress-value{display:block;block-size:100%;inline-size:100%;background:var(--sn-accent);transition:width var(--solaris-motion-duration-xfast) var(--solaris-motion-ease-linear)}\n"] }]
|
|
2562
2562
|
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
|
|
2563
2563
|
|
|
2564
2564
|
class SolarisNotificationCenterComponent {
|
|
@@ -2570,11 +2570,11 @@ class SolarisNotificationCenterComponent {
|
|
|
2570
2570
|
}
|
|
2571
2571
|
}
|
|
2572
2572
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisNotificationCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2573
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisNotificationCenterComponent, isStandalone: true, selector: "solaris-notification-center", host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (notificationService.centerOpen()) {\n <div
|
|
2573
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisNotificationCenterComponent, isStandalone: true, selector: "solaris-notification-center", host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (notificationService.centerOpen()) {\n <div\n class=\"solaris-notification-center-backdrop snc-backdrop\"\n (click)=\"notificationService.closeCenter()\"\n ></div>\n\n <aside\n class=\"solaris-notification-center snc\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"intl.centerTitle()\"\n >\n <header class=\"solaris-notification-center-header snc-header\">\n <div>\n <strong class=\"solaris-notification-center-title snc-title\">{{ intl.centerTitle() }}</strong>\n </div>\n\n <div class=\"solaris-notification-center-controls snc-controls\">\n <button\n type=\"button\"\n solaris-button\n variant=\"outline\"\n color=\"surface\"\n size=\"sm\"\n radius=\"md\"\n (click)=\"notificationService.clearHistory()\"\n >\n {{ intl.clearHistory() }}\n </button>\n\n <button\n type=\"button\"\n class=\"solaris-notification-center-icon-button snc-icon-btn\"\n [attr.aria-label]=\"intl.close()\"\n (click)=\"notificationService.closeCenter()\"\n >\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </header>\n\n <div class=\"solaris-notification-center-list snc-list\">\n @for (item of notificationService.centerItems(); track item.id) {\n <solaris-notification-item [item]=\"item\" mode=\"center\" />\n } @empty {\n <div class=\"solaris-notification-center-empty snc-empty\">\n {{ intl.emptyCenter() }}\n </div>\n }\n </div>\n </aside>\n}\n\r\n", styles: [".solaris-notification-center-backdrop,.snc-backdrop{inset:0;position:fixed;pointer-events:auto;-webkit-backdrop-filter:blur(.2rem);backdrop-filter:blur(.2rem);background:var(--solaris-overlay-backdrop-soft);z-index:var(--solaris-z-overlay)}.solaris-notification-center,.snc{display:flex;position:fixed;overflow:hidden;pointer-events:auto;flex-direction:column;top:var(--solaris-space-4);z-index:var(--solaris-z-max);right:var(--solaris-space-4);bottom:var(--solaris-space-4);box-shadow:var(--solaris-shadow-lg);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(46rem,100vw - var(--solaris-space-4) * 2)}.solaris-notification-center-header,.snc-header{display:flex;align-items:center;gap:var(--solaris-space-3);justify-content:space-between;padding:var(--solaris-space-4);border-bottom:.1rem solid var(--solaris-color-border)}.solaris-notification-center-title,.snc-title{font-size:var(--solaris-h-6);line-height:var(--solaris-lh-tight)}.solaris-notification-center-controls,.snc-controls{display:flex;align-items:center;gap:var(--solaris-space-2)}.solaris-notification-center-icon-button,.snc-icon-btn{border:0;display:grid;cursor:pointer;block-size:4rem;inline-size:4rem;place-items:center;background:transparent;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full)}.solaris-notification-center-icon-button:hover,.snc-icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.solaris-notification-center-list,.snc-list{flex:1;display:flex;overflow:auto;flex-direction:column;gap:var(--solaris-space-3);padding:var(--solaris-space-4);background:var(--solaris-color-bg)}.solaris-notification-center-empty,.snc-empty{display:grid;min-height:16rem;text-align:center;place-items:center;color:var(--solaris-color-text-muted)}\n"], dependencies: [{ kind: "directive", type: SolarisButtonDirective, selector: "button[solaris-button], a[solaris-button]", inputs: ["size", "variant", "color", "textColor", "radius", "loading", "iconOnly", "disabled", "fullWidth", "badgeOverlay"] }, { kind: "component", type: SolarisNotificationItemComponent, selector: "solaris-notification-item", inputs: ["item", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2574
2574
|
}
|
|
2575
2575
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisNotificationCenterComponent, decorators: [{
|
|
2576
2576
|
type: Component,
|
|
2577
|
-
args: [{ selector: 'solaris-notification-center', standalone: true, imports: [SolarisButtonDirective, SolarisNotificationItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (notificationService.centerOpen()) {\n <div
|
|
2577
|
+
args: [{ selector: 'solaris-notification-center', standalone: true, imports: [SolarisButtonDirective, SolarisNotificationItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (notificationService.centerOpen()) {\n <div\n class=\"solaris-notification-center-backdrop snc-backdrop\"\n (click)=\"notificationService.closeCenter()\"\n ></div>\n\n <aside\n class=\"solaris-notification-center snc\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"intl.centerTitle()\"\n >\n <header class=\"solaris-notification-center-header snc-header\">\n <div>\n <strong class=\"solaris-notification-center-title snc-title\">{{ intl.centerTitle() }}</strong>\n </div>\n\n <div class=\"solaris-notification-center-controls snc-controls\">\n <button\n type=\"button\"\n solaris-button\n variant=\"outline\"\n color=\"surface\"\n size=\"sm\"\n radius=\"md\"\n (click)=\"notificationService.clearHistory()\"\n >\n {{ intl.clearHistory() }}\n </button>\n\n <button\n type=\"button\"\n class=\"solaris-notification-center-icon-button snc-icon-btn\"\n [attr.aria-label]=\"intl.close()\"\n (click)=\"notificationService.closeCenter()\"\n >\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </header>\n\n <div class=\"solaris-notification-center-list snc-list\">\n @for (item of notificationService.centerItems(); track item.id) {\n <solaris-notification-item [item]=\"item\" mode=\"center\" />\n } @empty {\n <div class=\"solaris-notification-center-empty snc-empty\">\n {{ intl.emptyCenter() }}\n </div>\n }\n </div>\n </aside>\n}\n\r\n", styles: [".solaris-notification-center-backdrop,.snc-backdrop{inset:0;position:fixed;pointer-events:auto;-webkit-backdrop-filter:blur(.2rem);backdrop-filter:blur(.2rem);background:var(--solaris-overlay-backdrop-soft);z-index:var(--solaris-z-overlay)}.solaris-notification-center,.snc{display:flex;position:fixed;overflow:hidden;pointer-events:auto;flex-direction:column;top:var(--solaris-space-4);z-index:var(--solaris-z-max);right:var(--solaris-space-4);bottom:var(--solaris-space-4);box-shadow:var(--solaris-shadow-lg);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(46rem,100vw - var(--solaris-space-4) * 2)}.solaris-notification-center-header,.snc-header{display:flex;align-items:center;gap:var(--solaris-space-3);justify-content:space-between;padding:var(--solaris-space-4);border-bottom:.1rem solid var(--solaris-color-border)}.solaris-notification-center-title,.snc-title{font-size:var(--solaris-h-6);line-height:var(--solaris-lh-tight)}.solaris-notification-center-controls,.snc-controls{display:flex;align-items:center;gap:var(--solaris-space-2)}.solaris-notification-center-icon-button,.snc-icon-btn{border:0;display:grid;cursor:pointer;block-size:4rem;inline-size:4rem;place-items:center;background:transparent;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full)}.solaris-notification-center-icon-button:hover,.snc-icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.solaris-notification-center-list,.snc-list{flex:1;display:flex;overflow:auto;flex-direction:column;gap:var(--solaris-space-3);padding:var(--solaris-space-4);background:var(--solaris-color-bg)}.solaris-notification-center-empty,.snc-empty{display:grid;min-height:16rem;text-align:center;place-items:center;color:var(--solaris-color-text-muted)}\n"] }]
|
|
2578
2578
|
}], propDecorators: { onEscape: [{
|
|
2579
2579
|
type: HostListener,
|
|
2580
2580
|
args: ['document:keydown.escape']
|
|
@@ -2588,11 +2588,11 @@ class SolarisNotificationHostComponent {
|
|
|
2588
2588
|
return this.notificationService.visibleByPosition(position);
|
|
2589
2589
|
}
|
|
2590
2590
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisNotificationHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2591
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisNotificationHostComponent, isStandalone: true, selector: "solaris-notification-host", inputs: { withCenter: { classPropertyName: "withCenter", publicName: "withCenter", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (position of positions; track position) {\n <section class=\"
|
|
2591
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisNotificationHostComponent, isStandalone: true, selector: "solaris-notification-host", inputs: { withCenter: { classPropertyName: "withCenter", publicName: "withCenter", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (position of positions; track position) {\n <section class=\"solaris-notification-host-stack snh-stack\" [attr.data-position]=\"position\">\n @for (item of visibleByPosition(position); track item.id) {\n <solaris-notification-item [item]=\"item\" mode=\"toast\" />\n }\n </section>\n}\n\n@if (withCenter()) {\n <solaris-notification-center />\n}\n\r\n", styles: [":host{inset:0;position:fixed;pointer-events:none;z-index:var(--solaris-z-toast)}.solaris-notification-host-stack,.snh-stack{display:flex;position:fixed;flex-direction:column;gap:var(--solaris-space-3);padding:var(--solaris-space-4);max-width:calc(100vw - var(--solaris-space-4) * 2)}.solaris-notification-host-stack[data-position=top-right],.snh-stack[data-position=top-right]{top:0;right:0;align-items:flex-end}.solaris-notification-host-stack[data-position=top-left],.snh-stack[data-position=top-left]{top:0;left:0;align-items:flex-start}.solaris-notification-host-stack[data-position=top-center],.snh-stack[data-position=top-center]{top:0;left:50%;align-items:center;transform:translate(-50%)}.solaris-notification-host-stack[data-position=bottom-right],.snh-stack[data-position=bottom-right]{right:0;bottom:0;align-items:flex-end}.solaris-notification-host-stack[data-position=bottom-left],.snh-stack[data-position=bottom-left]{left:0;bottom:0;align-items:flex-start}.solaris-notification-host-stack[data-position=bottom-center],.snh-stack[data-position=bottom-center]{left:50%;bottom:0;align-items:center;transform:translate(-50%)}\n"], dependencies: [{ kind: "component", type: SolarisNotificationItemComponent, selector: "solaris-notification-item", inputs: ["item", "mode"] }, { kind: "component", type: SolarisNotificationCenterComponent, selector: "solaris-notification-center" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2592
2592
|
}
|
|
2593
2593
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisNotificationHostComponent, decorators: [{
|
|
2594
2594
|
type: Component,
|
|
2595
|
-
args: [{ selector: 'solaris-notification-host', standalone: true, imports: [SolarisNotificationItemComponent, SolarisNotificationCenterComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (position of positions; track position) {\n <section class=\"
|
|
2595
|
+
args: [{ selector: 'solaris-notification-host', standalone: true, imports: [SolarisNotificationItemComponent, SolarisNotificationCenterComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (position of positions; track position) {\n <section class=\"solaris-notification-host-stack snh-stack\" [attr.data-position]=\"position\">\n @for (item of visibleByPosition(position); track item.id) {\n <solaris-notification-item [item]=\"item\" mode=\"toast\" />\n }\n </section>\n}\n\n@if (withCenter()) {\n <solaris-notification-center />\n}\n\r\n", styles: [":host{inset:0;position:fixed;pointer-events:none;z-index:var(--solaris-z-toast)}.solaris-notification-host-stack,.snh-stack{display:flex;position:fixed;flex-direction:column;gap:var(--solaris-space-3);padding:var(--solaris-space-4);max-width:calc(100vw - var(--solaris-space-4) * 2)}.solaris-notification-host-stack[data-position=top-right],.snh-stack[data-position=top-right]{top:0;right:0;align-items:flex-end}.solaris-notification-host-stack[data-position=top-left],.snh-stack[data-position=top-left]{top:0;left:0;align-items:flex-start}.solaris-notification-host-stack[data-position=top-center],.snh-stack[data-position=top-center]{top:0;left:50%;align-items:center;transform:translate(-50%)}.solaris-notification-host-stack[data-position=bottom-right],.snh-stack[data-position=bottom-right]{right:0;bottom:0;align-items:flex-end}.solaris-notification-host-stack[data-position=bottom-left],.snh-stack[data-position=bottom-left]{left:0;bottom:0;align-items:flex-start}.solaris-notification-host-stack[data-position=bottom-center],.snh-stack[data-position=bottom-center]{left:50%;bottom:0;align-items:center;transform:translate(-50%)}\n"] }]
|
|
2596
2596
|
}], propDecorators: { withCenter: [{ type: i0.Input, args: [{ isSignal: true, alias: "withCenter", required: false }] }] } });
|
|
2597
2597
|
|
|
2598
2598
|
class SolarisSkeleton {
|
|
@@ -2656,11 +2656,11 @@ class SolarisTooltipPanel {
|
|
|
2656
2656
|
position = input('top', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
2657
2657
|
variant = input('inverse', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
2658
2658
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisTooltipPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2659
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisTooltipPanel, isStandalone: true, selector: "solaris-tooltip-panel", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"solaris-tooltip\"\n [attr.data-position]=\"position()\"\n [attr.data-variant]=\"variant()\"\n [attr.data-size]=\"size()\"\n role=\"tooltip\"\n>\n @if (prefixIcon()) {\n <span class=\"solaris-
|
|
2659
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisTooltipPanel, isStandalone: true, selector: "solaris-tooltip-panel", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"solaris-tooltip\"\n [attr.data-position]=\"position()\"\n [attr.data-variant]=\"variant()\"\n [attr.data-size]=\"size()\"\n role=\"tooltip\"\n>\n @if (prefixIcon()) {\n <span class=\"solaris-tooltip-prefix\" aria-hidden=\"true\">\n <i [class]=\"prefixIcon()\"></i>\n </span>\n }\n\n <span class=\"solaris-tooltip-content\">\n {{ text() }}\n </span>\n\n <span class=\"solaris-tooltip-arrow\" aria-hidden=\"true\"></span>\n</div>\n\r\n", styles: [":host{display:block;isolation:isolate;pointer-events:none;inline-size:max-content;max-inline-size:max-content}.solaris-tooltip{--solaris-tooltip-padding-x: 1rem;--solaris-tooltip-max-width: 28rem;--solaris-tooltip-arrow-size: .8rem;--solaris-tooltip-padding-y: .75rem;--solaris-tooltip-gap: var(--solaris-space-2);--solaris-tooltip-fg: var(--solaris-color-text);--solaris-tooltip-font-size: var(--solaris-fs-12);--solaris-tooltip-shadow: var(--solaris-shadow-md);--solaris-tooltip-radius: var(--solaris-radius-md);--solaris-tooltip-bg: var(--solaris-color-surface);--solaris-tooltip-border: color-mix(in srgb, var(--solaris-color-border) 75%, transparent);position:relative;display:inline-flex;align-items:center;gap:var(--solaris-tooltip-gap);max-inline-size:var(--solaris-tooltip-max-width);padding:var(--solaris-tooltip-padding-y) var(--solaris-tooltip-padding-x);color:var(--solaris-tooltip-fg);background:var(--solaris-tooltip-bg);box-shadow:var(--solaris-tooltip-shadow);border-radius:var(--solaris-tooltip-radius);border:1px solid var(--solaris-tooltip-border);font-weight:500;text-align:start;white-space:normal;line-height:var(--solaris-lh-normal);font-size:var(--solaris-tooltip-font-size);pointer-events:none;animation:solaris-tooltip-in var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-tooltip[data-size=sm]{--solaris-tooltip-max-width: 22rem;--solaris-tooltip-padding-y: .55rem;--solaris-tooltip-padding-x: .8rem;--solaris-tooltip-font-size: var(--solaris-fs-11);--solaris-tooltip-radius: var(--solaris-radius-sm)}.solaris-tooltip[data-size=md]{--solaris-tooltip-max-width: 28rem;--solaris-tooltip-padding-y: .75rem;--solaris-tooltip-padding-x: 1rem;--solaris-tooltip-font-size: var(--solaris-fs-12)}.solaris-tooltip[data-variant=default]{--solaris-tooltip-bg: var(--solaris-color-surface);--solaris-tooltip-fg: var(--solaris-color-text);--solaris-tooltip-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent)}.solaris-tooltip[data-variant=inverse]{--solaris-tooltip-fg: var(--solaris-color-surface);--solaris-tooltip-bg: color-mix( in srgb, var(--solaris-color-text) 92%, var(--solaris-color-black) );--solaris-tooltip-border: color-mix( in srgb, var(--solaris-tooltip-bg) 82%, var(--solaris-color-white) )}.solaris-tooltip[data-variant=primary]{--solaris-tooltip-fg: var(--solaris-color-white);--solaris-tooltip-bg: var(--solaris-color-primary);--solaris-tooltip-border: color-mix( in srgb, var(--solaris-color-primary) 75%, var(--solaris-color-white) )}.solaris-tooltip-prefix{opacity:.9;flex:0 0 auto;block-size:1.6rem;inline-size:1.6rem;place-items:center;color:currentColor;display:inline-grid}.solaris-tooltip-prefix i{display:block;line-height:1;font-size:var(--solaris-fs-16)}.solaris-tooltip-content{min-inline-size:0;overflow-wrap:anywhere}.solaris-tooltip-arrow{position:absolute;inline-size:var(--solaris-tooltip-arrow-size);block-size:var(--solaris-tooltip-arrow-size);background:var(--solaris-tooltip-bg);border:1px solid var(--solaris-tooltip-border);transform:rotate(45deg);z-index:0}.solaris-tooltip-content,.solaris-tooltip-prefix{position:relative;z-index:1}.solaris-tooltip[data-position=top] .solaris-tooltip-arrow{inset-inline-start:50%;border-block-start-color:transparent;border-inline-start-color:transparent;transform:translate(-50%) rotate(45deg);inset-block-end:calc(var(--solaris-tooltip-arrow-size) / -2)}.solaris-tooltip[data-position=bottom] .solaris-tooltip-arrow{inset-inline-start:50%;border-block-end-color:transparent;border-inline-end-color:transparent;transform:translate(-50%) rotate(45deg);inset-block-start:calc(var(--solaris-tooltip-arrow-size) / -2)}.solaris-tooltip[data-position=right] .solaris-tooltip-arrow{inset-block-start:50%;border-inline-end-color:transparent;border-block-start-color:transparent;transform:translateY(-50%) rotate(45deg);inset-inline-start:calc(var(--solaris-tooltip-arrow-size) / -2)}.solaris-tooltip[data-position=left] .solaris-tooltip-arrow{inset-block-start:50%;border-block-end-color:transparent;border-inline-start-color:transparent;transform:translateY(-50%) rotate(45deg);inset-inline-end:calc(var(--solaris-tooltip-arrow-size) / -2)}@keyframes solaris-tooltip-in{0%{opacity:0;filter:blur(.1rem);transform:scale(.98)}to{opacity:1;filter:blur(0);transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2660
2660
|
}
|
|
2661
2661
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisTooltipPanel, decorators: [{
|
|
2662
2662
|
type: Component,
|
|
2663
|
-
args: [{ selector: 'solaris-tooltip-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"solaris-tooltip\"\n [attr.data-position]=\"position()\"\n [attr.data-variant]=\"variant()\"\n [attr.data-size]=\"size()\"\n role=\"tooltip\"\n>\n @if (prefixIcon()) {\n <span class=\"solaris-
|
|
2663
|
+
args: [{ selector: 'solaris-tooltip-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"solaris-tooltip\"\n [attr.data-position]=\"position()\"\n [attr.data-variant]=\"variant()\"\n [attr.data-size]=\"size()\"\n role=\"tooltip\"\n>\n @if (prefixIcon()) {\n <span class=\"solaris-tooltip-prefix\" aria-hidden=\"true\">\n <i [class]=\"prefixIcon()\"></i>\n </span>\n }\n\n <span class=\"solaris-tooltip-content\">\n {{ text() }}\n </span>\n\n <span class=\"solaris-tooltip-arrow\" aria-hidden=\"true\"></span>\n</div>\n\r\n", styles: [":host{display:block;isolation:isolate;pointer-events:none;inline-size:max-content;max-inline-size:max-content}.solaris-tooltip{--solaris-tooltip-padding-x: 1rem;--solaris-tooltip-max-width: 28rem;--solaris-tooltip-arrow-size: .8rem;--solaris-tooltip-padding-y: .75rem;--solaris-tooltip-gap: var(--solaris-space-2);--solaris-tooltip-fg: var(--solaris-color-text);--solaris-tooltip-font-size: var(--solaris-fs-12);--solaris-tooltip-shadow: var(--solaris-shadow-md);--solaris-tooltip-radius: var(--solaris-radius-md);--solaris-tooltip-bg: var(--solaris-color-surface);--solaris-tooltip-border: color-mix(in srgb, var(--solaris-color-border) 75%, transparent);position:relative;display:inline-flex;align-items:center;gap:var(--solaris-tooltip-gap);max-inline-size:var(--solaris-tooltip-max-width);padding:var(--solaris-tooltip-padding-y) var(--solaris-tooltip-padding-x);color:var(--solaris-tooltip-fg);background:var(--solaris-tooltip-bg);box-shadow:var(--solaris-tooltip-shadow);border-radius:var(--solaris-tooltip-radius);border:1px solid var(--solaris-tooltip-border);font-weight:500;text-align:start;white-space:normal;line-height:var(--solaris-lh-normal);font-size:var(--solaris-tooltip-font-size);pointer-events:none;animation:solaris-tooltip-in var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-tooltip[data-size=sm]{--solaris-tooltip-max-width: 22rem;--solaris-tooltip-padding-y: .55rem;--solaris-tooltip-padding-x: .8rem;--solaris-tooltip-font-size: var(--solaris-fs-11);--solaris-tooltip-radius: var(--solaris-radius-sm)}.solaris-tooltip[data-size=md]{--solaris-tooltip-max-width: 28rem;--solaris-tooltip-padding-y: .75rem;--solaris-tooltip-padding-x: 1rem;--solaris-tooltip-font-size: var(--solaris-fs-12)}.solaris-tooltip[data-variant=default]{--solaris-tooltip-bg: var(--solaris-color-surface);--solaris-tooltip-fg: var(--solaris-color-text);--solaris-tooltip-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent)}.solaris-tooltip[data-variant=inverse]{--solaris-tooltip-fg: var(--solaris-color-surface);--solaris-tooltip-bg: color-mix( in srgb, var(--solaris-color-text) 92%, var(--solaris-color-black) );--solaris-tooltip-border: color-mix( in srgb, var(--solaris-tooltip-bg) 82%, var(--solaris-color-white) )}.solaris-tooltip[data-variant=primary]{--solaris-tooltip-fg: var(--solaris-color-white);--solaris-tooltip-bg: var(--solaris-color-primary);--solaris-tooltip-border: color-mix( in srgb, var(--solaris-color-primary) 75%, var(--solaris-color-white) )}.solaris-tooltip-prefix{opacity:.9;flex:0 0 auto;block-size:1.6rem;inline-size:1.6rem;place-items:center;color:currentColor;display:inline-grid}.solaris-tooltip-prefix i{display:block;line-height:1;font-size:var(--solaris-fs-16)}.solaris-tooltip-content{min-inline-size:0;overflow-wrap:anywhere}.solaris-tooltip-arrow{position:absolute;inline-size:var(--solaris-tooltip-arrow-size);block-size:var(--solaris-tooltip-arrow-size);background:var(--solaris-tooltip-bg);border:1px solid var(--solaris-tooltip-border);transform:rotate(45deg);z-index:0}.solaris-tooltip-content,.solaris-tooltip-prefix{position:relative;z-index:1}.solaris-tooltip[data-position=top] .solaris-tooltip-arrow{inset-inline-start:50%;border-block-start-color:transparent;border-inline-start-color:transparent;transform:translate(-50%) rotate(45deg);inset-block-end:calc(var(--solaris-tooltip-arrow-size) / -2)}.solaris-tooltip[data-position=bottom] .solaris-tooltip-arrow{inset-inline-start:50%;border-block-end-color:transparent;border-inline-end-color:transparent;transform:translate(-50%) rotate(45deg);inset-block-start:calc(var(--solaris-tooltip-arrow-size) / -2)}.solaris-tooltip[data-position=right] .solaris-tooltip-arrow{inset-block-start:50%;border-inline-end-color:transparent;border-block-start-color:transparent;transform:translateY(-50%) rotate(45deg);inset-inline-start:calc(var(--solaris-tooltip-arrow-size) / -2)}.solaris-tooltip[data-position=left] .solaris-tooltip-arrow{inset-block-start:50%;border-block-end-color:transparent;border-inline-start-color:transparent;transform:translateY(-50%) rotate(45deg);inset-inline-end:calc(var(--solaris-tooltip-arrow-size) / -2)}@keyframes solaris-tooltip-in{0%{opacity:0;filter:blur(.1rem);transform:scale(.98)}to{opacity:1;filter:blur(0);transform:scale(1)}}\n"] }]
|
|
2664
2664
|
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
2665
2665
|
|
|
2666
2666
|
class SolarisTooltipDirective {
|
|
@@ -2859,11 +2859,11 @@ class SolarisLoading {
|
|
|
2859
2859
|
}
|
|
2860
2860
|
}
|
|
2861
2861
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisLoading, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2862
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisLoading, isStandalone: true, selector: "solaris-loading", inputs: { label: "label", value: "value", type: "type", size: "size", speed: "speed", color: "color", easing: "easing", trail: "trail", dashDensity: "dashDensity", indeterminate: ["indeterminate", "indeterminate", coerceBoolean$1] }, host: { properties: { "attr.solaris-loading": "this.marker" } }, ngImport: i0, template: "<div\n class=\"solaris-loading\"\n [attr.data-type]=\"type\"\n [attr.data-size]=\"size\"\n [attr.data-color]=\"dataColor\"\n [attr.data-speed]=\"speed\"\n [attr.data-easing]=\"easing\"\n [class.is-indeterminate]=\"indeterminate || value === null\"\n [attr.role]=\"role\"\n [attr.aria-label]=\"ariaLabel\"\n [style.--solaris-loading-color]=\"inlineColor\"\n [attr.aria-valuemin]=\"role === 'progressbar' ? 0 : null\"\n [attr.aria-valuemax]=\"role === 'progressbar' ? 100 : null\"\n [attr.aria-valuenow]=\"role === 'progressbar' ? ariaValueNow : null\"\n>\n @if (type === 'spinner') {\n <span class=\"solaris-
|
|
2862
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisLoading, isStandalone: true, selector: "solaris-loading", inputs: { label: "label", value: "value", type: "type", size: "size", speed: "speed", color: "color", easing: "easing", trail: "trail", dashDensity: "dashDensity", indeterminate: ["indeterminate", "indeterminate", coerceBoolean$1] }, host: { properties: { "attr.solaris-loading": "this.marker" } }, ngImport: i0, template: "<div\n class=\"solaris-loading\"\n [attr.data-type]=\"type\"\n [attr.data-size]=\"size\"\n [attr.data-color]=\"dataColor\"\n [attr.data-speed]=\"speed\"\n [attr.data-easing]=\"easing\"\n [class.is-indeterminate]=\"indeterminate || value === null\"\n [attr.role]=\"role\"\n [attr.aria-label]=\"ariaLabel\"\n [style.--solaris-loading-color]=\"inlineColor\"\n [attr.aria-valuemin]=\"role === 'progressbar' ? 0 : null\"\n [attr.aria-valuemax]=\"role === 'progressbar' ? 100 : null\"\n [attr.aria-valuenow]=\"role === 'progressbar' ? ariaValueNow : null\"\n>\n @if (type === 'spinner') {\n <span class=\"solaris-loading-spinner\" aria-hidden=\"true\"></span>\n }\n\n @if (type === 'spinner-dashed') {\n <svg class=\"solaris-loading-spinner-stacked\" viewBox=\"0 0 44 44\" aria-hidden=\"true\">\n @for (spoke of dashedSpokes; track spoke.angle) {\n <line\n x1=\"22\"\n y1=\"6\"\n x2=\"22\"\n y2=\"12\"\n [attr.opacity]=\"spoke.opacity\"\n [attr.transform]=\"'rotate(' + spoke.angle + ' 22 22)'\"\n ></line>\n }\n </svg>\n }\n\n @if (type === 'progress') {\n <svg class=\"solaris-loading-ring\" viewBox=\"0 0 44 44\" aria-hidden=\"true\">\n <circle class=\"ring-track\" cx=\"22\" cy=\"22\" r=\"18\"></circle>\n <circle\n class=\"ring-value\"\n cx=\"22\"\n cy=\"22\"\n r=\"18\"\n [attr.stroke-dasharray]=\"113.097\"\n [attr.stroke-dashoffset]=\"113.097 - (113.097 * percent) / 100\"\n ></circle>\n </svg>\n\n <span class=\"solaris-loading-percent\" aria-hidden=\"true\"> {{ percent }}% </span>\n }\n\n @if (type === 'bar') {\n <span class=\"solaris-loading-bar\" aria-hidden=\"true\">\n <span\n class=\"solaris-loading-bar-inner\"\n [style.width.%]=\"indeterminate || value === null ? 30 : percent\"\n ></span>\n </span>\n }\n</div>\n\r\n", styles: [":host{display:inline-flex;min-width:0}.solaris-loading{--solaris-loading-size: 2rem;--solaris-loading-easing: var(--solaris-motion-ease-linear);--solaris-loading-duration: var(--solaris-motion-duration-loading-md);--solaris-loading-color: var(--solaris-color-primary);--solaris-loading-stroke: clamp(.18rem, calc(var(--solaris-loading-size) * .13), .6rem);--solaris-loading-stacked-stroke: clamp( .14rem, calc(var(--solaris-loading-size) * .08), .32rem );display:inline-flex;align-items:center;justify-content:center;gap:var(--solaris-space-2);color:var(--solaris-loading-color)}.solaris-loading[data-size=xs]{--solaris-loading-size: 1.4rem}.solaris-loading[data-size=sm]{--solaris-loading-size: 1.8rem}.solaris-loading[data-size=md]{--solaris-loading-size: 2.2rem}.solaris-loading[data-size=lg]{--solaris-loading-size: 2.8rem}.solaris-loading[data-size=xl]{--solaris-loading-size: 6.4rem}.solaris-loading[data-color=primary]{--solaris-loading-color: var(--solaris-color-primary)}.solaris-loading[data-color=success]{--solaris-loading-color: var(--solaris-color-success)}.solaris-loading[data-color=warning]{--solaris-loading-color: var(--solaris-color-warning)}.solaris-loading[data-color=error]{--solaris-loading-color: var(--solaris-color-error)}.solaris-loading[data-color=surface]{--solaris-loading-color: var(--solaris-color-text-muted)}.solaris-loading[data-speed=slow]{--solaris-loading-duration: var(--solaris-motion-duration-loading-slow)}.solaris-loading[data-speed=md]{--solaris-loading-duration: var(--solaris-motion-duration-loading-md)}.solaris-loading[data-speed=fast]{--solaris-loading-duration: var(--solaris-motion-duration-loading-fast)}.solaris-loading[data-easing=linear]{--solaris-loading-easing: var(--solaris-motion-ease-linear)}.solaris-loading[data-easing=smooth]{--solaris-loading-easing: var(--solaris-motion-ease-smooth)}.solaris-loading[data-easing=snappy]{--solaris-loading-easing: var(--solaris-motion-ease-snappy)}.solaris-loading-spinner{display:inline-block;width:var(--solaris-loading-size);height:var(--solaris-loading-size);border-radius:var(--solaris-radius-full);border:var(--solaris-loading-stroke) solid color-mix(in srgb,var(--solaris-loading-color) 22%,transparent);border-top-color:var(--solaris-loading-color);animation:solaris-spin var(--solaris-loading-duration) var(--solaris-loading-easing) infinite}.solaris-loading-spinner-stacked{transform-box:fill-box;transform-origin:50% 50%;width:var(--solaris-loading-size);height:var(--solaris-loading-size);animation:solaris-spin var(--solaris-loading-duration) var(--solaris-loading-easing) infinite}.solaris-loading-spinner-stacked line{stroke-linecap:round;stroke:var(--solaris-loading-color);stroke-width:var(--solaris-loading-stacked-stroke)}.solaris-loading[data-type=progress]{gap:var(--solaris-space-2)}.solaris-loading-ring{transform:rotate(-90deg);width:calc(var(--solaris-loading-size) * 1.2);height:calc(var(--solaris-loading-size) * 1.2)}.solaris-loading-ring .ring-track{fill:none;stroke-width:var(--solaris-loading-stroke);stroke:color-mix(in srgb,var(--solaris-loading-color) 18%,transparent)}.solaris-loading-ring .ring-value{fill:none;stroke-linecap:round;stroke:var(--solaris-loading-color);stroke-width:var(--solaris-loading-stroke);transition:stroke-dashoffset var(--solaris-motion-duration-md) var(--solaris-loading-easing)}.solaris-loading.is-indeterminate[data-type=progress] .ring-value{animation:solaris-ring var(--solaris-loading-duration) var(--solaris-loading-easing) infinite}.solaris-loading-percent{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-loading[data-type=bar]{max-width:100%;justify-content:stretch;width:clamp(12rem,35vw,28rem)}.solaris-loading-bar{width:100%;min-width:0;display:block;flex:1 1 auto;height:.6rem;overflow:hidden;border-radius:var(--solaris-radius-full);background:color-mix(in srgb,var(--solaris-loading-color) 14%,transparent)}.solaris-loading-bar-inner{height:100%;display:block;background:var(--solaris-loading-color);border-radius:var(--solaris-radius-full);transition:width var(--solaris-motion-duration-md) var(--solaris-loading-easing)}.solaris-loading.is-indeterminate[data-type=bar] .solaris-loading-bar-inner{width:30%;animation:solaris-bar var(--solaris-loading-duration) var(--solaris-loading-easing) infinite}.solaris-loading[data-trail=reverse] .solaris-loading-spinner-stacked{transform:scaleX(-1)}@keyframes solaris-spin{to{transform:rotate(360deg)}}@keyframes solaris-ring{0%{stroke-dashoffset:113.097;opacity:.55}50%{stroke-dashoffset:28;opacity:1}to{stroke-dashoffset:113.097;opacity:.55}}@keyframes solaris-bar{0%{transform:translate(-120%)}50%{transform:translate(70%)}to{transform:translate(240%)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2863
2863
|
}
|
|
2864
2864
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisLoading, decorators: [{
|
|
2865
2865
|
type: Component,
|
|
2866
|
-
args: [{ selector: 'solaris-loading', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"solaris-loading\"\n [attr.data-type]=\"type\"\n [attr.data-size]=\"size\"\n [attr.data-color]=\"dataColor\"\n [attr.data-speed]=\"speed\"\n [attr.data-easing]=\"easing\"\n [class.is-indeterminate]=\"indeterminate || value === null\"\n [attr.role]=\"role\"\n [attr.aria-label]=\"ariaLabel\"\n [style.--solaris-loading-color]=\"inlineColor\"\n [attr.aria-valuemin]=\"role === 'progressbar' ? 0 : null\"\n [attr.aria-valuemax]=\"role === 'progressbar' ? 100 : null\"\n [attr.aria-valuenow]=\"role === 'progressbar' ? ariaValueNow : null\"\n>\n @if (type === 'spinner') {\n <span class=\"solaris-
|
|
2866
|
+
args: [{ selector: 'solaris-loading', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"solaris-loading\"\n [attr.data-type]=\"type\"\n [attr.data-size]=\"size\"\n [attr.data-color]=\"dataColor\"\n [attr.data-speed]=\"speed\"\n [attr.data-easing]=\"easing\"\n [class.is-indeterminate]=\"indeterminate || value === null\"\n [attr.role]=\"role\"\n [attr.aria-label]=\"ariaLabel\"\n [style.--solaris-loading-color]=\"inlineColor\"\n [attr.aria-valuemin]=\"role === 'progressbar' ? 0 : null\"\n [attr.aria-valuemax]=\"role === 'progressbar' ? 100 : null\"\n [attr.aria-valuenow]=\"role === 'progressbar' ? ariaValueNow : null\"\n>\n @if (type === 'spinner') {\n <span class=\"solaris-loading-spinner\" aria-hidden=\"true\"></span>\n }\n\n @if (type === 'spinner-dashed') {\n <svg class=\"solaris-loading-spinner-stacked\" viewBox=\"0 0 44 44\" aria-hidden=\"true\">\n @for (spoke of dashedSpokes; track spoke.angle) {\n <line\n x1=\"22\"\n y1=\"6\"\n x2=\"22\"\n y2=\"12\"\n [attr.opacity]=\"spoke.opacity\"\n [attr.transform]=\"'rotate(' + spoke.angle + ' 22 22)'\"\n ></line>\n }\n </svg>\n }\n\n @if (type === 'progress') {\n <svg class=\"solaris-loading-ring\" viewBox=\"0 0 44 44\" aria-hidden=\"true\">\n <circle class=\"ring-track\" cx=\"22\" cy=\"22\" r=\"18\"></circle>\n <circle\n class=\"ring-value\"\n cx=\"22\"\n cy=\"22\"\n r=\"18\"\n [attr.stroke-dasharray]=\"113.097\"\n [attr.stroke-dashoffset]=\"113.097 - (113.097 * percent) / 100\"\n ></circle>\n </svg>\n\n <span class=\"solaris-loading-percent\" aria-hidden=\"true\"> {{ percent }}% </span>\n }\n\n @if (type === 'bar') {\n <span class=\"solaris-loading-bar\" aria-hidden=\"true\">\n <span\n class=\"solaris-loading-bar-inner\"\n [style.width.%]=\"indeterminate || value === null ? 30 : percent\"\n ></span>\n </span>\n }\n</div>\n\r\n", styles: [":host{display:inline-flex;min-width:0}.solaris-loading{--solaris-loading-size: 2rem;--solaris-loading-easing: var(--solaris-motion-ease-linear);--solaris-loading-duration: var(--solaris-motion-duration-loading-md);--solaris-loading-color: var(--solaris-color-primary);--solaris-loading-stroke: clamp(.18rem, calc(var(--solaris-loading-size) * .13), .6rem);--solaris-loading-stacked-stroke: clamp( .14rem, calc(var(--solaris-loading-size) * .08), .32rem );display:inline-flex;align-items:center;justify-content:center;gap:var(--solaris-space-2);color:var(--solaris-loading-color)}.solaris-loading[data-size=xs]{--solaris-loading-size: 1.4rem}.solaris-loading[data-size=sm]{--solaris-loading-size: 1.8rem}.solaris-loading[data-size=md]{--solaris-loading-size: 2.2rem}.solaris-loading[data-size=lg]{--solaris-loading-size: 2.8rem}.solaris-loading[data-size=xl]{--solaris-loading-size: 6.4rem}.solaris-loading[data-color=primary]{--solaris-loading-color: var(--solaris-color-primary)}.solaris-loading[data-color=success]{--solaris-loading-color: var(--solaris-color-success)}.solaris-loading[data-color=warning]{--solaris-loading-color: var(--solaris-color-warning)}.solaris-loading[data-color=error]{--solaris-loading-color: var(--solaris-color-error)}.solaris-loading[data-color=surface]{--solaris-loading-color: var(--solaris-color-text-muted)}.solaris-loading[data-speed=slow]{--solaris-loading-duration: var(--solaris-motion-duration-loading-slow)}.solaris-loading[data-speed=md]{--solaris-loading-duration: var(--solaris-motion-duration-loading-md)}.solaris-loading[data-speed=fast]{--solaris-loading-duration: var(--solaris-motion-duration-loading-fast)}.solaris-loading[data-easing=linear]{--solaris-loading-easing: var(--solaris-motion-ease-linear)}.solaris-loading[data-easing=smooth]{--solaris-loading-easing: var(--solaris-motion-ease-smooth)}.solaris-loading[data-easing=snappy]{--solaris-loading-easing: var(--solaris-motion-ease-snappy)}.solaris-loading-spinner{display:inline-block;width:var(--solaris-loading-size);height:var(--solaris-loading-size);border-radius:var(--solaris-radius-full);border:var(--solaris-loading-stroke) solid color-mix(in srgb,var(--solaris-loading-color) 22%,transparent);border-top-color:var(--solaris-loading-color);animation:solaris-spin var(--solaris-loading-duration) var(--solaris-loading-easing) infinite}.solaris-loading-spinner-stacked{transform-box:fill-box;transform-origin:50% 50%;width:var(--solaris-loading-size);height:var(--solaris-loading-size);animation:solaris-spin var(--solaris-loading-duration) var(--solaris-loading-easing) infinite}.solaris-loading-spinner-stacked line{stroke-linecap:round;stroke:var(--solaris-loading-color);stroke-width:var(--solaris-loading-stacked-stroke)}.solaris-loading[data-type=progress]{gap:var(--solaris-space-2)}.solaris-loading-ring{transform:rotate(-90deg);width:calc(var(--solaris-loading-size) * 1.2);height:calc(var(--solaris-loading-size) * 1.2)}.solaris-loading-ring .ring-track{fill:none;stroke-width:var(--solaris-loading-stroke);stroke:color-mix(in srgb,var(--solaris-loading-color) 18%,transparent)}.solaris-loading-ring .ring-value{fill:none;stroke-linecap:round;stroke:var(--solaris-loading-color);stroke-width:var(--solaris-loading-stroke);transition:stroke-dashoffset var(--solaris-motion-duration-md) var(--solaris-loading-easing)}.solaris-loading.is-indeterminate[data-type=progress] .ring-value{animation:solaris-ring var(--solaris-loading-duration) var(--solaris-loading-easing) infinite}.solaris-loading-percent{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-loading[data-type=bar]{max-width:100%;justify-content:stretch;width:clamp(12rem,35vw,28rem)}.solaris-loading-bar{width:100%;min-width:0;display:block;flex:1 1 auto;height:.6rem;overflow:hidden;border-radius:var(--solaris-radius-full);background:color-mix(in srgb,var(--solaris-loading-color) 14%,transparent)}.solaris-loading-bar-inner{height:100%;display:block;background:var(--solaris-loading-color);border-radius:var(--solaris-radius-full);transition:width var(--solaris-motion-duration-md) var(--solaris-loading-easing)}.solaris-loading.is-indeterminate[data-type=bar] .solaris-loading-bar-inner{width:30%;animation:solaris-bar var(--solaris-loading-duration) var(--solaris-loading-easing) infinite}.solaris-loading[data-trail=reverse] .solaris-loading-spinner-stacked{transform:scaleX(-1)}@keyframes solaris-spin{to{transform:rotate(360deg)}}@keyframes solaris-ring{0%{stroke-dashoffset:113.097;opacity:.55}50%{stroke-dashoffset:28;opacity:1}to{stroke-dashoffset:113.097;opacity:.55}}@keyframes solaris-bar{0%{transform:translate(-120%)}50%{transform:translate(70%)}to{transform:translate(240%)}}\n"] }]
|
|
2867
2867
|
}], propDecorators: { marker: [{
|
|
2868
2868
|
type: HostBinding,
|
|
2869
2869
|
args: ['attr.solaris-loading']
|
|
@@ -3242,11 +3242,11 @@ class SolarisCarousel {
|
|
|
3242
3242
|
}
|
|
3243
3243
|
}
|
|
3244
3244
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCarousel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3245
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisCarousel, isStandalone: true, selector: "solaris-carousel", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, aspect: { classPropertyName: "aspect", publicName: "aspect", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, controlsPosition: { classPropertyName: "controlsPosition", publicName: "controlsPosition", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, intervalMs: { classPropertyName: "intervalMs", publicName: "intervalMs", isSignal: true, isRequired: false, transformFunction: null }, transitionMs: { classPropertyName: "transitionMs", publicName: "transitionMs", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, pauseOnFocus: { classPropertyName: "pauseOnFocus", publicName: "pauseOnFocus", isSignal: true, isRequired: false, transformFunction: null }, resetAutoplayOnInteraction: { classPropertyName: "resetAutoplayOnInteraction", publicName: "resetAutoplayOnInteraction", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, showArrows: { classPropertyName: "showArrows", publicName: "showArrows", isSignal: true, isRequired: false, transformFunction: null }, keyboard: { classPropertyName: "keyboard", publicName: "keyboard", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabelKey: { classPropertyName: "previousLabelKey", publicName: "previousLabelKey", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabelKey: { classPropertyName: "nextLabelKey", publicName: "nextLabelKey", isSignal: true, isRequired: false, transformFunction: null }, navigationLabel: { classPropertyName: "navigationLabel", publicName: "navigationLabel", isSignal: true, isRequired: false, transformFunction: null }, navigationLabelKey: { classPropertyName: "navigationLabelKey", publicName: "navigationLabelKey", isSignal: true, isRequired: false, transformFunction: null }, goToSlideLabel: { classPropertyName: "goToSlideLabel", publicName: "goToSlideLabel", isSignal: true, isRequired: false, transformFunction: null }, goToSlideLabelKey: { classPropertyName: "goToSlideLabelKey", publicName: "goToSlideLabelKey", isSignal: true, isRequired: false, transformFunction: null }, openLabel: { classPropertyName: "openLabel", publicName: "openLabel", isSignal: true, isRequired: false, transformFunction: null }, openLabelKey: { classPropertyName: "openLabelKey", publicName: "openLabelKey", isSignal: true, isRequired: false, transformFunction: null }, textResolver: { classPropertyName: "textResolver", publicName: "textResolver", isSignal: true, isRequired: false, transformFunction: null }, slideTpl: { classPropertyName: "slideTpl", publicName: "slideTpl", isSignal: true, isRequired: false, transformFunction: null }, overlayTpl: { classPropertyName: "overlayTpl", publicName: "overlayTpl", isSignal: true, isRequired: false, transformFunction: null }, slideComponent: { classPropertyName: "slideComponent", publicName: "slideComponent", isSignal: true, isRequired: false, transformFunction: null }, overlayComponent: { classPropertyName: "overlayComponent", publicName: "overlayComponent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", slideChange: "slideChange" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.data-aspect": "this.dataAspect", "attr.data-radius": "this.dataRadius", "attr.data-appearance": "this.dataAppearance", "attr.data-controls-position": "this.dataControlsPosition" } }, queries: [{ propertyName: "projectedSlide", first: true, predicate: SolarisCarouselSlideDirective, descendants: true, isSignal: true }, { propertyName: "projectedOverlay", first: true, predicate: SolarisCarouselOverlayDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"solaris-carousel\"\n role=\"region\"\n aria-roledescription=\"carousel\"\n [attr.aria-label]=\"rootAriaLabel()\"\n [attr.tabindex]=\"keyboard() ? '0' : null\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut()\"\n>\n <div class=\"solaris-carousel__viewport\">\n <div\n class=\"solaris-carousel__track\"\n [style.transition-duration.ms]=\"transitionMs()\"\n [style.transform]=\"'translate3d(' + -activeIndex() * 100 + '%, 0, 0)'\"\n >\n @for (item of items(); track trackByItem($index, item)) {\n <div\n class=\"solaris-carousel__slide\"\n role=\"group\"\n aria-roledescription=\"slide\"\n [attr.aria-label]=\"$index + 1 + ' / ' + count()\"\n [attr.aria-hidden]=\"$index !== activeIndex() ? 'true' : null\"\n >\n @if (resolvedSlideTpl(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl; context: carouselContext($index)\"> </ng-container>\n } @else if (item.slideComponent; as component) {\n <ng-container *ngComponentOutlet=\"component; inputs: slideComponentInputs($index)\">\n </ng-container>\n } @else if (slideComponent(); as component) {\n <ng-container *ngComponentOutlet=\"component; inputs: slideComponentInputs($index)\">\n </ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"defaultImageSlide; context: carouselContext($index)\">\n </ng-container>\n }\n\n @if (resolvedOverlayTpl(); as tpl) {\n <div class=\"solaris-carousel__overlay\">\n <ng-container *ngTemplateOutlet=\"tpl; context: carouselContext($index)\">\n </ng-container>\n </div>\n } @else if (item.overlayComponent; as component) {\n <div class=\"solaris-carousel__overlay\">\n <ng-container *ngComponentOutlet=\"component; inputs: overlayComponentInputs($index)\">\n </ng-container>\n </div>\n } @else if (overlayComponent(); as component) {\n <div class=\"solaris-carousel__overlay\">\n <ng-container *ngComponentOutlet=\"component; inputs: overlayComponentInputs($index)\">\n </ng-container>\n </div>\n }\n </div>\n }\n </div>\n </div>\n\n @if (showArrows() && hasMultiple()) {\n <button\n type=\"button\"\n class=\"solaris-carousel__arrow is-prev\"\n [disabled]=\"!canGoPrev()\"\n [attr.aria-label]=\"previousAriaLabel()\"\n (click)=\"prev('arrow')\"\n >\n <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\n </button>\n\n <button\n type=\"button\"\n class=\"solaris-carousel__arrow is-next\"\n [disabled]=\"!canGoNext()\"\n [attr.aria-label]=\"nextAriaLabel()\"\n (click)=\"next('arrow')\"\n >\n <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @if (showDots() && hasMultiple()) {\n <div class=\"solaris-carousel__dots\" role=\"tablist\" [attr.aria-label]=\"navigationAriaLabel()\">\n @for (item of items(); track trackByItem($index, item)) {\n <button\n type=\"button\"\n class=\"solaris-carousel__dot\"\n role=\"tab\"\n [class.is-active]=\"$index === activeIndex()\"\n [attr.aria-label]=\"dotAriaLabel($index)\"\n [attr.aria-selected]=\"$index === activeIndex() ? 'true' : 'false'\"\n [attr.aria-current]=\"$index === activeIndex() ? 'true' : null\"\n (click)=\"goTo($index, 'dot')\"\n ></button>\n }\n </div>\n }\n</div>\n\n<ng-template #defaultImageSlide let-item>\n @if (item.src) {\n @if (item.href) {\n <a\n class=\"solaris-carousel__media\"\n [href]=\"item.href\"\n [attr.target]=\"item.target ?? null\"\n [attr.aria-label]=\"itemAriaLabel(item)\"\n >\n <img\n class=\"solaris-carousel__img\"\n [src]=\"item.src\"\n [attr.srcset]=\"item.srcSet ?? null\"\n [attr.sizes]=\"item.sizes ?? null\"\n [attr.alt]=\"itemAlt(item)\"\n />\n </a>\n } @else {\n <div class=\"solaris-carousel__media\">\n <img\n class=\"solaris-carousel__img\"\n [src]=\"item.src\"\n [attr.srcset]=\"item.srcSet ?? null\"\n [attr.sizes]=\"item.sizes ?? null\"\n [attr.alt]=\"itemAlt(item)\"\n />\n </div>\n }\n } @else {\n <div class=\"solaris-carousel__empty\" aria-hidden=\"true\"></div>\n }\n</ng-template>\n", styles: [":host{display:block;width:100%;min-width:0;--solaris-carousel-radius: var(--solaris-radius-lg);--solaris-carousel-bg: var(--solaris-color-surface);--solaris-carousel-color: var(--solaris-color-text);--solaris-carousel-overlay-padding: var(--solaris-space-5);--solaris-carousel-arrow-size: 4.2rem;--solaris-carousel-arrow-bg: var(--solaris-overlay-backdrop-soft);--solaris-carousel-arrow-color: var(--solaris-color-primary-contrast);--solaris-carousel-dot-size: .8rem;--solaris-carousel-dot-active-width: 2.6rem;--solaris-carousel-dot-bg: var(--solaris-color-primary-contrast);--solaris-carousel-dot-bg-wrapper: var(--solaris-overlay-backdrop-soft)}.solaris-carousel{width:100%;min-width:0;outline:none;overflow:hidden;position:relative;color:var(--solaris-carousel-color);border-radius:var(--solaris-carousel-radius);background:var(--solaris-carousel-bg)}:host([data-radius=none]){--solaris-carousel-radius: 0}:host([data-radius=sm]){--solaris-carousel-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-carousel-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-carousel-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-carousel-radius: var(--solaris-radius-xl, var(--solaris-radius-lg))}:host([data-radius=full]){--solaris-carousel-radius: var(--solaris-radius-full)}:host([data-appearance=surface]) .solaris-carousel{border:1px solid var(--solaris-color-border)}:host([data-appearance=elevated]) .solaris-carousel{box-shadow:var(--solaris-shadow-md)}:host([data-appearance=hero]) .solaris-carousel{background:var(--solaris-color-black)}.solaris-carousel:focus-visible{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--solaris-color-primary) 18%,transparent)}.solaris-carousel__viewport{width:100%;position:relative}:host([data-aspect=\"16/9\"]) .solaris-carousel__viewport{aspect-ratio:16/9}:host([data-aspect=\"9/16\"]) .solaris-carousel__viewport{aspect-ratio:9/16}:host([data-aspect=\"4/3\"]) .solaris-carousel__viewport{aspect-ratio:4/3}:host([data-aspect=\"1/1\"]) .solaris-carousel__viewport{aspect-ratio:1/1}:host([data-aspect=auto]) .solaris-carousel__viewport{aspect-ratio:auto}.solaris-carousel__track{height:100%;display:flex;will-change:transform;transition-property:transform;transition-timing-function:var(--solaris-motion-ease-standard)}@media(prefers-reduced-motion:reduce){.solaris-carousel__track{transition:none!important}}.solaris-carousel__slide{height:100%;min-width:0;flex:0 0 100%;position:relative}.solaris-carousel__media{display:block;width:100%;height:100%;position:relative}.solaris-carousel__img{width:100%;height:100%;display:block;object-fit:cover}.solaris-carousel__empty{width:100%;height:100%;background:linear-gradient(135deg,color-mix(in srgb,var(--solaris-color-surface) 88%,var(--solaris-color-black)),var(--solaris-color-surface))}.solaris-carousel__overlay{inset:0;display:grid;align-items:end;position:absolute;pointer-events:none;padding:var(--solaris-carousel-overlay-padding)}.solaris-carousel__overlay :is(a,button,input,textarea,select,[tabindex]){pointer-events:auto}.solaris-carousel__arrow{top:50%;z-index:2;border:1px solid color-mix(in srgb,var(--solaris-color-border) 60%,transparent);color:var(--solaris-carousel-arrow-color);display:grid;width:var(--solaris-carousel-arrow-size);height:var(--solaris-carousel-arrow-size);opacity:.85;cursor:pointer;position:absolute;place-items:center;transform:translateY(-50%);border-radius:var(--solaris-radius-full);background:var(--solaris-carousel-arrow-bg);transition:opacity var(--solaris-motion-duration-md) var(--solaris-motion-ease-enter),transform var(--solaris-motion-duration-md) var(--solaris-motion-ease-enter),filter var(--solaris-motion-duration-md) var(--solaris-motion-ease-enter)}.solaris-carousel__arrow:hover:not(:disabled){opacity:1;filter:brightness(1.08)}.solaris-carousel__arrow:disabled{opacity:.35;cursor:not-allowed}.solaris-carousel__arrow.is-prev{left:var(--solaris-space-3)}.solaris-carousel__arrow.is-next{right:var(--solaris-space-3)}.solaris-carousel__arrow i.ph{font-size:2rem;line-height:1}.solaris-carousel__dots{left:50%;z-index:2;gap:.6rem;position:absolute;align-items:center;display:inline-flex;padding:.6rem .8rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transform:translate(-50%);bottom:var(--solaris-space-3);border-radius:var(--solaris-radius-full);background:var(--solaris-carousel-dot-bg-wrapper)}.solaris-carousel__dot{border:0;opacity:.35;width:var(--solaris-carousel-dot-size);height:var(--solaris-carousel-dot-size);cursor:pointer;background:var(--solaris-carousel-dot-bg);border-radius:var(--solaris-radius-full);transition:width var(--solaris-motion-duration-slow) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-slow) var(--solaris-motion-ease-enter),transform var(--solaris-motion-duration-slow) var(--solaris-motion-ease-enter)}.solaris-carousel__dot.is-active{width:var(--solaris-carousel-dot-active-width);opacity:1}:host([data-controls-position=outside]) .solaris-carousel{overflow:visible}:host([data-controls-position=outside]) .solaris-carousel__dots{bottom:auto;top:calc(100% + var(--solaris-space-3))}:host([data-controls-position=outside]) .solaris-carousel__arrow.is-prev{left:calc(var(--solaris-carousel-arrow-size) * -.5)}:host([data-controls-position=outside]) .solaris-carousel__arrow.is-next{right:calc(var(--solaris-carousel-arrow-size) * -.5)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3245
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisCarousel, isStandalone: true, selector: "solaris-carousel", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, aspect: { classPropertyName: "aspect", publicName: "aspect", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, controlsPosition: { classPropertyName: "controlsPosition", publicName: "controlsPosition", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, intervalMs: { classPropertyName: "intervalMs", publicName: "intervalMs", isSignal: true, isRequired: false, transformFunction: null }, transitionMs: { classPropertyName: "transitionMs", publicName: "transitionMs", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, pauseOnFocus: { classPropertyName: "pauseOnFocus", publicName: "pauseOnFocus", isSignal: true, isRequired: false, transformFunction: null }, resetAutoplayOnInteraction: { classPropertyName: "resetAutoplayOnInteraction", publicName: "resetAutoplayOnInteraction", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, showArrows: { classPropertyName: "showArrows", publicName: "showArrows", isSignal: true, isRequired: false, transformFunction: null }, keyboard: { classPropertyName: "keyboard", publicName: "keyboard", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabelKey: { classPropertyName: "previousLabelKey", publicName: "previousLabelKey", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabelKey: { classPropertyName: "nextLabelKey", publicName: "nextLabelKey", isSignal: true, isRequired: false, transformFunction: null }, navigationLabel: { classPropertyName: "navigationLabel", publicName: "navigationLabel", isSignal: true, isRequired: false, transformFunction: null }, navigationLabelKey: { classPropertyName: "navigationLabelKey", publicName: "navigationLabelKey", isSignal: true, isRequired: false, transformFunction: null }, goToSlideLabel: { classPropertyName: "goToSlideLabel", publicName: "goToSlideLabel", isSignal: true, isRequired: false, transformFunction: null }, goToSlideLabelKey: { classPropertyName: "goToSlideLabelKey", publicName: "goToSlideLabelKey", isSignal: true, isRequired: false, transformFunction: null }, openLabel: { classPropertyName: "openLabel", publicName: "openLabel", isSignal: true, isRequired: false, transformFunction: null }, openLabelKey: { classPropertyName: "openLabelKey", publicName: "openLabelKey", isSignal: true, isRequired: false, transformFunction: null }, textResolver: { classPropertyName: "textResolver", publicName: "textResolver", isSignal: true, isRequired: false, transformFunction: null }, slideTpl: { classPropertyName: "slideTpl", publicName: "slideTpl", isSignal: true, isRequired: false, transformFunction: null }, overlayTpl: { classPropertyName: "overlayTpl", publicName: "overlayTpl", isSignal: true, isRequired: false, transformFunction: null }, slideComponent: { classPropertyName: "slideComponent", publicName: "slideComponent", isSignal: true, isRequired: false, transformFunction: null }, overlayComponent: { classPropertyName: "overlayComponent", publicName: "overlayComponent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", slideChange: "slideChange" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.data-aspect": "this.dataAspect", "attr.data-radius": "this.dataRadius", "attr.data-appearance": "this.dataAppearance", "attr.data-controls-position": "this.dataControlsPosition" } }, queries: [{ propertyName: "projectedSlide", first: true, predicate: SolarisCarouselSlideDirective, descendants: true, isSignal: true }, { propertyName: "projectedOverlay", first: true, predicate: SolarisCarouselOverlayDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"solaris-carousel\"\n role=\"region\"\n aria-roledescription=\"carousel\"\n [attr.aria-label]=\"rootAriaLabel()\"\n [attr.tabindex]=\"keyboard() ? '0' : null\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut()\"\n>\n <div class=\"solaris-carousel-viewport\">\n <div\n class=\"solaris-carousel-track\"\n [style.transition-duration.ms]=\"transitionMs()\"\n [style.transform]=\"'translate3d(' + -activeIndex() * 100 + '%, 0, 0)'\"\n >\n @for (item of items(); track trackByItem($index, item)) {\n <div\n class=\"solaris-carousel-slide\"\n role=\"group\"\n aria-roledescription=\"slide\"\n [attr.aria-label]=\"$index + 1 + ' / ' + count()\"\n [attr.aria-hidden]=\"$index !== activeIndex() ? 'true' : null\"\n >\n @if (resolvedSlideTpl(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl; context: carouselContext($index)\"> </ng-container>\n } @else if (item.slideComponent; as component) {\n <ng-container *ngComponentOutlet=\"component; inputs: slideComponentInputs($index)\">\n </ng-container>\n } @else if (slideComponent(); as component) {\n <ng-container *ngComponentOutlet=\"component; inputs: slideComponentInputs($index)\">\n </ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"defaultImageSlide; context: carouselContext($index)\">\n </ng-container>\n }\n\n @if (resolvedOverlayTpl(); as tpl) {\n <div class=\"solaris-carousel-overlay\">\n <ng-container *ngTemplateOutlet=\"tpl; context: carouselContext($index)\">\n </ng-container>\n </div>\n } @else if (item.overlayComponent; as component) {\n <div class=\"solaris-carousel-overlay\">\n <ng-container *ngComponentOutlet=\"component; inputs: overlayComponentInputs($index)\">\n </ng-container>\n </div>\n } @else if (overlayComponent(); as component) {\n <div class=\"solaris-carousel-overlay\">\n <ng-container *ngComponentOutlet=\"component; inputs: overlayComponentInputs($index)\">\n </ng-container>\n </div>\n }\n </div>\n }\n </div>\n </div>\n\n @if (showArrows() && hasMultiple()) {\n <button\n type=\"button\"\n class=\"solaris-carousel-arrow is-prev\"\n [disabled]=\"!canGoPrev()\"\n [attr.aria-label]=\"previousAriaLabel()\"\n (click)=\"prev('arrow')\"\n >\n <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\n </button>\n\n <button\n type=\"button\"\n class=\"solaris-carousel-arrow is-next\"\n [disabled]=\"!canGoNext()\"\n [attr.aria-label]=\"nextAriaLabel()\"\n (click)=\"next('arrow')\"\n >\n <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @if (showDots() && hasMultiple()) {\n <div class=\"solaris-carousel-dots\" role=\"tablist\" [attr.aria-label]=\"navigationAriaLabel()\">\n @for (item of items(); track trackByItem($index, item)) {\n <button\n type=\"button\"\n class=\"solaris-carousel-dot\"\n role=\"tab\"\n [class.is-active]=\"$index === activeIndex()\"\n [attr.aria-label]=\"dotAriaLabel($index)\"\n [attr.aria-selected]=\"$index === activeIndex() ? 'true' : 'false'\"\n [attr.aria-current]=\"$index === activeIndex() ? 'true' : null\"\n (click)=\"goTo($index, 'dot')\"\n ></button>\n }\n </div>\n }\n</div>\n\n<ng-template #defaultImageSlide let-item>\n @if (item.src) {\n @if (item.href) {\n <a\n class=\"solaris-carousel-media\"\n [href]=\"item.href\"\n [attr.target]=\"item.target ?? null\"\n [attr.aria-label]=\"itemAriaLabel(item)\"\n >\n <img\n class=\"solaris-carousel-img\"\n [src]=\"item.src\"\n [attr.srcset]=\"item.srcSet ?? null\"\n [attr.sizes]=\"item.sizes ?? null\"\n [attr.alt]=\"itemAlt(item)\"\n />\n </a>\n } @else {\n <div class=\"solaris-carousel-media\">\n <img\n class=\"solaris-carousel-img\"\n [src]=\"item.src\"\n [attr.srcset]=\"item.srcSet ?? null\"\n [attr.sizes]=\"item.sizes ?? null\"\n [attr.alt]=\"itemAlt(item)\"\n />\n </div>\n }\n } @else {\n <div class=\"solaris-carousel-empty\" aria-hidden=\"true\"></div>\n }\n</ng-template>\n\r\n", styles: [":host{display:block;width:100%;min-width:0;--solaris-carousel-radius: var(--solaris-radius-lg);--solaris-carousel-bg: var(--solaris-color-surface);--solaris-carousel-color: var(--solaris-color-text);--solaris-carousel-overlay-padding: var(--solaris-space-5);--solaris-carousel-arrow-size: 4.2rem;--solaris-carousel-arrow-bg: var(--solaris-overlay-backdrop-soft);--solaris-carousel-arrow-color: var(--solaris-color-primary-contrast);--solaris-carousel-dot-size: .8rem;--solaris-carousel-dot-active-width: 2.6rem;--solaris-carousel-dot-bg: var(--solaris-color-primary-contrast);--solaris-carousel-dot-bg-wrapper: var(--solaris-overlay-backdrop-soft)}.solaris-carousel{width:100%;min-width:0;outline:none;overflow:hidden;position:relative;color:var(--solaris-carousel-color);border-radius:var(--solaris-carousel-radius);background:var(--solaris-carousel-bg)}:host([data-radius=none]){--solaris-carousel-radius: 0}:host([data-radius=sm]){--solaris-carousel-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-carousel-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-carousel-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-carousel-radius: var(--solaris-radius-xl, var(--solaris-radius-lg))}:host([data-radius=full]){--solaris-carousel-radius: var(--solaris-radius-full)}:host([data-appearance=surface]) .solaris-carousel{border:1px solid var(--solaris-color-border)}:host([data-appearance=elevated]) .solaris-carousel{box-shadow:var(--solaris-shadow-md)}:host([data-appearance=hero]) .solaris-carousel{background:var(--solaris-color-black)}.solaris-carousel:focus-visible{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--solaris-color-primary) 18%,transparent)}.solaris-carousel-viewport{width:100%;position:relative}:host([data-aspect=\"16/9\"]) .solaris-carousel-viewport{aspect-ratio:16/9}:host([data-aspect=\"9/16\"]) .solaris-carousel-viewport{aspect-ratio:9/16}:host([data-aspect=\"4/3\"]) .solaris-carousel-viewport{aspect-ratio:4/3}:host([data-aspect=\"1/1\"]) .solaris-carousel-viewport{aspect-ratio:1/1}:host([data-aspect=auto]) .solaris-carousel-viewport{aspect-ratio:auto}.solaris-carousel-track{height:100%;display:flex;will-change:transform;transition-property:transform;transition-timing-function:var(--solaris-motion-ease-standard)}@media(prefers-reduced-motion:reduce){.solaris-carousel-track{transition:none!important}}.solaris-carousel-slide{height:100%;min-width:0;flex:0 0 100%;position:relative}.solaris-carousel-media{display:block;width:100%;height:100%;position:relative}.solaris-carousel-img{width:100%;height:100%;display:block;object-fit:cover}.solaris-carousel-empty{width:100%;height:100%;background:linear-gradient(135deg,color-mix(in srgb,var(--solaris-color-surface) 88%,var(--solaris-color-black)),var(--solaris-color-surface))}.solaris-carousel-overlay{inset:0;display:grid;align-items:end;position:absolute;pointer-events:none;padding:var(--solaris-carousel-overlay-padding)}.solaris-carousel-overlay :is(a,button,input,textarea,select,[tabindex]){pointer-events:auto}.solaris-carousel-arrow{top:50%;z-index:2;border:1px solid color-mix(in srgb,var(--solaris-color-border) 60%,transparent);color:var(--solaris-carousel-arrow-color);display:grid;width:var(--solaris-carousel-arrow-size);height:var(--solaris-carousel-arrow-size);opacity:.85;cursor:pointer;position:absolute;place-items:center;transform:translateY(-50%);border-radius:var(--solaris-radius-full);background:var(--solaris-carousel-arrow-bg);transition:opacity var(--solaris-motion-duration-md) var(--solaris-motion-ease-enter),transform var(--solaris-motion-duration-md) var(--solaris-motion-ease-enter),filter var(--solaris-motion-duration-md) var(--solaris-motion-ease-enter)}.solaris-carousel-arrow:hover:not(:disabled){opacity:1;filter:brightness(1.08)}.solaris-carousel-arrow:disabled{opacity:.35;cursor:not-allowed}.solaris-carousel-arrow.is-prev{left:var(--solaris-space-3)}.solaris-carousel-arrow.is-next{right:var(--solaris-space-3)}.solaris-carousel-arrow i.ph{font-size:2rem;line-height:1}.solaris-carousel-dots{left:50%;z-index:2;gap:.6rem;position:absolute;align-items:center;display:inline-flex;padding:.6rem .8rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transform:translate(-50%);bottom:var(--solaris-space-3);border-radius:var(--solaris-radius-full);background:var(--solaris-carousel-dot-bg-wrapper)}.solaris-carousel-dot{border:0;opacity:.35;width:var(--solaris-carousel-dot-size);height:var(--solaris-carousel-dot-size);cursor:pointer;background:var(--solaris-carousel-dot-bg);border-radius:var(--solaris-radius-full);transition:width var(--solaris-motion-duration-slow) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-slow) var(--solaris-motion-ease-enter),transform var(--solaris-motion-duration-slow) var(--solaris-motion-ease-enter)}.solaris-carousel-dot.is-active{width:var(--solaris-carousel-dot-active-width);opacity:1}:host([data-controls-position=outside]) .solaris-carousel{overflow:visible}:host([data-controls-position=outside]) .solaris-carousel-dots{bottom:auto;top:calc(100% + var(--solaris-space-3))}:host([data-controls-position=outside]) .solaris-carousel-arrow.is-prev{left:calc(var(--solaris-carousel-arrow-size) * -.5)}:host([data-controls-position=outside]) .solaris-carousel-arrow.is-next{right:calc(var(--solaris-carousel-arrow-size) * -.5)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3246
3246
|
}
|
|
3247
3247
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCarousel, decorators: [{
|
|
3248
3248
|
type: Component,
|
|
3249
|
-
args: [{ selector: 'solaris-carousel', standalone: true, imports: [NgTemplateOutlet, NgComponentOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"solaris-carousel\"\n role=\"region\"\n aria-roledescription=\"carousel\"\n [attr.aria-label]=\"rootAriaLabel()\"\n [attr.tabindex]=\"keyboard() ? '0' : null\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut()\"\n>\n <div class=\"solaris-carousel__viewport\">\n <div\n class=\"solaris-carousel__track\"\n [style.transition-duration.ms]=\"transitionMs()\"\n [style.transform]=\"'translate3d(' + -activeIndex() * 100 + '%, 0, 0)'\"\n >\n @for (item of items(); track trackByItem($index, item)) {\n <div\n class=\"solaris-carousel__slide\"\n role=\"group\"\n aria-roledescription=\"slide\"\n [attr.aria-label]=\"$index + 1 + ' / ' + count()\"\n [attr.aria-hidden]=\"$index !== activeIndex() ? 'true' : null\"\n >\n @if (resolvedSlideTpl(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl; context: carouselContext($index)\"> </ng-container>\n } @else if (item.slideComponent; as component) {\n <ng-container *ngComponentOutlet=\"component; inputs: slideComponentInputs($index)\">\n </ng-container>\n } @else if (slideComponent(); as component) {\n <ng-container *ngComponentOutlet=\"component; inputs: slideComponentInputs($index)\">\n </ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"defaultImageSlide; context: carouselContext($index)\">\n </ng-container>\n }\n\n @if (resolvedOverlayTpl(); as tpl) {\n <div class=\"solaris-carousel__overlay\">\n <ng-container *ngTemplateOutlet=\"tpl; context: carouselContext($index)\">\n </ng-container>\n </div>\n } @else if (item.overlayComponent; as component) {\n <div class=\"solaris-carousel__overlay\">\n <ng-container *ngComponentOutlet=\"component; inputs: overlayComponentInputs($index)\">\n </ng-container>\n </div>\n } @else if (overlayComponent(); as component) {\n <div class=\"solaris-carousel__overlay\">\n <ng-container *ngComponentOutlet=\"component; inputs: overlayComponentInputs($index)\">\n </ng-container>\n </div>\n }\n </div>\n }\n </div>\n </div>\n\n @if (showArrows() && hasMultiple()) {\n <button\n type=\"button\"\n class=\"solaris-carousel__arrow is-prev\"\n [disabled]=\"!canGoPrev()\"\n [attr.aria-label]=\"previousAriaLabel()\"\n (click)=\"prev('arrow')\"\n >\n <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\n </button>\n\n <button\n type=\"button\"\n class=\"solaris-carousel__arrow is-next\"\n [disabled]=\"!canGoNext()\"\n [attr.aria-label]=\"nextAriaLabel()\"\n (click)=\"next('arrow')\"\n >\n <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @if (showDots() && hasMultiple()) {\n <div class=\"solaris-carousel__dots\" role=\"tablist\" [attr.aria-label]=\"navigationAriaLabel()\">\n @for (item of items(); track trackByItem($index, item)) {\n <button\n type=\"button\"\n class=\"solaris-carousel__dot\"\n role=\"tab\"\n [class.is-active]=\"$index === activeIndex()\"\n [attr.aria-label]=\"dotAriaLabel($index)\"\n [attr.aria-selected]=\"$index === activeIndex() ? 'true' : 'false'\"\n [attr.aria-current]=\"$index === activeIndex() ? 'true' : null\"\n (click)=\"goTo($index, 'dot')\"\n ></button>\n }\n </div>\n }\n</div>\n\n<ng-template #defaultImageSlide let-item>\n @if (item.src) {\n @if (item.href) {\n <a\n class=\"solaris-carousel__media\"\n [href]=\"item.href\"\n [attr.target]=\"item.target ?? null\"\n [attr.aria-label]=\"itemAriaLabel(item)\"\n >\n <img\n class=\"solaris-carousel__img\"\n [src]=\"item.src\"\n [attr.srcset]=\"item.srcSet ?? null\"\n [attr.sizes]=\"item.sizes ?? null\"\n [attr.alt]=\"itemAlt(item)\"\n />\n </a>\n } @else {\n <div class=\"solaris-carousel__media\">\n <img\n class=\"solaris-carousel__img\"\n [src]=\"item.src\"\n [attr.srcset]=\"item.srcSet ?? null\"\n [attr.sizes]=\"item.sizes ?? null\"\n [attr.alt]=\"itemAlt(item)\"\n />\n </div>\n }\n } @else {\n <div class=\"solaris-carousel__empty\" aria-hidden=\"true\"></div>\n }\n</ng-template>\n", styles: [":host{display:block;width:100%;min-width:0;--solaris-carousel-radius: var(--solaris-radius-lg);--solaris-carousel-bg: var(--solaris-color-surface);--solaris-carousel-color: var(--solaris-color-text);--solaris-carousel-overlay-padding: var(--solaris-space-5);--solaris-carousel-arrow-size: 4.2rem;--solaris-carousel-arrow-bg: var(--solaris-overlay-backdrop-soft);--solaris-carousel-arrow-color: var(--solaris-color-primary-contrast);--solaris-carousel-dot-size: .8rem;--solaris-carousel-dot-active-width: 2.6rem;--solaris-carousel-dot-bg: var(--solaris-color-primary-contrast);--solaris-carousel-dot-bg-wrapper: var(--solaris-overlay-backdrop-soft)}.solaris-carousel{width:100%;min-width:0;outline:none;overflow:hidden;position:relative;color:var(--solaris-carousel-color);border-radius:var(--solaris-carousel-radius);background:var(--solaris-carousel-bg)}:host([data-radius=none]){--solaris-carousel-radius: 0}:host([data-radius=sm]){--solaris-carousel-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-carousel-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-carousel-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-carousel-radius: var(--solaris-radius-xl, var(--solaris-radius-lg))}:host([data-radius=full]){--solaris-carousel-radius: var(--solaris-radius-full)}:host([data-appearance=surface]) .solaris-carousel{border:1px solid var(--solaris-color-border)}:host([data-appearance=elevated]) .solaris-carousel{box-shadow:var(--solaris-shadow-md)}:host([data-appearance=hero]) .solaris-carousel{background:var(--solaris-color-black)}.solaris-carousel:focus-visible{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--solaris-color-primary) 18%,transparent)}.solaris-carousel__viewport{width:100%;position:relative}:host([data-aspect=\"16/9\"]) .solaris-carousel__viewport{aspect-ratio:16/9}:host([data-aspect=\"9/16\"]) .solaris-carousel__viewport{aspect-ratio:9/16}:host([data-aspect=\"4/3\"]) .solaris-carousel__viewport{aspect-ratio:4/3}:host([data-aspect=\"1/1\"]) .solaris-carousel__viewport{aspect-ratio:1/1}:host([data-aspect=auto]) .solaris-carousel__viewport{aspect-ratio:auto}.solaris-carousel__track{height:100%;display:flex;will-change:transform;transition-property:transform;transition-timing-function:var(--solaris-motion-ease-standard)}@media(prefers-reduced-motion:reduce){.solaris-carousel__track{transition:none!important}}.solaris-carousel__slide{height:100%;min-width:0;flex:0 0 100%;position:relative}.solaris-carousel__media{display:block;width:100%;height:100%;position:relative}.solaris-carousel__img{width:100%;height:100%;display:block;object-fit:cover}.solaris-carousel__empty{width:100%;height:100%;background:linear-gradient(135deg,color-mix(in srgb,var(--solaris-color-surface) 88%,var(--solaris-color-black)),var(--solaris-color-surface))}.solaris-carousel__overlay{inset:0;display:grid;align-items:end;position:absolute;pointer-events:none;padding:var(--solaris-carousel-overlay-padding)}.solaris-carousel__overlay :is(a,button,input,textarea,select,[tabindex]){pointer-events:auto}.solaris-carousel__arrow{top:50%;z-index:2;border:1px solid color-mix(in srgb,var(--solaris-color-border) 60%,transparent);color:var(--solaris-carousel-arrow-color);display:grid;width:var(--solaris-carousel-arrow-size);height:var(--solaris-carousel-arrow-size);opacity:.85;cursor:pointer;position:absolute;place-items:center;transform:translateY(-50%);border-radius:var(--solaris-radius-full);background:var(--solaris-carousel-arrow-bg);transition:opacity var(--solaris-motion-duration-md) var(--solaris-motion-ease-enter),transform var(--solaris-motion-duration-md) var(--solaris-motion-ease-enter),filter var(--solaris-motion-duration-md) var(--solaris-motion-ease-enter)}.solaris-carousel__arrow:hover:not(:disabled){opacity:1;filter:brightness(1.08)}.solaris-carousel__arrow:disabled{opacity:.35;cursor:not-allowed}.solaris-carousel__arrow.is-prev{left:var(--solaris-space-3)}.solaris-carousel__arrow.is-next{right:var(--solaris-space-3)}.solaris-carousel__arrow i.ph{font-size:2rem;line-height:1}.solaris-carousel__dots{left:50%;z-index:2;gap:.6rem;position:absolute;align-items:center;display:inline-flex;padding:.6rem .8rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transform:translate(-50%);bottom:var(--solaris-space-3);border-radius:var(--solaris-radius-full);background:var(--solaris-carousel-dot-bg-wrapper)}.solaris-carousel__dot{border:0;opacity:.35;width:var(--solaris-carousel-dot-size);height:var(--solaris-carousel-dot-size);cursor:pointer;background:var(--solaris-carousel-dot-bg);border-radius:var(--solaris-radius-full);transition:width var(--solaris-motion-duration-slow) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-slow) var(--solaris-motion-ease-enter),transform var(--solaris-motion-duration-slow) var(--solaris-motion-ease-enter)}.solaris-carousel__dot.is-active{width:var(--solaris-carousel-dot-active-width);opacity:1}:host([data-controls-position=outside]) .solaris-carousel{overflow:visible}:host([data-controls-position=outside]) .solaris-carousel__dots{bottom:auto;top:calc(100% + var(--solaris-space-3))}:host([data-controls-position=outside]) .solaris-carousel__arrow.is-prev{left:calc(var(--solaris-carousel-arrow-size) * -.5)}:host([data-controls-position=outside]) .solaris-carousel__arrow.is-next{right:calc(var(--solaris-carousel-arrow-size) * -.5)}\n"] }]
|
|
3249
|
+
args: [{ selector: 'solaris-carousel', standalone: true, imports: [NgTemplateOutlet, NgComponentOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"solaris-carousel\"\n role=\"region\"\n aria-roledescription=\"carousel\"\n [attr.aria-label]=\"rootAriaLabel()\"\n [attr.tabindex]=\"keyboard() ? '0' : null\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut()\"\n>\n <div class=\"solaris-carousel-viewport\">\n <div\n class=\"solaris-carousel-track\"\n [style.transition-duration.ms]=\"transitionMs()\"\n [style.transform]=\"'translate3d(' + -activeIndex() * 100 + '%, 0, 0)'\"\n >\n @for (item of items(); track trackByItem($index, item)) {\n <div\n class=\"solaris-carousel-slide\"\n role=\"group\"\n aria-roledescription=\"slide\"\n [attr.aria-label]=\"$index + 1 + ' / ' + count()\"\n [attr.aria-hidden]=\"$index !== activeIndex() ? 'true' : null\"\n >\n @if (resolvedSlideTpl(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl; context: carouselContext($index)\"> </ng-container>\n } @else if (item.slideComponent; as component) {\n <ng-container *ngComponentOutlet=\"component; inputs: slideComponentInputs($index)\">\n </ng-container>\n } @else if (slideComponent(); as component) {\n <ng-container *ngComponentOutlet=\"component; inputs: slideComponentInputs($index)\">\n </ng-container>\n } @else {\n <ng-container *ngTemplateOutlet=\"defaultImageSlide; context: carouselContext($index)\">\n </ng-container>\n }\n\n @if (resolvedOverlayTpl(); as tpl) {\n <div class=\"solaris-carousel-overlay\">\n <ng-container *ngTemplateOutlet=\"tpl; context: carouselContext($index)\">\n </ng-container>\n </div>\n } @else if (item.overlayComponent; as component) {\n <div class=\"solaris-carousel-overlay\">\n <ng-container *ngComponentOutlet=\"component; inputs: overlayComponentInputs($index)\">\n </ng-container>\n </div>\n } @else if (overlayComponent(); as component) {\n <div class=\"solaris-carousel-overlay\">\n <ng-container *ngComponentOutlet=\"component; inputs: overlayComponentInputs($index)\">\n </ng-container>\n </div>\n }\n </div>\n }\n </div>\n </div>\n\n @if (showArrows() && hasMultiple()) {\n <button\n type=\"button\"\n class=\"solaris-carousel-arrow is-prev\"\n [disabled]=\"!canGoPrev()\"\n [attr.aria-label]=\"previousAriaLabel()\"\n (click)=\"prev('arrow')\"\n >\n <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\n </button>\n\n <button\n type=\"button\"\n class=\"solaris-carousel-arrow is-next\"\n [disabled]=\"!canGoNext()\"\n [attr.aria-label]=\"nextAriaLabel()\"\n (click)=\"next('arrow')\"\n >\n <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @if (showDots() && hasMultiple()) {\n <div class=\"solaris-carousel-dots\" role=\"tablist\" [attr.aria-label]=\"navigationAriaLabel()\">\n @for (item of items(); track trackByItem($index, item)) {\n <button\n type=\"button\"\n class=\"solaris-carousel-dot\"\n role=\"tab\"\n [class.is-active]=\"$index === activeIndex()\"\n [attr.aria-label]=\"dotAriaLabel($index)\"\n [attr.aria-selected]=\"$index === activeIndex() ? 'true' : 'false'\"\n [attr.aria-current]=\"$index === activeIndex() ? 'true' : null\"\n (click)=\"goTo($index, 'dot')\"\n ></button>\n }\n </div>\n }\n</div>\n\n<ng-template #defaultImageSlide let-item>\n @if (item.src) {\n @if (item.href) {\n <a\n class=\"solaris-carousel-media\"\n [href]=\"item.href\"\n [attr.target]=\"item.target ?? null\"\n [attr.aria-label]=\"itemAriaLabel(item)\"\n >\n <img\n class=\"solaris-carousel-img\"\n [src]=\"item.src\"\n [attr.srcset]=\"item.srcSet ?? null\"\n [attr.sizes]=\"item.sizes ?? null\"\n [attr.alt]=\"itemAlt(item)\"\n />\n </a>\n } @else {\n <div class=\"solaris-carousel-media\">\n <img\n class=\"solaris-carousel-img\"\n [src]=\"item.src\"\n [attr.srcset]=\"item.srcSet ?? null\"\n [attr.sizes]=\"item.sizes ?? null\"\n [attr.alt]=\"itemAlt(item)\"\n />\n </div>\n }\n } @else {\n <div class=\"solaris-carousel-empty\" aria-hidden=\"true\"></div>\n }\n</ng-template>\n\r\n", styles: [":host{display:block;width:100%;min-width:0;--solaris-carousel-radius: var(--solaris-radius-lg);--solaris-carousel-bg: var(--solaris-color-surface);--solaris-carousel-color: var(--solaris-color-text);--solaris-carousel-overlay-padding: var(--solaris-space-5);--solaris-carousel-arrow-size: 4.2rem;--solaris-carousel-arrow-bg: var(--solaris-overlay-backdrop-soft);--solaris-carousel-arrow-color: var(--solaris-color-primary-contrast);--solaris-carousel-dot-size: .8rem;--solaris-carousel-dot-active-width: 2.6rem;--solaris-carousel-dot-bg: var(--solaris-color-primary-contrast);--solaris-carousel-dot-bg-wrapper: var(--solaris-overlay-backdrop-soft)}.solaris-carousel{width:100%;min-width:0;outline:none;overflow:hidden;position:relative;color:var(--solaris-carousel-color);border-radius:var(--solaris-carousel-radius);background:var(--solaris-carousel-bg)}:host([data-radius=none]){--solaris-carousel-radius: 0}:host([data-radius=sm]){--solaris-carousel-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-carousel-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-carousel-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-carousel-radius: var(--solaris-radius-xl, var(--solaris-radius-lg))}:host([data-radius=full]){--solaris-carousel-radius: var(--solaris-radius-full)}:host([data-appearance=surface]) .solaris-carousel{border:1px solid var(--solaris-color-border)}:host([data-appearance=elevated]) .solaris-carousel{box-shadow:var(--solaris-shadow-md)}:host([data-appearance=hero]) .solaris-carousel{background:var(--solaris-color-black)}.solaris-carousel:focus-visible{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--solaris-color-primary) 18%,transparent)}.solaris-carousel-viewport{width:100%;position:relative}:host([data-aspect=\"16/9\"]) .solaris-carousel-viewport{aspect-ratio:16/9}:host([data-aspect=\"9/16\"]) .solaris-carousel-viewport{aspect-ratio:9/16}:host([data-aspect=\"4/3\"]) .solaris-carousel-viewport{aspect-ratio:4/3}:host([data-aspect=\"1/1\"]) .solaris-carousel-viewport{aspect-ratio:1/1}:host([data-aspect=auto]) .solaris-carousel-viewport{aspect-ratio:auto}.solaris-carousel-track{height:100%;display:flex;will-change:transform;transition-property:transform;transition-timing-function:var(--solaris-motion-ease-standard)}@media(prefers-reduced-motion:reduce){.solaris-carousel-track{transition:none!important}}.solaris-carousel-slide{height:100%;min-width:0;flex:0 0 100%;position:relative}.solaris-carousel-media{display:block;width:100%;height:100%;position:relative}.solaris-carousel-img{width:100%;height:100%;display:block;object-fit:cover}.solaris-carousel-empty{width:100%;height:100%;background:linear-gradient(135deg,color-mix(in srgb,var(--solaris-color-surface) 88%,var(--solaris-color-black)),var(--solaris-color-surface))}.solaris-carousel-overlay{inset:0;display:grid;align-items:end;position:absolute;pointer-events:none;padding:var(--solaris-carousel-overlay-padding)}.solaris-carousel-overlay :is(a,button,input,textarea,select,[tabindex]){pointer-events:auto}.solaris-carousel-arrow{top:50%;z-index:2;border:1px solid color-mix(in srgb,var(--solaris-color-border) 60%,transparent);color:var(--solaris-carousel-arrow-color);display:grid;width:var(--solaris-carousel-arrow-size);height:var(--solaris-carousel-arrow-size);opacity:.85;cursor:pointer;position:absolute;place-items:center;transform:translateY(-50%);border-radius:var(--solaris-radius-full);background:var(--solaris-carousel-arrow-bg);transition:opacity var(--solaris-motion-duration-md) var(--solaris-motion-ease-enter),transform var(--solaris-motion-duration-md) var(--solaris-motion-ease-enter),filter var(--solaris-motion-duration-md) var(--solaris-motion-ease-enter)}.solaris-carousel-arrow:hover:not(:disabled){opacity:1;filter:brightness(1.08)}.solaris-carousel-arrow:disabled{opacity:.35;cursor:not-allowed}.solaris-carousel-arrow.is-prev{left:var(--solaris-space-3)}.solaris-carousel-arrow.is-next{right:var(--solaris-space-3)}.solaris-carousel-arrow i.ph{font-size:2rem;line-height:1}.solaris-carousel-dots{left:50%;z-index:2;gap:.6rem;position:absolute;align-items:center;display:inline-flex;padding:.6rem .8rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transform:translate(-50%);bottom:var(--solaris-space-3);border-radius:var(--solaris-radius-full);background:var(--solaris-carousel-dot-bg-wrapper)}.solaris-carousel-dot{border:0;opacity:.35;width:var(--solaris-carousel-dot-size);height:var(--solaris-carousel-dot-size);cursor:pointer;background:var(--solaris-carousel-dot-bg);border-radius:var(--solaris-radius-full);transition:width var(--solaris-motion-duration-slow) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-slow) var(--solaris-motion-ease-enter),transform var(--solaris-motion-duration-slow) var(--solaris-motion-ease-enter)}.solaris-carousel-dot.is-active{width:var(--solaris-carousel-dot-active-width);opacity:1}:host([data-controls-position=outside]) .solaris-carousel{overflow:visible}:host([data-controls-position=outside]) .solaris-carousel-dots{bottom:auto;top:calc(100% + var(--solaris-space-3))}:host([data-controls-position=outside]) .solaris-carousel-arrow.is-prev{left:calc(var(--solaris-carousel-arrow-size) * -.5)}:host([data-controls-position=outside]) .solaris-carousel-arrow.is-next{right:calc(var(--solaris-carousel-arrow-size) * -.5)}\n"] }]
|
|
3250
3250
|
}], ctorParameters: () => [], propDecorators: { projectedSlide: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisCarouselSlideDirective), { isSignal: true }] }], projectedOverlay: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisCarouselOverlayDirective), { isSignal: true }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], aspect: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspect", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], controlsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlsPosition", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], intervalMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervalMs", required: false }] }], transitionMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionMs", required: false }] }], pauseOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseOnHover", required: false }] }], pauseOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseOnFocus", required: false }] }], resetAutoplayOnInteraction: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetAutoplayOnInteraction", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], showArrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrows", required: false }] }], keyboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboard", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], previousLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabelKey", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], nextLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabelKey", required: false }] }], navigationLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationLabel", required: false }] }], navigationLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationLabelKey", required: false }] }], goToSlideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "goToSlideLabel", required: false }] }], goToSlideLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "goToSlideLabelKey", required: false }] }], openLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openLabel", required: false }] }], openLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "openLabelKey", required: false }] }], textResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "textResolver", required: false }] }], slideTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideTpl", required: false }] }], overlayTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayTpl", required: false }] }], slideComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideComponent", required: false }] }], overlayComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayComponent", required: false }] }], slideChange: [{ type: i0.Output, args: ["slideChange"] }], dataAspect: [{
|
|
3251
3251
|
type: HostBinding,
|
|
3252
3252
|
args: ['attr.data-aspect']
|
|
@@ -3270,11 +3270,11 @@ class SolarisSectionComponent {
|
|
|
3270
3270
|
appearance = 'plain';
|
|
3271
3271
|
density = 'comfortable';
|
|
3272
3272
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3273
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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]\">\n @if (title || description) {\n <header class=\"solaris-
|
|
3273
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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]\">\n @if (title || description) {\n <header class=\"solaris-section-header\">\n @if (title) {\n <h2 class=\"solaris-section-title\">{{ title }}</h2>\n }\n @if (description) {\n <p class=\"solaris-section-description\">{{ description }}</p>\n }\n </header>\n }\n\n <div class=\"solaris-section-content\">\n <ng-content></ng-content>\n </div>\n</section>\n\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 });
|
|
3274
3274
|
}
|
|
3275
3275
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisSectionComponent, decorators: [{
|
|
3276
3276
|
type: Component,
|
|
3277
|
-
args: [{ selector: 'solaris-section', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"solaris-section\" [ngClass]=\"['appearance-' + appearance, 'density-' + density]\">\n @if (title || description) {\n <header class=\"solaris-
|
|
3277
|
+
args: [{ selector: 'solaris-section', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"solaris-section\" [ngClass]=\"['appearance-' + appearance, 'density-' + density]\">\n @if (title || description) {\n <header class=\"solaris-section-header\">\n @if (title) {\n <h2 class=\"solaris-section-title\">{{ title }}</h2>\n }\n @if (description) {\n <p class=\"solaris-section-description\">{{ description }}</p>\n }\n </header>\n }\n\n <div class=\"solaris-section-content\">\n <ng-content></ng-content>\n </div>\n</section>\n\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"] }]
|
|
3278
3278
|
}], propDecorators: { title: [{
|
|
3279
3279
|
type: Input
|
|
3280
3280
|
}], description: [{
|
|
@@ -3301,11 +3301,11 @@ class SolarisDivider {
|
|
|
3301
3301
|
return !!this.label && this.orientation === 'horizontal';
|
|
3302
3302
|
}
|
|
3303
3303
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3304
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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\n class=\"solaris-divider\"\n [ngClass]=\"[\n 'orientation-' + orientation,\n 'spacing-' + spacing,\n 'strength-' + strength,\n 'variant-' + variant,\n inset ? 'is-inset' : '',\n hasLabel ? 'has-label' : '',\n hasLabel ? 'label-' + labelAlign : '',\n ]\"\n>\n @if (hasLabel) {\n <span class=\"solaris-
|
|
3304
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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\n class=\"solaris-divider\"\n [ngClass]=\"[\n 'orientation-' + orientation,\n 'spacing-' + spacing,\n 'strength-' + strength,\n 'variant-' + variant,\n inset ? 'is-inset' : '',\n hasLabel ? 'has-label' : '',\n hasLabel ? 'label-' + labelAlign : '',\n ]\"\n>\n @if (hasLabel) {\n <span class=\"solaris-divider-line\"></span>\n <span class=\"solaris-divider-label\">{{ label }}</span>\n <span class=\"solaris-divider-line\"></span>\n }\n</div>\n\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 });
|
|
3305
3305
|
}
|
|
3306
3306
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisDivider, decorators: [{
|
|
3307
3307
|
type: Component,
|
|
3308
|
-
args: [{ selector: 'solaris-divider', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, host: { role: 'separator' }, template: "<div\n class=\"solaris-divider\"\n [ngClass]=\"[\n 'orientation-' + orientation,\n 'spacing-' + spacing,\n 'strength-' + strength,\n 'variant-' + variant,\n inset ? 'is-inset' : '',\n hasLabel ? 'has-label' : '',\n hasLabel ? 'label-' + labelAlign : '',\n ]\"\n>\n @if (hasLabel) {\n <span class=\"solaris-
|
|
3308
|
+
args: [{ selector: 'solaris-divider', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, host: { role: 'separator' }, template: "<div\n class=\"solaris-divider\"\n [ngClass]=\"[\n 'orientation-' + orientation,\n 'spacing-' + spacing,\n 'strength-' + strength,\n 'variant-' + variant,\n inset ? 'is-inset' : '',\n hasLabel ? 'has-label' : '',\n hasLabel ? 'label-' + labelAlign : '',\n ]\"\n>\n @if (hasLabel) {\n <span class=\"solaris-divider-line\"></span>\n <span class=\"solaris-divider-label\">{{ label }}</span>\n <span class=\"solaris-divider-line\"></span>\n }\n</div>\n\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"] }]
|
|
3309
3309
|
}], propDecorators: { label: [{
|
|
3310
3310
|
type: Input
|
|
3311
3311
|
}], inset: [{
|
|
@@ -3666,11 +3666,11 @@ class SolarisDialogStepsContainer {
|
|
|
3666
3666
|
this.resizeObserver.observe(element);
|
|
3667
3667
|
}
|
|
3668
3668
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisDialogStepsContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3669
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisDialogStepsContainer, isStandalone: true, selector: "solaris-dialog-steps-container", viewQueries: [{ propertyName: "stepElements", predicate: ["stepElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n class=\"solaris-dialog-steps\"\n [class.is-transitioning]=\"transitioning()\"\n [class.is-halfway]=\"transitionHalfway()\"\n [class.has-transition-blur]=\"transitionBlur\"\n [style.--solaris-dialog-steps-min-height]=\"contentMinHeight\"\n [style.--solaris-dialog-steps-active-height]=\"activeStepHeight()\"\n>\n @if (showProgress) {\n <div class=\"solaris-dialog-
|
|
3669
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisDialogStepsContainer, isStandalone: true, selector: "solaris-dialog-steps-container", viewQueries: [{ propertyName: "stepElements", predicate: ["stepElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n class=\"solaris-dialog-steps\"\n [class.is-transitioning]=\"transitioning()\"\n [class.is-halfway]=\"transitionHalfway()\"\n [class.has-transition-blur]=\"transitionBlur\"\n [style.--solaris-dialog-steps-min-height]=\"contentMinHeight\"\n [style.--solaris-dialog-steps-active-height]=\"activeStepHeight()\"\n>\n @if (showProgress) {\n <div class=\"solaris-dialog-steps-progress\" aria-hidden=\"true\">\n @for (step of steps; track step.key; let index = $index) {\n <span\n class=\"solaris-dialog-steps-dot\"\n [class.is-active]=\"index === currentStepIndex()\"\n [class.is-complete]=\"index < currentStepIndex()\"\n ></span>\n }\n </div>\n }\n\n <div class=\"solaris-dialog-steps-viewport\">\n <div\n class=\"solaris-dialog-steps-track\"\n [style.transform]=\"trackTransform()\"\n [style.--solaris-dialog-steps-transition-duration]=\"transitionDuration()\"\n >\n @for (step of steps; track step.key; let index = $index) {\n <section\n #stepElement\n class=\"solaris-dialog-steps-step\"\n [class.is-active]=\"index === currentStepIndex()\"\n [class.is-before]=\"index < currentStepIndex()\"\n [class.is-after]=\"index > currentStepIndex()\"\n >\n <div class=\"solaris-dialog-steps-step-inner\">\n <ng-container\n *ngComponentOutlet=\"step.component; injector: stepInjector(index)\"\n ></ng-container>\n </div>\n </section>\n }\n </div>\n </div>\n</div>\n\r\n", styles: [":host{display:block;min-inline-size:0}.solaris-dialog-steps{--solaris-dialog-steps-min-height: 0;--solaris-dialog-steps-active-height: auto;--solaris-dialog-steps-transition-duration: var(--solaris-motion-duration-dialog-steps);display:grid;min-inline-size:0;gap:var(--solaris-space-5)}.solaris-dialog-steps-progress{display:flex;align-items:center;justify-content:center;gap:var(--solaris-space-2)}.solaris-dialog-steps-dot{inline-size:var(--solaris-indicator-dot-size-md);block-size:var(--solaris-indicator-dot-size-md);border-radius:var(--solaris-indicator-radius);background:color-mix(in srgb,var(--solaris-color-text-muted) 35%,transparent);transition:background-color var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard)}.solaris-dialog-steps-dot.is-active{background:var(--solaris-color-primary);transform:scale(1.2)}.solaris-dialog-steps-dot.is-complete{background:color-mix(in srgb,var(--solaris-color-primary) 72%,var(--solaris-color-white))}.solaris-dialog-steps-viewport{overflow:hidden;inline-size:100%;min-inline-size:0;block-size:var(--solaris-dialog-steps-active-height, auto);min-block-size:var(--solaris-dialog-steps-min-height);transition:block-size var(--solaris-dialog-steps-transition-duration) var(--solaris-motion-ease-productive)}.solaris-dialog-steps-track{display:flex;align-items:flex-start;inline-size:100%;min-inline-size:0;will-change:transform;transition:transform var(--solaris-dialog-steps-transition-duration) var(--solaris-motion-ease-productive)}.solaris-dialog-steps-step{flex:0 0 100%;inline-size:100%;min-inline-size:100%;min-block-size:var(--solaris-dialog-steps-min-height);display:grid;align-content:center;overflow:visible}.solaris-dialog-steps-step-inner{inline-size:100%;min-inline-size:0;transition:filter var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard)}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps-step:not(.is-active) .solaris-dialog-steps-step-inner{filter:blur(.35rem);opacity:.45;transform:scale(.985)}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps-step.is-active .solaris-dialog-steps-step-inner{filter:blur(0);opacity:1;transform:scale(1)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3670
3670
|
}
|
|
3671
3671
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisDialogStepsContainer, decorators: [{
|
|
3672
3672
|
type: Component,
|
|
3673
|
-
args: [{ selector: 'solaris-dialog-steps-container', standalone: true, imports: [NgComponentOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"solaris-dialog-steps\"\n [class.is-transitioning]=\"transitioning()\"\n [class.is-halfway]=\"transitionHalfway()\"\n [class.has-transition-blur]=\"transitionBlur\"\n [style.--solaris-dialog-steps-min-height]=\"contentMinHeight\"\n [style.--solaris-dialog-steps-active-height]=\"activeStepHeight()\"\n>\n @if (showProgress) {\n <div class=\"solaris-dialog-
|
|
3673
|
+
args: [{ selector: 'solaris-dialog-steps-container', standalone: true, imports: [NgComponentOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"solaris-dialog-steps\"\n [class.is-transitioning]=\"transitioning()\"\n [class.is-halfway]=\"transitionHalfway()\"\n [class.has-transition-blur]=\"transitionBlur\"\n [style.--solaris-dialog-steps-min-height]=\"contentMinHeight\"\n [style.--solaris-dialog-steps-active-height]=\"activeStepHeight()\"\n>\n @if (showProgress) {\n <div class=\"solaris-dialog-steps-progress\" aria-hidden=\"true\">\n @for (step of steps; track step.key; let index = $index) {\n <span\n class=\"solaris-dialog-steps-dot\"\n [class.is-active]=\"index === currentStepIndex()\"\n [class.is-complete]=\"index < currentStepIndex()\"\n ></span>\n }\n </div>\n }\n\n <div class=\"solaris-dialog-steps-viewport\">\n <div\n class=\"solaris-dialog-steps-track\"\n [style.transform]=\"trackTransform()\"\n [style.--solaris-dialog-steps-transition-duration]=\"transitionDuration()\"\n >\n @for (step of steps; track step.key; let index = $index) {\n <section\n #stepElement\n class=\"solaris-dialog-steps-step\"\n [class.is-active]=\"index === currentStepIndex()\"\n [class.is-before]=\"index < currentStepIndex()\"\n [class.is-after]=\"index > currentStepIndex()\"\n >\n <div class=\"solaris-dialog-steps-step-inner\">\n <ng-container\n *ngComponentOutlet=\"step.component; injector: stepInjector(index)\"\n ></ng-container>\n </div>\n </section>\n }\n </div>\n </div>\n</div>\n\r\n", styles: [":host{display:block;min-inline-size:0}.solaris-dialog-steps{--solaris-dialog-steps-min-height: 0;--solaris-dialog-steps-active-height: auto;--solaris-dialog-steps-transition-duration: var(--solaris-motion-duration-dialog-steps);display:grid;min-inline-size:0;gap:var(--solaris-space-5)}.solaris-dialog-steps-progress{display:flex;align-items:center;justify-content:center;gap:var(--solaris-space-2)}.solaris-dialog-steps-dot{inline-size:var(--solaris-indicator-dot-size-md);block-size:var(--solaris-indicator-dot-size-md);border-radius:var(--solaris-indicator-radius);background:color-mix(in srgb,var(--solaris-color-text-muted) 35%,transparent);transition:background-color var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard)}.solaris-dialog-steps-dot.is-active{background:var(--solaris-color-primary);transform:scale(1.2)}.solaris-dialog-steps-dot.is-complete{background:color-mix(in srgb,var(--solaris-color-primary) 72%,var(--solaris-color-white))}.solaris-dialog-steps-viewport{overflow:hidden;inline-size:100%;min-inline-size:0;block-size:var(--solaris-dialog-steps-active-height, auto);min-block-size:var(--solaris-dialog-steps-min-height);transition:block-size var(--solaris-dialog-steps-transition-duration) var(--solaris-motion-ease-productive)}.solaris-dialog-steps-track{display:flex;align-items:flex-start;inline-size:100%;min-inline-size:0;will-change:transform;transition:transform var(--solaris-dialog-steps-transition-duration) var(--solaris-motion-ease-productive)}.solaris-dialog-steps-step{flex:0 0 100%;inline-size:100%;min-inline-size:100%;min-block-size:var(--solaris-dialog-steps-min-height);display:grid;align-content:center;overflow:visible}.solaris-dialog-steps-step-inner{inline-size:100%;min-inline-size:0;transition:filter var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-lg) var(--solaris-motion-ease-standard)}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps-step:not(.is-active) .solaris-dialog-steps-step-inner{filter:blur(.35rem);opacity:.45;transform:scale(.985)}.solaris-dialog-steps.has-transition-blur.is-transitioning.is-halfway .solaris-dialog-steps-step.is-active .solaris-dialog-steps-step-inner{filter:blur(0);opacity:1;transform:scale(1)}\n"] }]
|
|
3674
3674
|
}], ctorParameters: () => [], propDecorators: { stepElements: [{
|
|
3675
3675
|
type: ViewChildren,
|
|
3676
3676
|
args: ['stepElement', { read: ElementRef }]
|
|
@@ -3761,11 +3761,11 @@ class SolarisDialogContainer {
|
|
|
3761
3761
|
}
|
|
3762
3762
|
}
|
|
3763
3763
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisDialogContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3764
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisDialogContainer, isStandalone: true, selector: "solaris-dialog-container", inputs: { title: "title", titleKey: "titleKey", titleParams: "titleParams", description: "description", descriptionKey: "descriptionKey", descriptionParams: "descriptionParams", size: "size", showCloseButton: "showCloseButton", actionSize: "actionSize", actions: "actions", actionAlignment: "actionAlignment", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy" }, outputs: { closeClick: "closeClick", actionClick: "actionClick" }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<section\n class=\"solaris-dialog\"\n [attr.data-size]=\"size\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"resolvedAriaLabelledBy\"\n [attr.aria-describedby]=\"resolvedAriaDescribedBy\"\n>\n @if (hasHeader) {\n <header class=\"solaris-
|
|
3764
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisDialogContainer, isStandalone: true, selector: "solaris-dialog-container", inputs: { title: "title", titleKey: "titleKey", titleParams: "titleParams", description: "description", descriptionKey: "descriptionKey", descriptionParams: "descriptionParams", size: "size", showCloseButton: "showCloseButton", actionSize: "actionSize", actions: "actions", actionAlignment: "actionAlignment", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy" }, outputs: { closeClick: "closeClick", actionClick: "actionClick" }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<section\n class=\"solaris-dialog\"\n [attr.data-size]=\"size\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"resolvedAriaLabelledBy\"\n [attr.aria-describedby]=\"resolvedAriaDescribedBy\"\n>\n @if (hasHeader) {\n <header class=\"solaris-dialog-header\">\n <div class=\"solaris-dialog-heading\">\n @if (title || titleKey) {\n <h2 class=\"solaris-dialog-title\" [id]=\"titleId\">\n @if (titleKey) {\n {{ titleKey | translate }}\n } @else {\n {{ title }}\n }\n </h2>\n }\n\n @if (hasDescription) {\n <p class=\"solaris-dialog-description\" [id]=\"descriptionId\">\n @if (descriptionKey) {\n {{ descriptionKey | translate }}\n } @else {\n {{ description }}\n }\n </p>\n }\n </div>\n\n @if (showCloseButton) {\n <button\n type=\"button\"\n class=\"solaris-dialog-close\"\n aria-label=\"Fechar\"\n (click)=\"closeClick.emit()\"\n >\n <i class=\"ph ph-x\"></i>\n </button>\n }\n </header>\n }\n\n <div class=\"solaris-dialog-body\">\n <ng-template #contentHost></ng-template>\n </div>\n\n @if (hasActions) {\n <footer class=\"solaris-dialog-footer\" [attr.data-action-alignment]=\"actionAlignment\">\n @for (action of actions; track action.label ?? action.labelKey ?? $index) {\n <button\n type=\"button\"\n solaris-button\n class=\"solaris-dialog-action\"\n [size]=\"resolveActionSize(action)\"\n [variant]=\"resolveActionVariant(action)\"\n [color]=\"resolveActionColor(action)\"\n [disabled]=\"action.disabled\"\n [loading]=\"action.loading\"\n [fullWidth]=\"action.fullWidth\"\n (click)=\"actionClick.emit(action)\"\n >\n @if (action.prefixIcon) {\n <i\n [attr.class]=\"\n 'solaris-dialog-action-icon solaris-dialog-action-icon-prefix ' +\n action.prefixIcon\n \"\n aria-hidden=\"true\"\n ></i>\n }\n\n <span class=\"solaris-dialog-action-label\">\n @if (action.labelKey) {\n {{ action.labelKey | translate: action.labelParams }}\n } @else {\n {{ action.label }}\n }\n </span>\n\n @if (action.suffixIcon) {\n <i\n [attr.class]=\"\n 'solaris-dialog-action-icon solaris-dialog-action-icon-suffix ' +\n action.suffixIcon\n \"\n aria-hidden=\"true\"\n ></i>\n }\n </button>\n }\n </footer>\n }\n</section>\n\r\n", styles: [":host{display:grid;inline-size:100%;block-size:100%;pointer-events:none;max-inline-size:100%}:host>.solaris-dialog{pointer-events:auto}.solaris-dialog{--solaris-dialog-max-width: 56rem;--solaris-dialog-max-height: min(88vh, 72rem);--solaris-dialog-fg: var(--solaris-color-text);--solaris-dialog-padding: var(--solaris-space-5);--solaris-dialog-bg: var(--solaris-color-surface);--solaris-dialog-radius: var(--solaris-radius-lg);--solaris-dialog-shadow: var(--solaris-shadow-lg);--solaris-dialog-border: color-mix(in srgb, var(--solaris-color-border) 82%, transparent);inline-size:min(100vw - 3.2rem,var(--solaris-dialog-max-width));max-block-size:var(--solaris-dialog-max-height);display:grid;grid-template-rows:auto minmax(0,1fr) auto;color:var(--solaris-dialog-fg);background:var(--solaris-dialog-bg);border:1px solid var(--solaris-dialog-border);border-radius:var(--solaris-dialog-radius);box-shadow:var(--solaris-dialog-shadow);overflow:hidden;animation:solaris-dialog-in var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard)}.solaris-dialog[data-size=sm]{--solaris-dialog-max-width: 40rem}.solaris-dialog[data-size=md]{--solaris-dialog-max-width: 56rem}.solaris-dialog[data-size=lg]{--solaris-dialog-max-width: 72rem}.solaris-dialog[data-size=xl]{--solaris-dialog-max-width: 96rem}.solaris-dialog[data-size=fullscreen]{inline-size:calc(100vw - 3.2rem);block-size:calc(100vh - 3.2rem);--solaris-dialog-max-width: none;--solaris-dialog-max-height: none}.solaris-dialog-header{display:grid;min-inline-size:0;align-items:start;gap:var(--solaris-space-4);padding:var(--solaris-dialog-padding);grid-template-columns:minmax(0,1fr) auto;border-block-end:1px solid var(--solaris-dialog-border)}.solaris-dialog-heading{display:grid;min-inline-size:0;gap:var(--solaris-space-1)}.solaris-dialog-title{margin:0;font-weight:750;font-size:var(--solaris-fs-18);color:var(--solaris-color-text);line-height:var(--solaris-lh-tight)}.solaris-dialog-description{margin:0;font-size:var(--solaris-fs-13);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text-muted)}.solaris-dialog-close{padding:0;border:0;outline:none;cursor:pointer;block-size:3.2rem;inline-size:3.2rem;place-items:center;display:inline-grid;background:transparent;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);transition:background-color var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-dialog-close:hover,.solaris-dialog-close:focus-visible{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.solaris-dialog-close:focus-visible{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--solaris-color-primary) 24%,transparent)}.solaris-dialog-close i{line-height:1;font-size:var(--solaris-fs-18)}.solaris-dialog-body{overflow:auto;min-block-size:0;padding:var(--solaris-dialog-padding)}.solaris-dialog-footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-space-3);border-block-start:1px solid var(--solaris-dialog-border);padding:var(--solaris-space-4) var(--solaris-dialog-padding);background:color-mix(in srgb,var(--solaris-color-surface-2) 45%,transparent)}.solaris-dialog-footer[data-action-alignment=start]{justify-content:flex-start}.solaris-dialog-footer[data-action-alignment=center]{justify-content:center}.solaris-dialog-footer[data-action-alignment=end]{justify-content:flex-end}.solaris-dialog-footer[data-action-alignment=space-between]{justify-content:space-between}.solaris-dialog-action{white-space:nowrap}.solaris-dialog-action-icon{line-height:1;font-size:1.15em}.solaris-dialog-action-label{min-inline-size:0}@keyframes solaris-dialog-in{0%{opacity:0;transform:translateY(.8rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], dependencies: [{ kind: "directive", type: SolarisButtonDirective, selector: "button[solaris-button], a[solaris-button]", inputs: ["size", "variant", "color", "textColor", "radius", "loading", "iconOnly", "disabled", "fullWidth", "badgeOverlay"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3765
3765
|
}
|
|
3766
3766
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisDialogContainer, decorators: [{
|
|
3767
3767
|
type: Component,
|
|
3768
|
-
args: [{ selector: 'solaris-dialog-container', standalone: true, imports: [SolarisButtonDirective, SolarisTranslationPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"solaris-dialog\"\n [attr.data-size]=\"size\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"resolvedAriaLabelledBy\"\n [attr.aria-describedby]=\"resolvedAriaDescribedBy\"\n>\n @if (hasHeader) {\n <header class=\"solaris-
|
|
3768
|
+
args: [{ selector: 'solaris-dialog-container', standalone: true, imports: [SolarisButtonDirective, SolarisTranslationPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"solaris-dialog\"\n [attr.data-size]=\"size\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"resolvedAriaLabelledBy\"\n [attr.aria-describedby]=\"resolvedAriaDescribedBy\"\n>\n @if (hasHeader) {\n <header class=\"solaris-dialog-header\">\n <div class=\"solaris-dialog-heading\">\n @if (title || titleKey) {\n <h2 class=\"solaris-dialog-title\" [id]=\"titleId\">\n @if (titleKey) {\n {{ titleKey | translate }}\n } @else {\n {{ title }}\n }\n </h2>\n }\n\n @if (hasDescription) {\n <p class=\"solaris-dialog-description\" [id]=\"descriptionId\">\n @if (descriptionKey) {\n {{ descriptionKey | translate }}\n } @else {\n {{ description }}\n }\n </p>\n }\n </div>\n\n @if (showCloseButton) {\n <button\n type=\"button\"\n class=\"solaris-dialog-close\"\n aria-label=\"Fechar\"\n (click)=\"closeClick.emit()\"\n >\n <i class=\"ph ph-x\"></i>\n </button>\n }\n </header>\n }\n\n <div class=\"solaris-dialog-body\">\n <ng-template #contentHost></ng-template>\n </div>\n\n @if (hasActions) {\n <footer class=\"solaris-dialog-footer\" [attr.data-action-alignment]=\"actionAlignment\">\n @for (action of actions; track action.label ?? action.labelKey ?? $index) {\n <button\n type=\"button\"\n solaris-button\n class=\"solaris-dialog-action\"\n [size]=\"resolveActionSize(action)\"\n [variant]=\"resolveActionVariant(action)\"\n [color]=\"resolveActionColor(action)\"\n [disabled]=\"action.disabled\"\n [loading]=\"action.loading\"\n [fullWidth]=\"action.fullWidth\"\n (click)=\"actionClick.emit(action)\"\n >\n @if (action.prefixIcon) {\n <i\n [attr.class]=\"\n 'solaris-dialog-action-icon solaris-dialog-action-icon-prefix ' +\n action.prefixIcon\n \"\n aria-hidden=\"true\"\n ></i>\n }\n\n <span class=\"solaris-dialog-action-label\">\n @if (action.labelKey) {\n {{ action.labelKey | translate: action.labelParams }}\n } @else {\n {{ action.label }}\n }\n </span>\n\n @if (action.suffixIcon) {\n <i\n [attr.class]=\"\n 'solaris-dialog-action-icon solaris-dialog-action-icon-suffix ' +\n action.suffixIcon\n \"\n aria-hidden=\"true\"\n ></i>\n }\n </button>\n }\n </footer>\n }\n</section>\n\r\n", styles: [":host{display:grid;inline-size:100%;block-size:100%;pointer-events:none;max-inline-size:100%}:host>.solaris-dialog{pointer-events:auto}.solaris-dialog{--solaris-dialog-max-width: 56rem;--solaris-dialog-max-height: min(88vh, 72rem);--solaris-dialog-fg: var(--solaris-color-text);--solaris-dialog-padding: var(--solaris-space-5);--solaris-dialog-bg: var(--solaris-color-surface);--solaris-dialog-radius: var(--solaris-radius-lg);--solaris-dialog-shadow: var(--solaris-shadow-lg);--solaris-dialog-border: color-mix(in srgb, var(--solaris-color-border) 82%, transparent);inline-size:min(100vw - 3.2rem,var(--solaris-dialog-max-width));max-block-size:var(--solaris-dialog-max-height);display:grid;grid-template-rows:auto minmax(0,1fr) auto;color:var(--solaris-dialog-fg);background:var(--solaris-dialog-bg);border:1px solid var(--solaris-dialog-border);border-radius:var(--solaris-dialog-radius);box-shadow:var(--solaris-dialog-shadow);overflow:hidden;animation:solaris-dialog-in var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard)}.solaris-dialog[data-size=sm]{--solaris-dialog-max-width: 40rem}.solaris-dialog[data-size=md]{--solaris-dialog-max-width: 56rem}.solaris-dialog[data-size=lg]{--solaris-dialog-max-width: 72rem}.solaris-dialog[data-size=xl]{--solaris-dialog-max-width: 96rem}.solaris-dialog[data-size=fullscreen]{inline-size:calc(100vw - 3.2rem);block-size:calc(100vh - 3.2rem);--solaris-dialog-max-width: none;--solaris-dialog-max-height: none}.solaris-dialog-header{display:grid;min-inline-size:0;align-items:start;gap:var(--solaris-space-4);padding:var(--solaris-dialog-padding);grid-template-columns:minmax(0,1fr) auto;border-block-end:1px solid var(--solaris-dialog-border)}.solaris-dialog-heading{display:grid;min-inline-size:0;gap:var(--solaris-space-1)}.solaris-dialog-title{margin:0;font-weight:750;font-size:var(--solaris-fs-18);color:var(--solaris-color-text);line-height:var(--solaris-lh-tight)}.solaris-dialog-description{margin:0;font-size:var(--solaris-fs-13);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text-muted)}.solaris-dialog-close{padding:0;border:0;outline:none;cursor:pointer;block-size:3.2rem;inline-size:3.2rem;place-items:center;display:inline-grid;background:transparent;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);transition:background-color var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-dialog-close:hover,.solaris-dialog-close:focus-visible{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.solaris-dialog-close:focus-visible{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--solaris-color-primary) 24%,transparent)}.solaris-dialog-close i{line-height:1;font-size:var(--solaris-fs-18)}.solaris-dialog-body{overflow:auto;min-block-size:0;padding:var(--solaris-dialog-padding)}.solaris-dialog-footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-space-3);border-block-start:1px solid var(--solaris-dialog-border);padding:var(--solaris-space-4) var(--solaris-dialog-padding);background:color-mix(in srgb,var(--solaris-color-surface-2) 45%,transparent)}.solaris-dialog-footer[data-action-alignment=start]{justify-content:flex-start}.solaris-dialog-footer[data-action-alignment=center]{justify-content:center}.solaris-dialog-footer[data-action-alignment=end]{justify-content:flex-end}.solaris-dialog-footer[data-action-alignment=space-between]{justify-content:space-between}.solaris-dialog-action{white-space:nowrap}.solaris-dialog-action-icon{line-height:1;font-size:1.15em}.solaris-dialog-action-label{min-inline-size:0}@keyframes solaris-dialog-in{0%{opacity:0;transform:translateY(.8rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
|
|
3769
3769
|
}], propDecorators: { contentHost: [{
|
|
3770
3770
|
type: ViewChild,
|
|
3771
3771
|
args: ['contentHost', { read: ViewContainerRef, static: true }]
|
|
@@ -4161,11 +4161,11 @@ class SolarisDrawer {
|
|
|
4161
4161
|
}
|
|
4162
4162
|
}
|
|
4163
4163
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4164
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisDrawer, isStandalone: true, selector: "solaris-drawer", inputs: { title: "title", titleKey: "titleKey", panelClass: "panelClass", backdrop: "backdrop", showClose: "showClose", trapFocus: "trapFocus", backdropClass: "backdropClass", showHeader: "showHeader", lockScroll: "lockScroll", restoreFocus: "restoreFocus", closeOnEscape: "closeOnEscape", width: "width", side: "side", height: "height", closeOnOutsideClick: "closeOnOutsideClick", open: "open" }, outputs: { openChange: "openChange" }, host: { properties: { "attr.data-side": "this.dataSide", "attr.data-open": "this.dataOpen" }, classAttribute: "solaris-drawer-host" }, queries: [{ propertyName: "headerSlot", first: true, predicate: SolarisDrawerHeaderDirective, descendants: true }, { propertyName: "footerSlot", first: true, predicate: SolarisDrawerFooterDirective, descendants: true }], viewQueries: [{ propertyName: "panelEl", first: true, predicate: ["panelEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (isOpen()) {\n @if (backdrop) {\n <div\n class=\"solaris-
|
|
4164
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisDrawer, isStandalone: true, selector: "solaris-drawer", inputs: { title: "title", titleKey: "titleKey", panelClass: "panelClass", backdrop: "backdrop", showClose: "showClose", trapFocus: "trapFocus", backdropClass: "backdropClass", showHeader: "showHeader", lockScroll: "lockScroll", restoreFocus: "restoreFocus", closeOnEscape: "closeOnEscape", width: "width", side: "side", height: "height", closeOnOutsideClick: "closeOnOutsideClick", open: "open" }, outputs: { openChange: "openChange" }, host: { properties: { "attr.data-side": "this.dataSide", "attr.data-open": "this.dataOpen" }, classAttribute: "solaris-drawer-host" }, queries: [{ propertyName: "headerSlot", first: true, predicate: SolarisDrawerHeaderDirective, descendants: true }, { propertyName: "footerSlot", first: true, predicate: SolarisDrawerFooterDirective, descendants: true }], viewQueries: [{ propertyName: "panelEl", first: true, predicate: ["panelEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (isOpen()) {\n @if (backdrop) {\n <div\n class=\"solaris-drawer-backdrop {{ backdropClass }}\"\n (click)=\"onBackdropClick()\"\n aria-hidden=\"true\"\n ></div>\n }\n\n <aside\n #panelEl\n class=\"solaris-drawer-panel {{ panelClass }}\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"showHeader ? titleId : null\"\n [style.--solaris-drawer-width]=\"width\"\n [style.--solaris-drawer-height]=\"height\"\n (keydown)=\"onPanelKeydown($event)\"\n tabindex=\"-1\"\n >\n @if (showHeader) {\n <header class=\"solaris-drawer-header\">\n @if (hasCustomHeader) {\n <ng-content select=\"[solaris-drawer-header]\"></ng-content>\n } @else {\n <div class=\"solaris-drawer-title\" [id]=\"titleId\">{{ title }}</div>\n\n @if (showClose) {\n <button\n type=\"button\"\n class=\"solaris-drawer-close\"\n (click)=\"setOpen(false)\"\n aria-label=\"Close\"\n >\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n </button>\n }\n }\n </header>\n }\n\n <div class=\"solaris-drawer-content\">\n <ng-content></ng-content>\n </div>\n\n @if (hasCustomFooter) {\n <footer class=\"solaris-drawer-footer\">\n <ng-content select=\"[solaris-drawer-footer]\"></ng-content>\n </footer>\n }\n </aside>\n}\n\r\n", styles: [":host{display:contents}.solaris-drawer-backdrop{inset:0;position:fixed;background:var(--solaris-overlay-backdrop-medium);z-index:var(--solaris-z-fixed)}.solaris-drawer-panel{display:grid;outline:none;height:100vh;position:fixed;grid-template-rows:auto 1fr auto;box-shadow:var(--solaris-shadow-lg);background:var(--solaris-color-surface);z-index:calc(var(--solaris-z-fixed) + 1);border-left:1px solid var(--solaris-color-border);width:var(--solaris-drawer-width, min(26rem, 92vw))}:host([data-side=right]) .solaris-drawer-panel{top:0;right:0;animation:solaris-drawer-in-right var(--solaris-motion-duration-md) var(--solaris-motion-ease-standard)}:host([data-side=left]) .solaris-drawer-panel{top:0;left:0;border-left:none;border-right:1px solid var(--solaris-color-border);animation:solaris-drawer-in-left var(--solaris-motion-duration-md) var(--solaris-motion-ease-standard)}:host([data-side=bottom]) .solaris-drawer-panel{left:0;right:0;bottom:0;width:100%;height:var(--solaris-drawer-height, min(70vh, 40rem));border-left:none;border-right:none;border-top:1px solid var(--solaris-color-border);animation:solaris-drawer-in-bottom var(--solaris-motion-duration-md) var(--solaris-motion-ease-standard)}@keyframes solaris-drawer-in-right{0%{transform:translate(14px);opacity:.75}to{transform:translate(0);opacity:1}}@keyframes solaris-drawer-in-left{0%{transform:translate(-14px);opacity:.75}to{transform:translate(0);opacity:1}}@keyframes solaris-drawer-in-bottom{0%{transform:translateY(14px);opacity:.75}to{transform:translateY(0);opacity:1}}.solaris-drawer-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--solaris-space-4);border-bottom:1px solid var(--solaris-color-border)}.solaris-drawer-title{font-size:var(--solaris-fs-14);color:var(--solaris-color-text)}.solaris-drawer-close{border:none;cursor:pointer;background:transparent;padding:var(--solaris-space-2);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-sm)}.solaris-drawer-close:hover{background:var(--solaris-color-surface-2)}.solaris-drawer-content{overflow:auto;padding:var(--solaris-space-4)}.solaris-drawer-footer{padding:var(--solaris-space-4);border-top:1px solid var(--solaris-color-border)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4165
4165
|
}
|
|
4166
4166
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisDrawer, decorators: [{
|
|
4167
4167
|
type: Component,
|
|
4168
|
-
args: [{ selector: 'solaris-drawer', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'solaris-drawer-host' }, template: "@if (isOpen()) {\n @if (backdrop) {\n <div\n class=\"solaris-
|
|
4168
|
+
args: [{ selector: 'solaris-drawer', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'solaris-drawer-host' }, template: "@if (isOpen()) {\n @if (backdrop) {\n <div\n class=\"solaris-drawer-backdrop {{ backdropClass }}\"\n (click)=\"onBackdropClick()\"\n aria-hidden=\"true\"\n ></div>\n }\n\n <aside\n #panelEl\n class=\"solaris-drawer-panel {{ panelClass }}\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"showHeader ? titleId : null\"\n [style.--solaris-drawer-width]=\"width\"\n [style.--solaris-drawer-height]=\"height\"\n (keydown)=\"onPanelKeydown($event)\"\n tabindex=\"-1\"\n >\n @if (showHeader) {\n <header class=\"solaris-drawer-header\">\n @if (hasCustomHeader) {\n <ng-content select=\"[solaris-drawer-header]\"></ng-content>\n } @else {\n <div class=\"solaris-drawer-title\" [id]=\"titleId\">{{ title }}</div>\n\n @if (showClose) {\n <button\n type=\"button\"\n class=\"solaris-drawer-close\"\n (click)=\"setOpen(false)\"\n aria-label=\"Close\"\n >\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n </button>\n }\n }\n </header>\n }\n\n <div class=\"solaris-drawer-content\">\n <ng-content></ng-content>\n </div>\n\n @if (hasCustomFooter) {\n <footer class=\"solaris-drawer-footer\">\n <ng-content select=\"[solaris-drawer-footer]\"></ng-content>\n </footer>\n }\n </aside>\n}\n\r\n", styles: [":host{display:contents}.solaris-drawer-backdrop{inset:0;position:fixed;background:var(--solaris-overlay-backdrop-medium);z-index:var(--solaris-z-fixed)}.solaris-drawer-panel{display:grid;outline:none;height:100vh;position:fixed;grid-template-rows:auto 1fr auto;box-shadow:var(--solaris-shadow-lg);background:var(--solaris-color-surface);z-index:calc(var(--solaris-z-fixed) + 1);border-left:1px solid var(--solaris-color-border);width:var(--solaris-drawer-width, min(26rem, 92vw))}:host([data-side=right]) .solaris-drawer-panel{top:0;right:0;animation:solaris-drawer-in-right var(--solaris-motion-duration-md) var(--solaris-motion-ease-standard)}:host([data-side=left]) .solaris-drawer-panel{top:0;left:0;border-left:none;border-right:1px solid var(--solaris-color-border);animation:solaris-drawer-in-left var(--solaris-motion-duration-md) var(--solaris-motion-ease-standard)}:host([data-side=bottom]) .solaris-drawer-panel{left:0;right:0;bottom:0;width:100%;height:var(--solaris-drawer-height, min(70vh, 40rem));border-left:none;border-right:none;border-top:1px solid var(--solaris-color-border);animation:solaris-drawer-in-bottom var(--solaris-motion-duration-md) var(--solaris-motion-ease-standard)}@keyframes solaris-drawer-in-right{0%{transform:translate(14px);opacity:.75}to{transform:translate(0);opacity:1}}@keyframes solaris-drawer-in-left{0%{transform:translate(-14px);opacity:.75}to{transform:translate(0);opacity:1}}@keyframes solaris-drawer-in-bottom{0%{transform:translateY(14px);opacity:.75}to{transform:translateY(0);opacity:1}}.solaris-drawer-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--solaris-space-4);border-bottom:1px solid var(--solaris-color-border)}.solaris-drawer-title{font-size:var(--solaris-fs-14);color:var(--solaris-color-text)}.solaris-drawer-close{border:none;cursor:pointer;background:transparent;padding:var(--solaris-space-2);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-sm)}.solaris-drawer-close:hover{background:var(--solaris-color-surface-2)}.solaris-drawer-content{overflow:auto;padding:var(--solaris-space-4)}.solaris-drawer-footer{padding:var(--solaris-space-4);border-top:1px solid var(--solaris-color-border)}\n"] }]
|
|
4169
4169
|
}], ctorParameters: () => [], propDecorators: { title: [{
|
|
4170
4170
|
type: Input
|
|
4171
4171
|
}], titleKey: [{
|
|
@@ -4231,11 +4231,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
4231
4231
|
|
|
4232
4232
|
class SolarisTableFilters {
|
|
4233
4233
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisTableFilters, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4234
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: SolarisTableFilters, isStandalone: true, selector: "solaris-table-filters", host: { classAttribute: "solaris-table-filters" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;margin-bottom:var(--solaris-space-4)}:host ::ng-deep .solaris-table-
|
|
4234
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: SolarisTableFilters, isStandalone: true, selector: "solaris-table-filters", host: { classAttribute: "solaris-table-filters" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;margin-bottom:var(--solaris-space-4)}:host ::ng-deep .solaris-table-filters-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-space-3)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4235
4235
|
}
|
|
4236
4236
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisTableFilters, decorators: [{
|
|
4237
4237
|
type: Component,
|
|
4238
|
-
args: [{ selector: 'solaris-table-filters', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'solaris-table-filters' }, template: "<ng-content></ng-content>\n", styles: [":host{display:block;margin-bottom:var(--solaris-space-4)}:host ::ng-deep .solaris-table-
|
|
4238
|
+
args: [{ selector: 'solaris-table-filters', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'solaris-table-filters' }, template: "<ng-content></ng-content>\n", styles: [":host{display:block;margin-bottom:var(--solaris-space-4)}:host ::ng-deep .solaris-table-filters-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-space-3)}\n"] }]
|
|
4239
4239
|
}] });
|
|
4240
4240
|
|
|
4241
4241
|
class SolarisFilterField {
|
|
@@ -4254,11 +4254,11 @@ class SolarisFilterField {
|
|
|
4254
4254
|
this.reset.emit();
|
|
4255
4255
|
}
|
|
4256
4256
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisFilterField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4257
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisFilterField, isStandalone: true, selector: "solaris-filter-field", inputs: { label: "label", labelKey: "labelKey", active: "active", resetLabel: "resetLabel", resetLabelKey: "resetLabelKey" }, outputs: { reset: "reset" }, host: { classAttribute: "solaris-filter-field-host" }, ngImport: i0, template: "<div class=\"solaris-filter-field\">\n <div class=\"solaris-filter-
|
|
4257
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisFilterField, isStandalone: true, selector: "solaris-filter-field", inputs: { label: "label", labelKey: "labelKey", active: "active", resetLabel: "resetLabel", resetLabelKey: "resetLabelKey" }, outputs: { reset: "reset" }, host: { classAttribute: "solaris-filter-field-host" }, ngImport: i0, template: "<div class=\"solaris-filter-field\">\n <div class=\"solaris-filter-field-head\">\n <span class=\"solaris-filter-field-label\">\n @if (labelKey) {\n {{ labelKey | translate }}\n } @else {\n {{ label }}\n }\n </span>\n\n @if (showReset) {\n <button\n type=\"button\"\n class=\"solaris-filter-field-reset\"\n (click)=\"onResetClick($event)\"\n [disabled]=\"!active\"\n >\n @if (resetLabelKey) {\n {{ resetLabelKey | translate }}\n } @else {\n {{ resetLabel }}\n }\n </button>\n }\n </div>\n\n <div class=\"solaris-filter-field-body\">\n <ng-content></ng-content>\n </div>\n</div>\n\r\n", styles: [".solaris-filter-field{display:grid;gap:var(--solaris-space-2)}.solaris-filter-field-head{display:flex;align-items:center;gap:var(--solaris-space-3);justify-content:space-between}.solaris-filter-field-label{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-filter-field-reset{border:none;cursor:pointer;font-weight:400;background:transparent;font-size:var(--solaris-fs-12);border-radius:var(--solaris-radius-sm);padding:var(--solaris-space-1) var(--solaris-space-2);color:color-mix(in srgb,var(--solaris-color-primary) 90%,transparent)}.solaris-filter-field-reset:hover:not(:disabled){background:color-mix(in srgb,var(--solaris-color-primary) 10%,transparent)}.solaris-filter-field-reset:disabled{opacity:.5;cursor:not-allowed;color:color-mix(in srgb,var(--solaris-color-text) 60%,transparent)}.solaris-filter-field-body{min-width:0}\n"], dependencies: [{ kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4258
4258
|
}
|
|
4259
4259
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisFilterField, decorators: [{
|
|
4260
4260
|
type: Component,
|
|
4261
|
-
args: [{ selector: 'solaris-filter-field', standalone: true, imports: [SolarisTranslationPipe], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'solaris-filter-field-host' }, template: "<div class=\"solaris-filter-field\">\n <div class=\"solaris-filter-
|
|
4261
|
+
args: [{ selector: 'solaris-filter-field', standalone: true, imports: [SolarisTranslationPipe], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'solaris-filter-field-host' }, template: "<div class=\"solaris-filter-field\">\n <div class=\"solaris-filter-field-head\">\n <span class=\"solaris-filter-field-label\">\n @if (labelKey) {\n {{ labelKey | translate }}\n } @else {\n {{ label }}\n }\n </span>\n\n @if (showReset) {\n <button\n type=\"button\"\n class=\"solaris-filter-field-reset\"\n (click)=\"onResetClick($event)\"\n [disabled]=\"!active\"\n >\n @if (resetLabelKey) {\n {{ resetLabelKey | translate }}\n } @else {\n {{ resetLabel }}\n }\n </button>\n }\n </div>\n\n <div class=\"solaris-filter-field-body\">\n <ng-content></ng-content>\n </div>\n</div>\n\r\n", styles: [".solaris-filter-field{display:grid;gap:var(--solaris-space-2)}.solaris-filter-field-head{display:flex;align-items:center;gap:var(--solaris-space-3);justify-content:space-between}.solaris-filter-field-label{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-filter-field-reset{border:none;cursor:pointer;font-weight:400;background:transparent;font-size:var(--solaris-fs-12);border-radius:var(--solaris-radius-sm);padding:var(--solaris-space-1) var(--solaris-space-2);color:color-mix(in srgb,var(--solaris-color-primary) 90%,transparent)}.solaris-filter-field-reset:hover:not(:disabled){background:color-mix(in srgb,var(--solaris-color-primary) 10%,transparent)}.solaris-filter-field-reset:disabled{opacity:.5;cursor:not-allowed;color:color-mix(in srgb,var(--solaris-color-text) 60%,transparent)}.solaris-filter-field-body{min-width:0}\n"] }]
|
|
4262
4262
|
}], propDecorators: { label: [{
|
|
4263
4263
|
type: Input
|
|
4264
4264
|
}], labelKey: [{
|
|
@@ -4332,7 +4332,7 @@ class SolarisFilterPanel {
|
|
|
4332
4332
|
this.setOpen(!this.isOpen());
|
|
4333
4333
|
}
|
|
4334
4334
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisFilterPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4335
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisFilterPanel, isStandalone: true, selector: "solaris-filter-panel", inputs: { count: "count", labelKey: "labelKey", titleKey: "titleKey", disabled: "disabled", drawerSide: "drawerSide", radius: "radius", drawerWidth: "drawerWidth", label: "label", title: "title", open: "open" }, outputs: { apply: "apply", clearAll: "clearAll", openChange: "openChange" }, host: { classAttribute: "solaris-filter-panel-host" }, queries: [{ propertyName: "footerSlot", first: true, predicate: SolarisFilterPanelFooterDirective, descendants: true }, { propertyName: "chipsSlot", first: true, predicate: SolarisFilterPanelChipsDirective, descendants: true }], ngImport: i0, template: "<button\n type=\"button\"\n class=\"solaris-filter-
|
|
4335
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisFilterPanel, isStandalone: true, selector: "solaris-filter-panel", inputs: { count: "count", labelKey: "labelKey", titleKey: "titleKey", disabled: "disabled", drawerSide: "drawerSide", radius: "radius", drawerWidth: "drawerWidth", label: "label", title: "title", open: "open" }, outputs: { apply: "apply", clearAll: "clearAll", openChange: "openChange" }, host: { classAttribute: "solaris-filter-panel-host" }, queries: [{ propertyName: "footerSlot", first: true, predicate: SolarisFilterPanelFooterDirective, descendants: true }, { propertyName: "chipsSlot", first: true, predicate: SolarisFilterPanelChipsDirective, descendants: true }], ngImport: i0, template: "<button\n type=\"button\"\n class=\"solaris-filter-panel-trigger\"\n [disabled]=\"disabled\"\n (click)=\"toggle()\"\n [attr.data-radius]=\"radius\"\n>\n <i class=\"ph ph-sliders-horizontal\"></i>\n\n @if (labelKey) {\n {{ labelKey | translate }}\n } @else {\n {{ label | translate }}\n }\n\n @if (count > 0) {\n <span class=\"solaris-filter-panel-count\">{{ count }}</span>\n }\n</button>\n\n<solaris-drawer\n [open]=\"isOpen()\"\n (openChange)=\"setOpen($event)\"\n [side]=\"drawerSide\"\n [width]=\"drawerWidth\"\n [backdrop]=\"true\"\n [closeOnEscape]=\"true\"\n [closeOnOutsideClick]=\"true\"\n [lockScroll]=\"true\"\n [restoreFocus]=\"true\"\n [trapFocus]=\"true\"\n panelClass=\"solaris-filter-panel-drawer\"\n>\n <div solaris-drawer-header class=\"solaris-filter-panel-header\">\n <div class=\"solaris-filter-panel-title\">\n @if (titleKey) {\n {{ titleKey | translate }}\n } @else {\n {{ title | translate }}\n }\n </div>\n\n <button type=\"button\" class=\"solaris-filter-panel-close\" (click)=\"setOpen(false)\">\n <i class=\"ph ph-x\"></i>\n </button>\n </div>\n\n @if (hasChips()) {\n <div class=\"solaris-filter-panel-chips\">\n <ng-content select=\"[solarisFilterPanelChips]\"></ng-content>\n </div>\n }\n\n <div class=\"solaris-filter-panel-content\">\n <ng-content></ng-content>\n </div>\n\n <footer solaris-drawer-footer class=\"solaris-filter-panel-footer\">\n <ng-content select=\"[solarisFilterPanelFooter]\"></ng-content>\n\n @if (!hasCustomFooter) {\n <div class=\"solaris-filter-panel-footer-default\">\n <button\n solaris-button\n color=\"surface\"\n variant=\"outline\"\n type=\"button\"\n (click)=\"clearAll.emit()\"\n >\n {{ 'ui.solaris.common.clearAll' | translate }}\n </button>\n\n <button solaris-button type=\"button\" (click)=\"apply.emit()\">\n {{ 'ui.solaris.common.apply' | translate }}\n </button>\n </div>\n }\n </footer>\n</solaris-drawer>\n\r\n", styles: [".solaris-filter-panel-trigger{--solaris-filter-panel-radius: var(--solaris-radius-sm);cursor:pointer;align-items:center;display:inline-flex;padding:.55rem .9rem;gap:var(--solaris-space-2);color:var(--solaris-color-text);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border);height:var(--solaris-filter-bar-height, 3.8rem);border-radius:var(--solaris-filter-panel-radius)}.solaris-filter-panel-trigger[data-radius=sm]{--solaris-filter-panel-radius: var(--solaris-radius-sm)}.solaris-filter-panel-trigger[data-radius=md]{--solaris-filter-panel-radius: var(--solaris-radius-md)}.solaris-filter-panel-trigger[data-radius=full]{--solaris-filter-panel-radius: var(--solaris-radius-full)}.solaris-filter-panel-trigger:disabled{opacity:.55;cursor:not-allowed}.solaris-filter-panel-count{padding:.1rem .5rem;font-size:var(--solaris-fs-12);margin-left:var(--solaris-space-1);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border)}:host ::ng-deep .solaris-filter-panel-drawer{width:min(30rem,92vw)}.solaris-filter-panel-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--solaris-space-4)}.solaris-filter-panel-title{font-size:var(--solaris-fs-14);color:var(--solaris-color-text)}.solaris-filter-panel-close{border:none;cursor:pointer;background:transparent;padding:var(--solaris-space-2);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-sm)}.solaris-filter-panel-close:hover{background:var(--solaris-color-surface-2)}.solaris-filter-panel-chips{display:flex;flex-wrap:wrap;gap:var(--solaris-space-2);border-bottom:1px solid var(--solaris-color-border);padding:var(--solaris-space-3) var(--solaris-space-4)}.solaris-filter-panel-content{min-height:0;overflow:auto;display:grid;align-content:flex-start;gap:var(--solaris-space-8);padding:var(--solaris-space-4)}.solaris-filter-panel-footer-default{display:grid;gap:var(--solaris-space-3);grid-template-columns:1fr 1fr}.solaris-filter-panel-footer-default button{font-weight:400;font-size:var(--solaris-fs-14)}\n"], dependencies: [{ kind: "directive", type: SolarisButtonDirective, selector: "button[solaris-button], a[solaris-button]", inputs: ["size", "variant", "color", "textColor", "radius", "loading", "iconOnly", "disabled", "fullWidth", "badgeOverlay"] }, { kind: "directive", type: SolarisDrawerHeaderDirective, selector: "[solaris-drawer-header]" }, { kind: "directive", type: SolarisDrawerFooterDirective, selector: "[solaris-drawer-footer]" }, { kind: "component", type: SolarisDrawer, selector: "solaris-drawer", inputs: ["title", "titleKey", "panelClass", "backdrop", "showClose", "trapFocus", "backdropClass", "showHeader", "lockScroll", "restoreFocus", "closeOnEscape", "width", "side", "height", "closeOnOutsideClick", "open"], outputs: ["openChange"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4336
4336
|
}
|
|
4337
4337
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisFilterPanel, decorators: [{
|
|
4338
4338
|
type: Component,
|
|
@@ -4342,7 +4342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
4342
4342
|
SolarisDrawerHeaderDirective,
|
|
4343
4343
|
SolarisDrawerFooterDirective,
|
|
4344
4344
|
SolarisDrawer,
|
|
4345
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'solaris-filter-panel-host' }, template: "<button\n type=\"button\"\n class=\"solaris-filter-
|
|
4345
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'solaris-filter-panel-host' }, template: "<button\n type=\"button\"\n class=\"solaris-filter-panel-trigger\"\n [disabled]=\"disabled\"\n (click)=\"toggle()\"\n [attr.data-radius]=\"radius\"\n>\n <i class=\"ph ph-sliders-horizontal\"></i>\n\n @if (labelKey) {\n {{ labelKey | translate }}\n } @else {\n {{ label | translate }}\n }\n\n @if (count > 0) {\n <span class=\"solaris-filter-panel-count\">{{ count }}</span>\n }\n</button>\n\n<solaris-drawer\n [open]=\"isOpen()\"\n (openChange)=\"setOpen($event)\"\n [side]=\"drawerSide\"\n [width]=\"drawerWidth\"\n [backdrop]=\"true\"\n [closeOnEscape]=\"true\"\n [closeOnOutsideClick]=\"true\"\n [lockScroll]=\"true\"\n [restoreFocus]=\"true\"\n [trapFocus]=\"true\"\n panelClass=\"solaris-filter-panel-drawer\"\n>\n <div solaris-drawer-header class=\"solaris-filter-panel-header\">\n <div class=\"solaris-filter-panel-title\">\n @if (titleKey) {\n {{ titleKey | translate }}\n } @else {\n {{ title | translate }}\n }\n </div>\n\n <button type=\"button\" class=\"solaris-filter-panel-close\" (click)=\"setOpen(false)\">\n <i class=\"ph ph-x\"></i>\n </button>\n </div>\n\n @if (hasChips()) {\n <div class=\"solaris-filter-panel-chips\">\n <ng-content select=\"[solarisFilterPanelChips]\"></ng-content>\n </div>\n }\n\n <div class=\"solaris-filter-panel-content\">\n <ng-content></ng-content>\n </div>\n\n <footer solaris-drawer-footer class=\"solaris-filter-panel-footer\">\n <ng-content select=\"[solarisFilterPanelFooter]\"></ng-content>\n\n @if (!hasCustomFooter) {\n <div class=\"solaris-filter-panel-footer-default\">\n <button\n solaris-button\n color=\"surface\"\n variant=\"outline\"\n type=\"button\"\n (click)=\"clearAll.emit()\"\n >\n {{ 'ui.solaris.common.clearAll' | translate }}\n </button>\n\n <button solaris-button type=\"button\" (click)=\"apply.emit()\">\n {{ 'ui.solaris.common.apply' | translate }}\n </button>\n </div>\n }\n </footer>\n</solaris-drawer>\n\r\n", styles: [".solaris-filter-panel-trigger{--solaris-filter-panel-radius: var(--solaris-radius-sm);cursor:pointer;align-items:center;display:inline-flex;padding:.55rem .9rem;gap:var(--solaris-space-2);color:var(--solaris-color-text);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border);height:var(--solaris-filter-bar-height, 3.8rem);border-radius:var(--solaris-filter-panel-radius)}.solaris-filter-panel-trigger[data-radius=sm]{--solaris-filter-panel-radius: var(--solaris-radius-sm)}.solaris-filter-panel-trigger[data-radius=md]{--solaris-filter-panel-radius: var(--solaris-radius-md)}.solaris-filter-panel-trigger[data-radius=full]{--solaris-filter-panel-radius: var(--solaris-radius-full)}.solaris-filter-panel-trigger:disabled{opacity:.55;cursor:not-allowed}.solaris-filter-panel-count{padding:.1rem .5rem;font-size:var(--solaris-fs-12);margin-left:var(--solaris-space-1);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border)}:host ::ng-deep .solaris-filter-panel-drawer{width:min(30rem,92vw)}.solaris-filter-panel-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--solaris-space-4)}.solaris-filter-panel-title{font-size:var(--solaris-fs-14);color:var(--solaris-color-text)}.solaris-filter-panel-close{border:none;cursor:pointer;background:transparent;padding:var(--solaris-space-2);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-sm)}.solaris-filter-panel-close:hover{background:var(--solaris-color-surface-2)}.solaris-filter-panel-chips{display:flex;flex-wrap:wrap;gap:var(--solaris-space-2);border-bottom:1px solid var(--solaris-color-border);padding:var(--solaris-space-3) var(--solaris-space-4)}.solaris-filter-panel-content{min-height:0;overflow:auto;display:grid;align-content:flex-start;gap:var(--solaris-space-8);padding:var(--solaris-space-4)}.solaris-filter-panel-footer-default{display:grid;gap:var(--solaris-space-3);grid-template-columns:1fr 1fr}.solaris-filter-panel-footer-default button{font-weight:400;font-size:var(--solaris-fs-14)}\n"] }]
|
|
4346
4346
|
}], propDecorators: { count: [{
|
|
4347
4347
|
type: Input
|
|
4348
4348
|
}], labelKey: [{
|
|
@@ -4394,11 +4394,11 @@ class SolarisFilterChip {
|
|
|
4394
4394
|
this.remove.emit();
|
|
4395
4395
|
}
|
|
4396
4396
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisFilterChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4397
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisFilterChip, isStandalone: true, selector: "solaris-filter-chip", inputs: { label: "label", value: "value", labelKey: "labelKey", valueKey: "valueKey", disabled: "disabled", removable: "removable", radius: "radius" }, outputs: { remove: "remove", chipClick: "chipClick" }, host: { classAttribute: "solaris-filter-chip-host" }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"solaris-filter-chip\"\n [disabled]=\"disabled\"\n (click)=\"chipClick.emit()\"\n [attr.data-radius]=\"radius\"\n>\n <span class=\"solaris-filter-
|
|
4397
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisFilterChip, isStandalone: true, selector: "solaris-filter-chip", inputs: { label: "label", value: "value", labelKey: "labelKey", valueKey: "valueKey", disabled: "disabled", removable: "removable", radius: "radius" }, outputs: { remove: "remove", chipClick: "chipClick" }, host: { classAttribute: "solaris-filter-chip-host" }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"solaris-filter-chip\"\n [disabled]=\"disabled\"\n (click)=\"chipClick.emit()\"\n [attr.data-radius]=\"radius\"\n>\n <span class=\"solaris-filter-chip-label\">\n @if (labelKey) {\n {{ labelKey | translate }}\n } @else {\n {{ label }}\n }\n </span>\n\n <span class=\"solaris-filter-chip-value\">\n @if (valueKey) {\n {{ valueKey | translate }}\n } @else {\n {{ value }}\n }\n </span>\n\n @if (removable) {\n <span\n class=\"solaris-filter-chip-remove\"\n role=\"button\"\n tabindex=\"-1\"\n (click)=\"onRemoveClick($event)\"\n >\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n </span>\n }\n</button>\n\r\n", styles: [".solaris-filter-chip{--solaris-filter-chip-radius: var(--solaris-radius-sm);max-width:100%;cursor:pointer;align-items:center;display:inline-flex;gap:var(--solaris-space-2);color:var(--solaris-color-text);padding:0 var(--solaris-space-3);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border);border-radius:var(--solaris-filter-chip-radius);height:var(--solaris-filter-bar-height, 3.8rem)}.solaris-filter-chip[data-radius=none]{--solaris-filter-chip-radius: var(--solaris-radius-none)}.solaris-filter-chip[data-radius=xs]{--solaris-filter-chip-radius: var(--solaris-radius-xs)}.solaris-filter-chip[data-radius=sm]{--solaris-filter-chip-radius: var(--solaris-radius-sm)}.solaris-filter-chip[data-radius=md]{--solaris-filter-chip-radius: var(--solaris-radius-md)}.solaris-filter-chip[data-radius=lg]{--solaris-filter-chip-radius: var(--solaris-radius-lg)}.solaris-filter-chip[data-radius=full]{--solaris-filter-chip-radius: var(--solaris-radius-full)}.solaris-filter-chip:disabled{opacity:.55;cursor:not-allowed}.solaris-filter-chip-label{white-space:nowrap;font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-filter-chip-value{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-14)}.solaris-filter-chip-remove{align-items:center;display:inline-flex;justify-content:center;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);width:calc(var(--solaris-filter-bar-height, 3.8rem) - 1.2rem);height:calc(var(--solaris-filter-bar-height, 3.8rem) - 1.2rem)}.solaris-filter-chip:hover .solaris-filter-chip-remove{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}\n"], dependencies: [{ kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4398
4398
|
}
|
|
4399
4399
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisFilterChip, decorators: [{
|
|
4400
4400
|
type: Component,
|
|
4401
|
-
args: [{ selector: 'solaris-filter-chip', standalone: true, imports: [SolarisTranslationPipe], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'solaris-filter-chip-host' }, template: "<button\n type=\"button\"\n class=\"solaris-filter-chip\"\n [disabled]=\"disabled\"\n (click)=\"chipClick.emit()\"\n [attr.data-radius]=\"radius\"\n>\n <span class=\"solaris-filter-
|
|
4401
|
+
args: [{ selector: 'solaris-filter-chip', standalone: true, imports: [SolarisTranslationPipe], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'solaris-filter-chip-host' }, template: "<button\n type=\"button\"\n class=\"solaris-filter-chip\"\n [disabled]=\"disabled\"\n (click)=\"chipClick.emit()\"\n [attr.data-radius]=\"radius\"\n>\n <span class=\"solaris-filter-chip-label\">\n @if (labelKey) {\n {{ labelKey | translate }}\n } @else {\n {{ label }}\n }\n </span>\n\n <span class=\"solaris-filter-chip-value\">\n @if (valueKey) {\n {{ valueKey | translate }}\n } @else {\n {{ value }}\n }\n </span>\n\n @if (removable) {\n <span\n class=\"solaris-filter-chip-remove\"\n role=\"button\"\n tabindex=\"-1\"\n (click)=\"onRemoveClick($event)\"\n >\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n </span>\n }\n</button>\n\r\n", styles: [".solaris-filter-chip{--solaris-filter-chip-radius: var(--solaris-radius-sm);max-width:100%;cursor:pointer;align-items:center;display:inline-flex;gap:var(--solaris-space-2);color:var(--solaris-color-text);padding:0 var(--solaris-space-3);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border);border-radius:var(--solaris-filter-chip-radius);height:var(--solaris-filter-bar-height, 3.8rem)}.solaris-filter-chip[data-radius=none]{--solaris-filter-chip-radius: var(--solaris-radius-none)}.solaris-filter-chip[data-radius=xs]{--solaris-filter-chip-radius: var(--solaris-radius-xs)}.solaris-filter-chip[data-radius=sm]{--solaris-filter-chip-radius: var(--solaris-radius-sm)}.solaris-filter-chip[data-radius=md]{--solaris-filter-chip-radius: var(--solaris-radius-md)}.solaris-filter-chip[data-radius=lg]{--solaris-filter-chip-radius: var(--solaris-radius-lg)}.solaris-filter-chip[data-radius=full]{--solaris-filter-chip-radius: var(--solaris-radius-full)}.solaris-filter-chip:disabled{opacity:.55;cursor:not-allowed}.solaris-filter-chip-label{white-space:nowrap;font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-filter-chip-value{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-14)}.solaris-filter-chip-remove{align-items:center;display:inline-flex;justify-content:center;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);width:calc(var(--solaris-filter-bar-height, 3.8rem) - 1.2rem);height:calc(var(--solaris-filter-bar-height, 3.8rem) - 1.2rem)}.solaris-filter-chip:hover .solaris-filter-chip-remove{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}\n"] }]
|
|
4402
4402
|
}], propDecorators: { label: [{
|
|
4403
4403
|
type: Input
|
|
4404
4404
|
}], value: [{
|
|
@@ -4431,11 +4431,11 @@ class SolarisTableSkeleton {
|
|
|
4431
4431
|
return Array.from({ length: this.columns }, (_, i) => i);
|
|
4432
4432
|
}
|
|
4433
4433
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisTableSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4434
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisTableSkeleton, isStandalone: true, selector: "solaris-table-skeleton", inputs: { rows: "rows", columns: "columns", selectable: "selectable", gridTemplateColumns: "gridTemplateColumns" }, ngImport: i0, template: "<div class=\"solaris-table-skeleton\" role=\"status\" aria-live=\"polite\">\n @for (r of rowsArray(); track r) {\n <div class=\"solaris-table-
|
|
4434
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisTableSkeleton, isStandalone: true, selector: "solaris-table-skeleton", inputs: { rows: "rows", columns: "columns", selectable: "selectable", gridTemplateColumns: "gridTemplateColumns" }, ngImport: i0, template: "<div class=\"solaris-table-skeleton\" role=\"status\" aria-live=\"polite\">\n @for (r of rowsArray(); track r) {\n <div class=\"solaris-table-skeleton-row\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\n @for (c of colsArray(); track c; let i = $index) {\n <div class=\"solaris-table-skeleton-cell\" [class.is-first]=\"i === 0\">\n @if (selectable && i === 0) {\n <span class=\"solaris-table-skeleton-select-prefix\">\n <solaris-skeleton\n class=\"solaris-table-skeleton-shape sk solaris-table-skeleton-shape-circle sk-circle\"\n shape=\"circle\"\n ></solaris-skeleton>\n </span>\n }\n\n <solaris-skeleton\n class=\"solaris-table-skeleton-shape sk solaris-table-skeleton-shape-line sk-line\"\n shape=\"line\"\n ></solaris-skeleton>\n </div>\n }\n </div>\n }\n</div>\n\r\n", styles: [".solaris-table-skeleton-row{display:grid;border-bottom:1px solid var(--solaris-color-border)}.solaris-table-skeleton-cell{min-width:0;display:flex;align-items:center;gap:var(--solaris-space-3);padding:var(--solaris-space-4)}.solaris-table-skeleton-select-prefix{flex:0 0 auto;align-items:center;display:inline-flex}.solaris-table-skeleton-shape,.sk{display:block}.solaris-table-skeleton-shape-line,.sk-line{height:1rem;width:100%}.solaris-table-skeleton-shape-circle,.sk-circle{height:1.1rem;width:1.1rem}\n"], dependencies: [{ kind: "component", type: SolarisSkeleton, selector: "solaris-skeleton", inputs: ["shape", "width", "height", "radius", "animated"] }] });
|
|
4435
4435
|
}
|
|
4436
4436
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisTableSkeleton, decorators: [{
|
|
4437
4437
|
type: Component,
|
|
4438
|
-
args: [{ selector: 'solaris-table-skeleton', standalone: true, imports: [SolarisSkeleton], template: "<div class=\"solaris-table-skeleton\" role=\"status\" aria-live=\"polite\">\n @for (r of rowsArray(); track r) {\n <div class=\"solaris-table-
|
|
4438
|
+
args: [{ selector: 'solaris-table-skeleton', standalone: true, imports: [SolarisSkeleton], template: "<div class=\"solaris-table-skeleton\" role=\"status\" aria-live=\"polite\">\n @for (r of rowsArray(); track r) {\n <div class=\"solaris-table-skeleton-row\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\n @for (c of colsArray(); track c; let i = $index) {\n <div class=\"solaris-table-skeleton-cell\" [class.is-first]=\"i === 0\">\n @if (selectable && i === 0) {\n <span class=\"solaris-table-skeleton-select-prefix\">\n <solaris-skeleton\n class=\"solaris-table-skeleton-shape sk solaris-table-skeleton-shape-circle sk-circle\"\n shape=\"circle\"\n ></solaris-skeleton>\n </span>\n }\n\n <solaris-skeleton\n class=\"solaris-table-skeleton-shape sk solaris-table-skeleton-shape-line sk-line\"\n shape=\"line\"\n ></solaris-skeleton>\n </div>\n }\n </div>\n }\n</div>\n\r\n", styles: [".solaris-table-skeleton-row{display:grid;border-bottom:1px solid var(--solaris-color-border)}.solaris-table-skeleton-cell{min-width:0;display:flex;align-items:center;gap:var(--solaris-space-3);padding:var(--solaris-space-4)}.solaris-table-skeleton-select-prefix{flex:0 0 auto;align-items:center;display:inline-flex}.solaris-table-skeleton-shape,.sk{display:block}.solaris-table-skeleton-shape-line,.sk-line{height:1rem;width:100%}.solaris-table-skeleton-shape-circle,.sk-circle{height:1.1rem;width:1.1rem}\n"] }]
|
|
4439
4439
|
}], propDecorators: { rows: [{
|
|
4440
4440
|
type: Input
|
|
4441
4441
|
}], columns: [{
|
|
@@ -4640,7 +4640,7 @@ class SolarisCheckbox {
|
|
|
4640
4640
|
useExisting: forwardRef(() => SolarisCheckbox),
|
|
4641
4641
|
multi: true,
|
|
4642
4642
|
},
|
|
4643
|
-
], viewQueries: [{ propertyName: "native", first: true, predicate: ["native"], descendants: true, static: true }], ngImport: i0, template: "<label class=\"solaris-checkbox\">\n <input\n #native\n class=\"solaris-
|
|
4643
|
+
], viewQueries: [{ propertyName: "native", first: true, predicate: ["native"], descendants: true, static: true }], ngImport: i0, template: "<label class=\"solaris-checkbox\">\n <input\n #native\n class=\"solaris-checkbox-native\"\n type=\"checkbox\"\n [attr.id]=\"id()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked() ? 'true' : 'false'\"\n (change)=\"onNativeChange(native.checked)\"\n (blur)=\"onBlur()\"\n />\n\n <span class=\"solaris-checkbox-control\" aria-hidden=\"true\">\n @if (variant() === 'icon') {\n <span class=\"solaris-checkbox-dot\" aria-hidden=\"true\"></span>\n } @else {\n <i\n class=\"ph solaris-checkbox-icon\"\n [class.ph-check]=\"!indeterminate()\"\n [class.ph-minus]=\"indeterminate()\"\n aria-hidden=\"true\"\n ></i>\n }\n </span>\n\n @if (variant() !== 'icon') {\n <span class=\"solaris-checkbox-content\"><ng-content /></span>\n }\n</label>\n\r\n", styles: [":host{--_hit: 2.4rem;--_size: var(--solaris-indicator-size-md);--_icon: var(--solaris-indicator-check-size-md);--_icon-ring: .5rem;--_text: var(--solaris-color-text);--_radius: var(--solaris-radius-sm);--_border: var(--solaris-color-border);--_muted: var(--solaris-color-text-muted);--solaris-checkbox-border: var(--_border);--solaris-checkbox-accent: var(--solaris-color-primary);--solaris-checkbox-on-accent: var(--solaris-color-primary-contrast)}:host([data-size=sm]){--_size: var(--solaris-indicator-size-sm);--_icon: var(--solaris-indicator-check-size-sm)}:host([data-size=md]){--_size: var(--solaris-indicator-size-md);--_icon: var(--solaris-indicator-check-size-md)}:host([data-size=lg]){--_size: var(--solaris-indicator-size-lg);--_icon: var(--solaris-indicator-check-size-lg)}:host([data-variant=round]),:host([data-variant=icon]){--_radius: var(--solaris-radius-full)}:host([data-color=primary]){--solaris-checkbox-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-checkbox-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-checkbox-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-checkbox-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-checkbox-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-checkbox-accent: var(--solaris-checkbox-custom, var(--solaris-color-primary))}.solaris-checkbox{gap:.8rem;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--_text);display:inline-flex;align-items:flex-start}.solaris-checkbox-native{opacity:0;width:1px;height:1px;position:absolute;pointer-events:none}.solaris-checkbox-control{inline-size:var(--_size);block-size:var(--_size);min-inline-size:var(--_size);min-block-size:var(--_size);aspect-ratio:1/1;display:inline-grid;box-sizing:border-box;line-height:0;border-radius:var(--_radius);border:var(--solaris-indicator-border-width) solid var(--solaris-checkbox-border);background:transparent;color:transparent;flex:0 0 auto;align-items:center;place-items:center}.solaris-checkbox-content{gap:.2rem;line-height:1.3;display:inline-flex;flex-direction:column}.solaris-checkbox-icon{display:block;flex:0 0 auto;line-height:1;font-size:var(--_icon);font-weight:700;opacity:0;pointer-events:none}.solaris-checkbox-native:checked+.solaris-checkbox-control .solaris-checkbox-icon,.solaris-checkbox-native:indeterminate+.solaris-checkbox-control .solaris-checkbox-icon{opacity:1}.solaris-checkbox-native:checked+.solaris-checkbox-control,.solaris-checkbox-native:indeterminate+.solaris-checkbox-control{border-color:var(--solaris-checkbox-accent)}:host([data-color=primary]) .solaris-checkbox-native:checked+.solaris-checkbox-control,:host([data-color=primary]) .solaris-checkbox-native:indeterminate+.solaris-checkbox-control{border-color:var(--solaris-color-primary-tint)}:host([data-appearance=outline]) .solaris-checkbox-native:checked+.solaris-checkbox-control,:host([data-appearance=outline]) .solaris-checkbox-native:indeterminate+.solaris-checkbox-control{background-color:transparent;color:var(--solaris-checkbox-ink, var(--solaris-checkbox-accent))}:host([data-appearance=solid]) .solaris-checkbox-native:checked+.solaris-checkbox-control,:host([data-appearance=solid]) .solaris-checkbox-native:indeterminate+.solaris-checkbox-control{background-color:var(--solaris-checkbox-accent);color:var(--solaris-checkbox-ink, var(--solaris-checkbox-on-accent))}:host([data-variant=icon]) .solaris-checkbox-control{padding:var(--_icon-ring);background-clip:content-box}.solaris-checkbox-native:focus-visible+.solaris-checkbox-control{outline-offset:.2rem;outline:.2rem solid var(--solaris-checkbox-accent)}:host([data-disabled=true]) .solaris-checkbox{opacity:.55;cursor:not-allowed}:host([data-disabled=true]) .solaris-checkbox-control{border-color:color-mix(in srgb,var(--_border) 70%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4644
4644
|
}
|
|
4645
4645
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCheckbox, decorators: [{
|
|
4646
4646
|
type: Component,
|
|
@@ -4659,7 +4659,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
4659
4659
|
'[style.--solaris-checkbox-ink]': 'ink()',
|
|
4660
4660
|
'[attr.data-disabled]': 'disabled() ? "true" : null',
|
|
4661
4661
|
'[style.--solaris-checkbox-custom]': 'customAccent()',
|
|
4662
|
-
}, template: "<label class=\"solaris-checkbox\">\n <input\n #native\n class=\"solaris-
|
|
4662
|
+
}, template: "<label class=\"solaris-checkbox\">\n <input\n #native\n class=\"solaris-checkbox-native\"\n type=\"checkbox\"\n [attr.id]=\"id()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked() ? 'true' : 'false'\"\n (change)=\"onNativeChange(native.checked)\"\n (blur)=\"onBlur()\"\n />\n\n <span class=\"solaris-checkbox-control\" aria-hidden=\"true\">\n @if (variant() === 'icon') {\n <span class=\"solaris-checkbox-dot\" aria-hidden=\"true\"></span>\n } @else {\n <i\n class=\"ph solaris-checkbox-icon\"\n [class.ph-check]=\"!indeterminate()\"\n [class.ph-minus]=\"indeterminate()\"\n aria-hidden=\"true\"\n ></i>\n }\n </span>\n\n @if (variant() !== 'icon') {\n <span class=\"solaris-checkbox-content\"><ng-content /></span>\n }\n</label>\n\r\n", styles: [":host{--_hit: 2.4rem;--_size: var(--solaris-indicator-size-md);--_icon: var(--solaris-indicator-check-size-md);--_icon-ring: .5rem;--_text: var(--solaris-color-text);--_radius: var(--solaris-radius-sm);--_border: var(--solaris-color-border);--_muted: var(--solaris-color-text-muted);--solaris-checkbox-border: var(--_border);--solaris-checkbox-accent: var(--solaris-color-primary);--solaris-checkbox-on-accent: var(--solaris-color-primary-contrast)}:host([data-size=sm]){--_size: var(--solaris-indicator-size-sm);--_icon: var(--solaris-indicator-check-size-sm)}:host([data-size=md]){--_size: var(--solaris-indicator-size-md);--_icon: var(--solaris-indicator-check-size-md)}:host([data-size=lg]){--_size: var(--solaris-indicator-size-lg);--_icon: var(--solaris-indicator-check-size-lg)}:host([data-variant=round]),:host([data-variant=icon]){--_radius: var(--solaris-radius-full)}:host([data-color=primary]){--solaris-checkbox-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-checkbox-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-checkbox-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-checkbox-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-checkbox-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-checkbox-accent: var(--solaris-checkbox-custom, var(--solaris-color-primary))}.solaris-checkbox{gap:.8rem;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--_text);display:inline-flex;align-items:flex-start}.solaris-checkbox-native{opacity:0;width:1px;height:1px;position:absolute;pointer-events:none}.solaris-checkbox-control{inline-size:var(--_size);block-size:var(--_size);min-inline-size:var(--_size);min-block-size:var(--_size);aspect-ratio:1/1;display:inline-grid;box-sizing:border-box;line-height:0;border-radius:var(--_radius);border:var(--solaris-indicator-border-width) solid var(--solaris-checkbox-border);background:transparent;color:transparent;flex:0 0 auto;align-items:center;place-items:center}.solaris-checkbox-content{gap:.2rem;line-height:1.3;display:inline-flex;flex-direction:column}.solaris-checkbox-icon{display:block;flex:0 0 auto;line-height:1;font-size:var(--_icon);font-weight:700;opacity:0;pointer-events:none}.solaris-checkbox-native:checked+.solaris-checkbox-control .solaris-checkbox-icon,.solaris-checkbox-native:indeterminate+.solaris-checkbox-control .solaris-checkbox-icon{opacity:1}.solaris-checkbox-native:checked+.solaris-checkbox-control,.solaris-checkbox-native:indeterminate+.solaris-checkbox-control{border-color:var(--solaris-checkbox-accent)}:host([data-color=primary]) .solaris-checkbox-native:checked+.solaris-checkbox-control,:host([data-color=primary]) .solaris-checkbox-native:indeterminate+.solaris-checkbox-control{border-color:var(--solaris-color-primary-tint)}:host([data-appearance=outline]) .solaris-checkbox-native:checked+.solaris-checkbox-control,:host([data-appearance=outline]) .solaris-checkbox-native:indeterminate+.solaris-checkbox-control{background-color:transparent;color:var(--solaris-checkbox-ink, var(--solaris-checkbox-accent))}:host([data-appearance=solid]) .solaris-checkbox-native:checked+.solaris-checkbox-control,:host([data-appearance=solid]) .solaris-checkbox-native:indeterminate+.solaris-checkbox-control{background-color:var(--solaris-checkbox-accent);color:var(--solaris-checkbox-ink, var(--solaris-checkbox-on-accent))}:host([data-variant=icon]) .solaris-checkbox-control{padding:var(--_icon-ring);background-clip:content-box}.solaris-checkbox-native:focus-visible+.solaris-checkbox-control{outline-offset:.2rem;outline:.2rem solid var(--solaris-checkbox-accent)}:host([data-disabled=true]) .solaris-checkbox{opacity:.55;cursor:not-allowed}:host([data-disabled=true]) .solaris-checkbox-control{border-color:color-mix(in srgb,var(--_border) 70%,transparent)}\n"] }]
|
|
4663
4663
|
}], ctorParameters: () => [], propDecorators: { indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], checkColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkColor", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], indeterminateChange: [{ type: i0.Output, args: ["indeterminateChange"] }], native: [{
|
|
4664
4664
|
type: ViewChild,
|
|
4665
4665
|
args: ['native', { static: true }]
|
|
@@ -4799,8 +4799,8 @@ class SolarisTable {
|
|
|
4799
4799
|
widths[i] = manual;
|
|
4800
4800
|
continue;
|
|
4801
4801
|
}
|
|
4802
|
-
const headerCell = root.querySelector(`.solaris-
|
|
4803
|
-
const bodyCells = Array.from(root.querySelectorAll(`.solaris-
|
|
4802
|
+
const headerCell = root.querySelector(`.solaris-table-row-header [data-col-idx="${i}"]`);
|
|
4803
|
+
const bodyCells = Array.from(root.querySelectorAll(`.solaris-table-body [data-col-idx="${i}"]`));
|
|
4804
4804
|
const headerW = headerCell ? this.measureHeaderCellWidth(headerCell) : 0;
|
|
4805
4805
|
const bodyW = this.measureBodyCellsWidth(bodyCells);
|
|
4806
4806
|
const cap = this.toPx(col.maxWidth ?? '18rem', root);
|
|
@@ -4825,21 +4825,21 @@ class SolarisTable {
|
|
|
4825
4825
|
clone.style.pointerEvents = 'none';
|
|
4826
4826
|
clone.style.width = 'max-content';
|
|
4827
4827
|
clone.style.maxWidth = 'none';
|
|
4828
|
-
const resizer = clone.querySelector('.solaris-
|
|
4828
|
+
const resizer = clone.querySelector('.solaris-table-col-resizer');
|
|
4829
4829
|
if (resizer)
|
|
4830
4830
|
resizer.style.display = 'none';
|
|
4831
|
-
const headerContent = clone.querySelector('.solaris-
|
|
4831
|
+
const headerContent = clone.querySelector('.solaris-table-header-content');
|
|
4832
4832
|
if (headerContent) {
|
|
4833
4833
|
headerContent.style.width = 'max-content';
|
|
4834
4834
|
headerContent.style.justifyContent = 'flex-start';
|
|
4835
4835
|
}
|
|
4836
|
-
const left = clone.querySelector('.solaris-
|
|
4836
|
+
const left = clone.querySelector('.solaris-table-header-left');
|
|
4837
4837
|
if (left) {
|
|
4838
4838
|
left.style.overflow = 'visible';
|
|
4839
4839
|
left.style.maxWidth = 'none';
|
|
4840
4840
|
left.style.minWidth = '0';
|
|
4841
4841
|
}
|
|
4842
|
-
const text = clone.querySelector('.solaris-
|
|
4842
|
+
const text = clone.querySelector('.solaris-table-header-text');
|
|
4843
4843
|
if (text) {
|
|
4844
4844
|
text.style.maxWidth = 'none';
|
|
4845
4845
|
text.style.overflow = 'visible';
|
|
@@ -4847,7 +4847,7 @@ class SolarisTable {
|
|
|
4847
4847
|
text.style.whiteSpace = 'nowrap';
|
|
4848
4848
|
text.style.display = 'inline-block';
|
|
4849
4849
|
}
|
|
4850
|
-
const sortBtn = clone.querySelector('.solaris-
|
|
4850
|
+
const sortBtn = clone.querySelector('.solaris-table-sort-btn');
|
|
4851
4851
|
if (sortBtn)
|
|
4852
4852
|
sortBtn.style.width = 'max-content';
|
|
4853
4853
|
root.appendChild(clone);
|
|
@@ -4864,8 +4864,8 @@ class SolarisTable {
|
|
|
4864
4864
|
measureBodyCellWidth(cell) {
|
|
4865
4865
|
const style = getComputedStyle(cell);
|
|
4866
4866
|
const pad = Number.parseFloat(style.paddingLeft || '0') + Number.parseFloat(style.paddingRight || '0');
|
|
4867
|
-
const prefix = cell.querySelector('.solaris-
|
|
4868
|
-
const content = cell.querySelector('.solaris-
|
|
4867
|
+
const prefix = cell.querySelector('.solaris-row-select-prefix');
|
|
4868
|
+
const content = cell.querySelector('.solaris-row-content');
|
|
4869
4869
|
const prefixW = prefix?.scrollWidth ?? 0;
|
|
4870
4870
|
const contentW = content?.scrollWidth ?? cell.scrollWidth;
|
|
4871
4871
|
const gap = prefix ? 12 : 0;
|
|
@@ -4943,7 +4943,7 @@ class SolarisTable {
|
|
|
4943
4943
|
const root = this.tableRoot?.nativeElement;
|
|
4944
4944
|
if (!root)
|
|
4945
4945
|
return null;
|
|
4946
|
-
return root.querySelector(`.solaris-
|
|
4946
|
+
return root.querySelector(`.solaris-table-row-header [data-col-idx="${i}"]`);
|
|
4947
4947
|
}
|
|
4948
4948
|
pxMinWidth(c, root) {
|
|
4949
4949
|
return c.minWidth ? this.toPx(c.minWidth, root) : 0;
|
|
@@ -5174,7 +5174,7 @@ class SolarisTable {
|
|
|
5174
5174
|
.join(' ');
|
|
5175
5175
|
}
|
|
5176
5176
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5177
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisTable, isStandalone: true, selector: "solaris-table", inputs: { length: "length", pageIndex: "pageIndex", pageSize: "pageSize", rowsCount: "rowsCount", loading: "loading", sort: "sort", selectable: "selectable", tableDescription: "tableDescription", selection: "selection", variant: "variant", emptyIconClass: "emptyIconClass", pageSizeOptions: "pageSizeOptions", emptyTextKey: "emptyTextKey" }, outputs: { sortChange: "sortChange", pageChange: "pageChange", selectionChange: "selectionChange" }, host: { properties: { "attr.data-scroll": "needsScroll() ? \"true\" : null" }, classAttribute: "solaris-table-host" }, queries: [{ propertyName: "columnQuery", predicate: SolarisTableColumn }], viewQueries: [{ propertyName: "tableRoot", first: true, predicate: ["tableRoot"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content select=\"solaris-table-filters\"></ng-content>\n\n<div\n class=\"solaris-table\"\n [class.solaris-table--grid]=\"variant === 'grid'\"\n [class.solaris-table--zebra]=\"variant === 'zebra'\"\n>\n <div #tableRoot class=\"solaris-table__inner\" role=\"table\" [attr.aria-rowcount]=\"rowsCount\">\n <div class=\"solaris-table__header\" role=\"rowgroup\">\n <div\n class=\"solaris-table__row solaris-table__row--header\"\n role=\"row\"\n [style.gridTemplateColumns]=\"gridTemplateColumns()\"\n >\n @for (col of columns(); track col.id; let i = $index) {\n <div\n class=\"solaris-table__cell solaris-table__cell--header\"\n role=\"columnheader\"\n [attr.data-col-idx]=\"i\"\n [attr.aria-sort]=\"ariaSort(col)\"\n [style.--solaris-col-max]=\"col.maxWidth || null\"\n >\n <div class=\"solaris-table__header-content\">\n <span class=\"solaris-table__header-left\">\n @if (selectable && i === 0) {\n <span class=\"solaris-table__select-prefix\" (click)=\"$event.stopPropagation()\">\n <solaris-checkbox\n variant=\"square\"\n color=\"primary\"\n size=\"sm\"\n [ngModel]=\"selectAllChecked()\"\n (ngModelChange)=\"onToggleSelectAll($event)\"\n [indeterminate]=\"selectAllIndeterminate()\"\n >\n </solaris-checkbox>\n </span>\n }\n\n @if (col.headerIconClass) {\n <i [class]=\"col.headerIconClass\"></i>\n }\n\n @if (col.headerDef?.template) {\n <ng-container [ngTemplateOutlet]=\"col.headerDef?.template\"></ng-container>\n } @else {\n @if (col.headerKey) {\n <span class=\"solaris-table__header-text\">{{ col.headerKey | translate }}</span>\n } @else {\n <span class=\"solaris-table__header-text\">{{ col.header }}</span>\n }\n }\n </span>\n\n @if (col.sortable) {\n <button\n type=\"button\"\n class=\"solaris-table__sort-btn\"\n (click)=\"onHeaderSortClick($event, col)\"\n >\n <span class=\"solaris-table__sort\">\n <i\n class=\"ph ph-arrow-up\"\n [class.is-active]=\"getSortFor(col)?.direction === 'asc'\"\n ></i>\n <i\n class=\"ph ph-arrow-down\"\n [class.is-active]=\"getSortFor(col)?.direction === 'desc'\"\n ></i>\n\n @if (getSortFor(col)?.order && sortState().length > 1) {\n <span class=\"solaris-table__sort-order\">{{ getSortFor(col)!.order }}</span>\n }\n </span>\n </button>\n }\n </div>\n\n @if (col.resizable && !col.width) {\n <span\n class=\"solaris-table__col-resizer\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n (pointerdown)=\"onResizeStart($event, i)\"\n (dblclick)=\"clearManualWidth(i)\"\n (click)=\"$event.stopPropagation()\"\n >\n </span>\n }\n </div>\n }\n </div>\n </div>\n\n <div class=\"solaris-table__body\" role=\"rowgroup\">\n @if (loading) {\n <solaris-table-skeleton\n [rows]=\"pageSize\"\n [columns]=\"columns().length\"\n [selectable]=\"selectable\"\n [gridTemplateColumns]=\"gridTemplateColumns()\"\n >\n </solaris-table-skeleton>\n } @else {\n @if (rowsCount === 0) {\n <div class=\"solaris-table__empty\" role=\"row\">\n <i [class]=\"emptyIconClass\"></i>\n <div class=\"solaris-table__empty-text\">{{ 'ui.solaris.tables.empty' | translate }}</div>\n </div>\n } @else {\n <ng-content select=\"solaris-row\"></ng-content>\n }\n }\n </div>\n\n <div class=\"solaris-table__footer\" role=\"rowgroup\">\n <div class=\"solaris-table__footer-left\">\n @if (selectedCount() > 0) {\n <div class=\"solaris-table__selected\">\n {{ selectedCount() }} {{ 'ui.solaris.tables.selection.selected' | translate }}\n </div>\n } @else if (tableDescription != null) {\n <div class=\"solaris-table__description\">\n {{ tableDescription }}\n </div>\n }\n </div>\n\n <div class=\"solaris-table__footer-right\">\n <div class=\"solaris-table__rows-per-page\">\n <span>{{ 'ui.solaris.tables.pagination.rowsPerPage' | translate }}:</span>\n <select [ngModel]=\"pageSize\" (ngModelChange)=\"changePageSize($event)\">\n @for (opt of pageSizeOptions; track opt) {\n <option [ngValue]=\"opt\">{{ opt }}</option>\n }\n </select>\n </div>\n\n <div class=\"solaris-table__range\">\n {{ rangeStart }}\u2013{{ rangeEnd }} {{ 'ui.solaris.common.of' | translate }} {{ length }}\n </div>\n\n <div class=\"solaris-table__pager\">\n <button type=\"button\" (click)=\"firstPage()\" [disabled]=\"pageIndex === 0\">\n <i class=\"ph ph-caret-line-left\"></i>\n </button>\n <button type=\"button\" (click)=\"prevPage()\" [disabled]=\"pageIndex === 0\">\n <i class=\"ph ph-caret-left\"></i>\n </button>\n <button type=\"button\" (click)=\"nextPage()\" [disabled]=\"pageIndex >= totalPages - 1\">\n <i class=\"ph ph-caret-right\"></i>\n </button>\n <button type=\"button\" (click)=\"lastPage()\" [disabled]=\"pageIndex >= totalPages - 1\">\n <i class=\"ph ph-caret-line-right\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".solaris-table-host{display:block;color:var(--solaris-color-text);font-family:var(--solaris-font-sans-primary),system-ui}.solaris-table{--solaris-table-row-hover-bg: var(--solaris-color-surface-2);--solaris-table-row-selected-bg: var(--solaris-color-surface-2);overflow:hidden;box-shadow:var(--solaris-shadow-sm);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border)}.solaris-table--grid{--solaris-table-cell-divider: 1px solid var(--solaris-color-border)}.solaris-table--zebra{--solaris-table-cell-divider: 0px solid transparent}.solaris-table__inner{overflow-x:hidden}:host([data-scroll=true]) .solaris-table__inner{overflow-x:auto}.solaris-table__inner.is-resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}.solaris-table__row{width:100%;display:grid;min-height:3.25rem;align-items:stretch}.solaris-table__row--header{background:var(--solaris-color-surface-2);border-bottom:1px solid var(--solaris-color-border)}.solaris-table__cell{min-width:0;height:100%;display:flex;align-items:center;padding:var(--solaris-space-4);border-right:var(--solaris-table-cell-divider)}.solaris-table__cell,.solaris-row__cell{box-sizing:border-box}.solaris-table__cell:last-child{border-right:none}.solaris-table__cell--header{position:relative;padding:var(--solaris-space-3) var(--solaris-space-4)}.solaris-table__header-content{width:100%;min-width:0;align-items:center;display:inline-flex;gap:var(--solaris-space-2);justify-content:space-between}.solaris-table__header-left{min-width:0;overflow:hidden;align-items:center;display:inline-flex;gap:var(--solaris-space-2)}.solaris-table__header-left i.ph{font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted)}.solaris-table__select-prefix{flex:0 0 auto;align-items:center;display:inline-flex}.solaris-table__header-text{overflow:hidden;white-space:nowrap;display:inline-block;text-overflow:ellipsis;font-size:var(--solaris-fs-14);letter-spacing:var(--solaris-ls-sm);color:var(--solaris-color-text-muted);max-width:var(--solaris-col-max, 100%)}.solaris-table__sort-btn{border:none;flex:0 0 auto;cursor:pointer;background:transparent;padding:var(--solaris-space-1);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-sm)}.solaris-table__sort-btn:hover{background:var(--solaris-color-surface-2)}.solaris-table__sort{display:inline-flex;align-items:center;gap:var(--solaris-space-1)}.solaris-table__sort i{opacity:.45;transition:opacity var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard)}.solaris-table__sort i.is-active{opacity:1;color:var(--solaris-color-primary)}.solaris-table__sort-order{font-size:var(--solaris-fs-10);margin-left:var(--solaris-space-1);color:var(--solaris-color-text-muted)}.solaris-table__col-resizer{top:0;right:0;z-index:10;width:12px;height:100%;cursor:col-resize;touch-action:none;position:absolute;pointer-events:auto}.solaris-table__col-resizer:after{top:20%;left:50%;width:1px;content:\"\";height:60%;position:absolute;background:transparent;transform:translate(-50%);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-table__cell--header:hover .solaris-table__col-resizer:after{background:color-mix(in srgb,var(--solaris-color-border) 65%,transparent)}.solaris-table__body{background:var(--solaris-color-surface)}.solaris-table__empty{display:grid;place-items:center;gap:var(--solaris-space-3);padding:var(--solaris-space-8);color:var(--solaris-color-text-muted);border-bottom:1px solid var(--solaris-color-border)}.solaris-table__empty i{font-size:2rem}.solaris-table__empty-text{font-size:var(--solaris-fs-14)}.solaris-table__footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-space-4);justify-content:space-between;background:var(--solaris-color-surface);padding:var(--solaris-space-3) var(--solaris-space-4)}.solaris-table__footer-left,.solaris-table__footer-right{display:inline-flex;align-items:center;gap:var(--solaris-space-4)}.solaris-table__description,.solaris-table__selected{font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted)}.solaris-table__rows-per-page{display:inline-flex;align-items:center;gap:var(--solaris-space-2);margin-right:var(--solaris-space-8)}.solaris-table__rows-per-page span,.solaris-table__rows-per-page select{font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted)}.solaris-table__rows-per-page select{border:none;background:transparent}.solaris-table__range{font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted)}.solaris-table__pager{display:inline-flex;gap:var(--solaris-space-2)}.solaris-table__pager button{border:none;cursor:pointer;background:transparent;padding:var(--solaris-space-2);font-size:var(--solaris-fs-16);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-sm);transition:background var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard)}.solaris-table__pager button:hover:not(:disabled){background:var(--solaris-color-surface-2)}.solaris-table__pager button:disabled{opacity:.4;cursor:not-allowed}@media(max-width:768px){.solaris-table__row--header{display:none}.solaris-table__footer-left,.solaris-table__footer-right{width:100%;justify-content:space-between}.solaris-table__col-resizer{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SolarisCheckbox, selector: "solaris-checkbox", inputs: ["indeterminate", "ariaLabel", "size", "variant", "color", "id", "appearance", "checkColor"], outputs: ["checkedChange", "indeterminateChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SolarisTableSkeleton, selector: "solaris-table-skeleton", inputs: ["rows", "columns", "selectable", "gridTemplateColumns"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5177
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisTable, isStandalone: true, selector: "solaris-table", inputs: { length: "length", pageIndex: "pageIndex", pageSize: "pageSize", rowsCount: "rowsCount", loading: "loading", sort: "sort", selectable: "selectable", tableDescription: "tableDescription", selection: "selection", variant: "variant", emptyIconClass: "emptyIconClass", pageSizeOptions: "pageSizeOptions", emptyTextKey: "emptyTextKey" }, outputs: { sortChange: "sortChange", pageChange: "pageChange", selectionChange: "selectionChange" }, host: { properties: { "attr.data-scroll": "needsScroll() ? \"true\" : null" }, classAttribute: "solaris-table-host" }, queries: [{ propertyName: "columnQuery", predicate: SolarisTableColumn }], viewQueries: [{ propertyName: "tableRoot", first: true, predicate: ["tableRoot"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content select=\"solaris-table-filters\"></ng-content>\n\n<div class=\"solaris-table\" [class.solaris-table-grid]=\"variant === 'grid'\" [class.solaris-table-zebra]=\"variant === 'zebra'\">\n <div #tableRoot class=\"solaris-table-inner\" role=\"table\" [attr.aria-rowcount]=\"rowsCount\">\n <div class=\"solaris-table-header\" role=\"rowgroup\">\n <div class=\"solaris-table-row solaris-table-row-header\" role=\"row\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\n @for (col of columns(); track col.id; let i = $index) {\n <div class=\"solaris-table-cell solaris-table-cell-header\" role=\"columnheader\" [attr.data-col-idx]=\"i\"\n [attr.aria-sort]=\"ariaSort(col)\" [style.--solaris-col-max]=\"col.maxWidth || null\">\n <div class=\"solaris-table-header-content\">\n <span class=\"solaris-table-header-left\">\n @if (selectable && i === 0) {\n <span class=\"solaris-table-select-prefix\" (click)=\"$event.stopPropagation()\">\n <solaris-checkbox variant=\"square\" color=\"primary\" size=\"sm\" [ngModel]=\"selectAllChecked()\"\n (ngModelChange)=\"onToggleSelectAll($event)\" [indeterminate]=\"selectAllIndeterminate()\">\n </solaris-checkbox>\n </span>\n }\n\n @if (col.headerIconClass) {\n <i class=\"solaris-table-header-icon\" [ngClass]=\"col.headerIconClass\"></i>\n }\n\n @if (col.headerDef?.template) {\n <ng-container [ngTemplateOutlet]=\"col.headerDef?.template\"></ng-container>\n } @else {\n @if (col.headerKey) {\n <span class=\"solaris-table-header-text\">{{ col.headerKey | translate }}</span>\n } @else {\n <span class=\"solaris-table-header-text\">{{ col.header }}</span>\n }\n }\n </span>\n\n @if (col.sortable) {\n <button type=\"button\" class=\"solaris-table-sort-btn\" (click)=\"onHeaderSortClick($event, col)\">\n <span class=\"solaris-table-sort\">\n <i class=\"ph ph-arrow-up solaris-table-sort-icon\" [class.is-active]=\"getSortFor(col)?.direction === 'asc'\"></i>\n <i class=\"ph ph-arrow-down solaris-table-sort-icon\" [class.is-active]=\"getSortFor(col)?.direction === 'desc'\"></i>\n\n @if (getSortFor(col)?.order && sortState().length > 1) {\n <span class=\"solaris-table-sort-order\">{{ getSortFor(col)!.order }}</span>\n }\n </span>\n </button>\n }\n </div>\n\n @if (col.resizable && !col.width) {\n <span class=\"solaris-table-col-resizer\" role=\"separator\" aria-orientation=\"vertical\" (pointerdown)=\"onResizeStart($event, i)\"\n (dblclick)=\"clearManualWidth(i)\" (click)=\"$event.stopPropagation()\">\n </span>\n }\n </div>\n }\n </div>\n </div>\n\n <div class=\"solaris-table-body\" role=\"rowgroup\">\n @if (loading) {\n <solaris-table-skeleton [rows]=\"pageSize\" [columns]=\"columns().length\" [selectable]=\"selectable\"\n [gridTemplateColumns]=\"gridTemplateColumns()\">\n </solaris-table-skeleton>\n } @else {\n @if (rowsCount === 0) {\n <div class=\"solaris-table-empty\" role=\"row\">\n <i class=\"solaris-table-empty-icon\" [ngClass]=\"emptyIconClass\"></i>\n <div class=\"solaris-table-empty-text\">{{ 'ui.solaris.tables.empty' | translate }}</div>\n </div>\n } @else {\n <ng-content select=\"solaris-row\"></ng-content>\n }\n }\n </div>\n\n <div class=\"solaris-table-footer\" role=\"rowgroup\">\n <div class=\"solaris-table-footer-left\">\n @if (selectedCount() > 0) {\n <div class=\"solaris-table-selected\">\n {{ selectedCount() }} {{ 'ui.solaris.tables.selection.selected' | translate }}\n </div>\n } @else if (tableDescription != null) {\n <div class=\"solaris-table-description\">\n {{ tableDescription }}\n </div>\n }\n </div>\n\n <div class=\"solaris-table-footer-right\">\n <div class=\"solaris-table-rows-per-page\">\n <span class=\"solaris-table-rows-per-page-label\">\n {{ 'ui.solaris.tables.pagination.rowsPerPage' | translate }}:\n </span>\n <select\n class=\"solaris-table-rows-per-page-select\"\n [ngModel]=\"pageSize\"\n (ngModelChange)=\"changePageSize($event)\"\n >\n @for (opt of pageSizeOptions; track opt) {\n <option [ngValue]=\"opt\">{{ opt }}</option>\n }\n </select>\n </div>\n\n <div class=\"solaris-table-range\">\n {{ rangeStart }}\u00E2\u20AC\u201C{{ rangeEnd }} {{ 'ui.solaris.common.of' | translate }} {{ length }}\n </div>\n\n <div class=\"solaris-table-pager\">\n <button\n type=\"button\"\n class=\"solaris-table-pager-button\"\n (click)=\"firstPage()\"\n [disabled]=\"pageIndex === 0\"\n >\n <i class=\"ph ph-caret-line-left\"></i>\n </button>\n <button\n type=\"button\"\n class=\"solaris-table-pager-button\"\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 0\"\n >\n <i class=\"ph ph-caret-left\"></i>\n </button>\n <button\n type=\"button\"\n class=\"solaris-table-pager-button\"\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex >= totalPages - 1\"\n >\n <i class=\"ph ph-caret-right\"></i>\n </button>\n <button\n type=\"button\"\n class=\"solaris-table-pager-button\"\n (click)=\"lastPage()\"\n [disabled]=\"pageIndex >= totalPages - 1\"\n >\n <i class=\"ph ph-caret-line-right\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n", styles: [".solaris-table-host{display:block;color:var(--solaris-color-text);font-family:var(--solaris-font-sans-primary),system-ui}.solaris-table{--solaris-table-row-hover-bg: var(--solaris-color-surface-2);--solaris-table-row-selected-bg: var(--solaris-color-surface-2);overflow:hidden;box-shadow:var(--solaris-shadow-sm);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border)}.solaris-table-grid{--solaris-table-cell-divider: 1px solid var(--solaris-color-border)}.solaris-table-zebra{--solaris-table-cell-divider: 0px solid transparent}.solaris-table-inner{overflow-x:hidden}:host([data-scroll=true]) .solaris-table-inner{overflow-x:auto}.solaris-table-inner.is-resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}.solaris-table-row{width:100%;display:grid;min-height:3.25rem;align-items:stretch}.solaris-table-row-header{background:var(--solaris-color-surface-2);border-bottom:1px solid var(--solaris-color-border)}.solaris-table-cell{min-width:0;height:100%;display:flex;align-items:center;padding:var(--solaris-space-4);border-right:var(--solaris-table-cell-divider)}.solaris-table-cell,.solaris-row-cell{box-sizing:border-box}.solaris-table-cell:last-child{border-right:none}.solaris-table-cell-header{position:relative;padding:var(--solaris-space-3) var(--solaris-space-4)}.solaris-table-header-content{width:100%;min-width:0;align-items:center;display:inline-flex;gap:var(--solaris-space-2);justify-content:space-between}.solaris-table-header-left{min-width:0;overflow:hidden;align-items:center;display:inline-flex;gap:var(--solaris-space-2)}.solaris-table-header-icon{font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted)}.solaris-table-select-prefix{flex:0 0 auto;align-items:center;display:inline-flex}.solaris-table-header-text{overflow:hidden;white-space:nowrap;display:inline-block;text-overflow:ellipsis;font-size:var(--solaris-fs-14);letter-spacing:var(--solaris-ls-sm);color:var(--solaris-color-text-muted);max-width:var(--solaris-col-max, 100%)}.solaris-table-sort-btn{border:none;flex:0 0 auto;cursor:pointer;background:transparent;padding:var(--solaris-space-1);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-sm)}.solaris-table-sort-btn:hover{background:var(--solaris-color-surface-2)}.solaris-table-sort{display:inline-flex;align-items:center;gap:var(--solaris-space-1)}.solaris-table-sort-icon{opacity:.45;transition:opacity var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard)}.solaris-table-sort-icon.is-active{opacity:1;color:var(--solaris-color-primary)}.solaris-table-sort-order{font-size:var(--solaris-fs-10);margin-left:var(--solaris-space-1);color:var(--solaris-color-text-muted)}.solaris-table-col-resizer{top:0;right:0;z-index:10;width:12px;height:100%;cursor:col-resize;touch-action:none;position:absolute;pointer-events:auto}.solaris-table-col-resizer:after{top:20%;left:50%;width:1px;content:\"\";height:60%;position:absolute;background:transparent;transform:translate(-50%);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-table-cell-header:hover .solaris-table-col-resizer:after{background:color-mix(in srgb,var(--solaris-color-border) 65%,transparent)}.solaris-table-body{background:var(--solaris-color-surface)}.solaris-table-empty{display:grid;place-items:center;gap:var(--solaris-space-3);padding:var(--solaris-space-8);color:var(--solaris-color-text-muted);border-bottom:1px solid var(--solaris-color-border)}.solaris-table-empty-icon{font-size:2rem}.solaris-table-empty-text{font-size:var(--solaris-fs-14)}.solaris-table-footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-space-4);justify-content:space-between;background:var(--solaris-color-surface);padding:var(--solaris-space-3) var(--solaris-space-4)}.solaris-table-footer-left,.solaris-table-footer-right{display:inline-flex;align-items:center;gap:var(--solaris-space-4)}.solaris-table-description,.solaris-table-selected{font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted)}.solaris-table-rows-per-page{display:inline-flex;align-items:center;gap:var(--solaris-space-2);margin-right:var(--solaris-space-8)}.solaris-table-rows-per-page-label,.solaris-table-rows-per-page-select{font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted)}.solaris-table-rows-per-page-select{border:none;background:transparent}.solaris-table-range{font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted)}.solaris-table-pager{display:inline-flex;gap:var(--solaris-space-2)}.solaris-table-pager-button{border:none;cursor:pointer;background:transparent;padding:var(--solaris-space-2);font-size:var(--solaris-fs-16);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-sm);transition:background var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard)}.solaris-table-pager-button:hover:not(:disabled){background:var(--solaris-color-surface-2)}.solaris-table-pager-button:disabled{opacity:.4;cursor:not-allowed}@media(max-width:768px){.solaris-table-row-header{display:none}.solaris-table-footer-left,.solaris-table-footer-right{width:100%;justify-content:space-between}.solaris-table-col-resizer{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SolarisCheckbox, selector: "solaris-checkbox", inputs: ["indeterminate", "ariaLabel", "size", "variant", "color", "id", "appearance", "checkColor"], outputs: ["checkedChange", "indeterminateChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SolarisTableSkeleton, selector: "solaris-table-skeleton", inputs: ["rows", "columns", "selectable", "gridTemplateColumns"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5178
5178
|
}
|
|
5179
5179
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisTable, decorators: [{
|
|
5180
5180
|
type: Component,
|
|
@@ -5184,10 +5184,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
5184
5184
|
NgTemplateOutlet,
|
|
5185
5185
|
SolarisTableSkeleton,
|
|
5186
5186
|
SolarisTranslationPipe,
|
|
5187
|
+
NgClass
|
|
5187
5188
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
5188
5189
|
class: 'solaris-table-host',
|
|
5189
5190
|
'[attr.data-scroll]': 'needsScroll() ? "true" : null',
|
|
5190
|
-
}, template: "<ng-content select=\"solaris-table-filters\"></ng-content>\n\n<div\n class=\"solaris-table\"\n [class.solaris-table--grid]=\"variant === 'grid'\"\n [class.solaris-table--zebra]=\"variant === 'zebra'\"\n>\n <div #tableRoot class=\"solaris-table__inner\" role=\"table\" [attr.aria-rowcount]=\"rowsCount\">\n <div class=\"solaris-table__header\" role=\"rowgroup\">\n <div\n class=\"solaris-table__row solaris-table__row--header\"\n role=\"row\"\n [style.gridTemplateColumns]=\"gridTemplateColumns()\"\n >\n @for (col of columns(); track col.id; let i = $index) {\n <div\n class=\"solaris-table__cell solaris-table__cell--header\"\n role=\"columnheader\"\n [attr.data-col-idx]=\"i\"\n [attr.aria-sort]=\"ariaSort(col)\"\n [style.--solaris-col-max]=\"col.maxWidth || null\"\n >\n <div class=\"solaris-table__header-content\">\n <span class=\"solaris-table__header-left\">\n @if (selectable && i === 0) {\n <span class=\"solaris-table__select-prefix\" (click)=\"$event.stopPropagation()\">\n <solaris-checkbox\n variant=\"square\"\n color=\"primary\"\n size=\"sm\"\n [ngModel]=\"selectAllChecked()\"\n (ngModelChange)=\"onToggleSelectAll($event)\"\n [indeterminate]=\"selectAllIndeterminate()\"\n >\n </solaris-checkbox>\n </span>\n }\n\n @if (col.headerIconClass) {\n <i [class]=\"col.headerIconClass\"></i>\n }\n\n @if (col.headerDef?.template) {\n <ng-container [ngTemplateOutlet]=\"col.headerDef?.template\"></ng-container>\n } @else {\n @if (col.headerKey) {\n <span class=\"solaris-table__header-text\">{{ col.headerKey | translate }}</span>\n } @else {\n <span class=\"solaris-table__header-text\">{{ col.header }}</span>\n }\n }\n </span>\n\n @if (col.sortable) {\n <button\n type=\"button\"\n class=\"solaris-table__sort-btn\"\n (click)=\"onHeaderSortClick($event, col)\"\n >\n <span class=\"solaris-table__sort\">\n <i\n class=\"ph ph-arrow-up\"\n [class.is-active]=\"getSortFor(col)?.direction === 'asc'\"\n ></i>\n <i\n class=\"ph ph-arrow-down\"\n [class.is-active]=\"getSortFor(col)?.direction === 'desc'\"\n ></i>\n\n @if (getSortFor(col)?.order && sortState().length > 1) {\n <span class=\"solaris-table__sort-order\">{{ getSortFor(col)!.order }}</span>\n }\n </span>\n </button>\n }\n </div>\n\n @if (col.resizable && !col.width) {\n <span\n class=\"solaris-table__col-resizer\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n (pointerdown)=\"onResizeStart($event, i)\"\n (dblclick)=\"clearManualWidth(i)\"\n (click)=\"$event.stopPropagation()\"\n >\n </span>\n }\n </div>\n }\n </div>\n </div>\n\n <div class=\"solaris-table__body\" role=\"rowgroup\">\n @if (loading) {\n <solaris-table-skeleton\n [rows]=\"pageSize\"\n [columns]=\"columns().length\"\n [selectable]=\"selectable\"\n [gridTemplateColumns]=\"gridTemplateColumns()\"\n >\n </solaris-table-skeleton>\n } @else {\n @if (rowsCount === 0) {\n <div class=\"solaris-table__empty\" role=\"row\">\n <i [class]=\"emptyIconClass\"></i>\n <div class=\"solaris-table__empty-text\">{{ 'ui.solaris.tables.empty' | translate }}</div>\n </div>\n } @else {\n <ng-content select=\"solaris-row\"></ng-content>\n }\n }\n </div>\n\n <div class=\"solaris-table__footer\" role=\"rowgroup\">\n <div class=\"solaris-table__footer-left\">\n @if (selectedCount() > 0) {\n <div class=\"solaris-table__selected\">\n {{ selectedCount() }} {{ 'ui.solaris.tables.selection.selected' | translate }}\n </div>\n } @else if (tableDescription != null) {\n <div class=\"solaris-table__description\">\n {{ tableDescription }}\n </div>\n }\n </div>\n\n <div class=\"solaris-table__footer-right\">\n <div class=\"solaris-table__rows-per-page\">\n <span>{{ 'ui.solaris.tables.pagination.rowsPerPage' | translate }}:</span>\n <select [ngModel]=\"pageSize\" (ngModelChange)=\"changePageSize($event)\">\n @for (opt of pageSizeOptions; track opt) {\n <option [ngValue]=\"opt\">{{ opt }}</option>\n }\n </select>\n </div>\n\n <div class=\"solaris-table__range\">\n {{ rangeStart }}\u2013{{ rangeEnd }} {{ 'ui.solaris.common.of' | translate }} {{ length }}\n </div>\n\n <div class=\"solaris-table__pager\">\n <button type=\"button\" (click)=\"firstPage()\" [disabled]=\"pageIndex === 0\">\n <i class=\"ph ph-caret-line-left\"></i>\n </button>\n <button type=\"button\" (click)=\"prevPage()\" [disabled]=\"pageIndex === 0\">\n <i class=\"ph ph-caret-left\"></i>\n </button>\n <button type=\"button\" (click)=\"nextPage()\" [disabled]=\"pageIndex >= totalPages - 1\">\n <i class=\"ph ph-caret-right\"></i>\n </button>\n <button type=\"button\" (click)=\"lastPage()\" [disabled]=\"pageIndex >= totalPages - 1\">\n <i class=\"ph ph-caret-line-right\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".solaris-table-host{display:block;color:var(--solaris-color-text);font-family:var(--solaris-font-sans-primary),system-ui}.solaris-table{--solaris-table-row-hover-bg: var(--solaris-color-surface-2);--solaris-table-row-selected-bg: var(--solaris-color-surface-2);overflow:hidden;box-shadow:var(--solaris-shadow-sm);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border)}.solaris-table--grid{--solaris-table-cell-divider: 1px solid var(--solaris-color-border)}.solaris-table--zebra{--solaris-table-cell-divider: 0px solid transparent}.solaris-table__inner{overflow-x:hidden}:host([data-scroll=true]) .solaris-table__inner{overflow-x:auto}.solaris-table__inner.is-resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}.solaris-table__row{width:100%;display:grid;min-height:3.25rem;align-items:stretch}.solaris-table__row--header{background:var(--solaris-color-surface-2);border-bottom:1px solid var(--solaris-color-border)}.solaris-table__cell{min-width:0;height:100%;display:flex;align-items:center;padding:var(--solaris-space-4);border-right:var(--solaris-table-cell-divider)}.solaris-table__cell,.solaris-row__cell{box-sizing:border-box}.solaris-table__cell:last-child{border-right:none}.solaris-table__cell--header{position:relative;padding:var(--solaris-space-3) var(--solaris-space-4)}.solaris-table__header-content{width:100%;min-width:0;align-items:center;display:inline-flex;gap:var(--solaris-space-2);justify-content:space-between}.solaris-table__header-left{min-width:0;overflow:hidden;align-items:center;display:inline-flex;gap:var(--solaris-space-2)}.solaris-table__header-left i.ph{font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted)}.solaris-table__select-prefix{flex:0 0 auto;align-items:center;display:inline-flex}.solaris-table__header-text{overflow:hidden;white-space:nowrap;display:inline-block;text-overflow:ellipsis;font-size:var(--solaris-fs-14);letter-spacing:var(--solaris-ls-sm);color:var(--solaris-color-text-muted);max-width:var(--solaris-col-max, 100%)}.solaris-table__sort-btn{border:none;flex:0 0 auto;cursor:pointer;background:transparent;padding:var(--solaris-space-1);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-sm)}.solaris-table__sort-btn:hover{background:var(--solaris-color-surface-2)}.solaris-table__sort{display:inline-flex;align-items:center;gap:var(--solaris-space-1)}.solaris-table__sort i{opacity:.45;transition:opacity var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard)}.solaris-table__sort i.is-active{opacity:1;color:var(--solaris-color-primary)}.solaris-table__sort-order{font-size:var(--solaris-fs-10);margin-left:var(--solaris-space-1);color:var(--solaris-color-text-muted)}.solaris-table__col-resizer{top:0;right:0;z-index:10;width:12px;height:100%;cursor:col-resize;touch-action:none;position:absolute;pointer-events:auto}.solaris-table__col-resizer:after{top:20%;left:50%;width:1px;content:\"\";height:60%;position:absolute;background:transparent;transform:translate(-50%);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-table__cell--header:hover .solaris-table__col-resizer:after{background:color-mix(in srgb,var(--solaris-color-border) 65%,transparent)}.solaris-table__body{background:var(--solaris-color-surface)}.solaris-table__empty{display:grid;place-items:center;gap:var(--solaris-space-3);padding:var(--solaris-space-8);color:var(--solaris-color-text-muted);border-bottom:1px solid var(--solaris-color-border)}.solaris-table__empty i{font-size:2rem}.solaris-table__empty-text{font-size:var(--solaris-fs-14)}.solaris-table__footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-space-4);justify-content:space-between;background:var(--solaris-color-surface);padding:var(--solaris-space-3) var(--solaris-space-4)}.solaris-table__footer-left,.solaris-table__footer-right{display:inline-flex;align-items:center;gap:var(--solaris-space-4)}.solaris-table__description,.solaris-table__selected{font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted)}.solaris-table__rows-per-page{display:inline-flex;align-items:center;gap:var(--solaris-space-2);margin-right:var(--solaris-space-8)}.solaris-table__rows-per-page span,.solaris-table__rows-per-page select{font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted)}.solaris-table__rows-per-page select{border:none;background:transparent}.solaris-table__range{font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted)}.solaris-table__pager{display:inline-flex;gap:var(--solaris-space-2)}.solaris-table__pager button{border:none;cursor:pointer;background:transparent;padding:var(--solaris-space-2);font-size:var(--solaris-fs-16);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-sm);transition:background var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard)}.solaris-table__pager button:hover:not(:disabled){background:var(--solaris-color-surface-2)}.solaris-table__pager button:disabled{opacity:.4;cursor:not-allowed}@media(max-width:768px){.solaris-table__row--header{display:none}.solaris-table__footer-left,.solaris-table__footer-right{width:100%;justify-content:space-between}.solaris-table__col-resizer{display:none}}\n"] }]
|
|
5191
|
+
}, template: "<ng-content select=\"solaris-table-filters\"></ng-content>\n\n<div class=\"solaris-table\" [class.solaris-table-grid]=\"variant === 'grid'\" [class.solaris-table-zebra]=\"variant === 'zebra'\">\n <div #tableRoot class=\"solaris-table-inner\" role=\"table\" [attr.aria-rowcount]=\"rowsCount\">\n <div class=\"solaris-table-header\" role=\"rowgroup\">\n <div class=\"solaris-table-row solaris-table-row-header\" role=\"row\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\n @for (col of columns(); track col.id; let i = $index) {\n <div class=\"solaris-table-cell solaris-table-cell-header\" role=\"columnheader\" [attr.data-col-idx]=\"i\"\n [attr.aria-sort]=\"ariaSort(col)\" [style.--solaris-col-max]=\"col.maxWidth || null\">\n <div class=\"solaris-table-header-content\">\n <span class=\"solaris-table-header-left\">\n @if (selectable && i === 0) {\n <span class=\"solaris-table-select-prefix\" (click)=\"$event.stopPropagation()\">\n <solaris-checkbox variant=\"square\" color=\"primary\" size=\"sm\" [ngModel]=\"selectAllChecked()\"\n (ngModelChange)=\"onToggleSelectAll($event)\" [indeterminate]=\"selectAllIndeterminate()\">\n </solaris-checkbox>\n </span>\n }\n\n @if (col.headerIconClass) {\n <i class=\"solaris-table-header-icon\" [ngClass]=\"col.headerIconClass\"></i>\n }\n\n @if (col.headerDef?.template) {\n <ng-container [ngTemplateOutlet]=\"col.headerDef?.template\"></ng-container>\n } @else {\n @if (col.headerKey) {\n <span class=\"solaris-table-header-text\">{{ col.headerKey | translate }}</span>\n } @else {\n <span class=\"solaris-table-header-text\">{{ col.header }}</span>\n }\n }\n </span>\n\n @if (col.sortable) {\n <button type=\"button\" class=\"solaris-table-sort-btn\" (click)=\"onHeaderSortClick($event, col)\">\n <span class=\"solaris-table-sort\">\n <i class=\"ph ph-arrow-up solaris-table-sort-icon\" [class.is-active]=\"getSortFor(col)?.direction === 'asc'\"></i>\n <i class=\"ph ph-arrow-down solaris-table-sort-icon\" [class.is-active]=\"getSortFor(col)?.direction === 'desc'\"></i>\n\n @if (getSortFor(col)?.order && sortState().length > 1) {\n <span class=\"solaris-table-sort-order\">{{ getSortFor(col)!.order }}</span>\n }\n </span>\n </button>\n }\n </div>\n\n @if (col.resizable && !col.width) {\n <span class=\"solaris-table-col-resizer\" role=\"separator\" aria-orientation=\"vertical\" (pointerdown)=\"onResizeStart($event, i)\"\n (dblclick)=\"clearManualWidth(i)\" (click)=\"$event.stopPropagation()\">\n </span>\n }\n </div>\n }\n </div>\n </div>\n\n <div class=\"solaris-table-body\" role=\"rowgroup\">\n @if (loading) {\n <solaris-table-skeleton [rows]=\"pageSize\" [columns]=\"columns().length\" [selectable]=\"selectable\"\n [gridTemplateColumns]=\"gridTemplateColumns()\">\n </solaris-table-skeleton>\n } @else {\n @if (rowsCount === 0) {\n <div class=\"solaris-table-empty\" role=\"row\">\n <i class=\"solaris-table-empty-icon\" [ngClass]=\"emptyIconClass\"></i>\n <div class=\"solaris-table-empty-text\">{{ 'ui.solaris.tables.empty' | translate }}</div>\n </div>\n } @else {\n <ng-content select=\"solaris-row\"></ng-content>\n }\n }\n </div>\n\n <div class=\"solaris-table-footer\" role=\"rowgroup\">\n <div class=\"solaris-table-footer-left\">\n @if (selectedCount() > 0) {\n <div class=\"solaris-table-selected\">\n {{ selectedCount() }} {{ 'ui.solaris.tables.selection.selected' | translate }}\n </div>\n } @else if (tableDescription != null) {\n <div class=\"solaris-table-description\">\n {{ tableDescription }}\n </div>\n }\n </div>\n\n <div class=\"solaris-table-footer-right\">\n <div class=\"solaris-table-rows-per-page\">\n <span class=\"solaris-table-rows-per-page-label\">\n {{ 'ui.solaris.tables.pagination.rowsPerPage' | translate }}:\n </span>\n <select\n class=\"solaris-table-rows-per-page-select\"\n [ngModel]=\"pageSize\"\n (ngModelChange)=\"changePageSize($event)\"\n >\n @for (opt of pageSizeOptions; track opt) {\n <option [ngValue]=\"opt\">{{ opt }}</option>\n }\n </select>\n </div>\n\n <div class=\"solaris-table-range\">\n {{ rangeStart }}\u00E2\u20AC\u201C{{ rangeEnd }} {{ 'ui.solaris.common.of' | translate }} {{ length }}\n </div>\n\n <div class=\"solaris-table-pager\">\n <button\n type=\"button\"\n class=\"solaris-table-pager-button\"\n (click)=\"firstPage()\"\n [disabled]=\"pageIndex === 0\"\n >\n <i class=\"ph ph-caret-line-left\"></i>\n </button>\n <button\n type=\"button\"\n class=\"solaris-table-pager-button\"\n (click)=\"prevPage()\"\n [disabled]=\"pageIndex === 0\"\n >\n <i class=\"ph ph-caret-left\"></i>\n </button>\n <button\n type=\"button\"\n class=\"solaris-table-pager-button\"\n (click)=\"nextPage()\"\n [disabled]=\"pageIndex >= totalPages - 1\"\n >\n <i class=\"ph ph-caret-right\"></i>\n </button>\n <button\n type=\"button\"\n class=\"solaris-table-pager-button\"\n (click)=\"lastPage()\"\n [disabled]=\"pageIndex >= totalPages - 1\"\n >\n <i class=\"ph ph-caret-line-right\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n", styles: [".solaris-table-host{display:block;color:var(--solaris-color-text);font-family:var(--solaris-font-sans-primary),system-ui}.solaris-table{--solaris-table-row-hover-bg: var(--solaris-color-surface-2);--solaris-table-row-selected-bg: var(--solaris-color-surface-2);overflow:hidden;box-shadow:var(--solaris-shadow-sm);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border)}.solaris-table-grid{--solaris-table-cell-divider: 1px solid var(--solaris-color-border)}.solaris-table-zebra{--solaris-table-cell-divider: 0px solid transparent}.solaris-table-inner{overflow-x:hidden}:host([data-scroll=true]) .solaris-table-inner{overflow-x:auto}.solaris-table-inner.is-resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}.solaris-table-row{width:100%;display:grid;min-height:3.25rem;align-items:stretch}.solaris-table-row-header{background:var(--solaris-color-surface-2);border-bottom:1px solid var(--solaris-color-border)}.solaris-table-cell{min-width:0;height:100%;display:flex;align-items:center;padding:var(--solaris-space-4);border-right:var(--solaris-table-cell-divider)}.solaris-table-cell,.solaris-row-cell{box-sizing:border-box}.solaris-table-cell:last-child{border-right:none}.solaris-table-cell-header{position:relative;padding:var(--solaris-space-3) var(--solaris-space-4)}.solaris-table-header-content{width:100%;min-width:0;align-items:center;display:inline-flex;gap:var(--solaris-space-2);justify-content:space-between}.solaris-table-header-left{min-width:0;overflow:hidden;align-items:center;display:inline-flex;gap:var(--solaris-space-2)}.solaris-table-header-icon{font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted)}.solaris-table-select-prefix{flex:0 0 auto;align-items:center;display:inline-flex}.solaris-table-header-text{overflow:hidden;white-space:nowrap;display:inline-block;text-overflow:ellipsis;font-size:var(--solaris-fs-14);letter-spacing:var(--solaris-ls-sm);color:var(--solaris-color-text-muted);max-width:var(--solaris-col-max, 100%)}.solaris-table-sort-btn{border:none;flex:0 0 auto;cursor:pointer;background:transparent;padding:var(--solaris-space-1);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-sm)}.solaris-table-sort-btn:hover{background:var(--solaris-color-surface-2)}.solaris-table-sort{display:inline-flex;align-items:center;gap:var(--solaris-space-1)}.solaris-table-sort-icon{opacity:.45;transition:opacity var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard)}.solaris-table-sort-icon.is-active{opacity:1;color:var(--solaris-color-primary)}.solaris-table-sort-order{font-size:var(--solaris-fs-10);margin-left:var(--solaris-space-1);color:var(--solaris-color-text-muted)}.solaris-table-col-resizer{top:0;right:0;z-index:10;width:12px;height:100%;cursor:col-resize;touch-action:none;position:absolute;pointer-events:auto}.solaris-table-col-resizer:after{top:20%;left:50%;width:1px;content:\"\";height:60%;position:absolute;background:transparent;transform:translate(-50%);transition:background var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-table-cell-header:hover .solaris-table-col-resizer:after{background:color-mix(in srgb,var(--solaris-color-border) 65%,transparent)}.solaris-table-body{background:var(--solaris-color-surface)}.solaris-table-empty{display:grid;place-items:center;gap:var(--solaris-space-3);padding:var(--solaris-space-8);color:var(--solaris-color-text-muted);border-bottom:1px solid var(--solaris-color-border)}.solaris-table-empty-icon{font-size:2rem}.solaris-table-empty-text{font-size:var(--solaris-fs-14)}.solaris-table-footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-space-4);justify-content:space-between;background:var(--solaris-color-surface);padding:var(--solaris-space-3) var(--solaris-space-4)}.solaris-table-footer-left,.solaris-table-footer-right{display:inline-flex;align-items:center;gap:var(--solaris-space-4)}.solaris-table-description,.solaris-table-selected{font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted)}.solaris-table-rows-per-page{display:inline-flex;align-items:center;gap:var(--solaris-space-2);margin-right:var(--solaris-space-8)}.solaris-table-rows-per-page-label,.solaris-table-rows-per-page-select{font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted)}.solaris-table-rows-per-page-select{border:none;background:transparent}.solaris-table-range{font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted)}.solaris-table-pager{display:inline-flex;gap:var(--solaris-space-2)}.solaris-table-pager-button{border:none;cursor:pointer;background:transparent;padding:var(--solaris-space-2);font-size:var(--solaris-fs-16);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-sm);transition:background var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-sm) var(--solaris-motion-ease-standard)}.solaris-table-pager-button:hover:not(:disabled){background:var(--solaris-color-surface-2)}.solaris-table-pager-button:disabled{opacity:.4;cursor:not-allowed}@media(max-width:768px){.solaris-table-row-header{display:none}.solaris-table-footer-left,.solaris-table-footer-right{width:100%;justify-content:space-between}.solaris-table-col-resizer{display:none}}\n"] }]
|
|
5191
5192
|
}], propDecorators: { length: [{
|
|
5192
5193
|
type: Input
|
|
5193
5194
|
}], pageIndex: [{
|
|
@@ -5252,11 +5253,11 @@ class SolarisRowComponent {
|
|
|
5252
5253
|
return this.table.isSelected(this.rowKey);
|
|
5253
5254
|
}
|
|
5254
5255
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisRowComponent, deps: [{ token: SolarisTable, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
5255
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisRowComponent, isStandalone: true, selector: "solaris-row", inputs: { rowKey: "rowKey", value: "value" }, host: { classAttribute: "solaris-row-host" }, ngImport: i0, template: "<div\n class=\"solaris-row\"\n role=\"row\"\n [attr.aria-selected]=\"isSelected\"\n [class.is-selected]=\"isSelected\"\n [style.gridTemplateColumns]=\"table.gridTemplateColumns()\"\n>\n @for (col of table.columns(); track col.id; let i = $index) {\n <div\n class=\"solaris-
|
|
5256
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisRowComponent, isStandalone: true, selector: "solaris-row", inputs: { rowKey: "rowKey", value: "value" }, host: { classAttribute: "solaris-row-host" }, ngImport: i0, template: "<div\n class=\"solaris-row\"\n role=\"row\"\n [attr.aria-selected]=\"isSelected\"\n [class.is-selected]=\"isSelected\"\n [style.gridTemplateColumns]=\"table.gridTemplateColumns()\"\n>\n @for (col of table.columns(); track col.id; let i = $index) {\n <div\n class=\"solaris-row-cell\"\n role=\"cell\"\n [attr.data-col-idx]=\"i\"\n [class.align-end]=\"col.align === 'end'\"\n [class.align-center]=\"col.align === 'center'\"\n [style.--solaris-col-max]=\"col.maxWidth || null\"\n >\n @if (table.selectable && i === 0) {\n <span class=\"solaris-row-select-prefix\">\n <solaris-checkbox\n variant=\"square\"\n color=\"primary\"\n size=\"sm\"\n [ngModel]=\"isSelected\"\n (ngModelChange)=\"table.toggleRow(rowKey, $event)\"\n [attr.aria-label]=\"'ui.solaris.tables.aria.selectRow' | translate\"\n />\n </span>\n }\n\n <span class=\"solaris-row-label\">\n @if (col.headerKey) {\n {{ col.headerKey | translate }}\n } @else {\n {{ col.header }}\n }\n </span>\n\n <span class=\"solaris-row-content\">\n @if (col.cellDef?.template) {\n <ng-container\n [ngTemplateOutlet]=\"col.cellDef!.template\"\n [ngTemplateOutletContext]=\"{ $implicit: value, row: value, col: col }\"\n />\n } @else {\n {{ table.readField(value, col.field) }}\n }\n </span>\n </div>\n }\n</div>\n\r\n", styles: [":host{display:block;--solaris-table-row-bg: transparent;--solaris-table-row-bg-hover: var(--solaris-table-row-hover-bg, var(--solaris-color-surface-2))}:host-context(.solaris-table-zebra):nth-child(2n){--solaris-table-row-bg: var(--solaris-color-surface-2)}:host-context(.solaris-table-zebra):nth-child(odd){--solaris-table-row-bg: var(--solaris-color-surface)}@supports (color: color-mix(in srgb,black 50%,white)){:host-context(.solaris-table-zebra):nth-child(2n){--solaris-table-row-bg-hover: color-mix( in srgb, var(--solaris-color-surface-2) 40%, var(--solaris-color-surface) )}:host-context(.solaris-table-zebra):nth-child(odd){--solaris-table-row-bg-hover: color-mix( in srgb, var(--solaris-color-surface) 40%, var(--solaris-color-surface-2) )}}.solaris-row{display:grid;align-items:stretch;background:var(--solaris-table-row-bg);transition:background var(--solaris-motion-duration-xslow) var(--solaris-motion-ease-in-out);border-bottom:1px solid var(--solaris-color-border)}.solaris-row:hover{background:var(--solaris-table-row-bg-hover)}.solaris-row.is-selected,.solaris-row.is-selected:hover{background:var(--solaris-table-row-selected-bg)}.solaris-row-cell{min-width:0;display:flex;align-items:center;align-self:stretch;gap:var(--solaris-space-3);padding:var(--solaris-space-4);border-right:var(--solaris-table-cell-divider)}.solaris-row-cell:last-child{border-right:none}.solaris-row-cell-select{justify-content:center}.align-end{justify-content:flex-end;text-align:right}.align-center{justify-content:center;text-align:center}.solaris-row-label{display:none;font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-row-content{overflow:hidden;white-space:nowrap;display:inline-block;text-overflow:ellipsis;font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted);max-width:var(--solaris-col-max, 100%)}.solaris-row-select-prefix{flex:0 0 auto;align-items:center;display:inline-flex}@media(max-width:768px){.solaris-row{display:block;border-bottom:none;padding:var(--solaris-space-4)}.solaris-row-cell{border-right:none;padding:var(--solaris-space-2) 0;align-items:flex-start;justify-content:space-between}.solaris-row-cell-select{justify-content:flex-end;padding-top:0}.solaris-row-label{display:inline;min-width:9rem}.solaris-row-content{max-width:100%;overflow:hidden;white-space:nowrap;display:inline-block;text-overflow:ellipsis}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SolarisCheckbox, selector: "solaris-checkbox", inputs: ["indeterminate", "ariaLabel", "size", "variant", "color", "id", "appearance", "checkColor"], outputs: ["checkedChange", "indeterminateChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5256
5257
|
}
|
|
5257
5258
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisRowComponent, decorators: [{
|
|
5258
5259
|
type: Component,
|
|
5259
|
-
args: [{ selector: 'solaris-row', standalone: true, imports: [FormsModule, SolarisCheckbox, SolarisTranslationPipe, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'solaris-row-host' }, template: "<div\n class=\"solaris-row\"\n role=\"row\"\n [attr.aria-selected]=\"isSelected\"\n [class.is-selected]=\"isSelected\"\n [style.gridTemplateColumns]=\"table.gridTemplateColumns()\"\n>\n @for (col of table.columns(); track col.id; let i = $index) {\n <div\n class=\"solaris-
|
|
5260
|
+
args: [{ selector: 'solaris-row', standalone: true, imports: [FormsModule, SolarisCheckbox, SolarisTranslationPipe, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'solaris-row-host' }, template: "<div\n class=\"solaris-row\"\n role=\"row\"\n [attr.aria-selected]=\"isSelected\"\n [class.is-selected]=\"isSelected\"\n [style.gridTemplateColumns]=\"table.gridTemplateColumns()\"\n>\n @for (col of table.columns(); track col.id; let i = $index) {\n <div\n class=\"solaris-row-cell\"\n role=\"cell\"\n [attr.data-col-idx]=\"i\"\n [class.align-end]=\"col.align === 'end'\"\n [class.align-center]=\"col.align === 'center'\"\n [style.--solaris-col-max]=\"col.maxWidth || null\"\n >\n @if (table.selectable && i === 0) {\n <span class=\"solaris-row-select-prefix\">\n <solaris-checkbox\n variant=\"square\"\n color=\"primary\"\n size=\"sm\"\n [ngModel]=\"isSelected\"\n (ngModelChange)=\"table.toggleRow(rowKey, $event)\"\n [attr.aria-label]=\"'ui.solaris.tables.aria.selectRow' | translate\"\n />\n </span>\n }\n\n <span class=\"solaris-row-label\">\n @if (col.headerKey) {\n {{ col.headerKey | translate }}\n } @else {\n {{ col.header }}\n }\n </span>\n\n <span class=\"solaris-row-content\">\n @if (col.cellDef?.template) {\n <ng-container\n [ngTemplateOutlet]=\"col.cellDef!.template\"\n [ngTemplateOutletContext]=\"{ $implicit: value, row: value, col: col }\"\n />\n } @else {\n {{ table.readField(value, col.field) }}\n }\n </span>\n </div>\n }\n</div>\n\r\n", styles: [":host{display:block;--solaris-table-row-bg: transparent;--solaris-table-row-bg-hover: var(--solaris-table-row-hover-bg, var(--solaris-color-surface-2))}:host-context(.solaris-table-zebra):nth-child(2n){--solaris-table-row-bg: var(--solaris-color-surface-2)}:host-context(.solaris-table-zebra):nth-child(odd){--solaris-table-row-bg: var(--solaris-color-surface)}@supports (color: color-mix(in srgb,black 50%,white)){:host-context(.solaris-table-zebra):nth-child(2n){--solaris-table-row-bg-hover: color-mix( in srgb, var(--solaris-color-surface-2) 40%, var(--solaris-color-surface) )}:host-context(.solaris-table-zebra):nth-child(odd){--solaris-table-row-bg-hover: color-mix( in srgb, var(--solaris-color-surface) 40%, var(--solaris-color-surface-2) )}}.solaris-row{display:grid;align-items:stretch;background:var(--solaris-table-row-bg);transition:background var(--solaris-motion-duration-xslow) var(--solaris-motion-ease-in-out);border-bottom:1px solid var(--solaris-color-border)}.solaris-row:hover{background:var(--solaris-table-row-bg-hover)}.solaris-row.is-selected,.solaris-row.is-selected:hover{background:var(--solaris-table-row-selected-bg)}.solaris-row-cell{min-width:0;display:flex;align-items:center;align-self:stretch;gap:var(--solaris-space-3);padding:var(--solaris-space-4);border-right:var(--solaris-table-cell-divider)}.solaris-row-cell:last-child{border-right:none}.solaris-row-cell-select{justify-content:center}.align-end{justify-content:flex-end;text-align:right}.align-center{justify-content:center;text-align:center}.solaris-row-label{display:none;font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-row-content{overflow:hidden;white-space:nowrap;display:inline-block;text-overflow:ellipsis;font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted);max-width:var(--solaris-col-max, 100%)}.solaris-row-select-prefix{flex:0 0 auto;align-items:center;display:inline-flex}@media(max-width:768px){.solaris-row{display:block;border-bottom:none;padding:var(--solaris-space-4)}.solaris-row-cell{border-right:none;padding:var(--solaris-space-2) 0;align-items:flex-start;justify-content:space-between}.solaris-row-cell-select{justify-content:flex-end;padding-top:0}.solaris-row-label{display:inline;min-width:9rem}.solaris-row-content{max-width:100%;overflow:hidden;white-space:nowrap;display:inline-block;text-overflow:ellipsis}}\n"] }]
|
|
5260
5261
|
}], ctorParameters: () => [{ type: SolarisTable, decorators: [{
|
|
5261
5262
|
type: Optional
|
|
5262
5263
|
}, {
|
|
@@ -5308,13 +5309,13 @@ class SolarisPage {
|
|
|
5308
5309
|
stickyHeader = false;
|
|
5309
5310
|
container = 'contained';
|
|
5310
5311
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5311
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisPage, 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]\">\n <header class=\"solaris-
|
|
5312
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisPage, 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]\">\n <header class=\"solaris-page-header\" [ngClass]=\"{ 'is-sticky': stickyHeader }\">\n <ng-content select=\"[solaris-header]\"></ng-content>\n @if (stickyHeader) {\n <solaris-divider class=\"solaris-page-header-divider\" />\n }\n </header>\n\n <main class=\"solaris-page-body\">\n <ng-content select=\"[solaris-body]\"></ng-content>\n </main>\n\n <footer class=\"solaris-page-footer\">\n <solaris-divider class=\"solaris-page-footer-divider\" />\n\n <div class=\"solaris-page-footer-content\">\n <ng-content select=\"[solaris-footer]\"></ng-content>\n </div>\n </footer>\n</div>\n\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 });
|
|
5312
5313
|
}
|
|
5313
5314
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisPage, decorators: [{
|
|
5314
5315
|
type: Component,
|
|
5315
5316
|
args: [{ selector: 'solaris-page', standalone: true, imports: [NgClass, SolarisDivider], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
5316
5317
|
class: 'solaris-page-host',
|
|
5317
|
-
}, template: "<div class=\"solaris-page\" [ngClass]=\"['container-' + container]\">\n <header class=\"solaris-
|
|
5318
|
+
}, template: "<div class=\"solaris-page\" [ngClass]=\"['container-' + container]\">\n <header class=\"solaris-page-header\" [ngClass]=\"{ 'is-sticky': stickyHeader }\">\n <ng-content select=\"[solaris-header]\"></ng-content>\n @if (stickyHeader) {\n <solaris-divider class=\"solaris-page-header-divider\" />\n }\n </header>\n\n <main class=\"solaris-page-body\">\n <ng-content select=\"[solaris-body]\"></ng-content>\n </main>\n\n <footer class=\"solaris-page-footer\">\n <solaris-divider class=\"solaris-page-footer-divider\" />\n\n <div class=\"solaris-page-footer-content\">\n <ng-content select=\"[solaris-footer]\"></ng-content>\n </div>\n </footer>\n</div>\n\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"] }]
|
|
5318
5319
|
}], propDecorators: { stickyHeader: [{
|
|
5319
5320
|
type: Input
|
|
5320
5321
|
}], container: [{
|
|
@@ -5363,11 +5364,11 @@ class SolarisPageHeaderTitle {
|
|
|
5363
5364
|
description;
|
|
5364
5365
|
size = 'lg';
|
|
5365
5366
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisPageHeaderTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5366
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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]\">\n @if (overline) {\n <div class=\"solaris-page-
|
|
5367
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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]\">\n @if (overline) {\n <div class=\"solaris-page-title-overline\">{{ overline }}</div>\n }\n\n <h1 class=\"solaris-page-title-title\">{{ title }}</h1>\n\n @if (description) {\n <p class=\"solaris-page-title-description\">{{ description }}</p>\n }\n</div>\n\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 });
|
|
5367
5368
|
}
|
|
5368
5369
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisPageHeaderTitle, decorators: [{
|
|
5369
5370
|
type: Component,
|
|
5370
|
-
args: [{ selector: 'solaris-page-header-title', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-page-title\" [ngClass]=\"['size-' + size]\">\n @if (overline) {\n <div class=\"solaris-page-
|
|
5371
|
+
args: [{ selector: 'solaris-page-header-title', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-page-title\" [ngClass]=\"['size-' + size]\">\n @if (overline) {\n <div class=\"solaris-page-title-overline\">{{ overline }}</div>\n }\n\n <h1 class=\"solaris-page-title-title\">{{ title }}</h1>\n\n @if (description) {\n <p class=\"solaris-page-title-description\">{{ description }}</p>\n }\n</div>\n\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"] }]
|
|
5371
5372
|
}], propDecorators: { title: [{
|
|
5372
5373
|
type: Input
|
|
5373
5374
|
}], overline: [{
|
|
@@ -5398,11 +5399,11 @@ class SolarisPageHeader {
|
|
|
5398
5399
|
breadcrumbSlot;
|
|
5399
5400
|
descriptionSlot;
|
|
5400
5401
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisPageHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5401
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", 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]\">\n <div class=\"solaris-page-
|
|
5402
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", 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]\">\n <div class=\"solaris-page-header-left\">\n <div class=\"solaris-page-header-breadcrumb\">\n <ng-content select=\"[solaris-page-header-breadcrumb]\" />\n </div>\n\n <div class=\"solaris-page-header-titles\">\n <div class=\"solaris-page-header-title-row\">\n <h1 class=\"solaris-page-header-title\">\n <span class=\"solaris-page-header-title-slot\">\n <ng-content select=\"[solaris-page-header-title]\" />\n </span>\n\n <span class=\"solaris-page-header-title-meta\">\n <ng-content select=\"[solaris-page-header-title-meta]\" />\n </span>\n </h1>\n\n <div class=\"solaris-page-header-title-meta\">\n <ng-content select=\"[solaris-page-header-title-meta]\" />\n </div>\n </div>\n\n <p class=\"solaris-page-header-description\">\n <ng-content select=\"[solaris-page-header-description]\" />\n </p>\n </div>\n </div>\n\n <div class=\"solaris-page-header-actions\">\n <ng-content select=\"[solaris-page-header-actions]\" />\n </div>\n</header>\n\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 });
|
|
5402
5403
|
}
|
|
5403
5404
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisPageHeader, decorators: [{
|
|
5404
5405
|
type: Component,
|
|
5405
|
-
args: [{ selector: 'solaris-page-header', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"solaris-page-header\" [ngClass]=\"['layout-' + layout, 'density-' + density]\">\n <div class=\"solaris-page-
|
|
5406
|
+
args: [{ selector: 'solaris-page-header', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"solaris-page-header\" [ngClass]=\"['layout-' + layout, 'density-' + density]\">\n <div class=\"solaris-page-header-left\">\n <div class=\"solaris-page-header-breadcrumb\">\n <ng-content select=\"[solaris-page-header-breadcrumb]\" />\n </div>\n\n <div class=\"solaris-page-header-titles\">\n <div class=\"solaris-page-header-title-row\">\n <h1 class=\"solaris-page-header-title\">\n <span class=\"solaris-page-header-title-slot\">\n <ng-content select=\"[solaris-page-header-title]\" />\n </span>\n\n <span class=\"solaris-page-header-title-meta\">\n <ng-content select=\"[solaris-page-header-title-meta]\" />\n </span>\n </h1>\n\n <div class=\"solaris-page-header-title-meta\">\n <ng-content select=\"[solaris-page-header-title-meta]\" />\n </div>\n </div>\n\n <p class=\"solaris-page-header-description\">\n <ng-content select=\"[solaris-page-header-description]\" />\n </p>\n </div>\n </div>\n\n <div class=\"solaris-page-header-actions\">\n <ng-content select=\"[solaris-page-header-actions]\" />\n </div>\n</header>\n\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"] }]
|
|
5406
5407
|
}], propDecorators: { layout: [{
|
|
5407
5408
|
type: Input
|
|
5408
5409
|
}], density: [{
|
|
@@ -5591,7 +5592,7 @@ class SolarisRadio {
|
|
|
5591
5592
|
useExisting: forwardRef(() => SolarisRadio),
|
|
5592
5593
|
multi: true,
|
|
5593
5594
|
},
|
|
5594
|
-
], viewQueries: [{ propertyName: "native", first: true, predicate: ["native"], descendants: true, static: true }], ngImport: i0, template: "<label class=\"solaris-radio\">\n <input\n #native\n class=\"solaris-
|
|
5595
|
+
], viewQueries: [{ propertyName: "native", first: true, predicate: ["native"], descendants: true, static: true }], ngImport: i0, template: "<label class=\"solaris-radio\">\n <input\n #native\n class=\"solaris-radio-native\"\n type=\"radio\"\n [attr.id]=\"id()\"\n [attr.name]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.tabindex]=\"tabIndex()\"\n (change)=\"onNativeChange()\"\n (keydown)=\"onNativeKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n <span class=\"solaris-radio-control\" aria-hidden=\"true\">\n <span class=\"solaris-radio-inner\" aria-hidden=\"true\"></span>\n </span>\n\n <span class=\"solaris-radio-content\">\n <ng-content />\n </span>\n</label>\n\r\n", styles: [":host{--_size: var(--solaris-indicator-size-md);--_dot: var(--solaris-indicator-dot-size-md);--_icon-dot: var(--solaris-indicator-icon-dot-size-md);--_text: var(--solaris-color-text);--_radius: var(--solaris-indicator-radius);--_border: var(--solaris-color-border);--solaris-radio-border: var(--_border);--_muted: var(--solaris-color-text-muted);--solaris-radio-accent: var(--solaris-color-primary);--solaris-radio-on-accent: var(--solaris-color-primary-contrast);--solaris-radio-soft-fill: color-mix(in srgb, var(--solaris-radio-accent) 12%, transparent);display:inline-flex}:host([data-size=sm]){--_size: var(--solaris-indicator-size-sm);--_dot: var(--solaris-indicator-dot-size-sm);--_icon-dot: var(--solaris-indicator-icon-dot-size-sm)}:host([data-size=md]){--_size: var(--solaris-indicator-size-md);--_dot: var(--solaris-indicator-dot-size-md);--_icon-dot: var(--solaris-indicator-icon-dot-size-md)}:host([data-size=lg]){--_size: var(--solaris-indicator-size-lg);--_dot: var(--solaris-indicator-dot-size-lg);--_icon-dot: var(--solaris-indicator-icon-dot-size-lg)}:host([data-color=primary]){--solaris-radio-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-radio-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-radio-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-radio-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-radio-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-radio-accent: var(--solaris-radio-custom, var(--solaris-color-primary))}.solaris-radio{gap:.8rem;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;color:var(--_text);display:inline-flex}.solaris-radio-native{opacity:0;width:1px;height:1px;position:absolute;pointer-events:none}.solaris-radio-control{inline-size:var(--_size);block-size:var(--_size);min-inline-size:var(--_size);min-block-size:var(--_size);aspect-ratio:1/1;display:inline-grid;place-items:center;box-sizing:border-box;line-height:0;border-radius:var(--_radius);border:var(--solaris-indicator-border-width) solid var(--solaris-radio-border);background:transparent;color:currentColor;flex:0 0 auto}.solaris-radio-content{gap:.2rem;line-height:1.3;display:inline-flex;flex-direction:column;justify-content:center;min-height:var(--_size)}.solaris-radio-inner{opacity:0;width:var(--_dot);height:var(--_dot);transform:scale(.4);background:var(--solaris-radio-accent);border-radius:var(--solaris-radius-full);transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-radio:hover .solaris-radio-control{border-color:color-mix(in srgb,var(--solaris-radio-accent) 36%,var(--solaris-radio-border))}.solaris-radio-native:focus-visible+.solaris-radio-control{outline-offset:.2rem;outline:.2rem solid var(--solaris-radio-accent)}.solaris-radio-native:active+.solaris-radio-control{transform:scale(.98)}.solaris-radio-native:checked+.solaris-radio-control{border-color:var(--solaris-radio-accent)}.solaris-radio-native:checked+.solaris-radio-control .solaris-radio-inner{opacity:1;transform:scale(1)}:host([data-variant=dot][data-appearance=outline]) .solaris-radio-native:checked+.solaris-radio-control{background:transparent}:host([data-variant=dot][data-appearance=solid]) .solaris-radio-native:checked+.solaris-radio-control{background:var(--solaris-radio-soft-fill)}:host([data-variant=icon]) .solaris-radio-control{padding:.25rem;background-clip:content-box}:host([data-variant=icon]) .solaris-radio-inner{width:var(--_icon-dot);height:var(--_icon-dot)}:host([data-variant=icon][data-appearance=solid]) .solaris-radio-native:checked+.solaris-radio-control{background:var(--solaris-radio-accent)}:host([data-variant=icon][data-appearance=solid]) .solaris-radio-native:checked+.solaris-radio-control .solaris-radio-inner{background:var(--solaris-radio-on-accent)}:host([data-variant=icon][data-appearance=outline]) .solaris-radio-native:checked+.solaris-radio-control{background:transparent}:host([data-variant=icon][data-appearance=outline]) .solaris-radio-native:checked+.solaris-radio-control .solaris-radio-inner{background:var(--solaris-radio-accent)}:host([data-disabled=true]) .solaris-radio{opacity:.55;cursor:not-allowed}:host([data-disabled=true]) .solaris-radio-control{border-color:color-mix(in srgb,var(--_border) 70%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5595
5596
|
}
|
|
5596
5597
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisRadio, decorators: [{
|
|
5597
5598
|
type: Component,
|
|
@@ -5610,7 +5611,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
5610
5611
|
'[attr.data-disabled]': 'disabled() ? "true" : null',
|
|
5611
5612
|
'[attr.data-checked]': 'checked() ? "true" : null',
|
|
5612
5613
|
'[style.--solaris-radio-custom]': 'customAccent()',
|
|
5613
|
-
}, template: "<label class=\"solaris-radio\">\n <input\n #native\n class=\"solaris-
|
|
5614
|
+
}, template: "<label class=\"solaris-radio\">\n <input\n #native\n class=\"solaris-radio-native\"\n type=\"radio\"\n [attr.id]=\"id()\"\n [attr.name]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.tabindex]=\"tabIndex()\"\n (change)=\"onNativeChange()\"\n (keydown)=\"onNativeKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n <span class=\"solaris-radio-control\" aria-hidden=\"true\">\n <span class=\"solaris-radio-inner\" aria-hidden=\"true\"></span>\n </span>\n\n <span class=\"solaris-radio-content\">\n <ng-content />\n </span>\n</label>\n\r\n", styles: [":host{--_size: var(--solaris-indicator-size-md);--_dot: var(--solaris-indicator-dot-size-md);--_icon-dot: var(--solaris-indicator-icon-dot-size-md);--_text: var(--solaris-color-text);--_radius: var(--solaris-indicator-radius);--_border: var(--solaris-color-border);--solaris-radio-border: var(--_border);--_muted: var(--solaris-color-text-muted);--solaris-radio-accent: var(--solaris-color-primary);--solaris-radio-on-accent: var(--solaris-color-primary-contrast);--solaris-radio-soft-fill: color-mix(in srgb, var(--solaris-radio-accent) 12%, transparent);display:inline-flex}:host([data-size=sm]){--_size: var(--solaris-indicator-size-sm);--_dot: var(--solaris-indicator-dot-size-sm);--_icon-dot: var(--solaris-indicator-icon-dot-size-sm)}:host([data-size=md]){--_size: var(--solaris-indicator-size-md);--_dot: var(--solaris-indicator-dot-size-md);--_icon-dot: var(--solaris-indicator-icon-dot-size-md)}:host([data-size=lg]){--_size: var(--solaris-indicator-size-lg);--_dot: var(--solaris-indicator-dot-size-lg);--_icon-dot: var(--solaris-indicator-icon-dot-size-lg)}:host([data-color=primary]){--solaris-radio-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-radio-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-radio-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-radio-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-radio-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-radio-accent: var(--solaris-radio-custom, var(--solaris-color-primary))}.solaris-radio{gap:.8rem;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;color:var(--_text);display:inline-flex}.solaris-radio-native{opacity:0;width:1px;height:1px;position:absolute;pointer-events:none}.solaris-radio-control{inline-size:var(--_size);block-size:var(--_size);min-inline-size:var(--_size);min-block-size:var(--_size);aspect-ratio:1/1;display:inline-grid;place-items:center;box-sizing:border-box;line-height:0;border-radius:var(--_radius);border:var(--solaris-indicator-border-width) solid var(--solaris-radio-border);background:transparent;color:currentColor;flex:0 0 auto}.solaris-radio-content{gap:.2rem;line-height:1.3;display:inline-flex;flex-direction:column;justify-content:center;min-height:var(--_size)}.solaris-radio-inner{opacity:0;width:var(--_dot);height:var(--_dot);transform:scale(.4);background:var(--solaris-radio-accent);border-radius:var(--solaris-radius-full);transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-radio:hover .solaris-radio-control{border-color:color-mix(in srgb,var(--solaris-radio-accent) 36%,var(--solaris-radio-border))}.solaris-radio-native:focus-visible+.solaris-radio-control{outline-offset:.2rem;outline:.2rem solid var(--solaris-radio-accent)}.solaris-radio-native:active+.solaris-radio-control{transform:scale(.98)}.solaris-radio-native:checked+.solaris-radio-control{border-color:var(--solaris-radio-accent)}.solaris-radio-native:checked+.solaris-radio-control .solaris-radio-inner{opacity:1;transform:scale(1)}:host([data-variant=dot][data-appearance=outline]) .solaris-radio-native:checked+.solaris-radio-control{background:transparent}:host([data-variant=dot][data-appearance=solid]) .solaris-radio-native:checked+.solaris-radio-control{background:var(--solaris-radio-soft-fill)}:host([data-variant=icon]) .solaris-radio-control{padding:.25rem;background-clip:content-box}:host([data-variant=icon]) .solaris-radio-inner{width:var(--_icon-dot);height:var(--_icon-dot)}:host([data-variant=icon][data-appearance=solid]) .solaris-radio-native:checked+.solaris-radio-control{background:var(--solaris-radio-accent)}:host([data-variant=icon][data-appearance=solid]) .solaris-radio-native:checked+.solaris-radio-control .solaris-radio-inner{background:var(--solaris-radio-on-accent)}:host([data-variant=icon][data-appearance=outline]) .solaris-radio-native:checked+.solaris-radio-control{background:transparent}:host([data-variant=icon][data-appearance=outline]) .solaris-radio-native:checked+.solaris-radio-control .solaris-radio-inner{background:var(--solaris-radio-accent)}:host([data-disabled=true]) .solaris-radio{opacity:.55;cursor:not-allowed}:host([data-disabled=true]) .solaris-radio-control{border-color:color-mix(in srgb,var(--_border) 70%,transparent)}\n"] }]
|
|
5614
5615
|
}], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], inputName: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], checkedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], native: [{
|
|
5615
5616
|
type: ViewChild,
|
|
5616
5617
|
args: ['native', { static: true }]
|
|
@@ -6068,11 +6069,11 @@ class SolarisAvatarPresence {
|
|
|
6068
6069
|
return String(value ?? '').trim();
|
|
6069
6070
|
}
|
|
6070
6071
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisAvatarPresence, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6071
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisAvatarPresence, isStandalone: true, selector: "solaris-avatar-presence", inputs: { presence: { classPropertyName: "presence", publicName: "presence", isSignal: true, isRequired: false, transformFunction: null }, timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: false, transformFunction: null }, lastSeenAt: { classPropertyName: "lastSeenAt", publicName: "lastSeenAt", isSignal: true, isRequired: false, transformFunction: null }, quietHours: { classPropertyName: "quietHours", publicName: "quietHours", isSignal: true, isRequired: false, transformFunction: null }, workHoursStart: { classPropertyName: "workHoursStart", publicName: "workHoursStart", isSignal: true, isRequired: false, transformFunction: null }, workHoursEnd: { classPropertyName: "workHoursEnd", publicName: "workHoursEnd", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "aria-hidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<span\n class=\"solaris-avatar-presence\"\n [attr.title]=\"titleText()\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\"\n [ngClass]=\"[...stateClasses(), shape() === 'square' ? 'shape-square' : 'shape-circle']\"\n>\n <span class=\"solaris-avatar-
|
|
6072
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisAvatarPresence, isStandalone: true, selector: "solaris-avatar-presence", inputs: { presence: { classPropertyName: "presence", publicName: "presence", isSignal: true, isRequired: false, transformFunction: null }, timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: false, transformFunction: null }, lastSeenAt: { classPropertyName: "lastSeenAt", publicName: "lastSeenAt", isSignal: true, isRequired: false, transformFunction: null }, quietHours: { classPropertyName: "quietHours", publicName: "quietHours", isSignal: true, isRequired: false, transformFunction: null }, workHoursStart: { classPropertyName: "workHoursStart", publicName: "workHoursStart", isSignal: true, isRequired: false, transformFunction: null }, workHoursEnd: { classPropertyName: "workHoursEnd", publicName: "workHoursEnd", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "aria-hidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<span\n class=\"solaris-avatar-presence\"\n [attr.title]=\"titleText()\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\"\n [ngClass]=\"[...stateClasses(), shape() === 'square' ? 'shape-square' : 'shape-circle']\"\n>\n <span class=\"solaris-avatar-presence-dot\" aria-hidden=\"true\">\n @if (showDndSlash()) {\n <span class=\"solaris-avatar-presence-slash\"></span>\n }\n </span>\n\n @if (showQuietHoursAccent()) {\n <span class=\"solaris-avatar-presence-quiet\" aria-hidden=\"true\">z</span>\n }\n</span>\n\r\n", styles: [".solaris-avatar-presence-host{display:inline-flex}.solaris-avatar-presence{--solaris-avatar-presence-fg: var(--solaris-color-text);--solaris-avatar-presence-dot-size: 1.8rem;--solaris-avatar-presence-quiet-size: .9rem;--solaris-avatar-presence-slash-width: .2rem;--solaris-avatar-presence-bg: var(--solaris-color-text-muted);--solaris-avatar-presence-ring: .15rem solid var(--solaris-color-surface-2);flex-shrink:0;line-height:1;-webkit-user-select:none;user-select:none;position:relative;display:inline-block;block-size:var(--solaris-avatar-presence-dot-size);inline-size:var(--solaris-avatar-presence-dot-size)}.solaris-avatar-presence-dot{inset:0;block-size:100%;inline-size:100%;min-block-size:0;min-inline-size:0;position:absolute;align-items:center;display:inline-flex;justify-content:center;box-shadow:var(--solaris-shadow-xs);color:var(--solaris-avatar-presence-fg);border-radius:var(--solaris-radius-full);border:var(--solaris-avatar-presence-ring);background:var(--solaris-avatar-presence-bg)}.solaris-avatar-presence.shape-square{--solaris-avatar-presence-dot-size: 1.6rem}.solaris-avatar-presence.shape-square .solaris-avatar-presence-dot{border-radius:.5rem}.solaris-avatar-presence.shape-square .solaris-avatar-presence-quiet{inset-block-end:-.25rem;inset-inline-end:-.05rem}.solaris-avatar-presence-slash{display:block;inline-size:70%;max-inline-size:100%;background:currentColor;border-radius:var(--solaris-radius-full);block-size:var(--solaris-avatar-presence-slash-width)}.solaris-avatar-presence-quiet{border:0;z-index:2;line-height:1;font-weight:900;box-shadow:none;position:absolute;font-size:1.125rem;align-items:center;display:inline-flex;justify-content:center;background:transparent;letter-spacing:-.1em;paint-order:stroke fill;text-transform:lowercase;inset-block-end:-.15rem;inset-inline-end:.15rem;-webkit-text-stroke:2px var(--solaris-color-surface);filter:drop-shadow(0 0 .08rem var(--solaris-color-surface)) drop-shadow(0 0 .08rem var(--solaris-color-surface));color:color-mix(in srgb,var(--solaris-color-text-muted) 92%,transparent)}.solaris-avatar-presence.state-online{--solaris-avatar-presence-bg: var(--solaris-color-success)}.solaris-avatar-presence.state-away{--solaris-avatar-presence-fg: var(--solaris-color-text);--solaris-avatar-presence-bg: var(--solaris-color-warning)}.solaris-avatar-presence.state-busy{--solaris-avatar-presence-bg: var(--solaris-color-error)}.solaris-avatar-presence.state-dnd{--solaris-avatar-presence-bg: color-mix( in srgb, var(--solaris-color-error) 75%, var(--solaris-color-black) );--solaris-avatar-presence-fg: color-mix(in srgb, var(--solaris-color-text) 75%, transparent)}.solaris-avatar-presence.state-offline{--solaris-avatar-presence-bg: color-mix( in srgb, var(--solaris-color-text-muted) 60%, var(--solaris-color-black) )}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6072
6073
|
}
|
|
6073
6074
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisAvatarPresence, decorators: [{
|
|
6074
6075
|
type: Component,
|
|
6075
|
-
args: [{ selector: 'solaris-avatar-presence', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n class=\"solaris-avatar-presence\"\n [attr.title]=\"titleText()\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\"\n [ngClass]=\"[...stateClasses(), shape() === 'square' ? 'shape-square' : 'shape-circle']\"\n>\n <span class=\"solaris-avatar-
|
|
6076
|
+
args: [{ selector: 'solaris-avatar-presence', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n class=\"solaris-avatar-presence\"\n [attr.title]=\"titleText()\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\"\n [ngClass]=\"[...stateClasses(), shape() === 'square' ? 'shape-square' : 'shape-circle']\"\n>\n <span class=\"solaris-avatar-presence-dot\" aria-hidden=\"true\">\n @if (showDndSlash()) {\n <span class=\"solaris-avatar-presence-slash\"></span>\n }\n </span>\n\n @if (showQuietHoursAccent()) {\n <span class=\"solaris-avatar-presence-quiet\" aria-hidden=\"true\">z</span>\n }\n</span>\n\r\n", styles: [".solaris-avatar-presence-host{display:inline-flex}.solaris-avatar-presence{--solaris-avatar-presence-fg: var(--solaris-color-text);--solaris-avatar-presence-dot-size: 1.8rem;--solaris-avatar-presence-quiet-size: .9rem;--solaris-avatar-presence-slash-width: .2rem;--solaris-avatar-presence-bg: var(--solaris-color-text-muted);--solaris-avatar-presence-ring: .15rem solid var(--solaris-color-surface-2);flex-shrink:0;line-height:1;-webkit-user-select:none;user-select:none;position:relative;display:inline-block;block-size:var(--solaris-avatar-presence-dot-size);inline-size:var(--solaris-avatar-presence-dot-size)}.solaris-avatar-presence-dot{inset:0;block-size:100%;inline-size:100%;min-block-size:0;min-inline-size:0;position:absolute;align-items:center;display:inline-flex;justify-content:center;box-shadow:var(--solaris-shadow-xs);color:var(--solaris-avatar-presence-fg);border-radius:var(--solaris-radius-full);border:var(--solaris-avatar-presence-ring);background:var(--solaris-avatar-presence-bg)}.solaris-avatar-presence.shape-square{--solaris-avatar-presence-dot-size: 1.6rem}.solaris-avatar-presence.shape-square .solaris-avatar-presence-dot{border-radius:.5rem}.solaris-avatar-presence.shape-square .solaris-avatar-presence-quiet{inset-block-end:-.25rem;inset-inline-end:-.05rem}.solaris-avatar-presence-slash{display:block;inline-size:70%;max-inline-size:100%;background:currentColor;border-radius:var(--solaris-radius-full);block-size:var(--solaris-avatar-presence-slash-width)}.solaris-avatar-presence-quiet{border:0;z-index:2;line-height:1;font-weight:900;box-shadow:none;position:absolute;font-size:1.125rem;align-items:center;display:inline-flex;justify-content:center;background:transparent;letter-spacing:-.1em;paint-order:stroke fill;text-transform:lowercase;inset-block-end:-.15rem;inset-inline-end:.15rem;-webkit-text-stroke:2px var(--solaris-color-surface);filter:drop-shadow(0 0 .08rem var(--solaris-color-surface)) drop-shadow(0 0 .08rem var(--solaris-color-surface));color:color-mix(in srgb,var(--solaris-color-text-muted) 92%,transparent)}.solaris-avatar-presence.state-online{--solaris-avatar-presence-bg: var(--solaris-color-success)}.solaris-avatar-presence.state-away{--solaris-avatar-presence-fg: var(--solaris-color-text);--solaris-avatar-presence-bg: var(--solaris-color-warning)}.solaris-avatar-presence.state-busy{--solaris-avatar-presence-bg: var(--solaris-color-error)}.solaris-avatar-presence.state-dnd{--solaris-avatar-presence-bg: color-mix( in srgb, var(--solaris-color-error) 75%, var(--solaris-color-black) );--solaris-avatar-presence-fg: color-mix(in srgb, var(--solaris-color-text) 75%, transparent)}.solaris-avatar-presence.state-offline{--solaris-avatar-presence-bg: color-mix( in srgb, var(--solaris-color-text-muted) 60%, var(--solaris-color-black) )}\n"] }]
|
|
6076
6077
|
}], ctorParameters: () => [], propDecorators: { presence: [{ type: i0.Input, args: [{ isSignal: true, alias: "presence", required: false }] }], timezone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timezone", required: false }] }], lastSeenAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastSeenAt", required: false }] }], quietHours: [{ type: i0.Input, args: [{ isSignal: true, alias: "quietHours", required: false }] }], workHoursStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "workHoursStart", required: false }] }], workHoursEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "workHoursEnd", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-hidden", required: false }] }], hostClass: [{
|
|
6077
6078
|
type: HostBinding,
|
|
6078
6079
|
args: ['class']
|
|
@@ -6224,11 +6225,11 @@ class SolarisAvatar {
|
|
|
6224
6225
|
return String(value ?? '').trim();
|
|
6225
6226
|
}
|
|
6226
6227
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6227
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisAvatar, isStandalone: true, selector: "solaris-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null }, asButton: { classPropertyName: "asButton", publicName: "asButton", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, objectFit: { classPropertyName: "objectFit", publicName: "objectFit", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "aria-hidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "@if (asButton()) {\n <button\n class=\"solaris-avatar\"\n [ngClass]=\"rootClasses()\"\n [type]=\"buttonType()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"accessibleLabel()\"\n [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\"\n [style.--solaris-avatar-radius]=\"resolvedRadius()\"\n [style.--solaris-avatar-image-fit]=\"objectFit()\"\n [style.--solaris-avatar-custom-bg]=\"customColorValue()\"\n >\n <span class=\"solaris-avatar__body\">\n @if (loading()) {\n <solaris-skeleton class=\"solaris-avatar__skeleton\" radius=\"inherit\"></solaris-skeleton>\n } @else if (showImage()) {\n <img\n class=\"solaris-avatar__image\"\n [src]=\"normalizedSrc()\"\n alt=\"\"\n aria-hidden=\"true\"\n decoding=\"async\"\n (load)=\"onImageLoad()\"\n (error)=\"onImageError()\"\n />\n } @else if (showLetter()) {\n <span class=\"solaris-avatar__label\" aria-hidden=\"true\">\n {{ resolvedInitials() }}\n </span>\n } @else if (showDefault()) {\n <span class=\"solaris-avatar__placeholder\" aria-hidden=\"true\">\n <svg\n class=\"solaris-avatar__placeholder-svg\"\n viewBox=\"0 0 64 64\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle class=\"solaris-avatar__placeholder-head\" cx=\"32\" cy=\"25\" r=\"14\"></circle>\n <path\n class=\"solaris-avatar__placeholder-body\"\n d=\"M2 64 C6 50, 18 42, 32 45 C46 42, 58 50, 62 64 Z\"\n ></path>\n </svg>\n </span>\n }\n </span>\n\n <span class=\"solaris-avatar__overlay\" aria-hidden=\"true\">\n <ng-content></ng-content>\n </span>\n </button>\n} @else {\n <span\n class=\"solaris-avatar\"\n [ngClass]=\"rootClasses()\"\n [attr.role]=\"rootRole()\"\n [attr.aria-label]=\"accessibleLabel()\"\n [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\"\n [style.--solaris-avatar-radius]=\"resolvedRadius()\"\n [style.--solaris-avatar-image-fit]=\"objectFit()\"\n [style.--solaris-avatar-custom-bg]=\"customColorValue()\"\n >\n <span class=\"solaris-avatar__body\">\n @if (loading()) {\n <solaris-skeleton class=\"solaris-avatar__skeleton\" radius=\"inherit\"></solaris-skeleton>\n } @else if (showImage()) {\n <img\n class=\"solaris-avatar__image\"\n [src]=\"normalizedSrc()\"\n alt=\"\"\n aria-hidden=\"true\"\n decoding=\"async\"\n (load)=\"onImageLoad()\"\n (error)=\"onImageError()\"\n />\n } @else if (showLetter()) {\n <span class=\"solaris-avatar__label\" aria-hidden=\"true\">{{ resolvedInitials() }}</span>\n } @else if (showDefault()) {\n <span class=\"solaris-avatar__placeholder\" aria-hidden=\"true\">\n <svg\n class=\"solaris-avatar__placeholder-svg\"\n viewBox=\"0 0 64 64\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle class=\"solaris-avatar__placeholder-head\" cx=\"32\" cy=\"25\" r=\"14\"></circle>\n <path\n class=\"solaris-avatar__placeholder-body\"\n d=\"M2 64 C6 50, 18 42, 32 45 C46 42, 58 50, 62 64 Z\"\n ></path>\n </svg>\n </span>\n }\n </span>\n\n <span class=\"solaris-avatar__overlay\" aria-hidden=\"true\">\n <ng-content></ng-content>\n </span>\n </span>\n}\n", styles: [".solaris-avatar-host{display:inline-flex;vertical-align:middle}.solaris-avatar{--solaris-avatar-size-xs: 2.4rem;--solaris-avatar-size-sm: 3.2rem;--solaris-avatar-size-md: 4rem;--solaris-avatar-size-lg: 4.8rem;--solaris-avatar-size-xl: 6.4rem;--solaris-avatar-radius-square: var(--solaris-radius-md);--solaris-avatar-radius-circle: var(--solaris-radius-full);--solaris-avatar-bg: var(--solaris-color-surface-2);--solaris-avatar-fg: var(--solaris-color-text);--solaris-avatar-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent);--solaris-avatar-placeholder-bg: var(--solaris-avatar-bg);--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--solaris-avatar-fg) 62%, transparent);--solaris-avatar-ring-focus: 0 0 0 .3rem color-mix(in srgb, var(--solaris-color-primary) 26%, transparent);--solaris-avatar-shadow: none;--solaris-avatar-shadow-hover: var(--solaris-shadow-xs);--solaris-avatar-opacity-disabled: .56;--solaris-avatar-badge-size: 1.6rem;--solaris-avatar-badge-offset-x: 0;--solaris-avatar-badge-offset-y: 0;--solaris-avatar-badge-border: .2rem solid var(--solaris-color-surface);--solaris-avatar-image-fit: cover;--solaris-avatar-radius: var(--solaris-avatar-radius-circle);inline-size:var(--_avatar-size);block-size:var(--_avatar-size);padding:0;margin:0;border:0;background:transparent;color:inherit;font:inherit;text-decoration:none;position:relative;display:inline-grid;place-items:center;-webkit-user-select:none;user-select:none;overflow:visible;outline:none}.solaris-avatar.size-xs{--_avatar-size: var(--solaris-avatar-size-xs);--solaris-avatar-font-size: var(--solaris-fs-10);--solaris-avatar-badge-size: 1.2rem}.solaris-avatar.size-sm{--_avatar-size: var(--solaris-avatar-size-sm);--solaris-avatar-font-size: var(--solaris-fs-12);--solaris-avatar-badge-size: 1.4rem}.solaris-avatar.size-md{--_avatar-size: var(--solaris-avatar-size-md);--solaris-avatar-font-size: var(--solaris-fs-14);--solaris-avatar-badge-size: 1.6rem}.solaris-avatar.size-lg{--_avatar-size: var(--solaris-avatar-size-lg);--solaris-avatar-font-size: var(--solaris-fs-16);--solaris-avatar-badge-size: 1.8rem}.solaris-avatar.size-xl{--_avatar-size: var(--solaris-avatar-size-xl);--solaris-avatar-font-size: var(--solaris-fs-20);--solaris-avatar-badge-size: 2rem}.solaris-avatar.shape-circle{--solaris-avatar-radius: var(--solaris-avatar-radius-circle)}.solaris-avatar.shape-square{--solaris-avatar-radius: var(--solaris-avatar-radius-square)}.solaris-avatar__body{display:grid;block-size:100%;overflow:hidden;inline-size:100%;place-items:center;color:var(--solaris-avatar-fg);background:var(--solaris-avatar-bg);box-shadow:var(--solaris-avatar-shadow);border-radius:var(--solaris-avatar-radius);border:1px solid var(--solaris-avatar-border);transition:box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-avatar__image{inline-size:100%;block-size:100%;display:block;object-fit:var(--solaris-avatar-image-fit)}.solaris-avatar__label{font-size:var(--solaris-avatar-font-size);font-weight:700;line-height:1;letter-spacing:var(--solaris-ls-sm);text-transform:uppercase}.solaris-avatar__placeholder{display:grid;block-size:100%;inline-size:100%;place-items:stretch;color:var(--solaris-avatar-placeholder-fg)}.solaris-avatar__placeholder-svg{inline-size:100%;block-size:100%;display:block}.solaris-avatar__placeholder-head,.solaris-avatar__placeholder-body{fill:currentColor}.solaris-avatar__overlay{position:absolute;inset-inline-end:var(--solaris-avatar-badge-offset-x);inset-block-end:var(--solaris-avatar-badge-offset-y);z-index:3;display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--solaris-avatar-badge-size);min-block-size:var(--solaris-avatar-badge-size);transform:translate(35%,35%);pointer-events:none}.solaris-avatar__overlay:empty{display:none}.solaris-avatar__overlay>*{max-inline-size:100%;flex-shrink:0;pointer-events:auto}.solaris-avatar__skeleton{inline-size:100%;block-size:100%;display:block}.solaris-avatar.is-interactive:not(.is-disabled),.solaris-avatar.is-button:not(.is-disabled){cursor:pointer}.solaris-avatar.is-interactive:not(.is-disabled):hover .solaris-avatar__body,.solaris-avatar.is-button:not(.is-disabled):hover .solaris-avatar__body{box-shadow:var(--solaris-avatar-shadow-hover)}.solaris-avatar.is-button:focus-visible .solaris-avatar__body{box-shadow:var(--solaris-avatar-ring-focus)}.solaris-avatar.is-disabled{opacity:var(--solaris-avatar-opacity-disabled);cursor:not-allowed}.solaris-avatar.is-disabled .solaris-avatar__body,.solaris-avatar:disabled .solaris-avatar__body{box-shadow:none}.solaris-avatar.shape-square .solaris-avatar__overlay{transform:none;inset-block-end:-.15rem;inset-inline-end:-.15rem}.solaris-avatar.color-surface{--_base: var(--solaris-color-surface-2);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white));--solaris-avatar-fg: var(--solaris-color-text);--solaris-avatar-border: color-mix(in srgb, var(--solaris-color-border) 70%, var(--_base))}.solaris-avatar.color-primary{--_base: var(--solaris-color-primary);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, var(--solaris-color-white));--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-success{--_base: var(--solaris-color-success);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, var(--solaris-color-white));--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-warning{--_base: var(--solaris-color-warning);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, var(--solaris-color-black));--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-error{--_base: var(--solaris-color-error);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 16%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 78%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}.solaris-avatar.color-info{--_base: var(--solaris-color-info);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 16%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 78%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}.solaris-avatar.color-custom{--_base: var(--solaris-avatar-custom-bg, var(--solaris-color-surface-2));--solaris-avatar-fg: var(--_base);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 18%, var(--solaris-color-surface));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SolarisSkeleton, selector: "solaris-skeleton", inputs: ["shape", "width", "height", "radius", "animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6228
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisAvatar, isStandalone: true, selector: "solaris-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null }, asButton: { classPropertyName: "asButton", publicName: "asButton", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, objectFit: { classPropertyName: "objectFit", publicName: "objectFit", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "aria-hidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "@if (asButton()) {\n <button\n class=\"solaris-avatar\"\n [ngClass]=\"rootClasses()\"\n [type]=\"buttonType()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"accessibleLabel()\"\n [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\"\n [style.--solaris-avatar-radius]=\"resolvedRadius()\"\n [style.--solaris-avatar-image-fit]=\"objectFit()\"\n [style.--solaris-avatar-custom-bg]=\"customColorValue()\"\n >\n <span class=\"solaris-avatar-body\">\n @if (loading()) {\n <solaris-skeleton class=\"solaris-avatar-skeleton\" radius=\"inherit\"></solaris-skeleton>\n } @else if (showImage()) {\n <img\n class=\"solaris-avatar-image\"\n [src]=\"normalizedSrc()\"\n alt=\"\"\n aria-hidden=\"true\"\n decoding=\"async\"\n (load)=\"onImageLoad()\"\n (error)=\"onImageError()\"\n />\n } @else if (showLetter()) {\n <span class=\"solaris-avatar-label\" aria-hidden=\"true\">\n {{ resolvedInitials() }}\n </span>\n } @else if (showDefault()) {\n <span class=\"solaris-avatar-placeholder\" aria-hidden=\"true\">\n <svg\n class=\"solaris-avatar-placeholder-svg\"\n viewBox=\"0 0 64 64\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle class=\"solaris-avatar-placeholder-head\" cx=\"32\" cy=\"25\" r=\"14\"></circle>\n <path\n class=\"solaris-avatar-placeholder-body\"\n d=\"M2 64 C6 50, 18 42, 32 45 C46 42, 58 50, 62 64 Z\"\n ></path>\n </svg>\n </span>\n }\n </span>\n\n <span class=\"solaris-avatar-overlay\" aria-hidden=\"true\">\n <ng-content></ng-content>\n </span>\n </button>\n} @else {\n <span\n class=\"solaris-avatar\"\n [ngClass]=\"rootClasses()\"\n [attr.role]=\"rootRole()\"\n [attr.aria-label]=\"accessibleLabel()\"\n [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\"\n [style.--solaris-avatar-radius]=\"resolvedRadius()\"\n [style.--solaris-avatar-image-fit]=\"objectFit()\"\n [style.--solaris-avatar-custom-bg]=\"customColorValue()\"\n >\n <span class=\"solaris-avatar-body\">\n @if (loading()) {\n <solaris-skeleton class=\"solaris-avatar-skeleton\" radius=\"inherit\"></solaris-skeleton>\n } @else if (showImage()) {\n <img\n class=\"solaris-avatar-image\"\n [src]=\"normalizedSrc()\"\n alt=\"\"\n aria-hidden=\"true\"\n decoding=\"async\"\n (load)=\"onImageLoad()\"\n (error)=\"onImageError()\"\n />\n } @else if (showLetter()) {\n <span class=\"solaris-avatar-label\" aria-hidden=\"true\">{{ resolvedInitials() }}</span>\n } @else if (showDefault()) {\n <span class=\"solaris-avatar-placeholder\" aria-hidden=\"true\">\n <svg\n class=\"solaris-avatar-placeholder-svg\"\n viewBox=\"0 0 64 64\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle class=\"solaris-avatar-placeholder-head\" cx=\"32\" cy=\"25\" r=\"14\"></circle>\n <path\n class=\"solaris-avatar-placeholder-body\"\n d=\"M2 64 C6 50, 18 42, 32 45 C46 42, 58 50, 62 64 Z\"\n ></path>\n </svg>\n </span>\n }\n </span>\n\n <span class=\"solaris-avatar-overlay\" aria-hidden=\"true\">\n <ng-content></ng-content>\n </span>\n </span>\n}\n\r\n", styles: [".solaris-avatar-host{display:inline-flex;vertical-align:middle}.solaris-avatar{--solaris-avatar-size-xs: 2.4rem;--solaris-avatar-size-sm: 3.2rem;--solaris-avatar-size-md: 4rem;--solaris-avatar-size-lg: 4.8rem;--solaris-avatar-size-xl: 6.4rem;--solaris-avatar-radius-square: var(--solaris-radius-md);--solaris-avatar-radius-circle: var(--solaris-radius-full);--solaris-avatar-bg: var(--solaris-color-surface-2);--solaris-avatar-fg: var(--solaris-color-text);--solaris-avatar-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent);--solaris-avatar-placeholder-bg: var(--solaris-avatar-bg);--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--solaris-avatar-fg) 62%, transparent);--solaris-avatar-ring-focus: 0 0 0 .3rem color-mix(in srgb, var(--solaris-color-primary) 26%, transparent);--solaris-avatar-shadow: none;--solaris-avatar-shadow-hover: var(--solaris-shadow-xs);--solaris-avatar-opacity-disabled: .56;--solaris-avatar-badge-size: 1.6rem;--solaris-avatar-badge-offset-x: 0;--solaris-avatar-badge-offset-y: 0;--solaris-avatar-badge-border: .2rem solid var(--solaris-color-surface);--solaris-avatar-image-fit: cover;--solaris-avatar-radius: var(--solaris-avatar-radius-circle);inline-size:var(--_avatar-size);block-size:var(--_avatar-size);padding:0;margin:0;border:0;background:transparent;color:inherit;font:inherit;text-decoration:none;position:relative;display:inline-grid;place-items:center;-webkit-user-select:none;user-select:none;overflow:visible;outline:none}.solaris-avatar.size-xs{--_avatar-size: var(--solaris-avatar-size-xs);--solaris-avatar-font-size: var(--solaris-fs-10);--solaris-avatar-badge-size: 1.2rem}.solaris-avatar.size-sm{--_avatar-size: var(--solaris-avatar-size-sm);--solaris-avatar-font-size: var(--solaris-fs-12);--solaris-avatar-badge-size: 1.4rem}.solaris-avatar.size-md{--_avatar-size: var(--solaris-avatar-size-md);--solaris-avatar-font-size: var(--solaris-fs-14);--solaris-avatar-badge-size: 1.6rem}.solaris-avatar.size-lg{--_avatar-size: var(--solaris-avatar-size-lg);--solaris-avatar-font-size: var(--solaris-fs-16);--solaris-avatar-badge-size: 1.8rem}.solaris-avatar.size-xl{--_avatar-size: var(--solaris-avatar-size-xl);--solaris-avatar-font-size: var(--solaris-fs-20);--solaris-avatar-badge-size: 2rem}.solaris-avatar.shape-circle{--solaris-avatar-radius: var(--solaris-avatar-radius-circle)}.solaris-avatar.shape-square{--solaris-avatar-radius: var(--solaris-avatar-radius-square)}.solaris-avatar-body{display:grid;block-size:100%;overflow:hidden;inline-size:100%;place-items:center;color:var(--solaris-avatar-fg);background:var(--solaris-avatar-bg);box-shadow:var(--solaris-avatar-shadow);border-radius:var(--solaris-avatar-radius);border:1px solid var(--solaris-avatar-border);transition:box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-avatar-image{inline-size:100%;block-size:100%;display:block;object-fit:var(--solaris-avatar-image-fit)}.solaris-avatar-label{font-size:var(--solaris-avatar-font-size);font-weight:700;line-height:1;letter-spacing:var(--solaris-ls-sm);text-transform:uppercase}.solaris-avatar-placeholder{display:grid;block-size:100%;inline-size:100%;place-items:stretch;color:var(--solaris-avatar-placeholder-fg)}.solaris-avatar-placeholder-svg{inline-size:100%;block-size:100%;display:block}.solaris-avatar-placeholder-head,.solaris-avatar-placeholder-body{fill:currentColor}.solaris-avatar-overlay{position:absolute;inset-inline-end:var(--solaris-avatar-badge-offset-x);inset-block-end:var(--solaris-avatar-badge-offset-y);z-index:3;display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--solaris-avatar-badge-size);min-block-size:var(--solaris-avatar-badge-size);transform:translate(35%,35%);pointer-events:none}.solaris-avatar-overlay:empty{display:none}.solaris-avatar-overlay>*{max-inline-size:100%;flex-shrink:0;pointer-events:auto}.solaris-avatar-skeleton{inline-size:100%;block-size:100%;display:block}.solaris-avatar.is-interactive:not(.is-disabled),.solaris-avatar.is-button:not(.is-disabled){cursor:pointer}.solaris-avatar.is-interactive:not(.is-disabled):hover .solaris-avatar-body,.solaris-avatar.is-button:not(.is-disabled):hover .solaris-avatar-body{box-shadow:var(--solaris-avatar-shadow-hover)}.solaris-avatar.is-button:focus-visible .solaris-avatar-body{box-shadow:var(--solaris-avatar-ring-focus)}.solaris-avatar.is-disabled{opacity:var(--solaris-avatar-opacity-disabled);cursor:not-allowed}.solaris-avatar.is-disabled .solaris-avatar-body,.solaris-avatar:disabled .solaris-avatar-body{box-shadow:none}.solaris-avatar.shape-square .solaris-avatar-overlay{transform:none;inset-block-end:-.15rem;inset-inline-end:-.15rem}.solaris-avatar.color-surface{--_base: var(--solaris-color-surface-2);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white));--solaris-avatar-fg: var(--solaris-color-text);--solaris-avatar-border: color-mix(in srgb, var(--solaris-color-border) 70%, var(--_base))}.solaris-avatar.color-primary{--_base: var(--solaris-color-primary);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, var(--solaris-color-white));--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-success{--_base: var(--solaris-color-success);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, var(--solaris-color-white));--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-warning{--_base: var(--solaris-color-warning);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, var(--solaris-color-black));--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-error{--_base: var(--solaris-color-error);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 16%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 78%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}.solaris-avatar.color-info{--_base: var(--solaris-color-info);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 16%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 78%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}.solaris-avatar.color-custom{--_base: var(--solaris-avatar-custom-bg, var(--solaris-color-surface-2));--solaris-avatar-fg: var(--_base);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 18%, var(--solaris-color-surface));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SolarisSkeleton, selector: "solaris-skeleton", inputs: ["shape", "width", "height", "radius", "animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6228
6229
|
}
|
|
6229
6230
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisAvatar, decorators: [{
|
|
6230
6231
|
type: Component,
|
|
6231
|
-
args: [{ selector: 'solaris-avatar', standalone: true, imports: [NgClass, SolarisSkeleton], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (asButton()) {\n <button\n class=\"solaris-avatar\"\n [ngClass]=\"rootClasses()\"\n [type]=\"buttonType()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"accessibleLabel()\"\n [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\"\n [style.--solaris-avatar-radius]=\"resolvedRadius()\"\n [style.--solaris-avatar-image-fit]=\"objectFit()\"\n [style.--solaris-avatar-custom-bg]=\"customColorValue()\"\n >\n <span class=\"solaris-avatar__body\">\n @if (loading()) {\n <solaris-skeleton class=\"solaris-avatar__skeleton\" radius=\"inherit\"></solaris-skeleton>\n } @else if (showImage()) {\n <img\n class=\"solaris-avatar__image\"\n [src]=\"normalizedSrc()\"\n alt=\"\"\n aria-hidden=\"true\"\n decoding=\"async\"\n (load)=\"onImageLoad()\"\n (error)=\"onImageError()\"\n />\n } @else if (showLetter()) {\n <span class=\"solaris-avatar__label\" aria-hidden=\"true\">\n {{ resolvedInitials() }}\n </span>\n } @else if (showDefault()) {\n <span class=\"solaris-avatar__placeholder\" aria-hidden=\"true\">\n <svg\n class=\"solaris-avatar__placeholder-svg\"\n viewBox=\"0 0 64 64\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle class=\"solaris-avatar__placeholder-head\" cx=\"32\" cy=\"25\" r=\"14\"></circle>\n <path\n class=\"solaris-avatar__placeholder-body\"\n d=\"M2 64 C6 50, 18 42, 32 45 C46 42, 58 50, 62 64 Z\"\n ></path>\n </svg>\n </span>\n }\n </span>\n\n <span class=\"solaris-avatar__overlay\" aria-hidden=\"true\">\n <ng-content></ng-content>\n </span>\n </button>\n} @else {\n <span\n class=\"solaris-avatar\"\n [ngClass]=\"rootClasses()\"\n [attr.role]=\"rootRole()\"\n [attr.aria-label]=\"accessibleLabel()\"\n [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\"\n [style.--solaris-avatar-radius]=\"resolvedRadius()\"\n [style.--solaris-avatar-image-fit]=\"objectFit()\"\n [style.--solaris-avatar-custom-bg]=\"customColorValue()\"\n >\n <span class=\"solaris-avatar__body\">\n @if (loading()) {\n <solaris-skeleton class=\"solaris-avatar__skeleton\" radius=\"inherit\"></solaris-skeleton>\n } @else if (showImage()) {\n <img\n class=\"solaris-avatar__image\"\n [src]=\"normalizedSrc()\"\n alt=\"\"\n aria-hidden=\"true\"\n decoding=\"async\"\n (load)=\"onImageLoad()\"\n (error)=\"onImageError()\"\n />\n } @else if (showLetter()) {\n <span class=\"solaris-avatar__label\" aria-hidden=\"true\">{{ resolvedInitials() }}</span>\n } @else if (showDefault()) {\n <span class=\"solaris-avatar__placeholder\" aria-hidden=\"true\">\n <svg\n class=\"solaris-avatar__placeholder-svg\"\n viewBox=\"0 0 64 64\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle class=\"solaris-avatar__placeholder-head\" cx=\"32\" cy=\"25\" r=\"14\"></circle>\n <path\n class=\"solaris-avatar__placeholder-body\"\n d=\"M2 64 C6 50, 18 42, 32 45 C46 42, 58 50, 62 64 Z\"\n ></path>\n </svg>\n </span>\n }\n </span>\n\n <span class=\"solaris-avatar__overlay\" aria-hidden=\"true\">\n <ng-content></ng-content>\n </span>\n </span>\n}\n", styles: [".solaris-avatar-host{display:inline-flex;vertical-align:middle}.solaris-avatar{--solaris-avatar-size-xs: 2.4rem;--solaris-avatar-size-sm: 3.2rem;--solaris-avatar-size-md: 4rem;--solaris-avatar-size-lg: 4.8rem;--solaris-avatar-size-xl: 6.4rem;--solaris-avatar-radius-square: var(--solaris-radius-md);--solaris-avatar-radius-circle: var(--solaris-radius-full);--solaris-avatar-bg: var(--solaris-color-surface-2);--solaris-avatar-fg: var(--solaris-color-text);--solaris-avatar-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent);--solaris-avatar-placeholder-bg: var(--solaris-avatar-bg);--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--solaris-avatar-fg) 62%, transparent);--solaris-avatar-ring-focus: 0 0 0 .3rem color-mix(in srgb, var(--solaris-color-primary) 26%, transparent);--solaris-avatar-shadow: none;--solaris-avatar-shadow-hover: var(--solaris-shadow-xs);--solaris-avatar-opacity-disabled: .56;--solaris-avatar-badge-size: 1.6rem;--solaris-avatar-badge-offset-x: 0;--solaris-avatar-badge-offset-y: 0;--solaris-avatar-badge-border: .2rem solid var(--solaris-color-surface);--solaris-avatar-image-fit: cover;--solaris-avatar-radius: var(--solaris-avatar-radius-circle);inline-size:var(--_avatar-size);block-size:var(--_avatar-size);padding:0;margin:0;border:0;background:transparent;color:inherit;font:inherit;text-decoration:none;position:relative;display:inline-grid;place-items:center;-webkit-user-select:none;user-select:none;overflow:visible;outline:none}.solaris-avatar.size-xs{--_avatar-size: var(--solaris-avatar-size-xs);--solaris-avatar-font-size: var(--solaris-fs-10);--solaris-avatar-badge-size: 1.2rem}.solaris-avatar.size-sm{--_avatar-size: var(--solaris-avatar-size-sm);--solaris-avatar-font-size: var(--solaris-fs-12);--solaris-avatar-badge-size: 1.4rem}.solaris-avatar.size-md{--_avatar-size: var(--solaris-avatar-size-md);--solaris-avatar-font-size: var(--solaris-fs-14);--solaris-avatar-badge-size: 1.6rem}.solaris-avatar.size-lg{--_avatar-size: var(--solaris-avatar-size-lg);--solaris-avatar-font-size: var(--solaris-fs-16);--solaris-avatar-badge-size: 1.8rem}.solaris-avatar.size-xl{--_avatar-size: var(--solaris-avatar-size-xl);--solaris-avatar-font-size: var(--solaris-fs-20);--solaris-avatar-badge-size: 2rem}.solaris-avatar.shape-circle{--solaris-avatar-radius: var(--solaris-avatar-radius-circle)}.solaris-avatar.shape-square{--solaris-avatar-radius: var(--solaris-avatar-radius-square)}.solaris-avatar__body{display:grid;block-size:100%;overflow:hidden;inline-size:100%;place-items:center;color:var(--solaris-avatar-fg);background:var(--solaris-avatar-bg);box-shadow:var(--solaris-avatar-shadow);border-radius:var(--solaris-avatar-radius);border:1px solid var(--solaris-avatar-border);transition:box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-avatar__image{inline-size:100%;block-size:100%;display:block;object-fit:var(--solaris-avatar-image-fit)}.solaris-avatar__label{font-size:var(--solaris-avatar-font-size);font-weight:700;line-height:1;letter-spacing:var(--solaris-ls-sm);text-transform:uppercase}.solaris-avatar__placeholder{display:grid;block-size:100%;inline-size:100%;place-items:stretch;color:var(--solaris-avatar-placeholder-fg)}.solaris-avatar__placeholder-svg{inline-size:100%;block-size:100%;display:block}.solaris-avatar__placeholder-head,.solaris-avatar__placeholder-body{fill:currentColor}.solaris-avatar__overlay{position:absolute;inset-inline-end:var(--solaris-avatar-badge-offset-x);inset-block-end:var(--solaris-avatar-badge-offset-y);z-index:3;display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--solaris-avatar-badge-size);min-block-size:var(--solaris-avatar-badge-size);transform:translate(35%,35%);pointer-events:none}.solaris-avatar__overlay:empty{display:none}.solaris-avatar__overlay>*{max-inline-size:100%;flex-shrink:0;pointer-events:auto}.solaris-avatar__skeleton{inline-size:100%;block-size:100%;display:block}.solaris-avatar.is-interactive:not(.is-disabled),.solaris-avatar.is-button:not(.is-disabled){cursor:pointer}.solaris-avatar.is-interactive:not(.is-disabled):hover .solaris-avatar__body,.solaris-avatar.is-button:not(.is-disabled):hover .solaris-avatar__body{box-shadow:var(--solaris-avatar-shadow-hover)}.solaris-avatar.is-button:focus-visible .solaris-avatar__body{box-shadow:var(--solaris-avatar-ring-focus)}.solaris-avatar.is-disabled{opacity:var(--solaris-avatar-opacity-disabled);cursor:not-allowed}.solaris-avatar.is-disabled .solaris-avatar__body,.solaris-avatar:disabled .solaris-avatar__body{box-shadow:none}.solaris-avatar.shape-square .solaris-avatar__overlay{transform:none;inset-block-end:-.15rem;inset-inline-end:-.15rem}.solaris-avatar.color-surface{--_base: var(--solaris-color-surface-2);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white));--solaris-avatar-fg: var(--solaris-color-text);--solaris-avatar-border: color-mix(in srgb, var(--solaris-color-border) 70%, var(--_base))}.solaris-avatar.color-primary{--_base: var(--solaris-color-primary);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, var(--solaris-color-white));--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-success{--_base: var(--solaris-color-success);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, var(--solaris-color-white));--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-warning{--_base: var(--solaris-color-warning);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, var(--solaris-color-black));--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-error{--_base: var(--solaris-color-error);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 16%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 78%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}.solaris-avatar.color-info{--_base: var(--solaris-color-info);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 16%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 78%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}.solaris-avatar.color-custom{--_base: var(--solaris-avatar-custom-bg, var(--solaris-color-surface-2));--solaris-avatar-fg: var(--_base);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 18%, var(--solaris-color-surface));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}\n"] }]
|
|
6232
|
+
args: [{ selector: 'solaris-avatar', standalone: true, imports: [NgClass, SolarisSkeleton], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (asButton()) {\n <button\n class=\"solaris-avatar\"\n [ngClass]=\"rootClasses()\"\n [type]=\"buttonType()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"accessibleLabel()\"\n [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\"\n [style.--solaris-avatar-radius]=\"resolvedRadius()\"\n [style.--solaris-avatar-image-fit]=\"objectFit()\"\n [style.--solaris-avatar-custom-bg]=\"customColorValue()\"\n >\n <span class=\"solaris-avatar-body\">\n @if (loading()) {\n <solaris-skeleton class=\"solaris-avatar-skeleton\" radius=\"inherit\"></solaris-skeleton>\n } @else if (showImage()) {\n <img\n class=\"solaris-avatar-image\"\n [src]=\"normalizedSrc()\"\n alt=\"\"\n aria-hidden=\"true\"\n decoding=\"async\"\n (load)=\"onImageLoad()\"\n (error)=\"onImageError()\"\n />\n } @else if (showLetter()) {\n <span class=\"solaris-avatar-label\" aria-hidden=\"true\">\n {{ resolvedInitials() }}\n </span>\n } @else if (showDefault()) {\n <span class=\"solaris-avatar-placeholder\" aria-hidden=\"true\">\n <svg\n class=\"solaris-avatar-placeholder-svg\"\n viewBox=\"0 0 64 64\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle class=\"solaris-avatar-placeholder-head\" cx=\"32\" cy=\"25\" r=\"14\"></circle>\n <path\n class=\"solaris-avatar-placeholder-body\"\n d=\"M2 64 C6 50, 18 42, 32 45 C46 42, 58 50, 62 64 Z\"\n ></path>\n </svg>\n </span>\n }\n </span>\n\n <span class=\"solaris-avatar-overlay\" aria-hidden=\"true\">\n <ng-content></ng-content>\n </span>\n </button>\n} @else {\n <span\n class=\"solaris-avatar\"\n [ngClass]=\"rootClasses()\"\n [attr.role]=\"rootRole()\"\n [attr.aria-label]=\"accessibleLabel()\"\n [attr.aria-hidden]=\"ariaHidden() ? 'true' : null\"\n [style.--solaris-avatar-radius]=\"resolvedRadius()\"\n [style.--solaris-avatar-image-fit]=\"objectFit()\"\n [style.--solaris-avatar-custom-bg]=\"customColorValue()\"\n >\n <span class=\"solaris-avatar-body\">\n @if (loading()) {\n <solaris-skeleton class=\"solaris-avatar-skeleton\" radius=\"inherit\"></solaris-skeleton>\n } @else if (showImage()) {\n <img\n class=\"solaris-avatar-image\"\n [src]=\"normalizedSrc()\"\n alt=\"\"\n aria-hidden=\"true\"\n decoding=\"async\"\n (load)=\"onImageLoad()\"\n (error)=\"onImageError()\"\n />\n } @else if (showLetter()) {\n <span class=\"solaris-avatar-label\" aria-hidden=\"true\">{{ resolvedInitials() }}</span>\n } @else if (showDefault()) {\n <span class=\"solaris-avatar-placeholder\" aria-hidden=\"true\">\n <svg\n class=\"solaris-avatar-placeholder-svg\"\n viewBox=\"0 0 64 64\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle class=\"solaris-avatar-placeholder-head\" cx=\"32\" cy=\"25\" r=\"14\"></circle>\n <path\n class=\"solaris-avatar-placeholder-body\"\n d=\"M2 64 C6 50, 18 42, 32 45 C46 42, 58 50, 62 64 Z\"\n ></path>\n </svg>\n </span>\n }\n </span>\n\n <span class=\"solaris-avatar-overlay\" aria-hidden=\"true\">\n <ng-content></ng-content>\n </span>\n </span>\n}\n\r\n", styles: [".solaris-avatar-host{display:inline-flex;vertical-align:middle}.solaris-avatar{--solaris-avatar-size-xs: 2.4rem;--solaris-avatar-size-sm: 3.2rem;--solaris-avatar-size-md: 4rem;--solaris-avatar-size-lg: 4.8rem;--solaris-avatar-size-xl: 6.4rem;--solaris-avatar-radius-square: var(--solaris-radius-md);--solaris-avatar-radius-circle: var(--solaris-radius-full);--solaris-avatar-bg: var(--solaris-color-surface-2);--solaris-avatar-fg: var(--solaris-color-text);--solaris-avatar-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent);--solaris-avatar-placeholder-bg: var(--solaris-avatar-bg);--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--solaris-avatar-fg) 62%, transparent);--solaris-avatar-ring-focus: 0 0 0 .3rem color-mix(in srgb, var(--solaris-color-primary) 26%, transparent);--solaris-avatar-shadow: none;--solaris-avatar-shadow-hover: var(--solaris-shadow-xs);--solaris-avatar-opacity-disabled: .56;--solaris-avatar-badge-size: 1.6rem;--solaris-avatar-badge-offset-x: 0;--solaris-avatar-badge-offset-y: 0;--solaris-avatar-badge-border: .2rem solid var(--solaris-color-surface);--solaris-avatar-image-fit: cover;--solaris-avatar-radius: var(--solaris-avatar-radius-circle);inline-size:var(--_avatar-size);block-size:var(--_avatar-size);padding:0;margin:0;border:0;background:transparent;color:inherit;font:inherit;text-decoration:none;position:relative;display:inline-grid;place-items:center;-webkit-user-select:none;user-select:none;overflow:visible;outline:none}.solaris-avatar.size-xs{--_avatar-size: var(--solaris-avatar-size-xs);--solaris-avatar-font-size: var(--solaris-fs-10);--solaris-avatar-badge-size: 1.2rem}.solaris-avatar.size-sm{--_avatar-size: var(--solaris-avatar-size-sm);--solaris-avatar-font-size: var(--solaris-fs-12);--solaris-avatar-badge-size: 1.4rem}.solaris-avatar.size-md{--_avatar-size: var(--solaris-avatar-size-md);--solaris-avatar-font-size: var(--solaris-fs-14);--solaris-avatar-badge-size: 1.6rem}.solaris-avatar.size-lg{--_avatar-size: var(--solaris-avatar-size-lg);--solaris-avatar-font-size: var(--solaris-fs-16);--solaris-avatar-badge-size: 1.8rem}.solaris-avatar.size-xl{--_avatar-size: var(--solaris-avatar-size-xl);--solaris-avatar-font-size: var(--solaris-fs-20);--solaris-avatar-badge-size: 2rem}.solaris-avatar.shape-circle{--solaris-avatar-radius: var(--solaris-avatar-radius-circle)}.solaris-avatar.shape-square{--solaris-avatar-radius: var(--solaris-avatar-radius-square)}.solaris-avatar-body{display:grid;block-size:100%;overflow:hidden;inline-size:100%;place-items:center;color:var(--solaris-avatar-fg);background:var(--solaris-avatar-bg);box-shadow:var(--solaris-avatar-shadow);border-radius:var(--solaris-avatar-radius);border:1px solid var(--solaris-avatar-border);transition:box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-avatar-image{inline-size:100%;block-size:100%;display:block;object-fit:var(--solaris-avatar-image-fit)}.solaris-avatar-label{font-size:var(--solaris-avatar-font-size);font-weight:700;line-height:1;letter-spacing:var(--solaris-ls-sm);text-transform:uppercase}.solaris-avatar-placeholder{display:grid;block-size:100%;inline-size:100%;place-items:stretch;color:var(--solaris-avatar-placeholder-fg)}.solaris-avatar-placeholder-svg{inline-size:100%;block-size:100%;display:block}.solaris-avatar-placeholder-head,.solaris-avatar-placeholder-body{fill:currentColor}.solaris-avatar-overlay{position:absolute;inset-inline-end:var(--solaris-avatar-badge-offset-x);inset-block-end:var(--solaris-avatar-badge-offset-y);z-index:3;display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--solaris-avatar-badge-size);min-block-size:var(--solaris-avatar-badge-size);transform:translate(35%,35%);pointer-events:none}.solaris-avatar-overlay:empty{display:none}.solaris-avatar-overlay>*{max-inline-size:100%;flex-shrink:0;pointer-events:auto}.solaris-avatar-skeleton{inline-size:100%;block-size:100%;display:block}.solaris-avatar.is-interactive:not(.is-disabled),.solaris-avatar.is-button:not(.is-disabled){cursor:pointer}.solaris-avatar.is-interactive:not(.is-disabled):hover .solaris-avatar-body,.solaris-avatar.is-button:not(.is-disabled):hover .solaris-avatar-body{box-shadow:var(--solaris-avatar-shadow-hover)}.solaris-avatar.is-button:focus-visible .solaris-avatar-body{box-shadow:var(--solaris-avatar-ring-focus)}.solaris-avatar.is-disabled{opacity:var(--solaris-avatar-opacity-disabled);cursor:not-allowed}.solaris-avatar.is-disabled .solaris-avatar-body,.solaris-avatar:disabled .solaris-avatar-body{box-shadow:none}.solaris-avatar.shape-square .solaris-avatar-overlay{transform:none;inset-block-end:-.15rem;inset-inline-end:-.15rem}.solaris-avatar.color-surface{--_base: var(--solaris-color-surface-2);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 92%, var(--solaris-color-white));--solaris-avatar-fg: var(--solaris-color-text);--solaris-avatar-border: color-mix(in srgb, var(--solaris-color-border) 70%, var(--_base))}.solaris-avatar.color-primary{--_base: var(--solaris-color-primary);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, var(--solaris-color-white));--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-success{--_base: var(--solaris-color-success);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, var(--solaris-color-white));--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-warning{--_base: var(--solaris-color-warning);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 22%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 88%, var(--solaris-color-black));--solaris-avatar-placeholder-fg: color-mix(in srgb, var(--_base) 52%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 42%, var(--solaris-color-border))}.solaris-avatar.color-error{--_base: var(--solaris-color-error);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 16%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 78%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}.solaris-avatar.color-info{--_base: var(--solaris-color-info);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 16%, var(--solaris-color-surface));--solaris-avatar-fg: color-mix(in srgb, var(--_base) 78%, var(--solaris-color-white));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}.solaris-avatar.color-custom{--_base: var(--solaris-avatar-custom-bg, var(--solaris-color-surface-2));--solaris-avatar-fg: var(--_base);--solaris-avatar-bg: color-mix(in srgb, var(--_base) 18%, var(--solaris-color-surface));--solaris-avatar-border: color-mix(in srgb, var(--_base) 34%, var(--solaris-color-border))}\n"] }]
|
|
6232
6233
|
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], buttonType: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonType", required: false }] }], asButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "asButton", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], objectFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectFit", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-hidden", required: false }] }], hostClass: [{
|
|
6233
6234
|
type: HostBinding,
|
|
6234
6235
|
args: ['class']
|
|
@@ -6264,7 +6265,7 @@ class SolarisPresenceAvatar {
|
|
|
6264
6265
|
return this.translationService.translate(`ui.solaris.avatar.presence.states.${this.presence()}`);
|
|
6265
6266
|
}, ...(ngDevMode ? [{ debugName: "presenceTooltipKey" }] : /* istanbul ignore next */ []));
|
|
6266
6267
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisPresenceAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6267
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: SolarisPresenceAvatar, isStandalone: true, selector: "solaris-presence-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null }, asButton: { classPropertyName: "asButton", publicName: "asButton", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, objectFit: { classPropertyName: "objectFit", publicName: "objectFit", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "aria-hidden", isSignal: true, isRequired: false, transformFunction: null }, presence: { classPropertyName: "presence", publicName: "presence", isSignal: true, isRequired: false, transformFunction: null }, presenceAriaLabel: { classPropertyName: "presenceAriaLabel", publicName: "presenceAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: false, transformFunction: null }, lastSeenAt: { classPropertyName: "lastSeenAt", publicName: "lastSeenAt", isSignal: true, isRequired: false, transformFunction: null }, quietHours: { classPropertyName: "quietHours", publicName: "quietHours", isSignal: true, isRequired: false, transformFunction: null }, workHoursStart: { classPropertyName: "workHoursStart", publicName: "workHoursStart", isSignal: true, isRequired: false, transformFunction: null }, workHoursEnd: { classPropertyName: "workHoursEnd", publicName: "workHoursEnd", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<solaris-avatar\n [src]=\"src()\"\n [alt]=\"alt()\"\n [name]=\"name()\"\n [initials]=\"initials()\"\n [size]=\"size()\"\n [shape]=\"shape()\"\n [variant]=\"variant()\"\n [color]=\"color()\"\n [loading]=\"loading()\"\n [disabled]=\"disabled()\"\n [interactive]=\"interactive()\"\n [buttonType]=\"buttonType()\"\n [asButton]=\"asButton()\"\n [radius]=\"radius()\"\n [objectFit]=\"objectFit()\"\n [aria-label]=\"ariaLabel()\"\n [aria-hidden]=\"ariaHidden()\"\n solaris-tooltip\n [tooltip-key]=\"presenceTooltipKey()\"\n tooltip-variant=\"default\"\n tooltip-size=\"sm\"\n tooltip-prefix-icon=\"ph ph-info\"\n>\n <span solaris-avatar-overlay class=\"solaris-presence-
|
|
6268
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: SolarisPresenceAvatar, isStandalone: true, selector: "solaris-presence-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null }, asButton: { classPropertyName: "asButton", publicName: "asButton", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, objectFit: { classPropertyName: "objectFit", publicName: "objectFit", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "aria-hidden", isSignal: true, isRequired: false, transformFunction: null }, presence: { classPropertyName: "presence", publicName: "presence", isSignal: true, isRequired: false, transformFunction: null }, presenceAriaLabel: { classPropertyName: "presenceAriaLabel", publicName: "presenceAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: false, transformFunction: null }, lastSeenAt: { classPropertyName: "lastSeenAt", publicName: "lastSeenAt", isSignal: true, isRequired: false, transformFunction: null }, quietHours: { classPropertyName: "quietHours", publicName: "quietHours", isSignal: true, isRequired: false, transformFunction: null }, workHoursStart: { classPropertyName: "workHoursStart", publicName: "workHoursStart", isSignal: true, isRequired: false, transformFunction: null }, workHoursEnd: { classPropertyName: "workHoursEnd", publicName: "workHoursEnd", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<solaris-avatar\n [src]=\"src()\"\n [alt]=\"alt()\"\n [name]=\"name()\"\n [initials]=\"initials()\"\n [size]=\"size()\"\n [shape]=\"shape()\"\n [variant]=\"variant()\"\n [color]=\"color()\"\n [loading]=\"loading()\"\n [disabled]=\"disabled()\"\n [interactive]=\"interactive()\"\n [buttonType]=\"buttonType()\"\n [asButton]=\"asButton()\"\n [radius]=\"radius()\"\n [objectFit]=\"objectFit()\"\n [aria-label]=\"ariaLabel()\"\n [aria-hidden]=\"ariaHidden()\"\n solaris-tooltip\n [tooltip-key]=\"presenceTooltipKey()\"\n tooltip-variant=\"default\"\n tooltip-size=\"sm\"\n tooltip-prefix-icon=\"ph ph-info\"\n>\n <span solaris-avatar-overlay class=\"solaris-presence-avatar-overlay\" aria-hidden=\"true\">\n <solaris-avatar-presence\n [presence]=\"presence()\"\n [timezone]=\"timezone()\"\n [lastSeenAt]=\"lastSeenAt()\"\n [quietHours]=\"quietHours()\"\n [workHoursStart]=\"workHoursStart()\"\n [workHoursEnd]=\"workHoursEnd()\"\n [aria-label]=\"presenceAriaLabel()\"\n [aria-hidden]=\"ariaHidden()\"\n [shape]=\"shape()\"\n >\n </solaris-avatar-presence>\n </span>\n</solaris-avatar>\n\r\n", styles: [":host{display:inline-flex;vertical-align:middle}.solaris-presence-avatar-overlay{display:inline-flex;align-items:center;justify-content:center;line-height:1}:host(.shape-square) .solaris-presence-avatar-overlay{transform:translate(18%,18%)}\n"], dependencies: [{ kind: "component", type: SolarisAvatar, selector: "solaris-avatar", inputs: ["size", "shape", "variant", "src", "alt", "name", "initials", "color", "loading", "disabled", "interactive", "buttonType", "asButton", "radius", "objectFit", "aria-label", "aria-hidden"] }, { kind: "component", type: SolarisAvatarPresence, selector: "solaris-avatar-presence", inputs: ["presence", "timezone", "lastSeenAt", "quietHours", "workHoursStart", "workHoursEnd", "shape", "aria-label", "aria-hidden"] }, { kind: "directive", type: SolarisTooltipDirective, selector: "[solaris-tooltip]", inputs: ["solaris-tooltip", "tooltip-position", "tooltip-variant", "tooltip-size", "tooltip-prefix-icon", "tooltip-disabled", "tooltip-show-delay", "tooltip-hide-delay", "tooltip-offset", "tooltip-auto-flip", "tooltip-auto-shift", "tooltip-viewport-padding", "tooltip-key", "tooltip-params"] }, { kind: "directive", type: SolarisAvatarOverlayDirective, selector: "[solaris-avatar-overlay]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6268
6269
|
}
|
|
6269
6270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisPresenceAvatar, decorators: [{
|
|
6270
6271
|
type: Component,
|
|
@@ -6273,7 +6274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
6273
6274
|
SolarisAvatarPresence,
|
|
6274
6275
|
SolarisTooltipDirective,
|
|
6275
6276
|
SolarisAvatarOverlayDirective,
|
|
6276
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<solaris-avatar\n [src]=\"src()\"\n [alt]=\"alt()\"\n [name]=\"name()\"\n [initials]=\"initials()\"\n [size]=\"size()\"\n [shape]=\"shape()\"\n [variant]=\"variant()\"\n [color]=\"color()\"\n [loading]=\"loading()\"\n [disabled]=\"disabled()\"\n [interactive]=\"interactive()\"\n [buttonType]=\"buttonType()\"\n [asButton]=\"asButton()\"\n [radius]=\"radius()\"\n [objectFit]=\"objectFit()\"\n [aria-label]=\"ariaLabel()\"\n [aria-hidden]=\"ariaHidden()\"\n solaris-tooltip\n [tooltip-key]=\"presenceTooltipKey()\"\n tooltip-variant=\"default\"\n tooltip-size=\"sm\"\n tooltip-prefix-icon=\"ph ph-info\"\n>\n <span solaris-avatar-overlay class=\"solaris-presence-
|
|
6277
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<solaris-avatar\n [src]=\"src()\"\n [alt]=\"alt()\"\n [name]=\"name()\"\n [initials]=\"initials()\"\n [size]=\"size()\"\n [shape]=\"shape()\"\n [variant]=\"variant()\"\n [color]=\"color()\"\n [loading]=\"loading()\"\n [disabled]=\"disabled()\"\n [interactive]=\"interactive()\"\n [buttonType]=\"buttonType()\"\n [asButton]=\"asButton()\"\n [radius]=\"radius()\"\n [objectFit]=\"objectFit()\"\n [aria-label]=\"ariaLabel()\"\n [aria-hidden]=\"ariaHidden()\"\n solaris-tooltip\n [tooltip-key]=\"presenceTooltipKey()\"\n tooltip-variant=\"default\"\n tooltip-size=\"sm\"\n tooltip-prefix-icon=\"ph ph-info\"\n>\n <span solaris-avatar-overlay class=\"solaris-presence-avatar-overlay\" aria-hidden=\"true\">\n <solaris-avatar-presence\n [presence]=\"presence()\"\n [timezone]=\"timezone()\"\n [lastSeenAt]=\"lastSeenAt()\"\n [quietHours]=\"quietHours()\"\n [workHoursStart]=\"workHoursStart()\"\n [workHoursEnd]=\"workHoursEnd()\"\n [aria-label]=\"presenceAriaLabel()\"\n [aria-hidden]=\"ariaHidden()\"\n [shape]=\"shape()\"\n >\n </solaris-avatar-presence>\n </span>\n</solaris-avatar>\n\r\n", styles: [":host{display:inline-flex;vertical-align:middle}.solaris-presence-avatar-overlay{display:inline-flex;align-items:center;justify-content:center;line-height:1}:host(.shape-square) .solaris-presence-avatar-overlay{transform:translate(18%,18%)}\n"] }]
|
|
6277
6278
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], buttonType: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonType", required: false }] }], asButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "asButton", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], objectFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectFit", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-hidden", required: false }] }], presence: [{ type: i0.Input, args: [{ isSignal: true, alias: "presence", required: false }] }], presenceAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "presenceAriaLabel", required: false }] }], timezone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timezone", required: false }] }], lastSeenAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastSeenAt", required: false }] }], quietHours: [{ type: i0.Input, args: [{ isSignal: true, alias: "quietHours", required: false }] }], workHoursStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "workHoursStart", required: false }] }], workHoursEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "workHoursEnd", required: false }] }] } });
|
|
6278
6279
|
|
|
6279
6280
|
class SolarisAvatarStack {
|
|
@@ -6292,11 +6293,11 @@ class SolarisAvatarStack {
|
|
|
6292
6293
|
}, ...(ngDevMode ? [{ debugName: "hiddenCount" }] : /* istanbul ignore next */ []));
|
|
6293
6294
|
hasHiddenItems = computed(() => this.hiddenCount() > 0, ...(ngDevMode ? [{ debugName: "hasHiddenItems" }] : /* istanbul ignore next */ []));
|
|
6294
6295
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisAvatarStack, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6295
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisAvatarStack, isStandalone: true, selector: "solaris-avatar-stack", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, showPresence: { classPropertyName: "showPresence", publicName: "showPresence", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, overlap: { classPropertyName: "overlap", publicName: "overlap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"solaris-avatar-stack\"\n [attr.data-size]=\"size()\"\n [attr.data-shape]=\"shape()\"\n [attr.data-overlap]=\"overlap()\"\n>\n @for (item of visibleItems(); track item.name ?? item.src ?? $index) {\n <span class=\"solaris-avatar-
|
|
6296
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisAvatarStack, isStandalone: true, selector: "solaris-avatar-stack", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, showPresence: { classPropertyName: "showPresence", publicName: "showPresence", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, overlap: { classPropertyName: "overlap", publicName: "overlap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"solaris-avatar-stack\"\n [attr.data-size]=\"size()\"\n [attr.data-shape]=\"shape()\"\n [attr.data-overlap]=\"overlap()\"\n>\n @for (item of visibleItems(); track item.name ?? item.src ?? $index) {\n <span class=\"solaris-avatar-stack-item\">\n @if (showPresence()) {\n <solaris-presence-avatar\n [size]=\"size()\"\n [shape]=\"shape()\"\n [src]=\"item.src ?? null\"\n [alt]=\"item.alt ?? null\"\n [name]=\"item.name ?? null\"\n [initials]=\"item.initials ?? null\"\n [presence]=\"item.presence ?? 'offline'\"\n [timezone]=\"item.timezone ?? null\"\n [lastSeenAt]=\"item.lastSeenAt ?? null\"\n [quietHours]=\"item.quietHours ?? false\"\n />\n } @else {\n <solaris-avatar\n [size]=\"size()\"\n [shape]=\"shape()\"\n [src]=\"item.src ?? null\"\n [alt]=\"item.alt ?? null\"\n [name]=\"item.name ?? null\"\n [initials]=\"item.initials ?? null\"\n />\n }\n </span>\n }\n\n @if (hasHiddenItems()) {\n <span class=\"solaris-avatar-stack-item solaris-avatar-stack-more\">\n +{{ hiddenCount() }}\n </span>\n }\n</div>\n\r\n", styles: [":host{display:inline-flex;vertical-align:middle}.solaris-avatar-stack{--solaris-avatar-stack-overlap: -.8rem;--solaris-avatar-stack-more-size: 4rem;--solaris-avatar-stack-more-bg: var(--solaris-color-surface-2);--solaris-avatar-stack-more-fg: var(--solaris-color-text);--solaris-avatar-stack-ring: .2rem solid var(--solaris-color-surface);isolation:isolate;align-items:center;display:inline-flex}.solaris-avatar-stack[data-overlap=sm]{--solaris-avatar-stack-overlap: -.4rem}.solaris-avatar-stack[data-overlap=md]{--solaris-avatar-stack-overlap: -.8rem}.solaris-avatar-stack[data-overlap=lg]{--solaris-avatar-stack-overlap: -1.2rem}.solaris-avatar-stack-item{flex:0 0 auto;position:relative;display:inline-flex;border-radius:var(--solaris-radius-full)}.solaris-avatar-stack-item+.solaris-avatar-stack-item{margin-inline-start:var(--solaris-avatar-stack-overlap)}.solaris-avatar-stack-item:nth-child(1){z-index:5}.solaris-avatar-stack-item:nth-child(2){z-index:4}.solaris-avatar-stack-item:nth-child(3){z-index:3}.solaris-avatar-stack-item:nth-child(4){z-index:2}.solaris-avatar-stack-item:nth-child(5){z-index:1}.solaris-avatar-stack-item solaris-presence-avatar{border-radius:inherit;filter:drop-shadow(0 0 0 var(--solaris-color-surface))}.solaris-avatar-stack-more{z-index:10;line-height:1;font-weight:400;place-items:center;display:inline-grid;font-size:var(--solaris-fs-14);box-shadow:var(--solaris-shadow-xs);border:var(--solaris-avatar-stack-ring);border-radius:var(--solaris-radius-full);color:var(--solaris-avatar-stack-more-fg);background:var(--solaris-avatar-stack-more-bg);block-size:var(--solaris-avatar-stack-more-size);inline-size:var(--solaris-avatar-stack-more-size)}.solaris-avatar-stack[data-size=xs]{--solaris-avatar-stack-more-size: 2.4rem;--solaris-avatar-stack-ring: .15rem solid var(--solaris-color-surface)}.solaris-avatar-stack[data-size=sm]{--solaris-avatar-stack-more-size: 3.2rem}.solaris-avatar-stack[data-size=md]{--solaris-avatar-stack-more-size: 4rem}.solaris-avatar-stack[data-size=lg]{--solaris-avatar-stack-more-size: 4.8rem}.solaris-avatar-stack[data-size=xl]{--solaris-avatar-stack-more-size: 6.4rem;--solaris-avatar-stack-ring: .25rem solid var(--solaris-color-surface)}.solaris-avatar-stack[data-shape=square] .solaris-avatar-stack-item,.solaris-avatar-stack[data-shape=square] .solaris-avatar-stack-more{border-radius:var(--solaris-radius-md)}.solaris-avatar-stack-item.solaris-avatar-stack-more{z-index:20}\n"], dependencies: [{ kind: "component", type: SolarisPresenceAvatar, selector: "solaris-presence-avatar", inputs: ["size", "shape", "variant", "src", "alt", "name", "initials", "color", "loading", "disabled", "interactive", "buttonType", "asButton", "radius", "objectFit", "aria-label", "aria-hidden", "presence", "presenceAriaLabel", "timezone", "lastSeenAt", "quietHours", "workHoursStart", "workHoursEnd"] }, { kind: "component", type: SolarisAvatar, selector: "solaris-avatar", inputs: ["size", "shape", "variant", "src", "alt", "name", "initials", "color", "loading", "disabled", "interactive", "buttonType", "asButton", "radius", "objectFit", "aria-label", "aria-hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6296
6297
|
}
|
|
6297
6298
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisAvatarStack, decorators: [{
|
|
6298
6299
|
type: Component,
|
|
6299
|
-
args: [{ selector: 'solaris-avatar-stack', standalone: true, imports: [SolarisPresenceAvatar, SolarisAvatar], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"solaris-avatar-stack\"\n [attr.data-size]=\"size()\"\n [attr.data-shape]=\"shape()\"\n [attr.data-overlap]=\"overlap()\"\n>\n @for (item of visibleItems(); track item.name ?? item.src ?? $index) {\n <span class=\"solaris-avatar-
|
|
6300
|
+
args: [{ selector: 'solaris-avatar-stack', standalone: true, imports: [SolarisPresenceAvatar, SolarisAvatar], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"solaris-avatar-stack\"\n [attr.data-size]=\"size()\"\n [attr.data-shape]=\"shape()\"\n [attr.data-overlap]=\"overlap()\"\n>\n @for (item of visibleItems(); track item.name ?? item.src ?? $index) {\n <span class=\"solaris-avatar-stack-item\">\n @if (showPresence()) {\n <solaris-presence-avatar\n [size]=\"size()\"\n [shape]=\"shape()\"\n [src]=\"item.src ?? null\"\n [alt]=\"item.alt ?? null\"\n [name]=\"item.name ?? null\"\n [initials]=\"item.initials ?? null\"\n [presence]=\"item.presence ?? 'offline'\"\n [timezone]=\"item.timezone ?? null\"\n [lastSeenAt]=\"item.lastSeenAt ?? null\"\n [quietHours]=\"item.quietHours ?? false\"\n />\n } @else {\n <solaris-avatar\n [size]=\"size()\"\n [shape]=\"shape()\"\n [src]=\"item.src ?? null\"\n [alt]=\"item.alt ?? null\"\n [name]=\"item.name ?? null\"\n [initials]=\"item.initials ?? null\"\n />\n }\n </span>\n }\n\n @if (hasHiddenItems()) {\n <span class=\"solaris-avatar-stack-item solaris-avatar-stack-more\">\n +{{ hiddenCount() }}\n </span>\n }\n</div>\n\r\n", styles: [":host{display:inline-flex;vertical-align:middle}.solaris-avatar-stack{--solaris-avatar-stack-overlap: -.8rem;--solaris-avatar-stack-more-size: 4rem;--solaris-avatar-stack-more-bg: var(--solaris-color-surface-2);--solaris-avatar-stack-more-fg: var(--solaris-color-text);--solaris-avatar-stack-ring: .2rem solid var(--solaris-color-surface);isolation:isolate;align-items:center;display:inline-flex}.solaris-avatar-stack[data-overlap=sm]{--solaris-avatar-stack-overlap: -.4rem}.solaris-avatar-stack[data-overlap=md]{--solaris-avatar-stack-overlap: -.8rem}.solaris-avatar-stack[data-overlap=lg]{--solaris-avatar-stack-overlap: -1.2rem}.solaris-avatar-stack-item{flex:0 0 auto;position:relative;display:inline-flex;border-radius:var(--solaris-radius-full)}.solaris-avatar-stack-item+.solaris-avatar-stack-item{margin-inline-start:var(--solaris-avatar-stack-overlap)}.solaris-avatar-stack-item:nth-child(1){z-index:5}.solaris-avatar-stack-item:nth-child(2){z-index:4}.solaris-avatar-stack-item:nth-child(3){z-index:3}.solaris-avatar-stack-item:nth-child(4){z-index:2}.solaris-avatar-stack-item:nth-child(5){z-index:1}.solaris-avatar-stack-item solaris-presence-avatar{border-radius:inherit;filter:drop-shadow(0 0 0 var(--solaris-color-surface))}.solaris-avatar-stack-more{z-index:10;line-height:1;font-weight:400;place-items:center;display:inline-grid;font-size:var(--solaris-fs-14);box-shadow:var(--solaris-shadow-xs);border:var(--solaris-avatar-stack-ring);border-radius:var(--solaris-radius-full);color:var(--solaris-avatar-stack-more-fg);background:var(--solaris-avatar-stack-more-bg);block-size:var(--solaris-avatar-stack-more-size);inline-size:var(--solaris-avatar-stack-more-size)}.solaris-avatar-stack[data-size=xs]{--solaris-avatar-stack-more-size: 2.4rem;--solaris-avatar-stack-ring: .15rem solid var(--solaris-color-surface)}.solaris-avatar-stack[data-size=sm]{--solaris-avatar-stack-more-size: 3.2rem}.solaris-avatar-stack[data-size=md]{--solaris-avatar-stack-more-size: 4rem}.solaris-avatar-stack[data-size=lg]{--solaris-avatar-stack-more-size: 4.8rem}.solaris-avatar-stack[data-size=xl]{--solaris-avatar-stack-more-size: 6.4rem;--solaris-avatar-stack-ring: .25rem solid var(--solaris-color-surface)}.solaris-avatar-stack[data-shape=square] .solaris-avatar-stack-item,.solaris-avatar-stack[data-shape=square] .solaris-avatar-stack-more{border-radius:var(--solaris-radius-md)}.solaris-avatar-stack-item.solaris-avatar-stack-more{z-index:20}\n"] }]
|
|
6300
6301
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], showPresence: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPresence", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], overlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlap", required: false }] }] } });
|
|
6301
6302
|
|
|
6302
6303
|
class SolarisAvatarDropdown {
|
|
@@ -6320,7 +6321,7 @@ class SolarisAvatarDropdown {
|
|
|
6320
6321
|
}
|
|
6321
6322
|
}
|
|
6322
6323
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisAvatarDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6323
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisAvatarDropdown, isStandalone: true, selector: "solaris-avatar-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, overlap: { classPropertyName: "overlap", publicName: "overlap", isSignal: true, isRequired: false, transformFunction: null }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, panelLabel: { classPropertyName: "panelLabel", publicName: "panelLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", openChange: "openChange" }, ngImport: i0, template: "<solaris-popover\n #popover\n [placement]=\"placement()\"\n [offset]=\"8\"\n [autoFlip]=\"true\"\n [autoShift]=\"true\"\n [closeOnEscape]=\"true\"\n [closeOnOutsideClick]=\"true\"\n panelClass=\"solaris-avatar-dropdown-popover\"\n (openChange)=\"openChange.emit($event)\"\n>\n <button\n type=\"button\"\n solaris-popover-trigger\n class=\"solaris-avatar-
|
|
6324
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisAvatarDropdown, isStandalone: true, selector: "solaris-avatar-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, overlap: { classPropertyName: "overlap", publicName: "overlap", isSignal: true, isRequired: false, transformFunction: null }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, panelLabel: { classPropertyName: "panelLabel", publicName: "panelLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", openChange: "openChange" }, ngImport: i0, template: "<solaris-popover\n #popover\n [placement]=\"placement()\"\n [offset]=\"8\"\n [autoFlip]=\"true\"\n [autoShift]=\"true\"\n [closeOnEscape]=\"true\"\n [closeOnOutsideClick]=\"true\"\n panelClass=\"solaris-avatar-dropdown-popover\"\n (openChange)=\"openChange.emit($event)\"\n>\n <button\n type=\"button\"\n solaris-popover-trigger\n class=\"solaris-avatar-dropdown-trigger\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"panelLabel()\"\n [attr.aria-expanded]=\"popover.isOpen() ? 'true' : 'false'\"\n (click)=\"popover.toggle()\"\n >\n <solaris-avatar-stack\n [items]=\"items()\"\n [max]=\"maxVisible()\"\n [size]=\"size()\"\n [shape]=\"shape()\"\n [overlap]=\"overlap()\"\n [showPresence]=\"false\"\n />\n </button>\n\n <ng-template solaris-popover-panel>\n <div class=\"solaris-avatar-dropdown-panel\" role=\"listbox\" [attr.aria-label]=\"panelLabel()\">\n @for (item of items(); track item.id ?? item.name ?? item.src ?? $index) {\n <button\n type=\"button\"\n class=\"solaris-avatar-dropdown-item\"\n [disabled]=\"item.disabled\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n (click)=\"onItemClick(item, $index, popover)\"\n >\n <solaris-avatar\n size=\"sm\"\n [shape]=\"shape()\"\n [src]=\"item.src ?? null\"\n [alt]=\"item.alt ?? null\"\n [name]=\"item.name ?? null\"\n [initials]=\"item.initials ?? null\"\n />\n\n <span class=\"solaris-avatar-dropdown-item-body\">\n <span class=\"solaris-avatar-dropdown-item-title\">\n {{ item.name || item.initials || 'User' }}\n </span>\n </span>\n </button>\n }\n </div>\n </ng-template>\n</solaris-popover>\n\r\n", styles: [":host{display:inline-flex;vertical-align:middle}.solaris-avatar-dropdown-trigger{border:0;margin:0;padding:0;outline:none;font:inherit;color:inherit;cursor:pointer;align-items:center;display:inline-flex;justify-content:center;background:transparent;border-radius:var(--solaris-radius-full)}.solaris-avatar-dropdown-trigger:disabled{opacity:.56;cursor:not-allowed}.solaris-avatar-dropdown-trigger:focus-visible{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--solaris-color-primary) 26%,transparent)}.solaris-avatar-dropdown-panel{display:grid;overflow:auto;min-inline-size:22rem;max-inline-size:30rem;gap:var(--solaris-space-1);padding:var(--solaris-space-2);max-block-size:min(32rem,100vh - 4rem)}.solaris-avatar-dropdown-item{border:0;width:100%;min-width:0;font:inherit;display:grid;outline:none;cursor:pointer;text-align:start;align-items:center;background:transparent;gap:var(--solaris-space-3);padding:var(--solaris-space-2);color:var(--solaris-color-text);border-radius:var(--solaris-radius-sm);grid-template-columns:auto minmax(0,1fr);transition:background-color var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-avatar-dropdown-item:hover,.solaris-avatar-dropdown-item:focus-visible{background:color-mix(in srgb,var(--solaris-color-surface-2) 78%,transparent)}.solaris-avatar-dropdown-item:disabled{opacity:.52;cursor:not-allowed}.solaris-avatar-dropdown-item-body{gap:.2rem;display:grid;min-inline-size:0}.solaris-avatar-dropdown-item-title{overflow:hidden;font-weight:650;min-inline-size:0;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-tight)}.solaris-avatar-dropdown-item-description{min-inline-size:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text-muted)}\n"], dependencies: [{ kind: "component", type: SolarisPopover, selector: "solaris-popover", inputs: ["offset", "panelClass", "autoFlip", "autoShift", "matchWidth", "viewportPadding", "closeOnEscape", "closeOnOutsideClick", "anchorElement", "matchWidthElement", "placement", "open"], outputs: ["openChange"] }, { kind: "directive", type: SolarisPopoverTriggerDirective, selector: "[solaris-popover-trigger]" }, { kind: "directive", type: SolarisPopoverPanelDirective, selector: "ng-template[solaris-popover-panel]" }, { kind: "component", type: SolarisAvatarStack, selector: "solaris-avatar-stack", inputs: ["items", "max", "showPresence", "size", "shape", "overlap"] }, { kind: "component", type: SolarisAvatar, selector: "solaris-avatar", inputs: ["size", "shape", "variant", "src", "alt", "name", "initials", "color", "loading", "disabled", "interactive", "buttonType", "asButton", "radius", "objectFit", "aria-label", "aria-hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6324
6325
|
}
|
|
6325
6326
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisAvatarDropdown, decorators: [{
|
|
6326
6327
|
type: Component,
|
|
@@ -6330,7 +6331,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
6330
6331
|
SolarisPopoverPanelDirective,
|
|
6331
6332
|
SolarisAvatarStack,
|
|
6332
6333
|
SolarisAvatar,
|
|
6333
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<solaris-popover\n #popover\n [placement]=\"placement()\"\n [offset]=\"8\"\n [autoFlip]=\"true\"\n [autoShift]=\"true\"\n [closeOnEscape]=\"true\"\n [closeOnOutsideClick]=\"true\"\n panelClass=\"solaris-avatar-dropdown-popover\"\n (openChange)=\"openChange.emit($event)\"\n>\n <button\n type=\"button\"\n solaris-popover-trigger\n class=\"solaris-avatar-
|
|
6334
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<solaris-popover\n #popover\n [placement]=\"placement()\"\n [offset]=\"8\"\n [autoFlip]=\"true\"\n [autoShift]=\"true\"\n [closeOnEscape]=\"true\"\n [closeOnOutsideClick]=\"true\"\n panelClass=\"solaris-avatar-dropdown-popover\"\n (openChange)=\"openChange.emit($event)\"\n>\n <button\n type=\"button\"\n solaris-popover-trigger\n class=\"solaris-avatar-dropdown-trigger\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"panelLabel()\"\n [attr.aria-expanded]=\"popover.isOpen() ? 'true' : 'false'\"\n (click)=\"popover.toggle()\"\n >\n <solaris-avatar-stack\n [items]=\"items()\"\n [max]=\"maxVisible()\"\n [size]=\"size()\"\n [shape]=\"shape()\"\n [overlap]=\"overlap()\"\n [showPresence]=\"false\"\n />\n </button>\n\n <ng-template solaris-popover-panel>\n <div class=\"solaris-avatar-dropdown-panel\" role=\"listbox\" [attr.aria-label]=\"panelLabel()\">\n @for (item of items(); track item.id ?? item.name ?? item.src ?? $index) {\n <button\n type=\"button\"\n class=\"solaris-avatar-dropdown-item\"\n [disabled]=\"item.disabled\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n (click)=\"onItemClick(item, $index, popover)\"\n >\n <solaris-avatar\n size=\"sm\"\n [shape]=\"shape()\"\n [src]=\"item.src ?? null\"\n [alt]=\"item.alt ?? null\"\n [name]=\"item.name ?? null\"\n [initials]=\"item.initials ?? null\"\n />\n\n <span class=\"solaris-avatar-dropdown-item-body\">\n <span class=\"solaris-avatar-dropdown-item-title\">\n {{ item.name || item.initials || 'User' }}\n </span>\n </span>\n </button>\n }\n </div>\n </ng-template>\n</solaris-popover>\n\r\n", styles: [":host{display:inline-flex;vertical-align:middle}.solaris-avatar-dropdown-trigger{border:0;margin:0;padding:0;outline:none;font:inherit;color:inherit;cursor:pointer;align-items:center;display:inline-flex;justify-content:center;background:transparent;border-radius:var(--solaris-radius-full)}.solaris-avatar-dropdown-trigger:disabled{opacity:.56;cursor:not-allowed}.solaris-avatar-dropdown-trigger:focus-visible{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--solaris-color-primary) 26%,transparent)}.solaris-avatar-dropdown-panel{display:grid;overflow:auto;min-inline-size:22rem;max-inline-size:30rem;gap:var(--solaris-space-1);padding:var(--solaris-space-2);max-block-size:min(32rem,100vh - 4rem)}.solaris-avatar-dropdown-item{border:0;width:100%;min-width:0;font:inherit;display:grid;outline:none;cursor:pointer;text-align:start;align-items:center;background:transparent;gap:var(--solaris-space-3);padding:var(--solaris-space-2);color:var(--solaris-color-text);border-radius:var(--solaris-radius-sm);grid-template-columns:auto minmax(0,1fr);transition:background-color var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-avatar-dropdown-item:hover,.solaris-avatar-dropdown-item:focus-visible{background:color-mix(in srgb,var(--solaris-color-surface-2) 78%,transparent)}.solaris-avatar-dropdown-item:disabled{opacity:.52;cursor:not-allowed}.solaris-avatar-dropdown-item-body{gap:.2rem;display:grid;min-inline-size:0}.solaris-avatar-dropdown-item-title{overflow:hidden;font-weight:650;min-inline-size:0;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-tight)}.solaris-avatar-dropdown-item-description{min-inline-size:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text-muted)}\n"] }]
|
|
6334
6335
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], overlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlap", required: false }] }], maxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisible", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], panelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelLabel", required: false }] }], itemSelect: [{
|
|
6335
6336
|
type: Output
|
|
6336
6337
|
}], openChange: [{
|
|
@@ -6416,7 +6417,7 @@ class SolarisCard {
|
|
|
6416
6417
|
return String(value ?? '').trim();
|
|
6417
6418
|
}
|
|
6418
6419
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6419
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: SolarisCard, isStandalone: true, selector: "solaris-card", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, reservedInlineEnd: { classPropertyName: "reservedInlineEnd", publicName: "reservedInlineEnd", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-orientation": "orientation()", "attr.data-appearance": "appearance()", "attr.data-color": "colorKey()", "attr.data-selected": "selected() ? \"true\" : null", "attr.data-invalid": "invalid() ? \"true\" : null", "attr.data-interactive": "interactive() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "style.--solaris-card-radius": "resolvedRadius()", "style.--solaris-card-accent-custom": "customColor()", "style.--solaris-card-min-height": "normalizedMinHeight()", "style.--solaris-card-reserved-inline-end": "normalizedReservedInlineEnd()", "style.--solaris-card-bg-override": "normalizedBackground() || null", "style.--solaris-card-border-override": "normalizedBorderColor() || null", "style.--solaris-card-shadow-override": "normalizedShadow() || null" }, classAttribute: "solaris-card-host" }, ngImport: i0, template: "<article class=\"solaris-card\">\n <div class=\"solaris-card__media\">\n <ng-content select=\"solaris-card-media, [solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__body\">\n <div class=\"solaris-card__leading\">\n <ng-content select=\"solaris-card-leading, [solaris-card-leading]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__content\">\n <div class=\"solaris-card__header\">\n <div class=\"solaris-card__header-main\">\n <div class=\"solaris-card__eyebrow\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__title\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n </div>\n\n <div class=\"solaris-card__badge\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </div>\n </div>\n\n <div class=\"solaris-card__description\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__meta\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__footer\">\n <div class=\"solaris-card__footer-main\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__actions\">\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n</article>\n", styles: [":host{display:block;min-inline-size:0;inline-size:100%;--solaris-card-bg: var(--solaris-color-surface);--solaris-card-accent: var(--solaris-color-primary);--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-bg) 92%, var(--solaris-color-white));--solaris-card-bg-selected: color-mix(in srgb, var(--solaris-card-accent) 8%, var(--solaris-color-surface));--solaris-card-border: var(--solaris-color-border);--solaris-card-border-invalid: var(--solaris-color-error);--solaris-card-border-hover: color-mix(in srgb, var(--solaris-card-accent) 18%, var(--solaris-card-border));--solaris-card-border-selected: color-mix(in srgb, var(--solaris-card-accent) 72%, var(--solaris-card-border));--solaris-card-shadow: var(--solaris-shadow-xs);--solaris-card-shadow-hover: var(--solaris-shadow-sm);--solaris-card-shadow-selected: var(--solaris-shadow-sm);--solaris-card-meta-color: var(--solaris-color-text);--solaris-card-title-color: var(--solaris-color-text);--solaris-card-eyebrow-color: var(--solaris-color-text-muted);--solaris-card-description-color: var(--solaris-color-text-muted);--solaris-card-disabled-opacity: .62;--solaris-card-gap: var(--solaris-space-4);--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-padding-top: var(--solaris-card-padding-y);--solaris-card-padding-left: var(--solaris-card-padding-x);--solaris-card-padding-right: calc( var(--solaris-card-padding-x) + var(--solaris-card-reserved-inline-end, 0px) );--solaris-card-padding-bottom: var(--solaris-card-padding-y);--solaris-card-media-size: 7.2rem;--solaris-card-radius: var(--solaris-radius-lg);--solaris-card-leading-size: 4rem;--solaris-card-leading-gap: var(--solaris-space-4);--solaris-card-leading-radius: var(--solaris-radius-lg)}.solaris-card__body{min-inline-size:0;display:flex;align-items:flex-start;gap:var(--solaris-card-leading-gap)}.solaris-card__leading{flex:0 0 var(--solaris-card-leading-size);inline-size:var(--solaris-card-leading-size);min-inline-size:var(--solaris-card-leading-size);display:inline-grid;place-items:center;line-height:0}.solaris-card__leading:not(:has(solaris-card-leading,[solaris-card-leading])){display:none}:host([data-size=sm]){--solaris-card-padding-x: var(--solaris-space-4);--solaris-card-padding-y: var(--solaris-space-4);--solaris-card-gap: var(--solaris-space-3);--solaris-card-content-gap: var(--solaris-space-2);--solaris-card-media-size: 5.6rem}:host([data-size=md]){--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-gap: var(--solaris-space-4);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-media-size: 7.2rem}:host([data-size=lg]){--solaris-card-padding-x: var(--solaris-space-6);--solaris-card-padding-y: var(--solaris-space-6);--solaris-card-gap: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-4);--solaris-card-media-size: 8.8rem}:host([data-color=neutral]){--solaris-card-accent: var(--solaris-color-primary)}:host([data-color=primary]){--solaris-card-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-card-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-card-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-card-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-card-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-card-accent: var(--solaris-card-accent-custom, var(--solaris-color-primary))}:host([data-appearance=outline]){--solaris-card-bg: var(--solaris-color-surface);--solaris-card-border: var(--solaris-color-border);--solaris-card-shadow: var(--solaris-shadow-xs)}:host([data-appearance=soft]){--solaris-card-bg: color-mix( in srgb, var(--solaris-card-accent) 6%, var(--solaris-color-surface) );--solaris-card-border: color-mix( in srgb, var(--solaris-card-accent) 18%, var(--solaris-color-border) );--solaris-card-shadow: var(--solaris-shadow-xs)}:host([data-appearance=solid]){--solaris-card-bg: var(--solaris-card-accent);--solaris-card-bg-hover: color-mix( in srgb, var(--solaris-card-accent) 92%, var(--solaris-color-white) );--solaris-card-border: color-mix( in srgb, var(--solaris-card-accent) 80%, var(--solaris-color-border) );--solaris-card-title-color: var(--solaris-color-primary-contrast);--solaris-card-description-color: var(--solaris-color-primary-contrast);--solaris-card-meta-color: var(--solaris-color-primary-contrast);--solaris-card-eyebrow-color: var(--solaris-color-primary-contrast)}:host([data-appearance=elevated]){--solaris-card-bg: var(--solaris-color-surface);--solaris-card-border: color-mix(in srgb, var(--solaris-color-border) 70%, transparent);--solaris-card-shadow: var(--solaris-shadow-sm);--solaris-card-shadow-hover: var(--solaris-shadow-md)}:host([data-appearance=ghost]){--solaris-card-bg: transparent;--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-accent) 4%, transparent);--solaris-card-border: transparent;--solaris-card-shadow: none;--solaris-card-shadow-hover: none}:host([data-appearance=glass]){--solaris-card-bg: color-mix(in srgb, var(--solaris-card-accent) 10%, transparent);--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-accent) 16%, transparent);--solaris-card-border: color-mix( in srgb, var(--solaris-color-surface) 34%, var(--solaris-color-border) );--solaris-card-border-hover: color-mix( in srgb, var(--solaris-card-accent) 36%, var(--solaris-color-border) );--solaris-card-shadow: none;--solaris-card-shadow-hover: var(--solaris-shadow-xs);--solaris-card-shadow-selected: inset 0 0 0 .1rem color-mix(in srgb, var(--solaris-card-accent) 22%, transparent)}:host([data-selected=true][data-appearance=glass]) .solaris-card{background:var(--solaris-card-bg-override, color-mix(in srgb, var(--solaris-card-accent) 14%, transparent));box-shadow:var(--solaris-card-shadow-override, var(--solaris-card-shadow-selected));border-color:var(--solaris-card-border-override, var(--solaris-card-border-selected))}:host([data-appearance=gradient]){--solaris-card-bg: linear-gradient( 135deg, var(--solaris-card-accent) 0%, color-mix(in srgb, var(--solaris-card-accent) 62%, var(--solaris-color-text)) 100% );--solaris-card-bg-hover: linear-gradient( 135deg, color-mix(in srgb, var(--solaris-card-accent) 92%, var(--solaris-color-white)) 0%, color-mix(in srgb, var(--solaris-card-accent) 62%, var(--solaris-color-text)) 100% );--solaris-card-border: color-mix(in srgb, var(--solaris-card-accent) 42%, transparent);--solaris-card-border-hover: color-mix(in srgb, var(--solaris-card-accent) 64%, transparent);--solaris-card-title-color: var(--solaris-color-primary-contrast);--solaris-card-description-color: var(--solaris-color-primary-contrast);--solaris-card-meta-color: var(--solaris-color-primary-contrast);--solaris-card-eyebrow-color: var(--solaris-color-primary-contrast)}:host([data-invalid=true]){--solaris-card-border: var(--solaris-card-border-invalid);--solaris-card-border-hover: var(--solaris-card-border-invalid);--solaris-card-border-selected: var(--solaris-card-border-invalid)}.solaris-card{min-inline-size:0;inline-size:100%;min-block-size:var(--solaris-card-min-height, auto);position:relative;isolation:isolate;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;gap:var(--solaris-card-gap);padding:var(--solaris-card-padding-top) var(--solaris-card-padding-right) var(--solaris-card-padding-bottom) var(--solaris-card-padding-left);color:var(--solaris-color-text);border-radius:var(--solaris-card-radius);background:var(--solaris-card-bg-override, var(--solaris-card-bg));box-shadow:var(--solaris-card-shadow-override, var(--solaris-card-shadow));border:1px solid var(--solaris-card-border-override, var(--solaris-card-border))}:host([data-appearance=glass]) .solaris-card{backdrop-filter:blur(1.4rem) saturate(1.35);-webkit-backdrop-filter:blur(1.4rem) saturate(1.35)}:host([data-appearance=glass]) .solaris-card:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,color-mix(in srgb,var(--solaris-color-surface) 18%,transparent) 0%,transparent 48%)}:host([data-appearance=gradient]) .solaris-card:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;border-radius:inherit;background:radial-gradient(circle at top right,color-mix(in srgb,var(--solaris-color-surface) 24%,transparent) 0%,transparent 42%)}.solaris-card>*{position:relative;z-index:var(--solaris-z-raised)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card{cursor:pointer;transition:background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card:hover{background:var(--solaris-card-bg-override, var(--solaris-card-bg-hover));box-shadow:var(--solaris-card-shadow-override, var(--solaris-card-shadow-hover));border-color:var(--solaris-card-border-override, var(--solaris-card-border-hover))}:host([data-selected=true]) .solaris-card{border-color:var(--solaris-card-border-selected);box-shadow:var(--solaris-card-shadow-selected)}:host([data-selected=true][data-appearance=outline]) .solaris-card,:host([data-selected=true][data-appearance=elevated]) .solaris-card,:host([data-selected=true][data-appearance=ghost]) .solaris-card{background:var(--solaris-card-bg-selected)}:host([data-selected=true][data-appearance=soft]) .solaris-card{background:color-mix(in srgb,var(--solaris-card-accent) 12%,var(--solaris-color-surface))}:host([data-selected=true][data-appearance=solid]) .solaris-card,:host([data-selected=true][data-appearance=gradient]) .solaris-card{background:var(--solaris-card-bg-override, var(--solaris-card-bg))}:host([data-disabled=true]) .solaris-card{cursor:not-allowed;box-shadow:none;opacity:var(--solaris-card-disabled-opacity)}.solaris-card__media{min-inline-size:0;inline-size:100%;overflow:hidden;border-radius:calc(var(--solaris-card-radius) - .2rem)}.solaris-card__content{min-inline-size:0;display:flex;flex:1 1 auto;flex-direction:column;gap:var(--solaris-card-content-gap)}.solaris-card__media,.solaris-card__body{position:relative;z-index:var(--solaris-z-raised)}.solaris-card__header{min-inline-size:0;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card__header-main{min-inline-size:0;flex:1 1 auto;display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-card__eyebrow{min-inline-size:0;color:var(--solaris-card-eyebrow-color);font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-normal);letter-spacing:var(--solaris-ls-md);text-transform:uppercase;overflow-wrap:anywhere}.solaris-card__title{min-inline-size:0;color:var(--solaris-card-title-color);font-size:var(--solaris-fs-16);font-weight:700;line-height:var(--solaris-lh-tight);overflow-wrap:anywhere}.solaris-card__description{min-inline-size:0;color:var(--solaris-card-description-color);font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);overflow-wrap:anywhere}.solaris-card__meta{min-inline-size:0;color:var(--solaris-card-meta-color);font-size:var(--solaris-fs-14);font-weight:600;line-height:var(--solaris-lh-normal);overflow-wrap:anywhere}.solaris-card__badge{flex:0 0 auto;display:inline-flex;align-items:flex-start}.solaris-card__footer{min-inline-size:0;display:flex;align-items:center;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card__footer-main{min-inline-size:0;flex:1 1 auto}.solaris-card__actions{flex:0 0 auto;display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--solaris-space-2)}.solaris-card__media:not(:has(solaris-card-media,[solaris-card-media],.solaris-card-media)){display:none}.solaris-card__eyebrow:not(:has([solaris-card-eyebrow])){display:none}.solaris-card__title:not(:has([solaris-card-title])){display:none}.solaris-card__description:not(:has([solaris-card-description])){display:none}.solaris-card__meta:not(:has([solaris-card-meta])){display:none}.solaris-card__badge:not(:has([solaris-card-badge])){display:none}.solaris-card__footer-main:not(:has([solaris-card-footer])){display:none}.solaris-card__actions:not(:has([solaris-card-actions])){display:none}.solaris-card__header-main:not(:has([solaris-card-eyebrow],[solaris-card-title])){display:none}.solaris-card__header:not(:has([solaris-card-eyebrow],[solaris-card-title],[solaris-card-badge])){display:none}.solaris-card__footer:not(:has([solaris-card-footer],[solaris-card-actions])){display:none}:host([data-orientation=horizontal]) .solaris-card{flex-direction:row;align-items:stretch}:host([data-orientation=horizontal]) .solaris-card__media{flex:0 0 min(32%,var(--solaris-card-media-size));inline-size:min(32%,var(--solaris-card-media-size))}:host([data-orientation=horizontal]) .solaris-card__content{justify-content:center}:host([data-orientation=compact]) .solaris-card{flex-direction:row;align-items:center;gap:var(--solaris-space-3)}:host([data-orientation=compact]) .solaris-card__media{flex:0 0 auto;inline-size:var(--solaris-card-media-size)}:host([data-orientation=compact]) .solaris-card__content{gap:var(--solaris-space-2)}:host([data-orientation=compact]) .solaris-card__footer{margin-block-start:var(--solaris-space-1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6420
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: SolarisCard, isStandalone: true, selector: "solaris-card", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, reservedInlineEnd: { classPropertyName: "reservedInlineEnd", publicName: "reservedInlineEnd", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-orientation": "orientation()", "attr.data-appearance": "appearance()", "attr.data-color": "colorKey()", "attr.data-selected": "selected() ? \"true\" : null", "attr.data-invalid": "invalid() ? \"true\" : null", "attr.data-interactive": "interactive() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "style.--solaris-card-radius": "resolvedRadius()", "style.--solaris-card-accent-custom": "customColor()", "style.--solaris-card-min-height": "normalizedMinHeight()", "style.--solaris-card-reserved-inline-end": "normalizedReservedInlineEnd()", "style.--solaris-card-bg-override": "normalizedBackground() || null", "style.--solaris-card-border-override": "normalizedBorderColor() || null", "style.--solaris-card-shadow-override": "normalizedShadow() || null" }, classAttribute: "solaris-card-host" }, ngImport: i0, template: "<article class=\"solaris-card\">\n <div class=\"solaris-card-media\">\n <ng-content select=\"solaris-card-media, [solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-card-body\">\n <div class=\"solaris-card-leading\">\n <ng-content select=\"solaris-card-leading, [solaris-card-leading]\"></ng-content>\n </div>\n\n <div class=\"solaris-card-content\">\n <div class=\"solaris-card-header\">\n <div class=\"solaris-card-header-main\">\n <div class=\"solaris-card-eyebrow\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-card-title\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n </div>\n\n <div class=\"solaris-card-badge\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </div>\n </div>\n\n <div class=\"solaris-card-description\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-card-meta\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-card-footer\">\n <div class=\"solaris-card-footer-main\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div class=\"solaris-card-actions\">\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n</article>\n\r\n", styles: [":host{display:block;min-inline-size:0;inline-size:100%;--solaris-card-bg: var(--solaris-color-surface);--solaris-card-accent: var(--solaris-color-primary);--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-bg) 92%, var(--solaris-color-white));--solaris-card-bg-selected: color-mix(in srgb, var(--solaris-card-accent) 8%, var(--solaris-color-surface));--solaris-card-border: var(--solaris-color-border);--solaris-card-border-invalid: var(--solaris-color-error);--solaris-card-border-hover: color-mix(in srgb, var(--solaris-card-accent) 18%, var(--solaris-card-border));--solaris-card-border-selected: color-mix(in srgb, var(--solaris-card-accent) 72%, var(--solaris-card-border));--solaris-card-shadow: var(--solaris-shadow-xs);--solaris-card-shadow-hover: var(--solaris-shadow-sm);--solaris-card-shadow-selected: var(--solaris-shadow-sm);--solaris-card-meta-color: var(--solaris-color-text);--solaris-card-title-color: var(--solaris-color-text);--solaris-card-eyebrow-color: var(--solaris-color-text-muted);--solaris-card-description-color: var(--solaris-color-text-muted);--solaris-card-disabled-opacity: .62;--solaris-card-gap: var(--solaris-space-4);--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-padding-top: var(--solaris-card-padding-y);--solaris-card-padding-left: var(--solaris-card-padding-x);--solaris-card-padding-right: calc( var(--solaris-card-padding-x) + var(--solaris-card-reserved-inline-end, 0px) );--solaris-card-padding-bottom: var(--solaris-card-padding-y);--solaris-card-media-size: 7.2rem;--solaris-card-radius: var(--solaris-radius-lg);--solaris-card-leading-size: 4rem;--solaris-card-leading-gap: var(--solaris-space-4);--solaris-card-leading-radius: var(--solaris-radius-lg)}.solaris-card-body{min-inline-size:0;display:flex;align-items:flex-start;gap:var(--solaris-card-leading-gap)}.solaris-card-leading{flex:0 0 var(--solaris-card-leading-size);inline-size:var(--solaris-card-leading-size);min-inline-size:var(--solaris-card-leading-size);display:inline-grid;place-items:center;line-height:0}.solaris-card-leading:not(:has(solaris-card-leading,[solaris-card-leading])){display:none}:host([data-size=sm]){--solaris-card-padding-x: var(--solaris-space-4);--solaris-card-padding-y: var(--solaris-space-4);--solaris-card-gap: var(--solaris-space-3);--solaris-card-content-gap: var(--solaris-space-2);--solaris-card-media-size: 5.6rem}:host([data-size=md]){--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-gap: var(--solaris-space-4);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-media-size: 7.2rem}:host([data-size=lg]){--solaris-card-padding-x: var(--solaris-space-6);--solaris-card-padding-y: var(--solaris-space-6);--solaris-card-gap: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-4);--solaris-card-media-size: 8.8rem}:host([data-color=neutral]){--solaris-card-accent: var(--solaris-color-primary)}:host([data-color=primary]){--solaris-card-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-card-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-card-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-card-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-card-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-card-accent: var(--solaris-card-accent-custom, var(--solaris-color-primary))}:host([data-appearance=outline]){--solaris-card-bg: var(--solaris-color-surface);--solaris-card-border: var(--solaris-color-border);--solaris-card-shadow: var(--solaris-shadow-xs)}:host([data-appearance=soft]){--solaris-card-bg: color-mix( in srgb, var(--solaris-card-accent) 6%, var(--solaris-color-surface) );--solaris-card-border: color-mix( in srgb, var(--solaris-card-accent) 18%, var(--solaris-color-border) );--solaris-card-shadow: var(--solaris-shadow-xs)}:host([data-appearance=solid]){--solaris-card-bg: var(--solaris-card-accent);--solaris-card-bg-hover: color-mix( in srgb, var(--solaris-card-accent) 92%, var(--solaris-color-white) );--solaris-card-border: color-mix( in srgb, var(--solaris-card-accent) 80%, var(--solaris-color-border) );--solaris-card-title-color: var(--solaris-color-primary-contrast);--solaris-card-description-color: var(--solaris-color-primary-contrast);--solaris-card-meta-color: var(--solaris-color-primary-contrast);--solaris-card-eyebrow-color: var(--solaris-color-primary-contrast)}:host([data-appearance=elevated]){--solaris-card-bg: var(--solaris-color-surface);--solaris-card-border: color-mix(in srgb, var(--solaris-color-border) 70%, transparent);--solaris-card-shadow: var(--solaris-shadow-sm);--solaris-card-shadow-hover: var(--solaris-shadow-md)}:host([data-appearance=ghost]){--solaris-card-bg: transparent;--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-accent) 4%, transparent);--solaris-card-border: transparent;--solaris-card-shadow: none;--solaris-card-shadow-hover: none}:host([data-appearance=glass]){--solaris-card-bg: color-mix(in srgb, var(--solaris-card-accent) 10%, transparent);--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-accent) 16%, transparent);--solaris-card-border: color-mix( in srgb, var(--solaris-color-surface) 34%, var(--solaris-color-border) );--solaris-card-border-hover: color-mix( in srgb, var(--solaris-card-accent) 36%, var(--solaris-color-border) );--solaris-card-shadow: none;--solaris-card-shadow-hover: var(--solaris-shadow-xs);--solaris-card-shadow-selected: inset 0 0 0 .1rem color-mix(in srgb, var(--solaris-card-accent) 22%, transparent)}:host([data-selected=true][data-appearance=glass]) .solaris-card{background:var(--solaris-card-bg-override, color-mix(in srgb, var(--solaris-card-accent) 14%, transparent));box-shadow:var(--solaris-card-shadow-override, var(--solaris-card-shadow-selected));border-color:var(--solaris-card-border-override, var(--solaris-card-border-selected))}:host([data-appearance=gradient]){--solaris-card-bg: linear-gradient( 135deg, var(--solaris-card-accent) 0%, color-mix(in srgb, var(--solaris-card-accent) 62%, var(--solaris-color-text)) 100% );--solaris-card-bg-hover: linear-gradient( 135deg, color-mix(in srgb, var(--solaris-card-accent) 92%, var(--solaris-color-white)) 0%, color-mix(in srgb, var(--solaris-card-accent) 62%, var(--solaris-color-text)) 100% );--solaris-card-border: color-mix(in srgb, var(--solaris-card-accent) 42%, transparent);--solaris-card-border-hover: color-mix(in srgb, var(--solaris-card-accent) 64%, transparent);--solaris-card-title-color: var(--solaris-color-primary-contrast);--solaris-card-description-color: var(--solaris-color-primary-contrast);--solaris-card-meta-color: var(--solaris-color-primary-contrast);--solaris-card-eyebrow-color: var(--solaris-color-primary-contrast)}:host([data-invalid=true]){--solaris-card-border: var(--solaris-card-border-invalid);--solaris-card-border-hover: var(--solaris-card-border-invalid);--solaris-card-border-selected: var(--solaris-card-border-invalid)}.solaris-card{min-inline-size:0;inline-size:100%;min-block-size:var(--solaris-card-min-height, auto);position:relative;isolation:isolate;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;gap:var(--solaris-card-gap);padding:var(--solaris-card-padding-top) var(--solaris-card-padding-right) var(--solaris-card-padding-bottom) var(--solaris-card-padding-left);color:var(--solaris-color-text);border-radius:var(--solaris-card-radius);background:var(--solaris-card-bg-override, var(--solaris-card-bg));box-shadow:var(--solaris-card-shadow-override, var(--solaris-card-shadow));border:1px solid var(--solaris-card-border-override, var(--solaris-card-border))}:host([data-appearance=glass]) .solaris-card{backdrop-filter:blur(1.4rem) saturate(1.35);-webkit-backdrop-filter:blur(1.4rem) saturate(1.35)}:host([data-appearance=glass]) .solaris-card:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,color-mix(in srgb,var(--solaris-color-surface) 18%,transparent) 0%,transparent 48%)}:host([data-appearance=gradient]) .solaris-card:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;border-radius:inherit;background:radial-gradient(circle at top right,color-mix(in srgb,var(--solaris-color-surface) 24%,transparent) 0%,transparent 42%)}.solaris-card>*{position:relative;z-index:var(--solaris-z-raised)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card{cursor:pointer;transition:background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card:hover{background:var(--solaris-card-bg-override, var(--solaris-card-bg-hover));box-shadow:var(--solaris-card-shadow-override, var(--solaris-card-shadow-hover));border-color:var(--solaris-card-border-override, var(--solaris-card-border-hover))}:host([data-selected=true]) .solaris-card{border-color:var(--solaris-card-border-selected);box-shadow:var(--solaris-card-shadow-selected)}:host([data-selected=true][data-appearance=outline]) .solaris-card,:host([data-selected=true][data-appearance=elevated]) .solaris-card,:host([data-selected=true][data-appearance=ghost]) .solaris-card{background:var(--solaris-card-bg-selected)}:host([data-selected=true][data-appearance=soft]) .solaris-card{background:color-mix(in srgb,var(--solaris-card-accent) 12%,var(--solaris-color-surface))}:host([data-selected=true][data-appearance=solid]) .solaris-card,:host([data-selected=true][data-appearance=gradient]) .solaris-card{background:var(--solaris-card-bg-override, var(--solaris-card-bg))}:host([data-disabled=true]) .solaris-card{cursor:not-allowed;box-shadow:none;opacity:var(--solaris-card-disabled-opacity)}.solaris-card-media{min-inline-size:0;inline-size:100%;overflow:hidden;border-radius:calc(var(--solaris-card-radius) - .2rem)}.solaris-card-content{min-inline-size:0;display:flex;flex:1 1 auto;flex-direction:column;gap:var(--solaris-card-content-gap)}.solaris-card-media,.solaris-card-body{position:relative;z-index:var(--solaris-z-raised)}.solaris-card-header{min-inline-size:0;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card-header-main{min-inline-size:0;flex:1 1 auto;display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-card-eyebrow{min-inline-size:0;color:var(--solaris-card-eyebrow-color);font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-normal);letter-spacing:var(--solaris-ls-md);text-transform:uppercase;overflow-wrap:anywhere}.solaris-card-title{min-inline-size:0;color:var(--solaris-card-title-color);font-size:var(--solaris-fs-16);font-weight:700;line-height:var(--solaris-lh-tight);overflow-wrap:anywhere}.solaris-card-description{min-inline-size:0;color:var(--solaris-card-description-color);font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);overflow-wrap:anywhere}.solaris-card-meta{min-inline-size:0;color:var(--solaris-card-meta-color);font-size:var(--solaris-fs-14);font-weight:600;line-height:var(--solaris-lh-normal);overflow-wrap:anywhere}.solaris-card-badge{flex:0 0 auto;display:inline-flex;align-items:flex-start}.solaris-card-footer{min-inline-size:0;display:flex;align-items:center;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card-footer-main{min-inline-size:0;flex:1 1 auto}.solaris-card-actions{flex:0 0 auto;display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--solaris-space-2)}.solaris-card-media:not(:has(solaris-card-media,[solaris-card-media],.solaris-card-media)){display:none}.solaris-card-eyebrow:not(:has([solaris-card-eyebrow])){display:none}.solaris-card-title:not(:has([solaris-card-title])){display:none}.solaris-card-description:not(:has([solaris-card-description])){display:none}.solaris-card-meta:not(:has([solaris-card-meta])){display:none}.solaris-card-badge:not(:has([solaris-card-badge])){display:none}.solaris-card-footer-main:not(:has([solaris-card-footer])){display:none}.solaris-card-actions:not(:has([solaris-card-actions])){display:none}.solaris-card-header-main:not(:has([solaris-card-eyebrow],[solaris-card-title])){display:none}.solaris-card-header:not(:has([solaris-card-eyebrow],[solaris-card-title],[solaris-card-badge])){display:none}.solaris-card-footer:not(:has([solaris-card-footer],[solaris-card-actions])){display:none}:host([data-orientation=horizontal]) .solaris-card{flex-direction:row;align-items:stretch}:host([data-orientation=horizontal]) .solaris-card-media{flex:0 0 min(32%,var(--solaris-card-media-size));inline-size:min(32%,var(--solaris-card-media-size))}:host([data-orientation=horizontal]) .solaris-card-content{justify-content:center}:host([data-orientation=compact]) .solaris-card{flex-direction:row;align-items:center;gap:var(--solaris-space-3)}:host([data-orientation=compact]) .solaris-card-media{flex:0 0 auto;inline-size:var(--solaris-card-media-size)}:host([data-orientation=compact]) .solaris-card-content{gap:var(--solaris-space-2)}:host([data-orientation=compact]) .solaris-card-footer{margin-block-start:var(--solaris-space-1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6420
6421
|
}
|
|
6421
6422
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCard, decorators: [{
|
|
6422
6423
|
type: Component,
|
|
@@ -6438,7 +6439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
6438
6439
|
'[style.--solaris-card-bg-override]': 'normalizedBackground() || null',
|
|
6439
6440
|
'[style.--solaris-card-border-override]': 'normalizedBorderColor() || null',
|
|
6440
6441
|
'[style.--solaris-card-shadow-override]': 'normalizedShadow() || null',
|
|
6441
|
-
}, template: "<article class=\"solaris-card\">\n <div class=\"solaris-card__media\">\n <ng-content select=\"solaris-card-media, [solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__body\">\n <div class=\"solaris-card__leading\">\n <ng-content select=\"solaris-card-leading, [solaris-card-leading]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__content\">\n <div class=\"solaris-card__header\">\n <div class=\"solaris-card__header-main\">\n <div class=\"solaris-card__eyebrow\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__title\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n </div>\n\n <div class=\"solaris-card__badge\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </div>\n </div>\n\n <div class=\"solaris-card__description\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__meta\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__footer\">\n <div class=\"solaris-card__footer-main\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div class=\"solaris-card__actions\">\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n</article>\n", styles: [":host{display:block;min-inline-size:0;inline-size:100%;--solaris-card-bg: var(--solaris-color-surface);--solaris-card-accent: var(--solaris-color-primary);--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-bg) 92%, var(--solaris-color-white));--solaris-card-bg-selected: color-mix(in srgb, var(--solaris-card-accent) 8%, var(--solaris-color-surface));--solaris-card-border: var(--solaris-color-border);--solaris-card-border-invalid: var(--solaris-color-error);--solaris-card-border-hover: color-mix(in srgb, var(--solaris-card-accent) 18%, var(--solaris-card-border));--solaris-card-border-selected: color-mix(in srgb, var(--solaris-card-accent) 72%, var(--solaris-card-border));--solaris-card-shadow: var(--solaris-shadow-xs);--solaris-card-shadow-hover: var(--solaris-shadow-sm);--solaris-card-shadow-selected: var(--solaris-shadow-sm);--solaris-card-meta-color: var(--solaris-color-text);--solaris-card-title-color: var(--solaris-color-text);--solaris-card-eyebrow-color: var(--solaris-color-text-muted);--solaris-card-description-color: var(--solaris-color-text-muted);--solaris-card-disabled-opacity: .62;--solaris-card-gap: var(--solaris-space-4);--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-padding-top: var(--solaris-card-padding-y);--solaris-card-padding-left: var(--solaris-card-padding-x);--solaris-card-padding-right: calc( var(--solaris-card-padding-x) + var(--solaris-card-reserved-inline-end, 0px) );--solaris-card-padding-bottom: var(--solaris-card-padding-y);--solaris-card-media-size: 7.2rem;--solaris-card-radius: var(--solaris-radius-lg);--solaris-card-leading-size: 4rem;--solaris-card-leading-gap: var(--solaris-space-4);--solaris-card-leading-radius: var(--solaris-radius-lg)}.solaris-card__body{min-inline-size:0;display:flex;align-items:flex-start;gap:var(--solaris-card-leading-gap)}.solaris-card__leading{flex:0 0 var(--solaris-card-leading-size);inline-size:var(--solaris-card-leading-size);min-inline-size:var(--solaris-card-leading-size);display:inline-grid;place-items:center;line-height:0}.solaris-card__leading:not(:has(solaris-card-leading,[solaris-card-leading])){display:none}:host([data-size=sm]){--solaris-card-padding-x: var(--solaris-space-4);--solaris-card-padding-y: var(--solaris-space-4);--solaris-card-gap: var(--solaris-space-3);--solaris-card-content-gap: var(--solaris-space-2);--solaris-card-media-size: 5.6rem}:host([data-size=md]){--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-gap: var(--solaris-space-4);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-media-size: 7.2rem}:host([data-size=lg]){--solaris-card-padding-x: var(--solaris-space-6);--solaris-card-padding-y: var(--solaris-space-6);--solaris-card-gap: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-4);--solaris-card-media-size: 8.8rem}:host([data-color=neutral]){--solaris-card-accent: var(--solaris-color-primary)}:host([data-color=primary]){--solaris-card-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-card-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-card-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-card-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-card-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-card-accent: var(--solaris-card-accent-custom, var(--solaris-color-primary))}:host([data-appearance=outline]){--solaris-card-bg: var(--solaris-color-surface);--solaris-card-border: var(--solaris-color-border);--solaris-card-shadow: var(--solaris-shadow-xs)}:host([data-appearance=soft]){--solaris-card-bg: color-mix( in srgb, var(--solaris-card-accent) 6%, var(--solaris-color-surface) );--solaris-card-border: color-mix( in srgb, var(--solaris-card-accent) 18%, var(--solaris-color-border) );--solaris-card-shadow: var(--solaris-shadow-xs)}:host([data-appearance=solid]){--solaris-card-bg: var(--solaris-card-accent);--solaris-card-bg-hover: color-mix( in srgb, var(--solaris-card-accent) 92%, var(--solaris-color-white) );--solaris-card-border: color-mix( in srgb, var(--solaris-card-accent) 80%, var(--solaris-color-border) );--solaris-card-title-color: var(--solaris-color-primary-contrast);--solaris-card-description-color: var(--solaris-color-primary-contrast);--solaris-card-meta-color: var(--solaris-color-primary-contrast);--solaris-card-eyebrow-color: var(--solaris-color-primary-contrast)}:host([data-appearance=elevated]){--solaris-card-bg: var(--solaris-color-surface);--solaris-card-border: color-mix(in srgb, var(--solaris-color-border) 70%, transparent);--solaris-card-shadow: var(--solaris-shadow-sm);--solaris-card-shadow-hover: var(--solaris-shadow-md)}:host([data-appearance=ghost]){--solaris-card-bg: transparent;--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-accent) 4%, transparent);--solaris-card-border: transparent;--solaris-card-shadow: none;--solaris-card-shadow-hover: none}:host([data-appearance=glass]){--solaris-card-bg: color-mix(in srgb, var(--solaris-card-accent) 10%, transparent);--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-accent) 16%, transparent);--solaris-card-border: color-mix( in srgb, var(--solaris-color-surface) 34%, var(--solaris-color-border) );--solaris-card-border-hover: color-mix( in srgb, var(--solaris-card-accent) 36%, var(--solaris-color-border) );--solaris-card-shadow: none;--solaris-card-shadow-hover: var(--solaris-shadow-xs);--solaris-card-shadow-selected: inset 0 0 0 .1rem color-mix(in srgb, var(--solaris-card-accent) 22%, transparent)}:host([data-selected=true][data-appearance=glass]) .solaris-card{background:var(--solaris-card-bg-override, color-mix(in srgb, var(--solaris-card-accent) 14%, transparent));box-shadow:var(--solaris-card-shadow-override, var(--solaris-card-shadow-selected));border-color:var(--solaris-card-border-override, var(--solaris-card-border-selected))}:host([data-appearance=gradient]){--solaris-card-bg: linear-gradient( 135deg, var(--solaris-card-accent) 0%, color-mix(in srgb, var(--solaris-card-accent) 62%, var(--solaris-color-text)) 100% );--solaris-card-bg-hover: linear-gradient( 135deg, color-mix(in srgb, var(--solaris-card-accent) 92%, var(--solaris-color-white)) 0%, color-mix(in srgb, var(--solaris-card-accent) 62%, var(--solaris-color-text)) 100% );--solaris-card-border: color-mix(in srgb, var(--solaris-card-accent) 42%, transparent);--solaris-card-border-hover: color-mix(in srgb, var(--solaris-card-accent) 64%, transparent);--solaris-card-title-color: var(--solaris-color-primary-contrast);--solaris-card-description-color: var(--solaris-color-primary-contrast);--solaris-card-meta-color: var(--solaris-color-primary-contrast);--solaris-card-eyebrow-color: var(--solaris-color-primary-contrast)}:host([data-invalid=true]){--solaris-card-border: var(--solaris-card-border-invalid);--solaris-card-border-hover: var(--solaris-card-border-invalid);--solaris-card-border-selected: var(--solaris-card-border-invalid)}.solaris-card{min-inline-size:0;inline-size:100%;min-block-size:var(--solaris-card-min-height, auto);position:relative;isolation:isolate;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;gap:var(--solaris-card-gap);padding:var(--solaris-card-padding-top) var(--solaris-card-padding-right) var(--solaris-card-padding-bottom) var(--solaris-card-padding-left);color:var(--solaris-color-text);border-radius:var(--solaris-card-radius);background:var(--solaris-card-bg-override, var(--solaris-card-bg));box-shadow:var(--solaris-card-shadow-override, var(--solaris-card-shadow));border:1px solid var(--solaris-card-border-override, var(--solaris-card-border))}:host([data-appearance=glass]) .solaris-card{backdrop-filter:blur(1.4rem) saturate(1.35);-webkit-backdrop-filter:blur(1.4rem) saturate(1.35)}:host([data-appearance=glass]) .solaris-card:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,color-mix(in srgb,var(--solaris-color-surface) 18%,transparent) 0%,transparent 48%)}:host([data-appearance=gradient]) .solaris-card:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;border-radius:inherit;background:radial-gradient(circle at top right,color-mix(in srgb,var(--solaris-color-surface) 24%,transparent) 0%,transparent 42%)}.solaris-card>*{position:relative;z-index:var(--solaris-z-raised)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card{cursor:pointer;transition:background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card:hover{background:var(--solaris-card-bg-override, var(--solaris-card-bg-hover));box-shadow:var(--solaris-card-shadow-override, var(--solaris-card-shadow-hover));border-color:var(--solaris-card-border-override, var(--solaris-card-border-hover))}:host([data-selected=true]) .solaris-card{border-color:var(--solaris-card-border-selected);box-shadow:var(--solaris-card-shadow-selected)}:host([data-selected=true][data-appearance=outline]) .solaris-card,:host([data-selected=true][data-appearance=elevated]) .solaris-card,:host([data-selected=true][data-appearance=ghost]) .solaris-card{background:var(--solaris-card-bg-selected)}:host([data-selected=true][data-appearance=soft]) .solaris-card{background:color-mix(in srgb,var(--solaris-card-accent) 12%,var(--solaris-color-surface))}:host([data-selected=true][data-appearance=solid]) .solaris-card,:host([data-selected=true][data-appearance=gradient]) .solaris-card{background:var(--solaris-card-bg-override, var(--solaris-card-bg))}:host([data-disabled=true]) .solaris-card{cursor:not-allowed;box-shadow:none;opacity:var(--solaris-card-disabled-opacity)}.solaris-card__media{min-inline-size:0;inline-size:100%;overflow:hidden;border-radius:calc(var(--solaris-card-radius) - .2rem)}.solaris-card__content{min-inline-size:0;display:flex;flex:1 1 auto;flex-direction:column;gap:var(--solaris-card-content-gap)}.solaris-card__media,.solaris-card__body{position:relative;z-index:var(--solaris-z-raised)}.solaris-card__header{min-inline-size:0;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card__header-main{min-inline-size:0;flex:1 1 auto;display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-card__eyebrow{min-inline-size:0;color:var(--solaris-card-eyebrow-color);font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-normal);letter-spacing:var(--solaris-ls-md);text-transform:uppercase;overflow-wrap:anywhere}.solaris-card__title{min-inline-size:0;color:var(--solaris-card-title-color);font-size:var(--solaris-fs-16);font-weight:700;line-height:var(--solaris-lh-tight);overflow-wrap:anywhere}.solaris-card__description{min-inline-size:0;color:var(--solaris-card-description-color);font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);overflow-wrap:anywhere}.solaris-card__meta{min-inline-size:0;color:var(--solaris-card-meta-color);font-size:var(--solaris-fs-14);font-weight:600;line-height:var(--solaris-lh-normal);overflow-wrap:anywhere}.solaris-card__badge{flex:0 0 auto;display:inline-flex;align-items:flex-start}.solaris-card__footer{min-inline-size:0;display:flex;align-items:center;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card__footer-main{min-inline-size:0;flex:1 1 auto}.solaris-card__actions{flex:0 0 auto;display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--solaris-space-2)}.solaris-card__media:not(:has(solaris-card-media,[solaris-card-media],.solaris-card-media)){display:none}.solaris-card__eyebrow:not(:has([solaris-card-eyebrow])){display:none}.solaris-card__title:not(:has([solaris-card-title])){display:none}.solaris-card__description:not(:has([solaris-card-description])){display:none}.solaris-card__meta:not(:has([solaris-card-meta])){display:none}.solaris-card__badge:not(:has([solaris-card-badge])){display:none}.solaris-card__footer-main:not(:has([solaris-card-footer])){display:none}.solaris-card__actions:not(:has([solaris-card-actions])){display:none}.solaris-card__header-main:not(:has([solaris-card-eyebrow],[solaris-card-title])){display:none}.solaris-card__header:not(:has([solaris-card-eyebrow],[solaris-card-title],[solaris-card-badge])){display:none}.solaris-card__footer:not(:has([solaris-card-footer],[solaris-card-actions])){display:none}:host([data-orientation=horizontal]) .solaris-card{flex-direction:row;align-items:stretch}:host([data-orientation=horizontal]) .solaris-card__media{flex:0 0 min(32%,var(--solaris-card-media-size));inline-size:min(32%,var(--solaris-card-media-size))}:host([data-orientation=horizontal]) .solaris-card__content{justify-content:center}:host([data-orientation=compact]) .solaris-card{flex-direction:row;align-items:center;gap:var(--solaris-space-3)}:host([data-orientation=compact]) .solaris-card__media{flex:0 0 auto;inline-size:var(--solaris-card-media-size)}:host([data-orientation=compact]) .solaris-card__content{gap:var(--solaris-space-2)}:host([data-orientation=compact]) .solaris-card__footer{margin-block-start:var(--solaris-space-1)}\n"] }]
|
|
6442
|
+
}, template: "<article class=\"solaris-card\">\n <div class=\"solaris-card-media\">\n <ng-content select=\"solaris-card-media, [solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-card-body\">\n <div class=\"solaris-card-leading\">\n <ng-content select=\"solaris-card-leading, [solaris-card-leading]\"></ng-content>\n </div>\n\n <div class=\"solaris-card-content\">\n <div class=\"solaris-card-header\">\n <div class=\"solaris-card-header-main\">\n <div class=\"solaris-card-eyebrow\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-card-title\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n </div>\n\n <div class=\"solaris-card-badge\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </div>\n </div>\n\n <div class=\"solaris-card-description\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-card-meta\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-card-footer\">\n <div class=\"solaris-card-footer-main\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div class=\"solaris-card-actions\">\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n</article>\n\r\n", styles: [":host{display:block;min-inline-size:0;inline-size:100%;--solaris-card-bg: var(--solaris-color-surface);--solaris-card-accent: var(--solaris-color-primary);--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-bg) 92%, var(--solaris-color-white));--solaris-card-bg-selected: color-mix(in srgb, var(--solaris-card-accent) 8%, var(--solaris-color-surface));--solaris-card-border: var(--solaris-color-border);--solaris-card-border-invalid: var(--solaris-color-error);--solaris-card-border-hover: color-mix(in srgb, var(--solaris-card-accent) 18%, var(--solaris-card-border));--solaris-card-border-selected: color-mix(in srgb, var(--solaris-card-accent) 72%, var(--solaris-card-border));--solaris-card-shadow: var(--solaris-shadow-xs);--solaris-card-shadow-hover: var(--solaris-shadow-sm);--solaris-card-shadow-selected: var(--solaris-shadow-sm);--solaris-card-meta-color: var(--solaris-color-text);--solaris-card-title-color: var(--solaris-color-text);--solaris-card-eyebrow-color: var(--solaris-color-text-muted);--solaris-card-description-color: var(--solaris-color-text-muted);--solaris-card-disabled-opacity: .62;--solaris-card-gap: var(--solaris-space-4);--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-padding-top: var(--solaris-card-padding-y);--solaris-card-padding-left: var(--solaris-card-padding-x);--solaris-card-padding-right: calc( var(--solaris-card-padding-x) + var(--solaris-card-reserved-inline-end, 0px) );--solaris-card-padding-bottom: var(--solaris-card-padding-y);--solaris-card-media-size: 7.2rem;--solaris-card-radius: var(--solaris-radius-lg);--solaris-card-leading-size: 4rem;--solaris-card-leading-gap: var(--solaris-space-4);--solaris-card-leading-radius: var(--solaris-radius-lg)}.solaris-card-body{min-inline-size:0;display:flex;align-items:flex-start;gap:var(--solaris-card-leading-gap)}.solaris-card-leading{flex:0 0 var(--solaris-card-leading-size);inline-size:var(--solaris-card-leading-size);min-inline-size:var(--solaris-card-leading-size);display:inline-grid;place-items:center;line-height:0}.solaris-card-leading:not(:has(solaris-card-leading,[solaris-card-leading])){display:none}:host([data-size=sm]){--solaris-card-padding-x: var(--solaris-space-4);--solaris-card-padding-y: var(--solaris-space-4);--solaris-card-gap: var(--solaris-space-3);--solaris-card-content-gap: var(--solaris-space-2);--solaris-card-media-size: 5.6rem}:host([data-size=md]){--solaris-card-padding-x: var(--solaris-space-5);--solaris-card-padding-y: var(--solaris-space-5);--solaris-card-gap: var(--solaris-space-4);--solaris-card-content-gap: var(--solaris-space-3);--solaris-card-media-size: 7.2rem}:host([data-size=lg]){--solaris-card-padding-x: var(--solaris-space-6);--solaris-card-padding-y: var(--solaris-space-6);--solaris-card-gap: var(--solaris-space-5);--solaris-card-content-gap: var(--solaris-space-4);--solaris-card-media-size: 8.8rem}:host([data-color=neutral]){--solaris-card-accent: var(--solaris-color-primary)}:host([data-color=primary]){--solaris-card-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-card-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-card-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-card-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-card-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-card-accent: var(--solaris-card-accent-custom, var(--solaris-color-primary))}:host([data-appearance=outline]){--solaris-card-bg: var(--solaris-color-surface);--solaris-card-border: var(--solaris-color-border);--solaris-card-shadow: var(--solaris-shadow-xs)}:host([data-appearance=soft]){--solaris-card-bg: color-mix( in srgb, var(--solaris-card-accent) 6%, var(--solaris-color-surface) );--solaris-card-border: color-mix( in srgb, var(--solaris-card-accent) 18%, var(--solaris-color-border) );--solaris-card-shadow: var(--solaris-shadow-xs)}:host([data-appearance=solid]){--solaris-card-bg: var(--solaris-card-accent);--solaris-card-bg-hover: color-mix( in srgb, var(--solaris-card-accent) 92%, var(--solaris-color-white) );--solaris-card-border: color-mix( in srgb, var(--solaris-card-accent) 80%, var(--solaris-color-border) );--solaris-card-title-color: var(--solaris-color-primary-contrast);--solaris-card-description-color: var(--solaris-color-primary-contrast);--solaris-card-meta-color: var(--solaris-color-primary-contrast);--solaris-card-eyebrow-color: var(--solaris-color-primary-contrast)}:host([data-appearance=elevated]){--solaris-card-bg: var(--solaris-color-surface);--solaris-card-border: color-mix(in srgb, var(--solaris-color-border) 70%, transparent);--solaris-card-shadow: var(--solaris-shadow-sm);--solaris-card-shadow-hover: var(--solaris-shadow-md)}:host([data-appearance=ghost]){--solaris-card-bg: transparent;--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-accent) 4%, transparent);--solaris-card-border: transparent;--solaris-card-shadow: none;--solaris-card-shadow-hover: none}:host([data-appearance=glass]){--solaris-card-bg: color-mix(in srgb, var(--solaris-card-accent) 10%, transparent);--solaris-card-bg-hover: color-mix(in srgb, var(--solaris-card-accent) 16%, transparent);--solaris-card-border: color-mix( in srgb, var(--solaris-color-surface) 34%, var(--solaris-color-border) );--solaris-card-border-hover: color-mix( in srgb, var(--solaris-card-accent) 36%, var(--solaris-color-border) );--solaris-card-shadow: none;--solaris-card-shadow-hover: var(--solaris-shadow-xs);--solaris-card-shadow-selected: inset 0 0 0 .1rem color-mix(in srgb, var(--solaris-card-accent) 22%, transparent)}:host([data-selected=true][data-appearance=glass]) .solaris-card{background:var(--solaris-card-bg-override, color-mix(in srgb, var(--solaris-card-accent) 14%, transparent));box-shadow:var(--solaris-card-shadow-override, var(--solaris-card-shadow-selected));border-color:var(--solaris-card-border-override, var(--solaris-card-border-selected))}:host([data-appearance=gradient]){--solaris-card-bg: linear-gradient( 135deg, var(--solaris-card-accent) 0%, color-mix(in srgb, var(--solaris-card-accent) 62%, var(--solaris-color-text)) 100% );--solaris-card-bg-hover: linear-gradient( 135deg, color-mix(in srgb, var(--solaris-card-accent) 92%, var(--solaris-color-white)) 0%, color-mix(in srgb, var(--solaris-card-accent) 62%, var(--solaris-color-text)) 100% );--solaris-card-border: color-mix(in srgb, var(--solaris-card-accent) 42%, transparent);--solaris-card-border-hover: color-mix(in srgb, var(--solaris-card-accent) 64%, transparent);--solaris-card-title-color: var(--solaris-color-primary-contrast);--solaris-card-description-color: var(--solaris-color-primary-contrast);--solaris-card-meta-color: var(--solaris-color-primary-contrast);--solaris-card-eyebrow-color: var(--solaris-color-primary-contrast)}:host([data-invalid=true]){--solaris-card-border: var(--solaris-card-border-invalid);--solaris-card-border-hover: var(--solaris-card-border-invalid);--solaris-card-border-selected: var(--solaris-card-border-invalid)}.solaris-card{min-inline-size:0;inline-size:100%;min-block-size:var(--solaris-card-min-height, auto);position:relative;isolation:isolate;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;gap:var(--solaris-card-gap);padding:var(--solaris-card-padding-top) var(--solaris-card-padding-right) var(--solaris-card-padding-bottom) var(--solaris-card-padding-left);color:var(--solaris-color-text);border-radius:var(--solaris-card-radius);background:var(--solaris-card-bg-override, var(--solaris-card-bg));box-shadow:var(--solaris-card-shadow-override, var(--solaris-card-shadow));border:1px solid var(--solaris-card-border-override, var(--solaris-card-border))}:host([data-appearance=glass]) .solaris-card{backdrop-filter:blur(1.4rem) saturate(1.35);-webkit-backdrop-filter:blur(1.4rem) saturate(1.35)}:host([data-appearance=glass]) .solaris-card:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,color-mix(in srgb,var(--solaris-color-surface) 18%,transparent) 0%,transparent 48%)}:host([data-appearance=gradient]) .solaris-card:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;border-radius:inherit;background:radial-gradient(circle at top right,color-mix(in srgb,var(--solaris-color-surface) 24%,transparent) 0%,transparent 42%)}.solaris-card>*{position:relative;z-index:var(--solaris-z-raised)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card{cursor:pointer;transition:background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}:host([data-interactive=true]:not([data-disabled=true])) .solaris-card:hover{background:var(--solaris-card-bg-override, var(--solaris-card-bg-hover));box-shadow:var(--solaris-card-shadow-override, var(--solaris-card-shadow-hover));border-color:var(--solaris-card-border-override, var(--solaris-card-border-hover))}:host([data-selected=true]) .solaris-card{border-color:var(--solaris-card-border-selected);box-shadow:var(--solaris-card-shadow-selected)}:host([data-selected=true][data-appearance=outline]) .solaris-card,:host([data-selected=true][data-appearance=elevated]) .solaris-card,:host([data-selected=true][data-appearance=ghost]) .solaris-card{background:var(--solaris-card-bg-selected)}:host([data-selected=true][data-appearance=soft]) .solaris-card{background:color-mix(in srgb,var(--solaris-card-accent) 12%,var(--solaris-color-surface))}:host([data-selected=true][data-appearance=solid]) .solaris-card,:host([data-selected=true][data-appearance=gradient]) .solaris-card{background:var(--solaris-card-bg-override, var(--solaris-card-bg))}:host([data-disabled=true]) .solaris-card{cursor:not-allowed;box-shadow:none;opacity:var(--solaris-card-disabled-opacity)}.solaris-card-media{min-inline-size:0;inline-size:100%;overflow:hidden;border-radius:calc(var(--solaris-card-radius) - .2rem)}.solaris-card-content{min-inline-size:0;display:flex;flex:1 1 auto;flex-direction:column;gap:var(--solaris-card-content-gap)}.solaris-card-media,.solaris-card-body{position:relative;z-index:var(--solaris-z-raised)}.solaris-card-header{min-inline-size:0;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card-header-main{min-inline-size:0;flex:1 1 auto;display:flex;flex-direction:column;gap:var(--solaris-space-2)}.solaris-card-eyebrow{min-inline-size:0;color:var(--solaris-card-eyebrow-color);font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-normal);letter-spacing:var(--solaris-ls-md);text-transform:uppercase;overflow-wrap:anywhere}.solaris-card-title{min-inline-size:0;color:var(--solaris-card-title-color);font-size:var(--solaris-fs-16);font-weight:700;line-height:var(--solaris-lh-tight);overflow-wrap:anywhere}.solaris-card-description{min-inline-size:0;color:var(--solaris-card-description-color);font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);overflow-wrap:anywhere}.solaris-card-meta{min-inline-size:0;color:var(--solaris-card-meta-color);font-size:var(--solaris-fs-14);font-weight:600;line-height:var(--solaris-lh-normal);overflow-wrap:anywhere}.solaris-card-badge{flex:0 0 auto;display:inline-flex;align-items:flex-start}.solaris-card-footer{min-inline-size:0;display:flex;align-items:center;justify-content:space-between;gap:var(--solaris-space-3)}.solaris-card-footer-main{min-inline-size:0;flex:1 1 auto}.solaris-card-actions{flex:0 0 auto;display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--solaris-space-2)}.solaris-card-media:not(:has(solaris-card-media,[solaris-card-media],.solaris-card-media)){display:none}.solaris-card-eyebrow:not(:has([solaris-card-eyebrow])){display:none}.solaris-card-title:not(:has([solaris-card-title])){display:none}.solaris-card-description:not(:has([solaris-card-description])){display:none}.solaris-card-meta:not(:has([solaris-card-meta])){display:none}.solaris-card-badge:not(:has([solaris-card-badge])){display:none}.solaris-card-footer-main:not(:has([solaris-card-footer])){display:none}.solaris-card-actions:not(:has([solaris-card-actions])){display:none}.solaris-card-header-main:not(:has([solaris-card-eyebrow],[solaris-card-title])){display:none}.solaris-card-header:not(:has([solaris-card-eyebrow],[solaris-card-title],[solaris-card-badge])){display:none}.solaris-card-footer:not(:has([solaris-card-footer],[solaris-card-actions])){display:none}:host([data-orientation=horizontal]) .solaris-card{flex-direction:row;align-items:stretch}:host([data-orientation=horizontal]) .solaris-card-media{flex:0 0 min(32%,var(--solaris-card-media-size));inline-size:min(32%,var(--solaris-card-media-size))}:host([data-orientation=horizontal]) .solaris-card-content{justify-content:center}:host([data-orientation=compact]) .solaris-card{flex-direction:row;align-items:center;gap:var(--solaris-space-3)}:host([data-orientation=compact]) .solaris-card-media{flex:0 0 auto;inline-size:var(--solaris-card-media-size)}:host([data-orientation=compact]) .solaris-card-content{gap:var(--solaris-space-2)}:host([data-orientation=compact]) .solaris-card-footer{margin-block-start:var(--solaris-space-1)}\n"] }]
|
|
6442
6443
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], reservedInlineEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "reservedInlineEnd", required: false }] }] } });
|
|
6443
6444
|
|
|
6444
6445
|
class SolarisSelectionCard {
|
|
@@ -6595,13 +6596,13 @@ class SolarisSelectionCard {
|
|
|
6595
6596
|
isActionZone(target) {
|
|
6596
6597
|
if (!(target instanceof HTMLElement))
|
|
6597
6598
|
return false;
|
|
6598
|
-
return !!target.closest(['[data-card-actions="true"]', '[solaris-card-actions]', '.solaris-card-slot
|
|
6599
|
+
return !!target.closest(['[data-card-actions="true"]', '[solaris-card-actions]', '.solaris-card-slot-actions'].join(','));
|
|
6599
6600
|
}
|
|
6600
6601
|
normalize(value) {
|
|
6601
6602
|
return String(value ?? '').trim();
|
|
6602
6603
|
}
|
|
6603
6604
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisSelectionCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6604
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisSelectionCard, isStandalone: true, selector: "solaris-selection-card", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, selectionIndicator: { classPropertyName: "selectionIndicator", publicName: "selectionIndicator", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectedInput: { classPropertyName: "selectedInput", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", cardClick: "cardClick" }, host: { listeners: { "click": "onHostClick($event)", "keydown": "onHostKeydown($event)", "blur": "onHostBlur()" }, properties: { "attr.data-size": "size()", "attr.data-orientation": "orientation()", "attr.data-selected": "selected() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.data-invalid": "invalid() ? \"true\" : null", "attr.data-appearance": "appearance()", "attr.data-color": "colorKey()", "attr.data-indicator": "resolvedIndicator()", "attr.role": "role()", "attr.aria-checked": "ariaChecked()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "tabIndex()", "style.--solaris-selection-card-custom": "customAccent()" }, classAttribute: "solaris-selection-card-host" }, ngImport: i0, template: "<div class=\"solaris-selection-card\">\n @if (resolvedIndicator() !== 'none') {\n <span class=\"solaris-selection-card__indicator\" aria-hidden=\"true\">\n <span class=\"solaris-selection-card__indicator-control\">\n @switch (resolvedIndicator()) {\n @case ('radio') {\n <span class=\"solaris-selection-card__indicator-dot\"></span>\n }\n\n @case ('checkbox') {\n <i class=\"ph ph-check solaris-selection-card__indicator-check\"></i>\n }\n\n @case ('icon') {\n <span class=\"solaris-selection-card__indicator-icon-dot\"></span>\n }\n }\n </span>\n </span>\n }\n\n <span class=\"solaris-selection-card__floating-badge\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </span>\n\n <solaris-card class=\"solaris-selection-card__card\" [orientation]=\"orientation()\" [size]=\"size()\" [radius]=\"radius()\"\n [appearance]=\"appearance()\" [color]=\"color()\" [selected]=\"selected()\" [invalid]=\"invalid()\" [interactive]=\"!disabled()\"\n [disabled]=\"disabled()\" [minHeight]=\"minHeight()\" [reservedInlineEnd]=\"reservedInlineEnd()\"\n [background]=\"background()\" [borderColor]=\"borderColor()\" [shadow]=\"shadow()\">\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"solaris-card-media\">\n <ng-content select=\"solaris-card-media\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-media]\">\n <ng-content select=\"[solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"solaris-card-leading\">\n <ng-content select=\"solaris-card-leading\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-leading]\">\n <ng-content select=\"[solaris-card-leading]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-eyebrow]\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-title]\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-description]\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-meta]\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-footer]\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-actions]\" data-card-actions=\"true\">\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </solaris-card>\n</div>\n", styles: [":host{display:block;min-width:0;position:relative;outline:none;cursor:pointer;--ssc-accent: var(--solaris-color-primary);--ssc-focus-ring: color-mix(in srgb, var(--ssc-accent) 26%, transparent);--ssc-indicator-size: var(--solaris-indicator-size-md);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-md);--ssc-indicator-check-size: var(--solaris-indicator-check-size-md);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-md);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-md);--ssc-indicator-gap: var(--solaris-space-3);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-indicator-top: var(--ssc-pad-y);--ssc-indicator-end: var(--ssc-pad-x);--ssc-min-height: 12rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--ssc-indicator-gap));--ssc-indicator-border: var(--solaris-color-border);--ssc-indicator-bg: transparent;--ssc-indicator-fg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-bg: var(--ssc-accent);--ssc-indicator-selected-border: var(--ssc-accent);--ssc-indicator-selected-fg: var(--solaris-color-primary-contrast);--ssc-badge-gap: var(--solaris-space-2);--ssc-badge-max-inline-size: 12rem;--ssc-badge-reserved-inline-size: 0rem}:host(:has([solaris-card-badge])){--ssc-badge-reserved-inline-size: 8rem;--ssc-reserved-inline-end: calc( var(--ssc-indicator-size) + var(--ssc-indicator-gap) + var(--ssc-badge-reserved-inline-size) + var(--ssc-badge-gap) )}:host([data-size=sm]){--ssc-indicator-size: var(--solaris-indicator-size-sm);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-sm);--ssc-indicator-check-size: var(--solaris-indicator-check-size-sm);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-sm);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-sm);--ssc-pad-x: var(--solaris-space-5);--ssc-pad-y: var(--solaris-space-4);--ssc-min-height: 10rem}:host([data-size=md]){--ssc-indicator-size: var(--solaris-indicator-size-md);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-md);--ssc-indicator-check-size: var(--solaris-indicator-check-size-md);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-md);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-md);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-min-height: 12rem}:host([data-size=lg]){--ssc-indicator-size: var(--solaris-indicator-size-lg);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-lg);--ssc-indicator-check-size: var(--solaris-indicator-check-size-lg);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-lg);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-lg);--ssc-min-height: 14rem;--ssc-pad-x: var(--solaris-space-7);--ssc-pad-y: var(--solaris-space-6)}:host([data-color=primary]){--ssc-accent: var(--solaris-color-primary)}:host([data-color=success]){--ssc-accent: var(--solaris-color-success)}:host([data-color=warning]){--ssc-accent: var(--solaris-color-warning)}:host([data-color=error]){--ssc-accent: var(--solaris-color-error)}:host([data-color=info]){--ssc-accent: var(--solaris-color-info)}:host([data-color=custom]){--ssc-accent: var(--solaris-selection-card-custom, var(--solaris-color-primary))}:host([data-disabled=true]){cursor:not-allowed}:host(:focus-visible){outline:.2rem solid var(--ssc-focus-ring);outline-offset:.2rem;border-radius:var(--solaris-card-radius, var(--solaris-radius-lg))}.solaris-selection-card{min-width:0;min-height:var(--ssc-min-height);position:relative}.solaris-selection-card__card{display:block;min-width:0;--solaris-card-padding-x: var(--ssc-pad-x);--solaris-card-padding-y: var(--ssc-pad-y)}.solaris-selection-card__indicator{position:absolute;inset-block-start:var(--ssc-indicator-top);inset-inline-end:var(--ssc-indicator-end);z-index:var(--solaris-z-raised);pointer-events:none;inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);display:inline-grid;place-items:center;line-height:0}.solaris-selection-card__indicator-control{inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);min-inline-size:var(--ssc-indicator-size);min-block-size:var(--ssc-indicator-size);aspect-ratio:1/1;display:inline-grid;place-items:center;box-sizing:border-box;line-height:0;border-radius:var(--solaris-indicator-radius);border:var(--solaris-indicator-border-width) solid var(--ssc-indicator-border);background:var(--ssc-indicator-bg);color:var(--ssc-indicator-fg);flex:0 0 auto;position:relative;transition:border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot,.solaris-selection-card__indicator-icon-dot{position:absolute;inset-block-start:50%;inset-inline-start:50%;display:block;flex:0 0 auto;aspect-ratio:1/1;box-sizing:border-box;opacity:0;transform-origin:center;border-radius:var(--solaris-indicator-radius);transform:translate(-50%,-50%) scale(.45);transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot{block-size:var(--ssc-indicator-dot-size);inline-size:var(--ssc-indicator-dot-size);background:var(--ssc-indicator-selected-border)}:host([data-appearance=solid]) .solaris-selection-card__indicator-dot,:host([data-appearance=gradient]) .solaris-selection-card__indicator-dot{background:var(--ssc-indicator-selected-bg)}.solaris-selection-card__indicator-icon-dot{background:var(--ssc-indicator-selected-fg);block-size:var(--ssc-indicator-icon-dot-size);inline-size:var(--ssc-indicator-icon-dot-size)}.solaris-selection-card__indicator-check{display:block;flex:0 0 auto;line-height:1;font-size:var(--ssc-indicator-check-size);font-weight:700;-webkit-text-stroke:var(--ssc-indicator-check-weight) currentColor;opacity:0;transform:scale(.45);transform-origin:center;transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__slot{display:contents}:host([data-indicator=radio]) .solaris-selection-card__indicator-control,:host([data-indicator=icon]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-full)}:host([data-indicator=checkbox]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-sm)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-control{border-color:var(--ssc-indicator-selected-border)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-control{color:var(--ssc-indicator-selected-fg);background:var(--ssc-indicator-selected-bg);border-color:var(--ssc-indicator-selected-border);box-shadow:inset 0 0 0 .1rem color-mix(in srgb,var(--ssc-indicator-selected-fg) 18%,transparent)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-check{opacity:1;transform:scale(1)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-control{background:var(--ssc-indicator-selected-bg);border-color:var(--ssc-indicator-selected-border)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-icon-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-disabled=true]) .solaris-selection-card__indicator-control{opacity:.55}:host([data-orientation=compact]){--ssc-min-height: 8.8rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--solaris-space-2))}:host([data-appearance=outline]){--ssc-indicator-border: var(--solaris-color-border);--ssc-indicator-bg: transparent}:host([data-appearance=soft]){--ssc-indicator-border: color-mix( in srgb, var(--ssc-accent) 24%, var(--solaris-color-border) );--ssc-indicator-bg: color-mix( in srgb, var(--ssc-accent) 4%, transparent )}:host([data-appearance=solid]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-primary-contrast) 46%, transparent );--ssc-indicator-bg: color-mix( in srgb, var(--solaris-color-primary-contrast) 8%, transparent );--ssc-indicator-selected-bg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-border: var(--solaris-color-primary-contrast);--ssc-indicator-selected-fg: var(--ssc-accent)}:host([data-appearance=elevated]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-border) 72%, transparent );--ssc-indicator-bg: var(--solaris-color-surface)}:host([data-appearance=ghost]){--ssc-indicator-border: color-mix( in srgb, var(--ssc-accent) 22%, var(--solaris-color-border) );--ssc-indicator-bg: transparent}:host([data-appearance=glass]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-surface) 34%, var(--solaris-color-border) );--ssc-indicator-bg: color-mix( in srgb, var(--ssc-accent) 10%, transparent )}:host([data-appearance=gradient]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-primary-contrast) 42%, transparent );--ssc-indicator-bg: color-mix( in srgb, var(--solaris-color-primary-contrast) 8%, transparent );--ssc-indicator-selected-bg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-border: var(--solaris-color-primary-contrast);--ssc-indicator-selected-fg: var(--ssc-accent)}.solaris-selection-card__floating-badge{position:absolute;inset-block-start:calc(var(--ssc-indicator-top) + var(--ssc-indicator-size) / 2);inset-inline-end:calc(var(--ssc-indicator-end) + var(--ssc-indicator-size) + var(--ssc-badge-gap));transform:translateY(-50%);z-index:var(--solaris-z-raised);pointer-events:none;max-inline-size:var(--ssc-badge-max-inline-size);min-inline-size:0;line-height:0;align-items:center;display:inline-flex;justify-content:flex-end;--solaris-badge-min-height-sm: 1.8rem;--solaris-badge-min-height-md: 1.8rem;--solaris-badge-min-height-lg: 2rem;--solaris-badge-padding-block-sm: .1rem;--solaris-badge-padding-inline-sm: .5rem;--solaris-badge-padding-block-md: .1rem;--solaris-badge-padding-inline-md: .6rem;--solaris-badge-padding-block-lg: .15rem;--solaris-badge-padding-inline-lg: .7rem;--solaris-badge-line-height-override: var(--solaris-lh-tight)}.solaris-selection-card__floating-badge:not(:has([solaris-card-badge])){display:none}\n"], dependencies: [{ kind: "component", type: SolarisCard, selector: "solaris-card", inputs: ["size", "orientation", "radius", "color", "appearance", "shadow", "background", "borderColor", "invalid", "selected", "disabled", "interactive", "minHeight", "reservedInlineEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6605
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisSelectionCard, isStandalone: true, selector: "solaris-selection-card", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, selectionIndicator: { classPropertyName: "selectionIndicator", publicName: "selectionIndicator", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectedInput: { classPropertyName: "selectedInput", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", cardClick: "cardClick" }, host: { listeners: { "click": "onHostClick($event)", "keydown": "onHostKeydown($event)", "blur": "onHostBlur()" }, properties: { "attr.data-size": "size()", "attr.data-orientation": "orientation()", "attr.data-selected": "selected() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.data-invalid": "invalid() ? \"true\" : null", "attr.data-appearance": "appearance()", "attr.data-color": "colorKey()", "attr.data-indicator": "resolvedIndicator()", "attr.role": "role()", "attr.aria-checked": "ariaChecked()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "tabIndex()", "style.--solaris-selection-card-custom": "customAccent()" }, classAttribute: "solaris-selection-card-host" }, ngImport: i0, template: "<div class=\"solaris-selection-card\">\n @if (resolvedIndicator() !== 'none') {\n <span class=\"solaris-selection-card-indicator\" aria-hidden=\"true\">\n <span class=\"solaris-selection-card-indicator-control\">\n @switch (resolvedIndicator()) {\n @case ('radio') {\n <span class=\"solaris-selection-card-indicator-dot\"></span>\n }\n\n @case ('checkbox') {\n <i class=\"ph ph-check solaris-selection-card-indicator-check\"></i>\n }\n\n @case ('icon') {\n <span class=\"solaris-selection-card-indicator-icon-dot\"></span>\n }\n }\n </span>\n </span>\n }\n\n <span class=\"solaris-selection-card-floating-badge\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </span>\n\n <solaris-card class=\"solaris-selection-card-card\" [orientation]=\"orientation()\" [size]=\"size()\" [radius]=\"radius()\"\n [appearance]=\"appearance()\" [color]=\"color()\" [selected]=\"selected()\" [invalid]=\"invalid()\" [interactive]=\"!disabled()\"\n [disabled]=\"disabled()\" [minHeight]=\"minHeight()\" [reservedInlineEnd]=\"reservedInlineEnd()\"\n [background]=\"background()\" [borderColor]=\"borderColor()\" [shadow]=\"shadow()\">\n <div class=\"solaris-selection-card-slot\" ngProjectAs=\"solaris-card-media\">\n <ng-content select=\"solaris-card-media\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card-slot\" ngProjectAs=\"[solaris-card-media]\">\n <ng-content select=\"[solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card-slot\" ngProjectAs=\"solaris-card-leading\">\n <ng-content select=\"solaris-card-leading\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card-slot\" ngProjectAs=\"[solaris-card-leading]\">\n <ng-content select=\"[solaris-card-leading]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card-slot\" ngProjectAs=\"[solaris-card-eyebrow]\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card-slot\" ngProjectAs=\"[solaris-card-title]\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card-slot\" ngProjectAs=\"[solaris-card-description]\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card-slot\" ngProjectAs=\"[solaris-card-meta]\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card-slot\" ngProjectAs=\"[solaris-card-footer]\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card-slot\" ngProjectAs=\"[solaris-card-actions]\" data-card-actions=\"true\">\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </solaris-card>\n</div>\n\r\n", styles: [":host{display:block;min-width:0;position:relative;outline:none;cursor:pointer;--ssc-accent: var(--solaris-color-primary);--ssc-focus-ring: color-mix(in srgb, var(--ssc-accent) 26%, transparent);--ssc-indicator-size: var(--solaris-indicator-size-md);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-md);--ssc-indicator-check-size: var(--solaris-indicator-check-size-md);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-md);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-md);--ssc-indicator-gap: var(--solaris-space-3);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-indicator-top: var(--ssc-pad-y);--ssc-indicator-end: var(--ssc-pad-x);--ssc-min-height: 12rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--ssc-indicator-gap));--ssc-indicator-border: var(--solaris-color-border);--ssc-indicator-bg: transparent;--ssc-indicator-fg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-bg: var(--ssc-accent);--ssc-indicator-selected-border: var(--ssc-accent);--ssc-indicator-selected-fg: var(--solaris-color-primary-contrast);--ssc-badge-gap: var(--solaris-space-2);--ssc-badge-max-inline-size: 12rem;--ssc-badge-reserved-inline-size: 0rem}:host(:has([solaris-card-badge])){--ssc-badge-reserved-inline-size: 8rem;--ssc-reserved-inline-end: calc( var(--ssc-indicator-size) + var(--ssc-indicator-gap) + var(--ssc-badge-reserved-inline-size) + var(--ssc-badge-gap) )}:host([data-size=sm]){--ssc-indicator-size: var(--solaris-indicator-size-sm);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-sm);--ssc-indicator-check-size: var(--solaris-indicator-check-size-sm);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-sm);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-sm);--ssc-pad-x: var(--solaris-space-5);--ssc-pad-y: var(--solaris-space-4);--ssc-min-height: 10rem}:host([data-size=md]){--ssc-indicator-size: var(--solaris-indicator-size-md);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-md);--ssc-indicator-check-size: var(--solaris-indicator-check-size-md);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-md);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-md);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-min-height: 12rem}:host([data-size=lg]){--ssc-indicator-size: var(--solaris-indicator-size-lg);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-lg);--ssc-indicator-check-size: var(--solaris-indicator-check-size-lg);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-lg);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-lg);--ssc-min-height: 14rem;--ssc-pad-x: var(--solaris-space-7);--ssc-pad-y: var(--solaris-space-6)}:host([data-color=primary]){--ssc-accent: var(--solaris-color-primary)}:host([data-color=success]){--ssc-accent: var(--solaris-color-success)}:host([data-color=warning]){--ssc-accent: var(--solaris-color-warning)}:host([data-color=error]){--ssc-accent: var(--solaris-color-error)}:host([data-color=info]){--ssc-accent: var(--solaris-color-info)}:host([data-color=custom]){--ssc-accent: var(--solaris-selection-card-custom, var(--solaris-color-primary))}:host([data-disabled=true]){cursor:not-allowed}:host(:focus-visible){outline:.2rem solid var(--ssc-focus-ring);outline-offset:.2rem;border-radius:var(--solaris-card-radius, var(--solaris-radius-lg))}.solaris-selection-card{min-width:0;min-height:var(--ssc-min-height);position:relative}.solaris-selection-card-card{display:block;min-width:0;--solaris-card-padding-x: var(--ssc-pad-x);--solaris-card-padding-y: var(--ssc-pad-y)}.solaris-selection-card-indicator{position:absolute;inset-block-start:var(--ssc-indicator-top);inset-inline-end:var(--ssc-indicator-end);z-index:var(--solaris-z-raised);pointer-events:none;inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);display:inline-grid;place-items:center;line-height:0}.solaris-selection-card-indicator-control{inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);min-inline-size:var(--ssc-indicator-size);min-block-size:var(--ssc-indicator-size);aspect-ratio:1/1;display:inline-grid;place-items:center;box-sizing:border-box;line-height:0;border-radius:var(--solaris-indicator-radius);border:var(--solaris-indicator-border-width) solid var(--ssc-indicator-border);background:var(--ssc-indicator-bg);color:var(--ssc-indicator-fg);flex:0 0 auto;position:relative;transition:border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-selection-card-indicator-dot,.solaris-selection-card-indicator-icon-dot{position:absolute;inset-block-start:50%;inset-inline-start:50%;display:block;flex:0 0 auto;aspect-ratio:1/1;box-sizing:border-box;opacity:0;transform-origin:center;border-radius:var(--solaris-indicator-radius);transform:translate(-50%,-50%) scale(.45);transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card-indicator-dot{block-size:var(--ssc-indicator-dot-size);inline-size:var(--ssc-indicator-dot-size);background:var(--ssc-indicator-selected-border)}:host([data-appearance=solid]) .solaris-selection-card-indicator-dot,:host([data-appearance=gradient]) .solaris-selection-card-indicator-dot{background:var(--ssc-indicator-selected-bg)}.solaris-selection-card-indicator-icon-dot{background:var(--ssc-indicator-selected-fg);block-size:var(--ssc-indicator-icon-dot-size);inline-size:var(--ssc-indicator-icon-dot-size)}.solaris-selection-card-indicator-check{display:block;flex:0 0 auto;line-height:1;font-size:var(--ssc-indicator-check-size);font-weight:700;-webkit-text-stroke:var(--ssc-indicator-check-weight) currentColor;opacity:0;transform:scale(.45);transform-origin:center;transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card-slot{display:contents}:host([data-indicator=radio]) .solaris-selection-card-indicator-control,:host([data-indicator=icon]) .solaris-selection-card-indicator-control{border-radius:var(--solaris-radius-full)}:host([data-indicator=checkbox]) .solaris-selection-card-indicator-control{border-radius:var(--solaris-radius-sm)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card-indicator-control{border-color:var(--ssc-indicator-selected-border)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card-indicator-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card-indicator-control{color:var(--ssc-indicator-selected-fg);background:var(--ssc-indicator-selected-bg);border-color:var(--ssc-indicator-selected-border);box-shadow:inset 0 0 0 .1rem color-mix(in srgb,var(--ssc-indicator-selected-fg) 18%,transparent)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card-indicator-check{opacity:1;transform:scale(1)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card-indicator-control{background:var(--ssc-indicator-selected-bg);border-color:var(--ssc-indicator-selected-border)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card-indicator-icon-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-disabled=true]) .solaris-selection-card-indicator-control{opacity:.55}:host([data-orientation=compact]){--ssc-min-height: 8.8rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--solaris-space-2))}:host([data-appearance=outline]){--ssc-indicator-border: var(--solaris-color-border);--ssc-indicator-bg: transparent}:host([data-appearance=soft]){--ssc-indicator-border: color-mix( in srgb, var(--ssc-accent) 24%, var(--solaris-color-border) );--ssc-indicator-bg: color-mix( in srgb, var(--ssc-accent) 4%, transparent )}:host([data-appearance=solid]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-primary-contrast) 46%, transparent );--ssc-indicator-bg: color-mix( in srgb, var(--solaris-color-primary-contrast) 8%, transparent );--ssc-indicator-selected-bg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-border: var(--solaris-color-primary-contrast);--ssc-indicator-selected-fg: var(--ssc-accent)}:host([data-appearance=elevated]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-border) 72%, transparent );--ssc-indicator-bg: var(--solaris-color-surface)}:host([data-appearance=ghost]){--ssc-indicator-border: color-mix( in srgb, var(--ssc-accent) 22%, var(--solaris-color-border) );--ssc-indicator-bg: transparent}:host([data-appearance=glass]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-surface) 34%, var(--solaris-color-border) );--ssc-indicator-bg: color-mix( in srgb, var(--ssc-accent) 10%, transparent )}:host([data-appearance=gradient]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-primary-contrast) 42%, transparent );--ssc-indicator-bg: color-mix( in srgb, var(--solaris-color-primary-contrast) 8%, transparent );--ssc-indicator-selected-bg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-border: var(--solaris-color-primary-contrast);--ssc-indicator-selected-fg: var(--ssc-accent)}.solaris-selection-card-floating-badge{position:absolute;inset-block-start:calc(var(--ssc-indicator-top) + var(--ssc-indicator-size) / 2);inset-inline-end:calc(var(--ssc-indicator-end) + var(--ssc-indicator-size) + var(--ssc-badge-gap));transform:translateY(-50%);z-index:var(--solaris-z-raised);pointer-events:none;max-inline-size:var(--ssc-badge-max-inline-size);min-inline-size:0;line-height:0;align-items:center;display:inline-flex;justify-content:flex-end;--solaris-badge-min-height-sm: 1.8rem;--solaris-badge-min-height-md: 1.8rem;--solaris-badge-min-height-lg: 2rem;--solaris-badge-padding-block-sm: .1rem;--solaris-badge-padding-inline-sm: .5rem;--solaris-badge-padding-block-md: .1rem;--solaris-badge-padding-inline-md: .6rem;--solaris-badge-padding-block-lg: .15rem;--solaris-badge-padding-inline-lg: .7rem;--solaris-badge-line-height-override: var(--solaris-lh-tight)}.solaris-selection-card-floating-badge:not(:has([solaris-card-badge])){display:none}\n"], dependencies: [{ kind: "component", type: SolarisCard, selector: "solaris-card", inputs: ["size", "orientation", "radius", "color", "appearance", "shadow", "background", "borderColor", "invalid", "selected", "disabled", "interactive", "minHeight", "reservedInlineEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6605
6606
|
}
|
|
6606
6607
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisSelectionCard, decorators: [{
|
|
6607
6608
|
type: Component,
|
|
@@ -6623,7 +6624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
6623
6624
|
'(click)': 'onHostClick($event)',
|
|
6624
6625
|
'(keydown)': 'onHostKeydown($event)',
|
|
6625
6626
|
'(blur)': 'onHostBlur()',
|
|
6626
|
-
}, template: "<div class=\"solaris-selection-card\">\n @if (resolvedIndicator() !== 'none') {\n <span class=\"solaris-selection-card__indicator\" aria-hidden=\"true\">\n <span class=\"solaris-selection-card__indicator-control\">\n @switch (resolvedIndicator()) {\n @case ('radio') {\n <span class=\"solaris-selection-card__indicator-dot\"></span>\n }\n\n @case ('checkbox') {\n <i class=\"ph ph-check solaris-selection-card__indicator-check\"></i>\n }\n\n @case ('icon') {\n <span class=\"solaris-selection-card__indicator-icon-dot\"></span>\n }\n }\n </span>\n </span>\n }\n\n <span class=\"solaris-selection-card__floating-badge\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </span>\n\n <solaris-card class=\"solaris-selection-card__card\" [orientation]=\"orientation()\" [size]=\"size()\" [radius]=\"radius()\"\n [appearance]=\"appearance()\" [color]=\"color()\" [selected]=\"selected()\" [invalid]=\"invalid()\" [interactive]=\"!disabled()\"\n [disabled]=\"disabled()\" [minHeight]=\"minHeight()\" [reservedInlineEnd]=\"reservedInlineEnd()\"\n [background]=\"background()\" [borderColor]=\"borderColor()\" [shadow]=\"shadow()\">\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"solaris-card-media\">\n <ng-content select=\"solaris-card-media\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-media]\">\n <ng-content select=\"[solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"solaris-card-leading\">\n <ng-content select=\"solaris-card-leading\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-leading]\">\n <ng-content select=\"[solaris-card-leading]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-eyebrow]\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-title]\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-description]\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-meta]\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-footer]\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card__slot\" ngProjectAs=\"[solaris-card-actions]\" data-card-actions=\"true\">\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </solaris-card>\n</div>\n", styles: [":host{display:block;min-width:0;position:relative;outline:none;cursor:pointer;--ssc-accent: var(--solaris-color-primary);--ssc-focus-ring: color-mix(in srgb, var(--ssc-accent) 26%, transparent);--ssc-indicator-size: var(--solaris-indicator-size-md);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-md);--ssc-indicator-check-size: var(--solaris-indicator-check-size-md);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-md);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-md);--ssc-indicator-gap: var(--solaris-space-3);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-indicator-top: var(--ssc-pad-y);--ssc-indicator-end: var(--ssc-pad-x);--ssc-min-height: 12rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--ssc-indicator-gap));--ssc-indicator-border: var(--solaris-color-border);--ssc-indicator-bg: transparent;--ssc-indicator-fg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-bg: var(--ssc-accent);--ssc-indicator-selected-border: var(--ssc-accent);--ssc-indicator-selected-fg: var(--solaris-color-primary-contrast);--ssc-badge-gap: var(--solaris-space-2);--ssc-badge-max-inline-size: 12rem;--ssc-badge-reserved-inline-size: 0rem}:host(:has([solaris-card-badge])){--ssc-badge-reserved-inline-size: 8rem;--ssc-reserved-inline-end: calc( var(--ssc-indicator-size) + var(--ssc-indicator-gap) + var(--ssc-badge-reserved-inline-size) + var(--ssc-badge-gap) )}:host([data-size=sm]){--ssc-indicator-size: var(--solaris-indicator-size-sm);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-sm);--ssc-indicator-check-size: var(--solaris-indicator-check-size-sm);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-sm);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-sm);--ssc-pad-x: var(--solaris-space-5);--ssc-pad-y: var(--solaris-space-4);--ssc-min-height: 10rem}:host([data-size=md]){--ssc-indicator-size: var(--solaris-indicator-size-md);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-md);--ssc-indicator-check-size: var(--solaris-indicator-check-size-md);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-md);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-md);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-min-height: 12rem}:host([data-size=lg]){--ssc-indicator-size: var(--solaris-indicator-size-lg);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-lg);--ssc-indicator-check-size: var(--solaris-indicator-check-size-lg);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-lg);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-lg);--ssc-min-height: 14rem;--ssc-pad-x: var(--solaris-space-7);--ssc-pad-y: var(--solaris-space-6)}:host([data-color=primary]){--ssc-accent: var(--solaris-color-primary)}:host([data-color=success]){--ssc-accent: var(--solaris-color-success)}:host([data-color=warning]){--ssc-accent: var(--solaris-color-warning)}:host([data-color=error]){--ssc-accent: var(--solaris-color-error)}:host([data-color=info]){--ssc-accent: var(--solaris-color-info)}:host([data-color=custom]){--ssc-accent: var(--solaris-selection-card-custom, var(--solaris-color-primary))}:host([data-disabled=true]){cursor:not-allowed}:host(:focus-visible){outline:.2rem solid var(--ssc-focus-ring);outline-offset:.2rem;border-radius:var(--solaris-card-radius, var(--solaris-radius-lg))}.solaris-selection-card{min-width:0;min-height:var(--ssc-min-height);position:relative}.solaris-selection-card__card{display:block;min-width:0;--solaris-card-padding-x: var(--ssc-pad-x);--solaris-card-padding-y: var(--ssc-pad-y)}.solaris-selection-card__indicator{position:absolute;inset-block-start:var(--ssc-indicator-top);inset-inline-end:var(--ssc-indicator-end);z-index:var(--solaris-z-raised);pointer-events:none;inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);display:inline-grid;place-items:center;line-height:0}.solaris-selection-card__indicator-control{inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);min-inline-size:var(--ssc-indicator-size);min-block-size:var(--ssc-indicator-size);aspect-ratio:1/1;display:inline-grid;place-items:center;box-sizing:border-box;line-height:0;border-radius:var(--solaris-indicator-radius);border:var(--solaris-indicator-border-width) solid var(--ssc-indicator-border);background:var(--ssc-indicator-bg);color:var(--ssc-indicator-fg);flex:0 0 auto;position:relative;transition:border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot,.solaris-selection-card__indicator-icon-dot{position:absolute;inset-block-start:50%;inset-inline-start:50%;display:block;flex:0 0 auto;aspect-ratio:1/1;box-sizing:border-box;opacity:0;transform-origin:center;border-radius:var(--solaris-indicator-radius);transform:translate(-50%,-50%) scale(.45);transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__indicator-dot{block-size:var(--ssc-indicator-dot-size);inline-size:var(--ssc-indicator-dot-size);background:var(--ssc-indicator-selected-border)}:host([data-appearance=solid]) .solaris-selection-card__indicator-dot,:host([data-appearance=gradient]) .solaris-selection-card__indicator-dot{background:var(--ssc-indicator-selected-bg)}.solaris-selection-card__indicator-icon-dot{background:var(--ssc-indicator-selected-fg);block-size:var(--ssc-indicator-icon-dot-size);inline-size:var(--ssc-indicator-icon-dot-size)}.solaris-selection-card__indicator-check{display:block;flex:0 0 auto;line-height:1;font-size:var(--ssc-indicator-check-size);font-weight:700;-webkit-text-stroke:var(--ssc-indicator-check-weight) currentColor;opacity:0;transform:scale(.45);transform-origin:center;transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card__slot{display:contents}:host([data-indicator=radio]) .solaris-selection-card__indicator-control,:host([data-indicator=icon]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-full)}:host([data-indicator=checkbox]) .solaris-selection-card__indicator-control{border-radius:var(--solaris-radius-sm)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-control{border-color:var(--ssc-indicator-selected-border)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card__indicator-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-control{color:var(--ssc-indicator-selected-fg);background:var(--ssc-indicator-selected-bg);border-color:var(--ssc-indicator-selected-border);box-shadow:inset 0 0 0 .1rem color-mix(in srgb,var(--ssc-indicator-selected-fg) 18%,transparent)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card__indicator-check{opacity:1;transform:scale(1)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-control{background:var(--ssc-indicator-selected-bg);border-color:var(--ssc-indicator-selected-border)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card__indicator-icon-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-disabled=true]) .solaris-selection-card__indicator-control{opacity:.55}:host([data-orientation=compact]){--ssc-min-height: 8.8rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--solaris-space-2))}:host([data-appearance=outline]){--ssc-indicator-border: var(--solaris-color-border);--ssc-indicator-bg: transparent}:host([data-appearance=soft]){--ssc-indicator-border: color-mix( in srgb, var(--ssc-accent) 24%, var(--solaris-color-border) );--ssc-indicator-bg: color-mix( in srgb, var(--ssc-accent) 4%, transparent )}:host([data-appearance=solid]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-primary-contrast) 46%, transparent );--ssc-indicator-bg: color-mix( in srgb, var(--solaris-color-primary-contrast) 8%, transparent );--ssc-indicator-selected-bg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-border: var(--solaris-color-primary-contrast);--ssc-indicator-selected-fg: var(--ssc-accent)}:host([data-appearance=elevated]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-border) 72%, transparent );--ssc-indicator-bg: var(--solaris-color-surface)}:host([data-appearance=ghost]){--ssc-indicator-border: color-mix( in srgb, var(--ssc-accent) 22%, var(--solaris-color-border) );--ssc-indicator-bg: transparent}:host([data-appearance=glass]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-surface) 34%, var(--solaris-color-border) );--ssc-indicator-bg: color-mix( in srgb, var(--ssc-accent) 10%, transparent )}:host([data-appearance=gradient]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-primary-contrast) 42%, transparent );--ssc-indicator-bg: color-mix( in srgb, var(--solaris-color-primary-contrast) 8%, transparent );--ssc-indicator-selected-bg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-border: var(--solaris-color-primary-contrast);--ssc-indicator-selected-fg: var(--ssc-accent)}.solaris-selection-card__floating-badge{position:absolute;inset-block-start:calc(var(--ssc-indicator-top) + var(--ssc-indicator-size) / 2);inset-inline-end:calc(var(--ssc-indicator-end) + var(--ssc-indicator-size) + var(--ssc-badge-gap));transform:translateY(-50%);z-index:var(--solaris-z-raised);pointer-events:none;max-inline-size:var(--ssc-badge-max-inline-size);min-inline-size:0;line-height:0;align-items:center;display:inline-flex;justify-content:flex-end;--solaris-badge-min-height-sm: 1.8rem;--solaris-badge-min-height-md: 1.8rem;--solaris-badge-min-height-lg: 2rem;--solaris-badge-padding-block-sm: .1rem;--solaris-badge-padding-inline-sm: .5rem;--solaris-badge-padding-block-md: .1rem;--solaris-badge-padding-inline-md: .6rem;--solaris-badge-padding-block-lg: .15rem;--solaris-badge-padding-inline-lg: .7rem;--solaris-badge-line-height-override: var(--solaris-lh-tight)}.solaris-selection-card__floating-badge:not(:has([solaris-card-badge])){display:none}\n"] }]
|
|
6627
|
+
}, template: "<div class=\"solaris-selection-card\">\n @if (resolvedIndicator() !== 'none') {\n <span class=\"solaris-selection-card-indicator\" aria-hidden=\"true\">\n <span class=\"solaris-selection-card-indicator-control\">\n @switch (resolvedIndicator()) {\n @case ('radio') {\n <span class=\"solaris-selection-card-indicator-dot\"></span>\n }\n\n @case ('checkbox') {\n <i class=\"ph ph-check solaris-selection-card-indicator-check\"></i>\n }\n\n @case ('icon') {\n <span class=\"solaris-selection-card-indicator-icon-dot\"></span>\n }\n }\n </span>\n </span>\n }\n\n <span class=\"solaris-selection-card-floating-badge\">\n <ng-content select=\"[solaris-card-badge]\"></ng-content>\n </span>\n\n <solaris-card class=\"solaris-selection-card-card\" [orientation]=\"orientation()\" [size]=\"size()\" [radius]=\"radius()\"\n [appearance]=\"appearance()\" [color]=\"color()\" [selected]=\"selected()\" [invalid]=\"invalid()\" [interactive]=\"!disabled()\"\n [disabled]=\"disabled()\" [minHeight]=\"minHeight()\" [reservedInlineEnd]=\"reservedInlineEnd()\"\n [background]=\"background()\" [borderColor]=\"borderColor()\" [shadow]=\"shadow()\">\n <div class=\"solaris-selection-card-slot\" ngProjectAs=\"solaris-card-media\">\n <ng-content select=\"solaris-card-media\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card-slot\" ngProjectAs=\"[solaris-card-media]\">\n <ng-content select=\"[solaris-card-media]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card-slot\" ngProjectAs=\"solaris-card-leading\">\n <ng-content select=\"solaris-card-leading\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card-slot\" ngProjectAs=\"[solaris-card-leading]\">\n <ng-content select=\"[solaris-card-leading]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card-slot\" ngProjectAs=\"[solaris-card-eyebrow]\">\n <ng-content select=\"[solaris-card-eyebrow]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card-slot\" ngProjectAs=\"[solaris-card-title]\">\n <ng-content select=\"[solaris-card-title]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card-slot\" ngProjectAs=\"[solaris-card-description]\">\n <ng-content select=\"[solaris-card-description]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card-slot\" ngProjectAs=\"[solaris-card-meta]\">\n <ng-content select=\"[solaris-card-meta]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card-slot\" ngProjectAs=\"[solaris-card-footer]\">\n <ng-content select=\"[solaris-card-footer]\"></ng-content>\n </div>\n\n <div class=\"solaris-selection-card-slot\" ngProjectAs=\"[solaris-card-actions]\" data-card-actions=\"true\">\n <ng-content select=\"[solaris-card-actions]\"></ng-content>\n </div>\n </solaris-card>\n</div>\n\r\n", styles: [":host{display:block;min-width:0;position:relative;outline:none;cursor:pointer;--ssc-accent: var(--solaris-color-primary);--ssc-focus-ring: color-mix(in srgb, var(--ssc-accent) 26%, transparent);--ssc-indicator-size: var(--solaris-indicator-size-md);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-md);--ssc-indicator-check-size: var(--solaris-indicator-check-size-md);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-md);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-md);--ssc-indicator-gap: var(--solaris-space-3);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-indicator-top: var(--ssc-pad-y);--ssc-indicator-end: var(--ssc-pad-x);--ssc-min-height: 12rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--ssc-indicator-gap));--ssc-indicator-border: var(--solaris-color-border);--ssc-indicator-bg: transparent;--ssc-indicator-fg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-bg: var(--ssc-accent);--ssc-indicator-selected-border: var(--ssc-accent);--ssc-indicator-selected-fg: var(--solaris-color-primary-contrast);--ssc-badge-gap: var(--solaris-space-2);--ssc-badge-max-inline-size: 12rem;--ssc-badge-reserved-inline-size: 0rem}:host(:has([solaris-card-badge])){--ssc-badge-reserved-inline-size: 8rem;--ssc-reserved-inline-end: calc( var(--ssc-indicator-size) + var(--ssc-indicator-gap) + var(--ssc-badge-reserved-inline-size) + var(--ssc-badge-gap) )}:host([data-size=sm]){--ssc-indicator-size: var(--solaris-indicator-size-sm);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-sm);--ssc-indicator-check-size: var(--solaris-indicator-check-size-sm);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-sm);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-sm);--ssc-pad-x: var(--solaris-space-5);--ssc-pad-y: var(--solaris-space-4);--ssc-min-height: 10rem}:host([data-size=md]){--ssc-indicator-size: var(--solaris-indicator-size-md);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-md);--ssc-indicator-check-size: var(--solaris-indicator-check-size-md);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-md);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-md);--ssc-pad-x: var(--solaris-space-6);--ssc-pad-y: var(--solaris-space-5);--ssc-min-height: 12rem}:host([data-size=lg]){--ssc-indicator-size: var(--solaris-indicator-size-lg);--ssc-indicator-dot-size: var(--solaris-indicator-dot-size-lg);--ssc-indicator-check-size: var(--solaris-indicator-check-size-lg);--ssc-indicator-check-weight: var(--solaris-indicator-check-stroke-lg);--ssc-indicator-icon-dot-size: var(--solaris-indicator-icon-dot-size-lg);--ssc-min-height: 14rem;--ssc-pad-x: var(--solaris-space-7);--ssc-pad-y: var(--solaris-space-6)}:host([data-color=primary]){--ssc-accent: var(--solaris-color-primary)}:host([data-color=success]){--ssc-accent: var(--solaris-color-success)}:host([data-color=warning]){--ssc-accent: var(--solaris-color-warning)}:host([data-color=error]){--ssc-accent: var(--solaris-color-error)}:host([data-color=info]){--ssc-accent: var(--solaris-color-info)}:host([data-color=custom]){--ssc-accent: var(--solaris-selection-card-custom, var(--solaris-color-primary))}:host([data-disabled=true]){cursor:not-allowed}:host(:focus-visible){outline:.2rem solid var(--ssc-focus-ring);outline-offset:.2rem;border-radius:var(--solaris-card-radius, var(--solaris-radius-lg))}.solaris-selection-card{min-width:0;min-height:var(--ssc-min-height);position:relative}.solaris-selection-card-card{display:block;min-width:0;--solaris-card-padding-x: var(--ssc-pad-x);--solaris-card-padding-y: var(--ssc-pad-y)}.solaris-selection-card-indicator{position:absolute;inset-block-start:var(--ssc-indicator-top);inset-inline-end:var(--ssc-indicator-end);z-index:var(--solaris-z-raised);pointer-events:none;inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);display:inline-grid;place-items:center;line-height:0}.solaris-selection-card-indicator-control{inline-size:var(--ssc-indicator-size);block-size:var(--ssc-indicator-size);min-inline-size:var(--ssc-indicator-size);min-block-size:var(--ssc-indicator-size);aspect-ratio:1/1;display:inline-grid;place-items:center;box-sizing:border-box;line-height:0;border-radius:var(--solaris-indicator-radius);border:var(--solaris-indicator-border-width) solid var(--ssc-indicator-border);background:var(--ssc-indicator-bg);color:var(--ssc-indicator-fg);flex:0 0 auto;position:relative;transition:border-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-selection-card-indicator-dot,.solaris-selection-card-indicator-icon-dot{position:absolute;inset-block-start:50%;inset-inline-start:50%;display:block;flex:0 0 auto;aspect-ratio:1/1;box-sizing:border-box;opacity:0;transform-origin:center;border-radius:var(--solaris-indicator-radius);transform:translate(-50%,-50%) scale(.45);transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card-indicator-dot{block-size:var(--ssc-indicator-dot-size);inline-size:var(--ssc-indicator-dot-size);background:var(--ssc-indicator-selected-border)}:host([data-appearance=solid]) .solaris-selection-card-indicator-dot,:host([data-appearance=gradient]) .solaris-selection-card-indicator-dot{background:var(--ssc-indicator-selected-bg)}.solaris-selection-card-indicator-icon-dot{background:var(--ssc-indicator-selected-fg);block-size:var(--ssc-indicator-icon-dot-size);inline-size:var(--ssc-indicator-icon-dot-size)}.solaris-selection-card-indicator-check{display:block;flex:0 0 auto;line-height:1;font-size:var(--ssc-indicator-check-size);font-weight:700;-webkit-text-stroke:var(--ssc-indicator-check-weight) currentColor;opacity:0;transform:scale(.45);transform-origin:center;transition:opacity var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard),color var(--solaris-motion-duration-base) var(--solaris-motion-ease-standard)}.solaris-selection-card-slot{display:contents}:host([data-indicator=radio]) .solaris-selection-card-indicator-control,:host([data-indicator=icon]) .solaris-selection-card-indicator-control{border-radius:var(--solaris-radius-full)}:host([data-indicator=checkbox]) .solaris-selection-card-indicator-control{border-radius:var(--solaris-radius-sm)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card-indicator-control{border-color:var(--ssc-indicator-selected-border)}:host([data-selected=true][data-indicator=radio]) .solaris-selection-card-indicator-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card-indicator-control{color:var(--ssc-indicator-selected-fg);background:var(--ssc-indicator-selected-bg);border-color:var(--ssc-indicator-selected-border);box-shadow:inset 0 0 0 .1rem color-mix(in srgb,var(--ssc-indicator-selected-fg) 18%,transparent)}:host([data-selected=true][data-indicator=checkbox]) .solaris-selection-card-indicator-check{opacity:1;transform:scale(1)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card-indicator-control{background:var(--ssc-indicator-selected-bg);border-color:var(--ssc-indicator-selected-border)}:host([data-selected=true][data-indicator=icon]) .solaris-selection-card-indicator-icon-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}:host([data-disabled=true]) .solaris-selection-card-indicator-control{opacity:.55}:host([data-orientation=compact]){--ssc-min-height: 8.8rem;--ssc-reserved-inline-end: calc(var(--ssc-indicator-size) + var(--solaris-space-2))}:host([data-appearance=outline]){--ssc-indicator-border: var(--solaris-color-border);--ssc-indicator-bg: transparent}:host([data-appearance=soft]){--ssc-indicator-border: color-mix( in srgb, var(--ssc-accent) 24%, var(--solaris-color-border) );--ssc-indicator-bg: color-mix( in srgb, var(--ssc-accent) 4%, transparent )}:host([data-appearance=solid]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-primary-contrast) 46%, transparent );--ssc-indicator-bg: color-mix( in srgb, var(--solaris-color-primary-contrast) 8%, transparent );--ssc-indicator-selected-bg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-border: var(--solaris-color-primary-contrast);--ssc-indicator-selected-fg: var(--ssc-accent)}:host([data-appearance=elevated]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-border) 72%, transparent );--ssc-indicator-bg: var(--solaris-color-surface)}:host([data-appearance=ghost]){--ssc-indicator-border: color-mix( in srgb, var(--ssc-accent) 22%, var(--solaris-color-border) );--ssc-indicator-bg: transparent}:host([data-appearance=glass]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-surface) 34%, var(--solaris-color-border) );--ssc-indicator-bg: color-mix( in srgb, var(--ssc-accent) 10%, transparent )}:host([data-appearance=gradient]){--ssc-indicator-border: color-mix( in srgb, var(--solaris-color-primary-contrast) 42%, transparent );--ssc-indicator-bg: color-mix( in srgb, var(--solaris-color-primary-contrast) 8%, transparent );--ssc-indicator-selected-bg: var(--solaris-color-primary-contrast);--ssc-indicator-selected-border: var(--solaris-color-primary-contrast);--ssc-indicator-selected-fg: var(--ssc-accent)}.solaris-selection-card-floating-badge{position:absolute;inset-block-start:calc(var(--ssc-indicator-top) + var(--ssc-indicator-size) / 2);inset-inline-end:calc(var(--ssc-indicator-end) + var(--ssc-indicator-size) + var(--ssc-badge-gap));transform:translateY(-50%);z-index:var(--solaris-z-raised);pointer-events:none;max-inline-size:var(--ssc-badge-max-inline-size);min-inline-size:0;line-height:0;align-items:center;display:inline-flex;justify-content:flex-end;--solaris-badge-min-height-sm: 1.8rem;--solaris-badge-min-height-md: 1.8rem;--solaris-badge-min-height-lg: 2rem;--solaris-badge-padding-block-sm: .1rem;--solaris-badge-padding-inline-sm: .5rem;--solaris-badge-padding-block-md: .1rem;--solaris-badge-padding-inline-md: .6rem;--solaris-badge-padding-block-lg: .15rem;--solaris-badge-padding-inline-lg: .7rem;--solaris-badge-line-height-override: var(--solaris-lh-tight)}.solaris-selection-card-floating-badge:not(:has([solaris-card-badge])){display:none}\n"] }]
|
|
6627
6628
|
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], selectionIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionIndicator", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }] } });
|
|
6628
6629
|
function inferStandaloneMode(indicator) {
|
|
6629
6630
|
switch (indicator) {
|
|
@@ -6697,13 +6698,13 @@ class SolarisCardMedia {
|
|
|
6697
6698
|
return !this.loading() && this.variant() === 'image' && !!this.normalizedSrc();
|
|
6698
6699
|
}, ...(ngDevMode ? [{ debugName: "showImage" }] : /* istanbul ignore next */ []));
|
|
6699
6700
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCardMedia, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6700
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisCardMedia, isStandalone: true, selector: "solaris-card-media", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, customRatio: { classPropertyName: "customRatio", publicName: "customRatio", isSignal: true, isRequired: false, transformFunction: null }, fit: { classPropertyName: "fit", publicName: "fit", isSignal: true, isRequired: false, transformFunction: null }, objectPosition: { classPropertyName: "objectPosition", publicName: "objectPosition", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, foreground: { classPropertyName: "foreground", publicName: "foreground", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, overlayInset: { classPropertyName: "overlayInset", publicName: "overlayInset", isSignal: true, isRequired: false, transformFunction: null }, overlayPosition: { classPropertyName: "overlayPosition", publicName: "overlayPosition", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "solaris-card-media-host" }, ngImport: i0, template: "<div\n class=\"solaris-card-media\"\n [class.is-loading]=\"loading()\"\n [class.is-disabled]=\"disabled()\"\n [attr.data-variant]=\"variant()\"\n [attr.data-appearance]=\"appearance()\"\n [attr.data-color]=\"color()\"\n [attr.data-ratio]=\"ratio()\"\n [attr.data-align]=\"align()\"\n [attr.data-radius]=\"radius()\"\n [attr.data-padding]=\"padding()\"\n [attr.data-overlay-position]=\"overlayPosition()\"\n [style.--solaris-card-media-fit]=\"fit()\"\n [style.--solaris-card-media-object-position]=\"objectPosition()\"\n [style.--solaris-card-media-custom-ratio]=\"resolvedCustomRatio() || null\"\n [style.--solaris-card-media-bg-override]=\"normalizedBackground() || null\"\n [style.--solaris-card-media-fg-override]=\"normalizedForeground() || null\"\n [style.--solaris-card-media-border-override]=\"normalizedBorderColor() || null\"\n [style.--solaris-card-media-shadow-override]=\"normalizedShadow() || null\"\n [style.--solaris-card-media-height]=\"normalizedHeight() || null\"\n [style.--solaris-card-media-min-height-override]=\"normalizedMinHeight() || null\"\n [style.--solaris-card-media-max-height]=\"normalizedMaxHeight() || null\"\n [style.--solaris-card-media-overlay-inset]=\"normalizedOverlayInset() || null\"\n>\n <div class=\"solaris-card-
|
|
6701
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SolarisCardMedia, isStandalone: true, selector: "solaris-card-media", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, customRatio: { classPropertyName: "customRatio", publicName: "customRatio", isSignal: true, isRequired: false, transformFunction: null }, fit: { classPropertyName: "fit", publicName: "fit", isSignal: true, isRequired: false, transformFunction: null }, objectPosition: { classPropertyName: "objectPosition", publicName: "objectPosition", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, foreground: { classPropertyName: "foreground", publicName: "foreground", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, overlayInset: { classPropertyName: "overlayInset", publicName: "overlayInset", isSignal: true, isRequired: false, transformFunction: null }, overlayPosition: { classPropertyName: "overlayPosition", publicName: "overlayPosition", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "solaris-card-media-host" }, ngImport: i0, template: "<div\n class=\"solaris-card-media\"\n [class.is-loading]=\"loading()\"\n [class.is-disabled]=\"disabled()\"\n [attr.data-variant]=\"variant()\"\n [attr.data-appearance]=\"appearance()\"\n [attr.data-color]=\"color()\"\n [attr.data-ratio]=\"ratio()\"\n [attr.data-align]=\"align()\"\n [attr.data-radius]=\"radius()\"\n [attr.data-padding]=\"padding()\"\n [attr.data-overlay-position]=\"overlayPosition()\"\n [style.--solaris-card-media-fit]=\"fit()\"\n [style.--solaris-card-media-object-position]=\"objectPosition()\"\n [style.--solaris-card-media-custom-ratio]=\"resolvedCustomRatio() || null\"\n [style.--solaris-card-media-bg-override]=\"normalizedBackground() || null\"\n [style.--solaris-card-media-fg-override]=\"normalizedForeground() || null\"\n [style.--solaris-card-media-border-override]=\"normalizedBorderColor() || null\"\n [style.--solaris-card-media-shadow-override]=\"normalizedShadow() || null\"\n [style.--solaris-card-media-height]=\"normalizedHeight() || null\"\n [style.--solaris-card-media-min-height-override]=\"normalizedMinHeight() || null\"\n [style.--solaris-card-media-max-height]=\"normalizedMaxHeight() || null\"\n [style.--solaris-card-media-overlay-inset]=\"normalizedOverlayInset() || null\"\n>\n <div class=\"solaris-card-media-surface\">\n @if (loading()) {\n <solaris-skeleton class=\"solaris-card-media-skeleton\" radius=\"inherit\"></solaris-skeleton>\n } @else if (showImage()) {\n <img\n class=\"solaris-card-media-image\"\n [src]=\"normalizedSrc()\"\n [alt]=\"normalizedAlt()\"\n decoding=\"async\"\n />\n } @else {\n <div class=\"solaris-card-media-content\">\n <ng-content></ng-content>\n </div>\n }\n\n <div class=\"solaris-card-media-overlay\">\n <ng-content select=\"[solaris-card-media-overlay]\"></ng-content>\n </div>\n </div>\n</div>\n\r\n", styles: [":host{display:block;min-inline-size:0;inline-size:100%}.solaris-card-media{--solaris-card-media-fg: var(--solaris-color-text);--solaris-card-media-bg: var(--solaris-color-surface-2);--solaris-card-media-border: color-mix(in srgb, var(--solaris-color-border) 78%, transparent);--solaris-card-media-tone: var(--solaris-color-surface-2);--solaris-card-media-tone-strong: var(--solaris-color-text);--solaris-card-media-tone-contrast: var(--solaris-color-text);--solaris-card-media-tone-border: var(--solaris-color-border);--solaris-card-media-tone-gradient: linear-gradient( 135deg, var(--solaris-color-surface) 0%, var(--solaris-color-surface-2) 100% );--solaris-card-media-fit: cover;--solaris-card-media-shadow: none;--solaris-card-media-radius: inherit;--solaris-card-media-object-position: center;--solaris-card-media-min-height: 6rem;--solaris-card-media-padding: var(--solaris-space-4);--solaris-card-media-overlay-inset: var(--solaris-space-3);display:block;position:relative;min-inline-size:0}.solaris-card-media-surface{display:grid;overflow:hidden;position:relative;min-inline-size:0;inline-size:100%;place-items:center;block-size:var(--solaris-card-media-height, auto);max-block-size:var(--solaris-card-media-max-height, none);min-block-size:var(--solaris-card-media-min-height-override, var(--solaris-card-media-min-height));border-radius:var(--solaris-card-media-radius);color:var(--solaris-card-media-fg-override, var(--solaris-card-media-fg));background:var(--solaris-card-media-bg-override, var(--solaris-card-media-bg));border:1px solid var(--solaris-card-media-border-override, var(--solaris-card-media-border));box-shadow:var(--solaris-card-media-shadow-override, var(--solaris-card-media-shadow))}.solaris-card-media[data-ratio=auto] .solaris-card-media-surface{aspect-ratio:auto}.solaris-card-media[data-ratio=none] .solaris-card-media-surface{aspect-ratio:auto;min-block-size:var(--solaris-card-media-min-height-override, 0)}.solaris-card-media[data-ratio=\"1:1\"] .solaris-card-media-surface{aspect-ratio:1/1}.solaris-card-media[data-ratio=\"3:2\"] .solaris-card-media-surface{aspect-ratio:3/2}.solaris-card-media[data-ratio=\"4:3\"] .solaris-card-media-surface{aspect-ratio:4/3}.solaris-card-media[data-ratio=\"16:9\"] .solaris-card-media-surface{aspect-ratio:16/9}.solaris-card-media[data-ratio=\"21:9\"] .solaris-card-media-surface{aspect-ratio:21/9}.solaris-card-media[data-ratio=\"9:16\"] .solaris-card-media-surface{aspect-ratio:9/16}.solaris-card-media[data-ratio=\"3:4\"] .solaris-card-media-surface{aspect-ratio:3/4}.solaris-card-media[data-ratio=\"2:3\"] .solaris-card-media-surface{aspect-ratio:2/3}.solaris-card-media[data-ratio=custom] .solaris-card-media-surface{aspect-ratio:var(--solaris-card-media-custom-ratio, auto)}.solaris-card-media-skeleton{inline-size:100%;block-size:100%;min-block-size:inherit;display:block}.solaris-card-media-overlay{position:absolute;z-index:var(--solaris-z-raised);display:none;align-items:center;justify-content:center;gap:var(--solaris-space-2);pointer-events:none}.solaris-card-media-overlay:has([solaris-card-media-overlay]){display:inline-flex;pointer-events:auto}.solaris-card-media-overlay:empty{display:none}.solaris-card-media[data-overlay-position=top-start] .solaris-card-media-overlay{inset-block-start:var(--solaris-card-media-overlay-inset);inset-inline-start:var(--solaris-card-media-overlay-inset)}.solaris-card-media[data-overlay-position=top-center] .solaris-card-media-overlay{inset-block-start:var(--solaris-card-media-overlay-inset);inset-inline-start:50%;transform:translate(-50%)}.solaris-card-media[data-overlay-position=top-end] .solaris-card-media-overlay{inset-block-start:var(--solaris-card-media-overlay-inset);inset-inline-end:var(--solaris-card-media-overlay-inset)}.solaris-card-media[data-overlay-position=center] .solaris-card-media-overlay{inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.solaris-card-media[data-overlay-position=bottom-start] .solaris-card-media-overlay{inset-block-end:var(--solaris-card-media-overlay-inset);inset-inline-start:var(--solaris-card-media-overlay-inset)}.solaris-card-media[data-overlay-position=bottom-center] .solaris-card-media-overlay{inset-block-end:var(--solaris-card-media-overlay-inset);inset-inline-start:50%;transform:translate(-50%)}.solaris-card-media[data-overlay-position=bottom-end] .solaris-card-media-overlay{inset-block-end:var(--solaris-card-media-overlay-inset);inset-inline-end:var(--solaris-card-media-overlay-inset)}\n"], dependencies: [{ kind: "component", type: SolarisSkeleton, selector: "solaris-skeleton", inputs: ["shape", "width", "height", "radius", "animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6701
6702
|
}
|
|
6702
6703
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCardMedia, decorators: [{
|
|
6703
6704
|
type: Component,
|
|
6704
6705
|
args: [{ selector: 'solaris-card-media', standalone: true, imports: [SolarisSkeleton], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
6705
6706
|
class: 'solaris-card-media-host',
|
|
6706
|
-
}, template: "<div\n class=\"solaris-card-media\"\n [class.is-loading]=\"loading()\"\n [class.is-disabled]=\"disabled()\"\n [attr.data-variant]=\"variant()\"\n [attr.data-appearance]=\"appearance()\"\n [attr.data-color]=\"color()\"\n [attr.data-ratio]=\"ratio()\"\n [attr.data-align]=\"align()\"\n [attr.data-radius]=\"radius()\"\n [attr.data-padding]=\"padding()\"\n [attr.data-overlay-position]=\"overlayPosition()\"\n [style.--solaris-card-media-fit]=\"fit()\"\n [style.--solaris-card-media-object-position]=\"objectPosition()\"\n [style.--solaris-card-media-custom-ratio]=\"resolvedCustomRatio() || null\"\n [style.--solaris-card-media-bg-override]=\"normalizedBackground() || null\"\n [style.--solaris-card-media-fg-override]=\"normalizedForeground() || null\"\n [style.--solaris-card-media-border-override]=\"normalizedBorderColor() || null\"\n [style.--solaris-card-media-shadow-override]=\"normalizedShadow() || null\"\n [style.--solaris-card-media-height]=\"normalizedHeight() || null\"\n [style.--solaris-card-media-min-height-override]=\"normalizedMinHeight() || null\"\n [style.--solaris-card-media-max-height]=\"normalizedMaxHeight() || null\"\n [style.--solaris-card-media-overlay-inset]=\"normalizedOverlayInset() || null\"\n>\n <div class=\"solaris-card-
|
|
6707
|
+
}, template: "<div\n class=\"solaris-card-media\"\n [class.is-loading]=\"loading()\"\n [class.is-disabled]=\"disabled()\"\n [attr.data-variant]=\"variant()\"\n [attr.data-appearance]=\"appearance()\"\n [attr.data-color]=\"color()\"\n [attr.data-ratio]=\"ratio()\"\n [attr.data-align]=\"align()\"\n [attr.data-radius]=\"radius()\"\n [attr.data-padding]=\"padding()\"\n [attr.data-overlay-position]=\"overlayPosition()\"\n [style.--solaris-card-media-fit]=\"fit()\"\n [style.--solaris-card-media-object-position]=\"objectPosition()\"\n [style.--solaris-card-media-custom-ratio]=\"resolvedCustomRatio() || null\"\n [style.--solaris-card-media-bg-override]=\"normalizedBackground() || null\"\n [style.--solaris-card-media-fg-override]=\"normalizedForeground() || null\"\n [style.--solaris-card-media-border-override]=\"normalizedBorderColor() || null\"\n [style.--solaris-card-media-shadow-override]=\"normalizedShadow() || null\"\n [style.--solaris-card-media-height]=\"normalizedHeight() || null\"\n [style.--solaris-card-media-min-height-override]=\"normalizedMinHeight() || null\"\n [style.--solaris-card-media-max-height]=\"normalizedMaxHeight() || null\"\n [style.--solaris-card-media-overlay-inset]=\"normalizedOverlayInset() || null\"\n>\n <div class=\"solaris-card-media-surface\">\n @if (loading()) {\n <solaris-skeleton class=\"solaris-card-media-skeleton\" radius=\"inherit\"></solaris-skeleton>\n } @else if (showImage()) {\n <img\n class=\"solaris-card-media-image\"\n [src]=\"normalizedSrc()\"\n [alt]=\"normalizedAlt()\"\n decoding=\"async\"\n />\n } @else {\n <div class=\"solaris-card-media-content\">\n <ng-content></ng-content>\n </div>\n }\n\n <div class=\"solaris-card-media-overlay\">\n <ng-content select=\"[solaris-card-media-overlay]\"></ng-content>\n </div>\n </div>\n</div>\n\r\n", styles: [":host{display:block;min-inline-size:0;inline-size:100%}.solaris-card-media{--solaris-card-media-fg: var(--solaris-color-text);--solaris-card-media-bg: var(--solaris-color-surface-2);--solaris-card-media-border: color-mix(in srgb, var(--solaris-color-border) 78%, transparent);--solaris-card-media-tone: var(--solaris-color-surface-2);--solaris-card-media-tone-strong: var(--solaris-color-text);--solaris-card-media-tone-contrast: var(--solaris-color-text);--solaris-card-media-tone-border: var(--solaris-color-border);--solaris-card-media-tone-gradient: linear-gradient( 135deg, var(--solaris-color-surface) 0%, var(--solaris-color-surface-2) 100% );--solaris-card-media-fit: cover;--solaris-card-media-shadow: none;--solaris-card-media-radius: inherit;--solaris-card-media-object-position: center;--solaris-card-media-min-height: 6rem;--solaris-card-media-padding: var(--solaris-space-4);--solaris-card-media-overlay-inset: var(--solaris-space-3);display:block;position:relative;min-inline-size:0}.solaris-card-media-surface{display:grid;overflow:hidden;position:relative;min-inline-size:0;inline-size:100%;place-items:center;block-size:var(--solaris-card-media-height, auto);max-block-size:var(--solaris-card-media-max-height, none);min-block-size:var(--solaris-card-media-min-height-override, var(--solaris-card-media-min-height));border-radius:var(--solaris-card-media-radius);color:var(--solaris-card-media-fg-override, var(--solaris-card-media-fg));background:var(--solaris-card-media-bg-override, var(--solaris-card-media-bg));border:1px solid var(--solaris-card-media-border-override, var(--solaris-card-media-border));box-shadow:var(--solaris-card-media-shadow-override, var(--solaris-card-media-shadow))}.solaris-card-media[data-ratio=auto] .solaris-card-media-surface{aspect-ratio:auto}.solaris-card-media[data-ratio=none] .solaris-card-media-surface{aspect-ratio:auto;min-block-size:var(--solaris-card-media-min-height-override, 0)}.solaris-card-media[data-ratio=\"1:1\"] .solaris-card-media-surface{aspect-ratio:1/1}.solaris-card-media[data-ratio=\"3:2\"] .solaris-card-media-surface{aspect-ratio:3/2}.solaris-card-media[data-ratio=\"4:3\"] .solaris-card-media-surface{aspect-ratio:4/3}.solaris-card-media[data-ratio=\"16:9\"] .solaris-card-media-surface{aspect-ratio:16/9}.solaris-card-media[data-ratio=\"21:9\"] .solaris-card-media-surface{aspect-ratio:21/9}.solaris-card-media[data-ratio=\"9:16\"] .solaris-card-media-surface{aspect-ratio:9/16}.solaris-card-media[data-ratio=\"3:4\"] .solaris-card-media-surface{aspect-ratio:3/4}.solaris-card-media[data-ratio=\"2:3\"] .solaris-card-media-surface{aspect-ratio:2/3}.solaris-card-media[data-ratio=custom] .solaris-card-media-surface{aspect-ratio:var(--solaris-card-media-custom-ratio, auto)}.solaris-card-media-skeleton{inline-size:100%;block-size:100%;min-block-size:inherit;display:block}.solaris-card-media-overlay{position:absolute;z-index:var(--solaris-z-raised);display:none;align-items:center;justify-content:center;gap:var(--solaris-space-2);pointer-events:none}.solaris-card-media-overlay:has([solaris-card-media-overlay]){display:inline-flex;pointer-events:auto}.solaris-card-media-overlay:empty{display:none}.solaris-card-media[data-overlay-position=top-start] .solaris-card-media-overlay{inset-block-start:var(--solaris-card-media-overlay-inset);inset-inline-start:var(--solaris-card-media-overlay-inset)}.solaris-card-media[data-overlay-position=top-center] .solaris-card-media-overlay{inset-block-start:var(--solaris-card-media-overlay-inset);inset-inline-start:50%;transform:translate(-50%)}.solaris-card-media[data-overlay-position=top-end] .solaris-card-media-overlay{inset-block-start:var(--solaris-card-media-overlay-inset);inset-inline-end:var(--solaris-card-media-overlay-inset)}.solaris-card-media[data-overlay-position=center] .solaris-card-media-overlay{inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.solaris-card-media[data-overlay-position=bottom-start] .solaris-card-media-overlay{inset-block-end:var(--solaris-card-media-overlay-inset);inset-inline-start:var(--solaris-card-media-overlay-inset)}.solaris-card-media[data-overlay-position=bottom-center] .solaris-card-media-overlay{inset-block-end:var(--solaris-card-media-overlay-inset);inset-inline-start:50%;transform:translate(-50%)}.solaris-card-media[data-overlay-position=bottom-end] .solaris-card-media-overlay{inset-block-end:var(--solaris-card-media-overlay-inset);inset-inline-end:var(--solaris-card-media-overlay-inset)}\n"] }]
|
|
6707
6708
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], customRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "customRatio", required: false }] }], fit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fit", required: false }] }], objectPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectPosition", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], foreground: [{ type: i0.Input, args: [{ isSignal: true, alias: "foreground", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], overlayInset: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayInset", required: false }] }], overlayPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayPosition", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
6708
6709
|
function normalizeCardMediaValue(value) {
|
|
6709
6710
|
return String(value ?? '').trim();
|
|
@@ -6714,11 +6715,11 @@ class FieldErrorComponent {
|
|
|
6714
6715
|
textKey;
|
|
6715
6716
|
textParams;
|
|
6716
6717
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: FieldErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6717
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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\">\n <span class=\"solaris-field-
|
|
6718
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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\">\n <span class=\"solaris-field-error-text\">\n @if (textKey) {\n {{ textKey | translate: textParams }}\n } @else {\n {{ text }}\n }\n </span>\n</div>\n\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 });
|
|
6718
6719
|
}
|
|
6719
6720
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: FieldErrorComponent, decorators: [{
|
|
6720
6721
|
type: Component,
|
|
6721
|
-
args: [{ selector: 'solaris-field-error', standalone: true, imports: [SolarisTranslationPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-field-error\" role=\"alert\" aria-live=\"polite\">\n <span class=\"solaris-field-
|
|
6722
|
+
args: [{ selector: 'solaris-field-error', standalone: true, imports: [SolarisTranslationPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-field-error\" role=\"alert\" aria-live=\"polite\">\n <span class=\"solaris-field-error-text\">\n @if (textKey) {\n {{ textKey | translate: textParams }}\n } @else {\n {{ text }}\n }\n </span>\n</div>\n\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"] }]
|
|
6722
6723
|
}], propDecorators: { text: [{
|
|
6723
6724
|
type: Input
|
|
6724
6725
|
}], textKey: [{
|
|
@@ -7099,7 +7100,7 @@ class SolarisCardGroup {
|
|
|
7099
7100
|
provide: SOLARIS_CARD_GROUP,
|
|
7100
7101
|
useExisting: forwardRef(() => SolarisCardGroup),
|
|
7101
7102
|
},
|
|
7102
|
-
], queries: [{ propertyName: "cardsQuery", predicate: i0.forwardRef(() => SolarisSelectionCard), descendants: true }], ngImport: i0, template: "<div\n class=\"solaris-card-
|
|
7103
|
+
], queries: [{ propertyName: "cardsQuery", predicate: i0.forwardRef(() => SolarisSelectionCard), descendants: true }], ngImport: i0, template: "<div\n class=\"solaris-card-group-control\"\n [attr.role]=\"groupRole()\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.aria-invalid]=\"invalidComputed() ? 'true' : null\"\n>\n <ng-content></ng-content>\n</div>\n\n<div class=\"solaris-card-group-message\">\n @if (errorKeyComputed()) {\n <solaris-field-error\n [textKey]=\"errorKeyComputed()\"\n [textParams]=\"errorParamsComputed()\"\n ></solaris-field-error>\n } @else {\n <ng-content select=\"[solaris-card-group-message], [card-group-message]\"></ng-content>\n }\n</div>\n\r\n", styles: [":host.solaris-card-group-host{display:block;min-width:0;--solaris-card-group-gap: var(--solaris-space-4);--solaris-card-group-message-gap: var(--solaris-space-2)}.solaris-card-group-control{min-width:0;display:flex;gap:var(--solaris-card-group-gap)}.solaris-card-group-message{margin-top:var(--solaris-card-group-message-gap)}.solaris-card-group-message:empty{display:none}:host([data-layout=stack]) .solaris-card-group-control{flex-direction:column}:host([data-layout=stack][data-orientation=horizontal]) .solaris-card-group-control{flex-wrap:wrap;flex-direction:row;align-items:stretch}:host([data-layout=stack][data-orientation=compact]) .solaris-card-group-control{flex-direction:column}:host([data-layout=grid]) .solaris-card-group-control{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr))}:host([data-layout=grid][data-orientation=compact]) .solaris-card-group-control{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}:host([data-layout=grid][data-orientation=horizontal]) .solaris-card-group-control{grid-template-columns:repeat(auto-fit,minmax(min(100%,28rem),1fr))}\n"], dependencies: [{ kind: "component", type: FieldErrorComponent, selector: "solaris-field-error", inputs: ["text", "textKey", "textParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7103
7104
|
}
|
|
7104
7105
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCardGroup, decorators: [{
|
|
7105
7106
|
type: Component,
|
|
@@ -7127,7 +7128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
7127
7128
|
'[attr.data-readonly]': 'readonly() ? "true" : null',
|
|
7128
7129
|
'[attr.data-disabled]': 'disabled() ? "true" : null',
|
|
7129
7130
|
'[style.--solaris-card-group-gap]': 'resolvedGap()',
|
|
7130
|
-
}, template: "<div\n class=\"solaris-card-
|
|
7131
|
+
}, template: "<div\n class=\"solaris-card-group-control\"\n [attr.role]=\"groupRole()\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.aria-invalid]=\"invalidComputed() ? 'true' : null\"\n>\n <ng-content></ng-content>\n</div>\n\n<div class=\"solaris-card-group-message\">\n @if (errorKeyComputed()) {\n <solaris-field-error\n [textKey]=\"errorKeyComputed()\"\n [textParams]=\"errorParamsComputed()\"\n ></solaris-field-error>\n } @else {\n <ng-content select=\"[solaris-card-group-message], [card-group-message]\"></ng-content>\n }\n</div>\n\r\n", styles: [":host.solaris-card-group-host{display:block;min-width:0;--solaris-card-group-gap: var(--solaris-space-4);--solaris-card-group-message-gap: var(--solaris-space-2)}.solaris-card-group-control{min-width:0;display:flex;gap:var(--solaris-card-group-gap)}.solaris-card-group-message{margin-top:var(--solaris-card-group-message-gap)}.solaris-card-group-message:empty{display:none}:host([data-layout=stack]) .solaris-card-group-control{flex-direction:column}:host([data-layout=stack][data-orientation=horizontal]) .solaris-card-group-control{flex-wrap:wrap;flex-direction:row;align-items:stretch}:host([data-layout=stack][data-orientation=compact]) .solaris-card-group-control{flex-direction:column}:host([data-layout=grid]) .solaris-card-group-control{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr))}:host([data-layout=grid][data-orientation=compact]) .solaris-card-group-control{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}:host([data-layout=grid][data-orientation=horizontal]) .solaris-card-group-control{grid-template-columns:repeat(auto-fit,minmax(min(100%,28rem),1fr))}\n"] }]
|
|
7131
7132
|
}], ctorParameters: () => [], propDecorators: { disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], submitted: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitted", required: false }] }], selectOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOnFocus", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], minSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSelected", required: false }] }], maxSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelected", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], showErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrors", required: false }] }], requiredErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredErrorKey", required: false }] }], minSelectedErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSelectedErrorKey", required: false }] }], maxSelectedErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedErrorKey", required: false }] }], selectionRejected: [{ type: i0.Output, args: ["selectionRejected"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], cardsQuery: [{
|
|
7132
7133
|
type: ContentChildren,
|
|
7133
7134
|
args: [forwardRef(() => SolarisSelectionCard), { descendants: true }]
|
|
@@ -7135,20 +7136,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
7135
7136
|
|
|
7136
7137
|
class SolarisCardDescriptionDirective {
|
|
7137
7138
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCardDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
7138
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: SolarisCardDescriptionDirective, isStandalone: true, selector: "[solaris-card-description]", host: { classAttribute: "solaris-card-slot solaris-card-slot
|
|
7139
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: SolarisCardDescriptionDirective, isStandalone: true, selector: "[solaris-card-description]", host: { classAttribute: "solaris-card-slot solaris-card-slot-description" }, ngImport: i0 });
|
|
7139
7140
|
}
|
|
7140
7141
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCardDescriptionDirective, decorators: [{
|
|
7141
7142
|
type: Directive,
|
|
7142
7143
|
args: [{
|
|
7143
7144
|
selector: '[solaris-card-description]',
|
|
7144
7145
|
standalone: true,
|
|
7145
|
-
host: { class: 'solaris-card-slot solaris-card-slot
|
|
7146
|
+
host: { class: 'solaris-card-slot solaris-card-slot-description' },
|
|
7146
7147
|
}]
|
|
7147
7148
|
}] });
|
|
7148
7149
|
|
|
7149
7150
|
class SolarisCardActionsDirective {
|
|
7150
7151
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCardActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
7151
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: SolarisCardActionsDirective, isStandalone: true, selector: "[solaris-card-actions]", host: { attributes: { "data-card-actions": "true" }, classAttribute: "solaris-card-slot solaris-card-slot
|
|
7152
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: SolarisCardActionsDirective, isStandalone: true, selector: "[solaris-card-actions]", host: { attributes: { "data-card-actions": "true" }, classAttribute: "solaris-card-slot solaris-card-slot-actions" }, ngImport: i0 });
|
|
7152
7153
|
}
|
|
7153
7154
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCardActionsDirective, decorators: [{
|
|
7154
7155
|
type: Directive,
|
|
@@ -7156,7 +7157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
7156
7157
|
selector: '[solaris-card-actions]',
|
|
7157
7158
|
standalone: true,
|
|
7158
7159
|
host: {
|
|
7159
|
-
class: 'solaris-card-slot solaris-card-slot
|
|
7160
|
+
class: 'solaris-card-slot solaris-card-slot-actions',
|
|
7160
7161
|
'data-card-actions': 'true',
|
|
7161
7162
|
},
|
|
7162
7163
|
}]
|
|
@@ -7164,79 +7165,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
7164
7165
|
|
|
7165
7166
|
class SolarisCardEyebrowDirective {
|
|
7166
7167
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCardEyebrowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
7167
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: SolarisCardEyebrowDirective, isStandalone: true, selector: "[solaris-card-eyebrow]", host: { classAttribute: "solaris-card-slot solaris-card-slot
|
|
7168
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: SolarisCardEyebrowDirective, isStandalone: true, selector: "[solaris-card-eyebrow]", host: { classAttribute: "solaris-card-slot solaris-card-slot-eyebrow" }, ngImport: i0 });
|
|
7168
7169
|
}
|
|
7169
7170
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCardEyebrowDirective, decorators: [{
|
|
7170
7171
|
type: Directive,
|
|
7171
7172
|
args: [{
|
|
7172
7173
|
selector: '[solaris-card-eyebrow]',
|
|
7173
7174
|
standalone: true,
|
|
7174
|
-
host: { class: 'solaris-card-slot solaris-card-slot
|
|
7175
|
+
host: { class: 'solaris-card-slot solaris-card-slot-eyebrow' },
|
|
7175
7176
|
}]
|
|
7176
7177
|
}] });
|
|
7177
7178
|
|
|
7178
7179
|
class SolarisCardFooterDirective {
|
|
7179
7180
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCardFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
7180
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: SolarisCardFooterDirective, isStandalone: true, selector: "[solaris-card-footer]", host: { classAttribute: "solaris-card-slot solaris-card-slot
|
|
7181
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: SolarisCardFooterDirective, isStandalone: true, selector: "[solaris-card-footer]", host: { classAttribute: "solaris-card-slot solaris-card-slot-footer" }, ngImport: i0 });
|
|
7181
7182
|
}
|
|
7182
7183
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCardFooterDirective, decorators: [{
|
|
7183
7184
|
type: Directive,
|
|
7184
7185
|
args: [{
|
|
7185
7186
|
selector: '[solaris-card-footer]',
|
|
7186
7187
|
standalone: true,
|
|
7187
|
-
host: { class: 'solaris-card-slot solaris-card-slot
|
|
7188
|
+
host: { class: 'solaris-card-slot solaris-card-slot-footer' },
|
|
7188
7189
|
}]
|
|
7189
7190
|
}] });
|
|
7190
7191
|
|
|
7191
7192
|
class SolarisCardMediaDirective {
|
|
7192
7193
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCardMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
7193
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: SolarisCardMediaDirective, isStandalone: true, selector: "[solaris-card-media]", host: { classAttribute: "solaris-card-slot solaris-card-slot
|
|
7194
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: SolarisCardMediaDirective, isStandalone: true, selector: "[solaris-card-media]", host: { classAttribute: "solaris-card-slot solaris-card-slot-media" }, ngImport: i0 });
|
|
7194
7195
|
}
|
|
7195
7196
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCardMediaDirective, decorators: [{
|
|
7196
7197
|
type: Directive,
|
|
7197
7198
|
args: [{
|
|
7198
7199
|
selector: '[solaris-card-media]',
|
|
7199
7200
|
standalone: true,
|
|
7200
|
-
host: { class: 'solaris-card-slot solaris-card-slot
|
|
7201
|
+
host: { class: 'solaris-card-slot solaris-card-slot-media' },
|
|
7201
7202
|
}]
|
|
7202
7203
|
}] });
|
|
7203
7204
|
|
|
7204
7205
|
class SolarisCardMetaDirective {
|
|
7205
7206
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCardMetaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
7206
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: SolarisCardMetaDirective, isStandalone: true, selector: "[solaris-card-meta]", host: { classAttribute: "solaris-card-slot solaris-card-slot
|
|
7207
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: SolarisCardMetaDirective, isStandalone: true, selector: "[solaris-card-meta]", host: { classAttribute: "solaris-card-slot solaris-card-slot-meta" }, ngImport: i0 });
|
|
7207
7208
|
}
|
|
7208
7209
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCardMetaDirective, decorators: [{
|
|
7209
7210
|
type: Directive,
|
|
7210
7211
|
args: [{
|
|
7211
7212
|
selector: '[solaris-card-meta]',
|
|
7212
7213
|
standalone: true,
|
|
7213
|
-
host: { class: 'solaris-card-slot solaris-card-slot
|
|
7214
|
+
host: { class: 'solaris-card-slot solaris-card-slot-meta' },
|
|
7214
7215
|
}]
|
|
7215
7216
|
}] });
|
|
7216
7217
|
|
|
7217
7218
|
class SolarisCardBadgeDirective {
|
|
7218
7219
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCardBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
7219
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: SolarisCardBadgeDirective, isStandalone: true, selector: "[solaris-card-badge]", host: { classAttribute: "solaris-card-slot solaris-card-slot
|
|
7220
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: SolarisCardBadgeDirective, isStandalone: true, selector: "[solaris-card-badge]", host: { classAttribute: "solaris-card-slot solaris-card-slot-badge" }, ngImport: i0 });
|
|
7220
7221
|
}
|
|
7221
7222
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCardBadgeDirective, decorators: [{
|
|
7222
7223
|
type: Directive,
|
|
7223
7224
|
args: [{
|
|
7224
7225
|
selector: '[solaris-card-badge]',
|
|
7225
7226
|
standalone: true,
|
|
7226
|
-
host: { class: 'solaris-card-slot solaris-card-slot
|
|
7227
|
+
host: { class: 'solaris-card-slot solaris-card-slot-badge' },
|
|
7227
7228
|
}]
|
|
7228
7229
|
}] });
|
|
7229
7230
|
|
|
7230
7231
|
class SolarisCardTitleDirective {
|
|
7231
7232
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
7232
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: SolarisCardTitleDirective, isStandalone: true, selector: "[solaris-card-title]", host: { classAttribute: "solaris-card-slot solaris-card-slot
|
|
7233
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: SolarisCardTitleDirective, isStandalone: true, selector: "[solaris-card-title]", host: { classAttribute: "solaris-card-slot solaris-card-slot-title" }, ngImport: i0 });
|
|
7233
7234
|
}
|
|
7234
7235
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisCardTitleDirective, decorators: [{
|
|
7235
7236
|
type: Directive,
|
|
7236
7237
|
args: [{
|
|
7237
7238
|
selector: '[solaris-card-title]',
|
|
7238
7239
|
standalone: true,
|
|
7239
|
-
host: { class: 'solaris-card-slot solaris-card-slot
|
|
7240
|
+
host: { class: 'solaris-card-slot solaris-card-slot-title' },
|
|
7240
7241
|
}]
|
|
7241
7242
|
}] });
|
|
7242
7243
|
|
|
@@ -7801,7 +7802,7 @@ class SolarisPhoneInput {
|
|
|
7801
7802
|
useExisting: forwardRef(() => SolarisPhoneInput),
|
|
7802
7803
|
multi: true,
|
|
7803
7804
|
},
|
|
7804
|
-
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<input\n #input\n solaris-input\n type=\"tel\"\n [disabled]=\"_disabled\"\n (focus)=\"onFocus()\"\n (input)=\"onInput()\"\n (blur)=\"onBlur()\"\n data-bwignore=\"true\"\n/>\n", styles: [":host{min-width:0;width:100%;display:block}:host ::ng-deep .iti{width:100%}:host ::ng-deep .
|
|
7805
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<input\n #input\n solaris-input\n type=\"tel\"\n [disabled]=\"_disabled\"\n (focus)=\"onFocus()\"\n (input)=\"onInput()\"\n (blur)=\"onBlur()\"\n data-bwignore=\"true\"\n/>\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) 42.5%,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{padding:0;border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 42.5%,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}:host ::ng-deep .iti-selected-country-primary{padding:0 .5rem 0 .6rem}\n"], dependencies: [{ kind: "directive", type: InputTextDirective, selector: "input[solaris-input],textarea[solaris-input]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7805
7806
|
}
|
|
7806
7807
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisPhoneInput, decorators: [{
|
|
7807
7808
|
type: Component,
|
|
@@ -7816,7 +7817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
7816
7817
|
useExisting: forwardRef(() => SolarisPhoneInput),
|
|
7817
7818
|
multi: true,
|
|
7818
7819
|
},
|
|
7819
|
-
], imports: [InputTextDirective], template: "<input\n #input\n solaris-input\n type=\"tel\"\n [disabled]=\"_disabled\"\n (focus)=\"onFocus()\"\n (input)=\"onInput()\"\n (blur)=\"onBlur()\"\n data-bwignore=\"true\"\n/>\n", styles: [":host{min-width:0;width:100%;display:block}:host ::ng-deep .iti{width:100%}:host ::ng-deep .
|
|
7820
|
+
], imports: [InputTextDirective], template: "<input\n #input\n solaris-input\n type=\"tel\"\n [disabled]=\"_disabled\"\n (focus)=\"onFocus()\"\n (input)=\"onInput()\"\n (blur)=\"onBlur()\"\n data-bwignore=\"true\"\n/>\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) 42.5%,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{padding:0;border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 42.5%,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}:host ::ng-deep .iti-selected-country-primary{padding:0 .5rem 0 .6rem}\n"] }]
|
|
7820
7821
|
}], ctorParameters: () => [], propDecorators: { marker: [{
|
|
7821
7822
|
type: HostBinding,
|
|
7822
7823
|
args: ['attr.solaris-phone-input']
|
|
@@ -8230,14 +8231,14 @@ class FormField {
|
|
|
8230
8231
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: FormField, isStandalone: true, selector: "solaris-form-field", inputs: { hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: false, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: false, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: false, isRequired: false, transformFunction: null }, showErrors: { classPropertyName: "showErrors", publicName: "showErrors", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: false, isRequired: false, transformFunction: null }, customErrorKey: { classPropertyName: "customErrorKey", publicName: "customErrorKey", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, customErrorParams: { classPropertyName: "customErrorParams", publicName: "customErrorParams", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
8231
8232
|
SolarisFormFieldController,
|
|
8232
8233
|
{ provide: SOLARIS_FORM_FIELD_CONTROLLER, useExisting: SolarisFormFieldController },
|
|
8233
|
-
], queries: [{ propertyName: "prefix", first: true, predicate: SolarisPrefixDirective, descendants: true }, { propertyName: "suffix", first: true, predicate: SolarisSuffixDirective, descendants: true }], ngImport: i0, template: "<div\n class=\"solaris-form-field\"\n [class.solaris-form-field
|
|
8234
|
+
], queries: [{ propertyName: "prefix", first: true, predicate: SolarisPrefixDirective, descendants: true }, { propertyName: "suffix", first: true, predicate: SolarisSuffixDirective, descendants: true }], ngImport: i0, template: "<div\n class=\"solaris-form-field\"\n [class.solaris-form-field-has-prefix]=\"hasPrefix\"\n [attr.data-appearance]=\"appearance\"\n [attr.data-invalid]=\"invalidComputed() ? 'true' : null\"\n [attr.data-radius]=\"radius\"\n [attr.data-disabled]=\"disabledComputed() ? 'true' : null\"\n>\n @if (label || labelKey) {\n <label class=\"solaris-form-field-label\">\n @if (labelKey) {\n {{ labelKey | translate }}\n } @else if (label) {\n {{ label }}\n }\n </label>\n }\n\n <div class=\"solaris-form-field-frame\">\n @if (hasPrefix) {\n <span class=\"solaris-form-field-prefix\" aria-hidden=\"true\">\n <ng-content select=\"[solaris-prefix]\"></ng-content>\n </span>\n }\n\n <div class=\"solaris-form-field-body\">\n <div class=\"solaris-form-field-control-slot\">\n <ng-content></ng-content>\n </div>\n\n @if (hasSuffix || showPasswordToggle() || invalidComputed() || disabledComputed()) {\n <span class=\"solaris-form-field-suffix\">\n @if (disabledComputed()) {\n <span\n class=\"solaris-form-field-status solaris-form-field-status-disabled\"\n aria-hidden=\"true\"\n >\n <i class=\"ph ph-lock-simple\"></i>\n </span>\n } @else {\n <ng-content select=\"[solaris-suffix]\"></ng-content>\n\n @if (showPasswordToggle()) {\n <solaris-password-toggle></solaris-password-toggle>\n }\n\n @if (invalidComputed()) {\n <span class=\"solaris-form-field-status\" aria-hidden=\"true\">\n <i class=\"ph ph-warning-circle\"></i>\n </span>\n }\n }\n </span>\n }\n </div>\n </div>\n\n @if (errorKey()) {\n <solaris-field-error [textKey]=\"errorKey()\" [textParams]=\"errorParams()\"></solaris-field-error>\n } @else {\n <ng-content select=\"[form-field-message]\"></ng-content>\n }\n\n @if (hint || hintKey) {\n <div class=\"solaris-form-field-hint\">\n @if (hintKey) {\n {{ hintKey | translate }}\n } @else {\n {{ hint }}\n }\n </div>\n }\n</div>\n\r\n", styles: [".solaris-form-field{display:grid;gap:var(--solaris-space-2);--solaris-form-field-radius: var(--solaris-radius-sm);--solaris-form-field-bg: var(--solaris-color-surface-2);--solaris-form-field-border: var(--solaris-color-border);--solaris-form-field-border-hover: color-mix( in srgb, var(--solaris-color-border) 70%, var(--solaris-color-text-muted) )}.solaris-form-field[data-radius=none]{--solaris-form-field-radius: var(--solaris-radius-none)}.solaris-form-field[data-radius=xs]{--solaris-form-field-radius: var(--solaris-radius-xs)}.solaris-form-field[data-radius=sm]{--solaris-form-field-radius: var(--solaris-radius-sm)}.solaris-form-field[data-radius=md]{--solaris-form-field-radius: var(--solaris-radius-md)}.solaris-form-field[data-radius=lg]{--solaris-form-field-radius: var(--solaris-radius-lg)}.solaris-form-field[data-radius=full]{--solaris-form-field-radius: var(--solaris-radius-full)}.solaris-form-field[data-appearance=outline]{--solaris-form-field-bg: transparent;--solaris-form-field-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent);--solaris-form-field-border-hover: color-mix( in srgb, var(--solaris-color-border) 65%, var(--solaris-color-text-muted) )}.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;background:var(--solaris-form-field-bg);border-radius:var(--solaris-form-field-radius);border:1px solid var(--solaris-form-field-border);transition:border-color var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.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 var(--solaris-motion-duration-xslow) var(--solaris-motion-ease-standard),filter var(--solaris-motion-duration-xslow) var(--solaris-motion-ease-standard);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:var(--solaris-fs-18)}.solaris-form-field-prefix svg{width:var(--solaris-fs-18);height:var(--solaris-fs-18)}.solaris-form-field-body{min-width:0;display:grid;padding-right:0;position:relative;align-items:center;padding-left:var(--solaris-space-3);grid-template-columns:minmax(0,1fr) auto}.solaris-form-field-control-slot{width:100%;min-width:0;display:flex;flex:1 1 auto;align-items:center}.solaris-form-field-control-slot>*{flex:1 1 0;width:100%;min-width:0}.solaris-form-field-control-slot :is(input,textarea){margin:0;border:0;width:100%;min-width:0;outline:none;padding:.9rem 0;background:transparent;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-normal)}.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;gap:var(--solaris-space-2)}.solaris-form-field-suffix :is(button,a){height:3.6rem;align-self:stretch;align-items:center;display:inline-flex}.solaris-form-field-status{width:3.8rem;display:grid;opacity:.95;height:3.8rem;place-items:center;color:var(--solaris-color-error)}.solaris-form-field-status i.ph{line-height:1;font-size:var(--solaris-fs-18)}.solaris-form-field-hint{font-size:var(--solaris-fs-12);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}.solaris-form-field[data-disabled=true] .solaris-form-field-frame{opacity:.45;cursor:not-allowed}.solaris-form-field[data-disabled=true] .solaris-form-field-frame *,.solaris-form-field[data-disabled=true] .solaris-form-field-label,.solaris-form-field[data-disabled=true] .solaris-form-field-hint{cursor:not-allowed}.solaris-form-field[data-disabled=true] .solaris-form-field-prefix,.solaris-form-field[data-disabled=true] .solaris-form-field-suffix,.solaris-form-field[data-disabled=true] .solaris-form-field-label,.solaris-form-field[data-disabled=true] .solaris-form-field-hint{color:var(--solaris-color-text-muted)}.solaris-form-field-status-disabled{opacity:.9;width:3.8rem;display:grid;height:3.8rem;place-items:center;color:var(--solaris-color-text-muted)}.solaris-form-field[data-disabled=true] .solaris-form-field-frame,.solaris-form-field[data-disabled=true] .solaris-form-field-control-slot,.solaris-form-field[data-disabled=true] .solaris-form-field-control-slot>*,.solaris-form-field[data-disabled=true] .solaris-form-field-control-slot :is(input,textarea,select,button){cursor:not-allowed!important}.solaris-form-field-status-disabled i{line-height:1;font-size:var(--solaris-fs-18)}\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 });
|
|
8234
8235
|
}
|
|
8235
8236
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: FormField, decorators: [{
|
|
8236
8237
|
type: Component,
|
|
8237
8238
|
args: [{ selector: 'solaris-form-field', standalone: true, imports: [PasswordToggle, FieldErrorComponent, SolarisTranslationPipe], providers: [
|
|
8238
8239
|
SolarisFormFieldController,
|
|
8239
8240
|
{ provide: SOLARIS_FORM_FIELD_CONTROLLER, useExisting: SolarisFormFieldController },
|
|
8240
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"solaris-form-field\"\n [class.solaris-form-field
|
|
8241
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"solaris-form-field\"\n [class.solaris-form-field-has-prefix]=\"hasPrefix\"\n [attr.data-appearance]=\"appearance\"\n [attr.data-invalid]=\"invalidComputed() ? 'true' : null\"\n [attr.data-radius]=\"radius\"\n [attr.data-disabled]=\"disabledComputed() ? 'true' : null\"\n>\n @if (label || labelKey) {\n <label class=\"solaris-form-field-label\">\n @if (labelKey) {\n {{ labelKey | translate }}\n } @else if (label) {\n {{ label }}\n }\n </label>\n }\n\n <div class=\"solaris-form-field-frame\">\n @if (hasPrefix) {\n <span class=\"solaris-form-field-prefix\" aria-hidden=\"true\">\n <ng-content select=\"[solaris-prefix]\"></ng-content>\n </span>\n }\n\n <div class=\"solaris-form-field-body\">\n <div class=\"solaris-form-field-control-slot\">\n <ng-content></ng-content>\n </div>\n\n @if (hasSuffix || showPasswordToggle() || invalidComputed() || disabledComputed()) {\n <span class=\"solaris-form-field-suffix\">\n @if (disabledComputed()) {\n <span\n class=\"solaris-form-field-status solaris-form-field-status-disabled\"\n aria-hidden=\"true\"\n >\n <i class=\"ph ph-lock-simple\"></i>\n </span>\n } @else {\n <ng-content select=\"[solaris-suffix]\"></ng-content>\n\n @if (showPasswordToggle()) {\n <solaris-password-toggle></solaris-password-toggle>\n }\n\n @if (invalidComputed()) {\n <span class=\"solaris-form-field-status\" aria-hidden=\"true\">\n <i class=\"ph ph-warning-circle\"></i>\n </span>\n }\n }\n </span>\n }\n </div>\n </div>\n\n @if (errorKey()) {\n <solaris-field-error [textKey]=\"errorKey()\" [textParams]=\"errorParams()\"></solaris-field-error>\n } @else {\n <ng-content select=\"[form-field-message]\"></ng-content>\n }\n\n @if (hint || hintKey) {\n <div class=\"solaris-form-field-hint\">\n @if (hintKey) {\n {{ hintKey | translate }}\n } @else {\n {{ hint }}\n }\n </div>\n }\n</div>\n\r\n", styles: [".solaris-form-field{display:grid;gap:var(--solaris-space-2);--solaris-form-field-radius: var(--solaris-radius-sm);--solaris-form-field-bg: var(--solaris-color-surface-2);--solaris-form-field-border: var(--solaris-color-border);--solaris-form-field-border-hover: color-mix( in srgb, var(--solaris-color-border) 70%, var(--solaris-color-text-muted) )}.solaris-form-field[data-radius=none]{--solaris-form-field-radius: var(--solaris-radius-none)}.solaris-form-field[data-radius=xs]{--solaris-form-field-radius: var(--solaris-radius-xs)}.solaris-form-field[data-radius=sm]{--solaris-form-field-radius: var(--solaris-radius-sm)}.solaris-form-field[data-radius=md]{--solaris-form-field-radius: var(--solaris-radius-md)}.solaris-form-field[data-radius=lg]{--solaris-form-field-radius: var(--solaris-radius-lg)}.solaris-form-field[data-radius=full]{--solaris-form-field-radius: var(--solaris-radius-full)}.solaris-form-field[data-appearance=outline]{--solaris-form-field-bg: transparent;--solaris-form-field-border: color-mix(in srgb, var(--solaris-color-border) 85%, transparent);--solaris-form-field-border-hover: color-mix( in srgb, var(--solaris-color-border) 65%, var(--solaris-color-text-muted) )}.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;background:var(--solaris-form-field-bg);border-radius:var(--solaris-form-field-radius);border:1px solid var(--solaris-form-field-border);transition:border-color var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard),box-shadow var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard),background-color var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.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 var(--solaris-motion-duration-xslow) var(--solaris-motion-ease-standard),filter var(--solaris-motion-duration-xslow) var(--solaris-motion-ease-standard);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:var(--solaris-fs-18)}.solaris-form-field-prefix svg{width:var(--solaris-fs-18);height:var(--solaris-fs-18)}.solaris-form-field-body{min-width:0;display:grid;padding-right:0;position:relative;align-items:center;padding-left:var(--solaris-space-3);grid-template-columns:minmax(0,1fr) auto}.solaris-form-field-control-slot{width:100%;min-width:0;display:flex;flex:1 1 auto;align-items:center}.solaris-form-field-control-slot>*{flex:1 1 0;width:100%;min-width:0}.solaris-form-field-control-slot :is(input,textarea){margin:0;border:0;width:100%;min-width:0;outline:none;padding:.9rem 0;background:transparent;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-normal)}.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;gap:var(--solaris-space-2)}.solaris-form-field-suffix :is(button,a){height:3.6rem;align-self:stretch;align-items:center;display:inline-flex}.solaris-form-field-status{width:3.8rem;display:grid;opacity:.95;height:3.8rem;place-items:center;color:var(--solaris-color-error)}.solaris-form-field-status i.ph{line-height:1;font-size:var(--solaris-fs-18)}.solaris-form-field-hint{font-size:var(--solaris-fs-12);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}.solaris-form-field[data-disabled=true] .solaris-form-field-frame{opacity:.45;cursor:not-allowed}.solaris-form-field[data-disabled=true] .solaris-form-field-frame *,.solaris-form-field[data-disabled=true] .solaris-form-field-label,.solaris-form-field[data-disabled=true] .solaris-form-field-hint{cursor:not-allowed}.solaris-form-field[data-disabled=true] .solaris-form-field-prefix,.solaris-form-field[data-disabled=true] .solaris-form-field-suffix,.solaris-form-field[data-disabled=true] .solaris-form-field-label,.solaris-form-field[data-disabled=true] .solaris-form-field-hint{color:var(--solaris-color-text-muted)}.solaris-form-field-status-disabled{opacity:.9;width:3.8rem;display:grid;height:3.8rem;place-items:center;color:var(--solaris-color-text-muted)}.solaris-form-field[data-disabled=true] .solaris-form-field-frame,.solaris-form-field[data-disabled=true] .solaris-form-field-control-slot,.solaris-form-field[data-disabled=true] .solaris-form-field-control-slot>*,.solaris-form-field[data-disabled=true] .solaris-form-field-control-slot :is(input,textarea,select,button){cursor:not-allowed!important}.solaris-form-field-status-disabled i{line-height:1;font-size:var(--solaris-fs-18)}\n"] }]
|
|
8241
8242
|
}], ctorParameters: () => [], propDecorators: { prefix: [{
|
|
8242
8243
|
type: ContentChild,
|
|
8243
8244
|
args: [SolarisPrefixDirective]
|
|
@@ -8430,7 +8431,7 @@ class SolarisSelect {
|
|
|
8430
8431
|
this.matchWidthEl =
|
|
8431
8432
|
trigger
|
|
8432
8433
|
.closest('.solaris-form-field')
|
|
8433
|
-
?.querySelector('.solaris-form-
|
|
8434
|
+
?.querySelector('.solaris-form-field-frame') ?? null;
|
|
8434
8435
|
}
|
|
8435
8436
|
const el = this.triggerWrap?.nativeElement;
|
|
8436
8437
|
if (!el)
|
|
@@ -9003,7 +9004,7 @@ class SolarisSelect {
|
|
|
9003
9004
|
useExisting: forwardRef(() => SolarisSelect),
|
|
9004
9005
|
multi: true,
|
|
9005
9006
|
},
|
|
9006
|
-
], viewQueries: [{ propertyName: "tokenEl", first: true, predicate: ["tokenEl"], descendants: true, read: ElementRef }, { propertyName: "measureSlot", first: true, predicate: ["measureSlot"], descendants: true, read: ElementRef }, { propertyName: "triggerWrap", first: true, predicate: ["triggerWrap"], descendants: true, read: ElementRef }, { propertyName: "triggerInput", first: true, predicate: ["triggerInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<solaris-popover\n [open]=\"open()\"\n (openChange)=\"open.set($event)\"\n placement=\"bottom-start\"\n [offset]=\"6\"\n [matchWidth]=\"true\"\n [anchorElement]=\"matchWidthEl\"\n [matchWidthElement]=\"matchWidthEl\"\n [closeOnOutsideClick]=\"true\"\n [closeOnEscape]=\"true\"\n panelClass=\"solaris-select__popover\"\n>\n <div\n #triggerWrap\n solaris-popover-trigger\n class=\"solaris-select__trigger\"\n (click)=\"openFromTrigger()\"\n >\n @if (showToken()) {\n <span #tokenEl class=\"solaris-select__token\" aria-hidden=\"true\">\n @if (multiple && showCount()) {\n @if (selectedCountKey) {\n {{ selectedCountKey | translate: { count: selectedCount() } }}\n } @else {\n {{ selectedCountLabel() }}\n }\n } @else {\n {{ selectedText() }}\n }\n </span>\n }\n\n <input\n #triggerInput\n type=\"text\"\n class=\"solaris-select__input\"\n [disabled]=\"disabled\"\n [attr.aria-activedescendant]=\"open() ? activeOptionId() : null\"\n (click)=\"openFromTrigger()\"\n [readonly]=\"!isSearchMode()\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n aria-controls=\"{{ _id }}-listbox\"\n aria-expanded=\"false\"\n [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\n [attr.placeholder]=\"\n inputPlaceholderKey() ? (inputPlaceholderKey() | translate) : inputPlaceholderText()\n \"\n [value]=\"triggerValue()\"\n (keydown)=\"onTriggerKeydown($event)\"\n (focus)=\"openFromTrigger()\"\n (input)=\"onTriggerInput(triggerInput.value)\"\n />\n\n <button\n type=\"button\"\n class=\"solaris-select__chevron-btn\"\n [disabled]=\"disabled\"\n (click)=\"toggleOpen()\"\n [attr.aria-label]=\"'ui.solaris.aria.toggleOptions' | translate\"\n >\n <i class=\"ph ph-caret-down\" aria-hidden=\"true\"></i>\n </button>\n\n <span class=\"solaris-select__measure solaris-select__token\" #measureSlot aria-hidden=\"true\">\n {{ selectedText() }}\n </span>\n </div>\n\n <ng-template solaris-popover-panel>\n <div\n class=\"solaris-select__panel\"\n (keydown)=\"onPanelKeydown($event)\"\n [style.max-height]=\"panelMaxHeight\"\n >\n @if (canGoBack()) {\n <div class=\"solaris-select__nav\">\n <button type=\"button\" class=\"solaris-select__back\" (click)=\"goBack()\">\n <i class=\"ph ph-arrow-left\"></i>\n <span>\n @if (backKey) {\n {{ backKey | translate }}\n } @else {\n {{ backText | translate }}\n }\n </span>\n </button>\n\n <div class=\"solaris-select__title\">\n @if (currentLevel().titleKey) {\n {{ currentLevel().titleKey! | translate }}\n } @else {\n {{ currentLevel().title ?? '' }}\n }\n </div>\n </div>\n }\n\n <div\n class=\"solaris-select__list\"\n role=\"listbox\"\n [id]=\"_id + '-listbox'\"\n [attr.aria-multiselectable]=\"multiple ? 'true' : null\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n >\n @for (row of rows(); track trackRow($index, row)) {\n @if (row.kind === 'group') {\n <div class=\"solaris-select__group\">\n @if (row.labelKey) {\n {{ row.labelKey | translate }}\n } @else {\n {{ row.label }}\n }\n </div>\n }\n\n @if (row.kind === 'divider') {\n <div class=\"solaris-select__divider\" aria-hidden=\"true\"></div>\n }\n\n @if (row.kind === 'item') {\n <button\n type=\"button\"\n class=\"solaris-select__option\"\n [id]=\"row.id\"\n [disabled]=\"row.disabled\"\n [attr.aria-selected]=\"row.selected ? 'true' : 'false'\"\n [class.is-active]=\"row.optionIndex === activeIndex()\"\n [class.is-selected]=\"row.selected\"\n [class.is-navigable]=\"row.hasChildren\"\n (click)=\"onOptionClick(row.item)\"\n >\n <span class=\"solaris-select__option-leading\">\n @if (multiple) {\n @if (!row.hasChildren) {\n <span\n class=\"solaris-select__checkbox\"\n aria-hidden=\"true\"\n [class.is-checked]=\"row.selected\"\n >\n <i class=\"ph ph-check\"></i>\n </span>\n } @else {\n @if (row.item.imageUrl) {\n <img class=\"solaris-select__avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill />\n } @else if (row.item.icon) {\n <i\n class=\"solaris-select__icon\"\n [class]=\"row.item.icon\"\n aria-hidden=\"true\"\n ></i>\n } @else {\n <span class=\"solaris-select__checkbox-spacer\" aria-hidden=\"true\"></span>\n }\n }\n }\n\n @if (!multiple) {\n @if (row.item.imageUrl) {\n <img class=\"solaris-select__avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill />\n } @else if (row.item.icon) {\n <i class=\"solaris-select__icon\" [class]=\"row.item.icon\" aria-hidden=\"true\"></i>\n }\n }\n </span>\n\n <span class=\"solaris-select__option-main\">\n <span class=\"solaris-select__option-label\">\n @if (row.item.labelKey) {\n {{ row.item.labelKey | translate }}\n } @else {\n {{ row.item.label }}\n }\n </span>\n\n @if (row.item.description || row.item.descriptionKey) {\n <span class=\"solaris-select__option-desc\">\n @if (row.item.descriptionKey) {\n {{ row.item.descriptionKey | translate }}\n } @else {\n {{ row.item.description }}\n }\n </span>\n }\n </span>\n\n <span class=\"solaris-select__option-end\">\n @if (row.item.endTextKey) {\n <span class=\"solaris-select__end-text\">{{\n row.item.endTextKey | translate\n }}</span>\n } @else if (row.item.endText) {\n <span class=\"solaris-select__end-text\">{{ row.item.endText }}</span>\n }\n\n @if (!multiple && row.selected) {\n <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\n }\n\n @if (row.hasChildren) {\n <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\n }\n </span>\n </button>\n }\n }\n </div>\n </div>\n </ng-template>\n</solaris-popover>\n", styles: [":host{width:100%;display:block}.solaris-select__trigger{width:100%;min-width:0;display:flex;position:relative;align-items:center;padding-right:2.8rem;gap:var(--solaris-space-2)}.solaris-select__token{opacity:1;min-width:0;flex:0 1 auto;max-width:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--solaris-color-text)}.solaris-select__input{border:0;width:100%;min-width:0;outline:none;flex:1 1 auto;padding:1rem 0;background:transparent;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-normal)}:host([data-compact=true]) .solaris-select__input{flex:0 0 2ch;width:2ch;min-width:2ch}.solaris-select__input::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select__chevron-btn i.ph{margin-right:1.5rem;transform:rotate(0);transition:transform var(--solaris-motion-duration-md) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-md) var(--solaris-motion-ease-standard)}:host([data-open=true]) .solaris-select__chevron-btn i.ph{opacity:.95;transform:rotate(180deg)}:host([data-multiple=false]) .solaris-select__trigger,:host([data-multiple=false]) .solaris-select__input,:host([data-multiple=false]) .solaris-select__chevron-btn:not(:disabled){cursor:pointer}.solaris-select__display{top:0;left:0;bottom:0;display:flex;right:2.8rem;overflow:hidden;position:absolute;align-items:center;white-space:nowrap;pointer-events:none;text-overflow:ellipsis}.solaris-select__display.is-hidden{opacity:0}.solaris-select__input::placeholder,.solaris-select__placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select__input::placeholder,.solaris-select__placeholder,.solaris-select__token{font-size:var(--solaris-fs-14)}.solaris-select__chevron-btn{top:50%;right:0;border:0;display:grid;width:2.8rem;opacity:.85;height:3.6rem;cursor:pointer;position:absolute;place-items:center;background:transparent;transform:translateY(-50%);color:var(--solaris-color-text-muted)}.solaris-select__chevron-btn:disabled{opacity:.5;cursor:not-allowed}.solaris-select__measure{top:-9999px;left:-9999px;position:absolute;visibility:hidden;pointer-events:none;max-width:none!important;overflow:visible!important;width:max-content!important;white-space:nowrap!important;text-overflow:clip!important;display:inline-block!important}.solaris-select__popover{padding:var(--solaris-space-2)}.solaris-select__panel{display:grid;overflow:auto;max-height:32rem;padding:.25rem;gap:var(--solaris-space-2);border-radius:var(--solaris-radius-sm);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border)}.solaris-select__checkbox-spacer{width:1.6rem;height:1.6rem}.solaris-select__nav{display:grid;align-items:center;padding-right:1rem;gap:var(--solaris-space-2);grid-template-columns:auto 1fr}.solaris-select__back{border:0;cursor:pointer;align-items:center;display:inline-flex;background:transparent;gap:var(--solaris-space-1);padding:var(--solaris-space-2);color:var(--solaris-color-text);border-radius:var(--solaris-radius-sm)}.solaris-select__back:hover{background:var(--solaris-color-surface-2)}.solaris-select__title{justify-self:end;font-size:var(--solaris-fs-12);padding-right:var(--solaris-space-1);color:var(--solaris-color-text-muted)}.solaris-select__list{gap:.25rem;display:grid}.solaris-select__group{opacity:.9;padding:.4rem .6rem;text-transform:uppercase;font-size:var(--solaris-fs-10);letter-spacing:var(--solaris-ls-md);color:var(--solaris-color-text-muted)}.solaris-select__divider{height:1px;margin:.35rem .2rem;background:color-mix(in srgb,var(--solaris-color-border) 75%,transparent)}.solaris-select__option{width:100%;border:0;display:grid;cursor:pointer;text-align:left;align-items:center;padding:.7rem .8rem;background:transparent;gap:var(--solaris-space-4);color:var(--solaris-color-text);grid-template-columns:auto 1fr auto;border-radius:var(--solaris-radius-sm)}.solaris-select__option:hover{background:var(--solaris-color-surface-2)}.solaris-select__option.is-active{background:color-mix(in srgb,var(--solaris-color-primary) 7%,var(--solaris-color-surface-2))}.solaris-select__option:disabled{opacity:.45;cursor:not-allowed}.solaris-select__option-leading{align-items:center;display:inline-flex;gap:var(--solaris-space-2)}.solaris-select__checkbox{display:grid;width:1.6rem;height:1.6rem;place-items:center;border-radius:.4rem;background:var(--solaris-color-surface);color:var(--solaris-color-primary-contrast);border:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-select__checkbox i.ph{opacity:0;line-height:1;font-size:1.2rem;transform:scale(.9);transition:opacity var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-select__checkbox.is-checked{background:var(--solaris-color-primary);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-select__checkbox.is-checked i.ph{opacity:1;transform:scale(1)}.solaris-select__avatar{width:1.8rem;height:1.8rem;object-fit:cover;border-radius:var(--solaris-radius-full)}.solaris-select__icon{opacity:.9;font-size:var(--solaris-fs-16);color:var(--solaris-color-text-muted)}.solaris-select__option-main{min-width:0;gap:.15rem;display:grid}.solaris-select__option-label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__option-desc{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-select__option-end{opacity:.9;align-items:center;display:inline-flex;gap:var(--solaris-space-2);color:var(--solaris-color-text-muted)}.solaris-select__option-end i.ph-check{color:var(--solaris-color-success)}.solaris-select__end-text{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}\n"], dependencies: [{ kind: "component", type: SolarisPopover, selector: "solaris-popover", inputs: ["offset", "panelClass", "autoFlip", "autoShift", "matchWidth", "viewportPadding", "closeOnEscape", "closeOnOutsideClick", "anchorElement", "matchWidthElement", "placement", "open"], outputs: ["openChange"] }, { kind: "directive", type: SolarisPopoverTriggerDirective, selector: "[solaris-popover-trigger]" }, { kind: "directive", type: SolarisPopoverPanelDirective, selector: "ng-template[solaris-popover-panel]" }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9007
|
+
], viewQueries: [{ propertyName: "tokenEl", first: true, predicate: ["tokenEl"], descendants: true, read: ElementRef }, { propertyName: "measureSlot", first: true, predicate: ["measureSlot"], descendants: true, read: ElementRef }, { propertyName: "triggerWrap", first: true, predicate: ["triggerWrap"], descendants: true, read: ElementRef }, { propertyName: "triggerInput", first: true, predicate: ["triggerInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<solaris-popover\n [open]=\"open()\"\n (openChange)=\"open.set($event)\"\n placement=\"bottom-start\"\n [offset]=\"6\"\n [matchWidth]=\"true\"\n [anchorElement]=\"matchWidthEl\"\n [matchWidthElement]=\"matchWidthEl\"\n [closeOnOutsideClick]=\"true\"\n [closeOnEscape]=\"true\"\n panelClass=\"solaris-select-popover\"\n>\n <div\n #triggerWrap\n solaris-popover-trigger\n class=\"solaris-select-trigger\"\n (click)=\"openFromTrigger()\"\n >\n @if (showToken()) {\n <span #tokenEl class=\"solaris-select-token\" aria-hidden=\"true\">\n @if (multiple && showCount()) {\n @if (selectedCountKey) {\n {{ selectedCountKey | translate: { count: selectedCount() } }}\n } @else {\n {{ selectedCountLabel() }}\n }\n } @else {\n {{ selectedText() }}\n }\n </span>\n }\n\n <input\n #triggerInput\n type=\"text\"\n class=\"solaris-select-input\"\n [disabled]=\"disabled\"\n [attr.aria-activedescendant]=\"open() ? activeOptionId() : null\"\n (click)=\"openFromTrigger()\"\n [readonly]=\"!isSearchMode()\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n aria-controls=\"{{ _id }}-listbox\"\n aria-expanded=\"false\"\n [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\n [attr.placeholder]=\"\n inputPlaceholderKey() ? (inputPlaceholderKey() | translate) : inputPlaceholderText()\n \"\n [value]=\"triggerValue()\"\n (keydown)=\"onTriggerKeydown($event)\"\n (focus)=\"openFromTrigger()\"\n (input)=\"onTriggerInput(triggerInput.value)\"\n />\n\n <button\n type=\"button\"\n class=\"solaris-select-chevron-btn\"\n [disabled]=\"disabled\"\n (click)=\"toggleOpen()\"\n [attr.aria-label]=\"'ui.solaris.aria.toggleOptions' | translate\"\n >\n <i class=\"ph ph-caret-down\" aria-hidden=\"true\"></i>\n </button>\n\n <span class=\"solaris-select-measure solaris-select-token\" #measureSlot aria-hidden=\"true\">\n {{ selectedText() }}\n </span>\n </div>\n\n <ng-template solaris-popover-panel>\n <div\n class=\"solaris-select-panel\"\n (keydown)=\"onPanelKeydown($event)\"\n [style.max-height]=\"panelMaxHeight\"\n >\n @if (canGoBack()) {\n <div class=\"solaris-select-nav\">\n <button type=\"button\" class=\"solaris-select-back\" (click)=\"goBack()\">\n <i class=\"ph ph-arrow-left\"></i>\n <span>\n @if (backKey) {\n {{ backKey | translate }}\n } @else {\n {{ backText | translate }}\n }\n </span>\n </button>\n\n <div class=\"solaris-select-title\">\n @if (currentLevel().titleKey) {\n {{ currentLevel().titleKey! | translate }}\n } @else {\n {{ currentLevel().title ?? '' }}\n }\n </div>\n </div>\n }\n\n <div\n class=\"solaris-select-list\"\n role=\"listbox\"\n [id]=\"_id + '-listbox'\"\n [attr.aria-multiselectable]=\"multiple ? 'true' : null\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n >\n @for (row of rows(); track trackRow($index, row)) {\n @if (row.kind === 'group') {\n <div class=\"solaris-select-group\">\n @if (row.labelKey) {\n {{ row.labelKey | translate }}\n } @else {\n {{ row.label }}\n }\n </div>\n }\n\n @if (row.kind === 'divider') {\n <div class=\"solaris-select-divider\" aria-hidden=\"true\"></div>\n }\n\n @if (row.kind === 'item') {\n <button\n type=\"button\"\n class=\"solaris-select-option\"\n [id]=\"row.id\"\n [disabled]=\"row.disabled\"\n [attr.aria-selected]=\"row.selected ? 'true' : 'false'\"\n [class.is-active]=\"row.optionIndex === activeIndex()\"\n [class.is-selected]=\"row.selected\"\n [class.is-navigable]=\"row.hasChildren\"\n (click)=\"onOptionClick(row.item)\"\n >\n <span class=\"solaris-select-option-leading\">\n @if (multiple) {\n @if (!row.hasChildren) {\n <span\n class=\"solaris-select-checkbox\"\n aria-hidden=\"true\"\n [class.is-checked]=\"row.selected\"\n >\n <i class=\"ph ph-check\"></i>\n </span>\n } @else {\n @if (row.item.imageUrl) {\n <img class=\"solaris-select-avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill />\n } @else if (row.item.icon) {\n <i\n class=\"solaris-select-icon\"\n [class]=\"row.item.icon\"\n aria-hidden=\"true\"\n ></i>\n } @else {\n <span class=\"solaris-select-checkbox-spacer\" aria-hidden=\"true\"></span>\n }\n }\n }\n\n @if (!multiple) {\n @if (row.item.imageUrl) {\n <img class=\"solaris-select-avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill />\n } @else if (row.item.icon) {\n <i class=\"solaris-select-icon\" [class]=\"row.item.icon\" aria-hidden=\"true\"></i>\n }\n }\n </span>\n\n <span class=\"solaris-select-option-main\">\n <span class=\"solaris-select-option-label\">\n @if (row.item.labelKey) {\n {{ row.item.labelKey | translate }}\n } @else {\n {{ row.item.label }}\n }\n </span>\n\n @if (row.item.description || row.item.descriptionKey) {\n <span class=\"solaris-select-option-desc\">\n @if (row.item.descriptionKey) {\n {{ row.item.descriptionKey | translate }}\n } @else {\n {{ row.item.description }}\n }\n </span>\n }\n </span>\n\n <span class=\"solaris-select-option-end\">\n @if (row.item.endTextKey) {\n <span class=\"solaris-select-end-text\">{{\n row.item.endTextKey | translate\n }}</span>\n } @else if (row.item.endText) {\n <span class=\"solaris-select-end-text\">{{ row.item.endText }}</span>\n }\n\n @if (!multiple && row.selected) {\n <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\n }\n\n @if (row.hasChildren) {\n <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\n }\n </span>\n </button>\n }\n }\n </div>\n </div>\n </ng-template>\n</solaris-popover>\n\r\n", styles: [":host{width:100%;display:block}.solaris-select-trigger{width:100%;min-width:0;display:flex;position:relative;align-items:center;padding-right:2.8rem;gap:var(--solaris-space-2)}.solaris-select-token{opacity:1;min-width:0;flex:0 1 auto;max-width:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--solaris-color-text)}.solaris-select-input{border:0;width:100%;min-width:0;outline:none;flex:1 1 auto;padding:1rem 0;background:transparent;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-normal)}:host([data-compact=true]) .solaris-select-input{flex:0 0 2ch;width:2ch;min-width:2ch}.solaris-select-input::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select-chevron-btn i.ph{margin-right:1.5rem;transform:rotate(0);transition:transform var(--solaris-motion-duration-md) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-md) var(--solaris-motion-ease-standard)}:host([data-open=true]) .solaris-select-chevron-btn i.ph{opacity:.95;transform:rotate(180deg)}:host([data-multiple=false]) .solaris-select-trigger,:host([data-multiple=false]) .solaris-select-input,:host([data-multiple=false]) .solaris-select-chevron-btn:not(:disabled){cursor:pointer}.solaris-select-display{top:0;left:0;bottom:0;display:flex;right:2.8rem;overflow:hidden;position:absolute;align-items:center;white-space:nowrap;pointer-events:none;text-overflow:ellipsis}.solaris-select-display.is-hidden{opacity:0}.solaris-select-input::placeholder,.solaris-select-placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select-input::placeholder,.solaris-select-placeholder,.solaris-select-token{font-size:var(--solaris-fs-14)}.solaris-select-chevron-btn{top:50%;right:0;border:0;display:grid;width:2.8rem;opacity:.85;height:3.6rem;cursor:pointer;position:absolute;place-items:center;background:transparent;transform:translateY(-50%);color:var(--solaris-color-text-muted)}.solaris-select-chevron-btn:disabled{opacity:.5;cursor:not-allowed}.solaris-select-measure{top:-9999px;left:-9999px;position:absolute;visibility:hidden;pointer-events:none;max-width:none!important;overflow:visible!important;width:max-content!important;white-space:nowrap!important;text-overflow:clip!important;display:inline-block!important}.solaris-select-popover{padding:var(--solaris-space-2)}.solaris-select-panel{display:grid;overflow:auto;max-height:32rem;padding:.25rem;gap:var(--solaris-space-2);border-radius:var(--solaris-radius-sm);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border)}.solaris-select-checkbox-spacer{width:1.6rem;height:1.6rem}.solaris-select-nav{display:grid;align-items:center;padding-right:1rem;gap:var(--solaris-space-2);grid-template-columns:auto 1fr}.solaris-select-back{border:0;cursor:pointer;align-items:center;display:inline-flex;background:transparent;gap:var(--solaris-space-1);padding:var(--solaris-space-2);color:var(--solaris-color-text);border-radius:var(--solaris-radius-sm)}.solaris-select-back:hover{background:var(--solaris-color-surface-2)}.solaris-select-title{justify-self:end;font-size:var(--solaris-fs-12);padding-right:var(--solaris-space-1);color:var(--solaris-color-text-muted)}.solaris-select-list{gap:.25rem;display:grid}.solaris-select-group{opacity:.9;padding:.4rem .6rem;text-transform:uppercase;font-size:var(--solaris-fs-10);letter-spacing:var(--solaris-ls-md);color:var(--solaris-color-text-muted)}.solaris-select-divider{height:1px;margin:.35rem .2rem;background:color-mix(in srgb,var(--solaris-color-border) 75%,transparent)}.solaris-select-option{width:100%;border:0;display:grid;cursor:pointer;text-align:left;align-items:center;padding:.7rem .8rem;background:transparent;gap:var(--solaris-space-4);color:var(--solaris-color-text);grid-template-columns:auto 1fr auto;border-radius:var(--solaris-radius-sm)}.solaris-select-option:hover{background:var(--solaris-color-surface-2)}.solaris-select-option.is-active{background:color-mix(in srgb,var(--solaris-color-primary) 7%,var(--solaris-color-surface-2))}.solaris-select-option:disabled{opacity:.45;cursor:not-allowed}.solaris-select-option-leading{align-items:center;display:inline-flex;gap:var(--solaris-space-2)}.solaris-select-checkbox{display:grid;width:1.6rem;height:1.6rem;place-items:center;border-radius:.4rem;background:var(--solaris-color-surface);color:var(--solaris-color-primary-contrast);border:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-select-checkbox i.ph{opacity:0;line-height:1;font-size:1.2rem;transform:scale(.9);transition:opacity var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-select-checkbox.is-checked{background:var(--solaris-color-primary);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-select-checkbox.is-checked i.ph{opacity:1;transform:scale(1)}.solaris-select-avatar{width:1.8rem;height:1.8rem;object-fit:cover;border-radius:var(--solaris-radius-full)}.solaris-select-icon{opacity:.9;font-size:var(--solaris-fs-16);color:var(--solaris-color-text-muted)}.solaris-select-option-main{min-width:0;gap:.15rem;display:grid}.solaris-select-option-label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select-option-desc{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-select-option-end{opacity:.9;align-items:center;display:inline-flex;gap:var(--solaris-space-2);color:var(--solaris-color-text-muted)}.solaris-select-option-end i.ph-check{color:var(--solaris-color-success)}.solaris-select-end-text{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}\n"], dependencies: [{ kind: "component", type: SolarisPopover, selector: "solaris-popover", inputs: ["offset", "panelClass", "autoFlip", "autoShift", "matchWidth", "viewportPadding", "closeOnEscape", "closeOnOutsideClick", "anchorElement", "matchWidthElement", "placement", "open"], outputs: ["openChange"] }, { kind: "directive", type: SolarisPopoverTriggerDirective, selector: "[solaris-popover-trigger]" }, { kind: "directive", type: SolarisPopoverPanelDirective, selector: "ng-template[solaris-popover-panel]" }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9007
9008
|
}
|
|
9008
9009
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SolarisSelect, decorators: [{
|
|
9009
9010
|
type: Component,
|
|
@@ -9019,7 +9020,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
9019
9020
|
useExisting: forwardRef(() => SolarisSelect),
|
|
9020
9021
|
multi: true,
|
|
9021
9022
|
},
|
|
9022
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<solaris-popover\n [open]=\"open()\"\n (openChange)=\"open.set($event)\"\n placement=\"bottom-start\"\n [offset]=\"6\"\n [matchWidth]=\"true\"\n [anchorElement]=\"matchWidthEl\"\n [matchWidthElement]=\"matchWidthEl\"\n [closeOnOutsideClick]=\"true\"\n [closeOnEscape]=\"true\"\n panelClass=\"solaris-select__popover\"\n>\n <div\n #triggerWrap\n solaris-popover-trigger\n class=\"solaris-select__trigger\"\n (click)=\"openFromTrigger()\"\n >\n @if (showToken()) {\n <span #tokenEl class=\"solaris-select__token\" aria-hidden=\"true\">\n @if (multiple && showCount()) {\n @if (selectedCountKey) {\n {{ selectedCountKey | translate: { count: selectedCount() } }}\n } @else {\n {{ selectedCountLabel() }}\n }\n } @else {\n {{ selectedText() }}\n }\n </span>\n }\n\n <input\n #triggerInput\n type=\"text\"\n class=\"solaris-select__input\"\n [disabled]=\"disabled\"\n [attr.aria-activedescendant]=\"open() ? activeOptionId() : null\"\n (click)=\"openFromTrigger()\"\n [readonly]=\"!isSearchMode()\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n aria-controls=\"{{ _id }}-listbox\"\n aria-expanded=\"false\"\n [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\n [attr.placeholder]=\"\n inputPlaceholderKey() ? (inputPlaceholderKey() | translate) : inputPlaceholderText()\n \"\n [value]=\"triggerValue()\"\n (keydown)=\"onTriggerKeydown($event)\"\n (focus)=\"openFromTrigger()\"\n (input)=\"onTriggerInput(triggerInput.value)\"\n />\n\n <button\n type=\"button\"\n class=\"solaris-select__chevron-btn\"\n [disabled]=\"disabled\"\n (click)=\"toggleOpen()\"\n [attr.aria-label]=\"'ui.solaris.aria.toggleOptions' | translate\"\n >\n <i class=\"ph ph-caret-down\" aria-hidden=\"true\"></i>\n </button>\n\n <span class=\"solaris-select__measure solaris-select__token\" #measureSlot aria-hidden=\"true\">\n {{ selectedText() }}\n </span>\n </div>\n\n <ng-template solaris-popover-panel>\n <div\n class=\"solaris-select__panel\"\n (keydown)=\"onPanelKeydown($event)\"\n [style.max-height]=\"panelMaxHeight\"\n >\n @if (canGoBack()) {\n <div class=\"solaris-select__nav\">\n <button type=\"button\" class=\"solaris-select__back\" (click)=\"goBack()\">\n <i class=\"ph ph-arrow-left\"></i>\n <span>\n @if (backKey) {\n {{ backKey | translate }}\n } @else {\n {{ backText | translate }}\n }\n </span>\n </button>\n\n <div class=\"solaris-select__title\">\n @if (currentLevel().titleKey) {\n {{ currentLevel().titleKey! | translate }}\n } @else {\n {{ currentLevel().title ?? '' }}\n }\n </div>\n </div>\n }\n\n <div\n class=\"solaris-select__list\"\n role=\"listbox\"\n [id]=\"_id + '-listbox'\"\n [attr.aria-multiselectable]=\"multiple ? 'true' : null\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n >\n @for (row of rows(); track trackRow($index, row)) {\n @if (row.kind === 'group') {\n <div class=\"solaris-select__group\">\n @if (row.labelKey) {\n {{ row.labelKey | translate }}\n } @else {\n {{ row.label }}\n }\n </div>\n }\n\n @if (row.kind === 'divider') {\n <div class=\"solaris-select__divider\" aria-hidden=\"true\"></div>\n }\n\n @if (row.kind === 'item') {\n <button\n type=\"button\"\n class=\"solaris-select__option\"\n [id]=\"row.id\"\n [disabled]=\"row.disabled\"\n [attr.aria-selected]=\"row.selected ? 'true' : 'false'\"\n [class.is-active]=\"row.optionIndex === activeIndex()\"\n [class.is-selected]=\"row.selected\"\n [class.is-navigable]=\"row.hasChildren\"\n (click)=\"onOptionClick(row.item)\"\n >\n <span class=\"solaris-select__option-leading\">\n @if (multiple) {\n @if (!row.hasChildren) {\n <span\n class=\"solaris-select__checkbox\"\n aria-hidden=\"true\"\n [class.is-checked]=\"row.selected\"\n >\n <i class=\"ph ph-check\"></i>\n </span>\n } @else {\n @if (row.item.imageUrl) {\n <img class=\"solaris-select__avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill />\n } @else if (row.item.icon) {\n <i\n class=\"solaris-select__icon\"\n [class]=\"row.item.icon\"\n aria-hidden=\"true\"\n ></i>\n } @else {\n <span class=\"solaris-select__checkbox-spacer\" aria-hidden=\"true\"></span>\n }\n }\n }\n\n @if (!multiple) {\n @if (row.item.imageUrl) {\n <img class=\"solaris-select__avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill />\n } @else if (row.item.icon) {\n <i class=\"solaris-select__icon\" [class]=\"row.item.icon\" aria-hidden=\"true\"></i>\n }\n }\n </span>\n\n <span class=\"solaris-select__option-main\">\n <span class=\"solaris-select__option-label\">\n @if (row.item.labelKey) {\n {{ row.item.labelKey | translate }}\n } @else {\n {{ row.item.label }}\n }\n </span>\n\n @if (row.item.description || row.item.descriptionKey) {\n <span class=\"solaris-select__option-desc\">\n @if (row.item.descriptionKey) {\n {{ row.item.descriptionKey | translate }}\n } @else {\n {{ row.item.description }}\n }\n </span>\n }\n </span>\n\n <span class=\"solaris-select__option-end\">\n @if (row.item.endTextKey) {\n <span class=\"solaris-select__end-text\">{{\n row.item.endTextKey | translate\n }}</span>\n } @else if (row.item.endText) {\n <span class=\"solaris-select__end-text\">{{ row.item.endText }}</span>\n }\n\n @if (!multiple && row.selected) {\n <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\n }\n\n @if (row.hasChildren) {\n <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\n }\n </span>\n </button>\n }\n }\n </div>\n </div>\n </ng-template>\n</solaris-popover>\n", styles: [":host{width:100%;display:block}.solaris-select__trigger{width:100%;min-width:0;display:flex;position:relative;align-items:center;padding-right:2.8rem;gap:var(--solaris-space-2)}.solaris-select__token{opacity:1;min-width:0;flex:0 1 auto;max-width:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--solaris-color-text)}.solaris-select__input{border:0;width:100%;min-width:0;outline:none;flex:1 1 auto;padding:1rem 0;background:transparent;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-normal)}:host([data-compact=true]) .solaris-select__input{flex:0 0 2ch;width:2ch;min-width:2ch}.solaris-select__input::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select__chevron-btn i.ph{margin-right:1.5rem;transform:rotate(0);transition:transform var(--solaris-motion-duration-md) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-md) var(--solaris-motion-ease-standard)}:host([data-open=true]) .solaris-select__chevron-btn i.ph{opacity:.95;transform:rotate(180deg)}:host([data-multiple=false]) .solaris-select__trigger,:host([data-multiple=false]) .solaris-select__input,:host([data-multiple=false]) .solaris-select__chevron-btn:not(:disabled){cursor:pointer}.solaris-select__display{top:0;left:0;bottom:0;display:flex;right:2.8rem;overflow:hidden;position:absolute;align-items:center;white-space:nowrap;pointer-events:none;text-overflow:ellipsis}.solaris-select__display.is-hidden{opacity:0}.solaris-select__input::placeholder,.solaris-select__placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select__input::placeholder,.solaris-select__placeholder,.solaris-select__token{font-size:var(--solaris-fs-14)}.solaris-select__chevron-btn{top:50%;right:0;border:0;display:grid;width:2.8rem;opacity:.85;height:3.6rem;cursor:pointer;position:absolute;place-items:center;background:transparent;transform:translateY(-50%);color:var(--solaris-color-text-muted)}.solaris-select__chevron-btn:disabled{opacity:.5;cursor:not-allowed}.solaris-select__measure{top:-9999px;left:-9999px;position:absolute;visibility:hidden;pointer-events:none;max-width:none!important;overflow:visible!important;width:max-content!important;white-space:nowrap!important;text-overflow:clip!important;display:inline-block!important}.solaris-select__popover{padding:var(--solaris-space-2)}.solaris-select__panel{display:grid;overflow:auto;max-height:32rem;padding:.25rem;gap:var(--solaris-space-2);border-radius:var(--solaris-radius-sm);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border)}.solaris-select__checkbox-spacer{width:1.6rem;height:1.6rem}.solaris-select__nav{display:grid;align-items:center;padding-right:1rem;gap:var(--solaris-space-2);grid-template-columns:auto 1fr}.solaris-select__back{border:0;cursor:pointer;align-items:center;display:inline-flex;background:transparent;gap:var(--solaris-space-1);padding:var(--solaris-space-2);color:var(--solaris-color-text);border-radius:var(--solaris-radius-sm)}.solaris-select__back:hover{background:var(--solaris-color-surface-2)}.solaris-select__title{justify-self:end;font-size:var(--solaris-fs-12);padding-right:var(--solaris-space-1);color:var(--solaris-color-text-muted)}.solaris-select__list{gap:.25rem;display:grid}.solaris-select__group{opacity:.9;padding:.4rem .6rem;text-transform:uppercase;font-size:var(--solaris-fs-10);letter-spacing:var(--solaris-ls-md);color:var(--solaris-color-text-muted)}.solaris-select__divider{height:1px;margin:.35rem .2rem;background:color-mix(in srgb,var(--solaris-color-border) 75%,transparent)}.solaris-select__option{width:100%;border:0;display:grid;cursor:pointer;text-align:left;align-items:center;padding:.7rem .8rem;background:transparent;gap:var(--solaris-space-4);color:var(--solaris-color-text);grid-template-columns:auto 1fr auto;border-radius:var(--solaris-radius-sm)}.solaris-select__option:hover{background:var(--solaris-color-surface-2)}.solaris-select__option.is-active{background:color-mix(in srgb,var(--solaris-color-primary) 7%,var(--solaris-color-surface-2))}.solaris-select__option:disabled{opacity:.45;cursor:not-allowed}.solaris-select__option-leading{align-items:center;display:inline-flex;gap:var(--solaris-space-2)}.solaris-select__checkbox{display:grid;width:1.6rem;height:1.6rem;place-items:center;border-radius:.4rem;background:var(--solaris-color-surface);color:var(--solaris-color-primary-contrast);border:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-select__checkbox i.ph{opacity:0;line-height:1;font-size:1.2rem;transform:scale(.9);transition:opacity var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-select__checkbox.is-checked{background:var(--solaris-color-primary);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-select__checkbox.is-checked i.ph{opacity:1;transform:scale(1)}.solaris-select__avatar{width:1.8rem;height:1.8rem;object-fit:cover;border-radius:var(--solaris-radius-full)}.solaris-select__icon{opacity:.9;font-size:var(--solaris-fs-16);color:var(--solaris-color-text-muted)}.solaris-select__option-main{min-width:0;gap:.15rem;display:grid}.solaris-select__option-label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__option-desc{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-select__option-end{opacity:.9;align-items:center;display:inline-flex;gap:var(--solaris-space-2);color:var(--solaris-color-text-muted)}.solaris-select__option-end i.ph-check{color:var(--solaris-color-success)}.solaris-select__end-text{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}\n"] }]
|
|
9023
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<solaris-popover\n [open]=\"open()\"\n (openChange)=\"open.set($event)\"\n placement=\"bottom-start\"\n [offset]=\"6\"\n [matchWidth]=\"true\"\n [anchorElement]=\"matchWidthEl\"\n [matchWidthElement]=\"matchWidthEl\"\n [closeOnOutsideClick]=\"true\"\n [closeOnEscape]=\"true\"\n panelClass=\"solaris-select-popover\"\n>\n <div\n #triggerWrap\n solaris-popover-trigger\n class=\"solaris-select-trigger\"\n (click)=\"openFromTrigger()\"\n >\n @if (showToken()) {\n <span #tokenEl class=\"solaris-select-token\" aria-hidden=\"true\">\n @if (multiple && showCount()) {\n @if (selectedCountKey) {\n {{ selectedCountKey | translate: { count: selectedCount() } }}\n } @else {\n {{ selectedCountLabel() }}\n }\n } @else {\n {{ selectedText() }}\n }\n </span>\n }\n\n <input\n #triggerInput\n type=\"text\"\n class=\"solaris-select-input\"\n [disabled]=\"disabled\"\n [attr.aria-activedescendant]=\"open() ? activeOptionId() : null\"\n (click)=\"openFromTrigger()\"\n [readonly]=\"!isSearchMode()\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n aria-controls=\"{{ _id }}-listbox\"\n aria-expanded=\"false\"\n [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\n [attr.placeholder]=\"\n inputPlaceholderKey() ? (inputPlaceholderKey() | translate) : inputPlaceholderText()\n \"\n [value]=\"triggerValue()\"\n (keydown)=\"onTriggerKeydown($event)\"\n (focus)=\"openFromTrigger()\"\n (input)=\"onTriggerInput(triggerInput.value)\"\n />\n\n <button\n type=\"button\"\n class=\"solaris-select-chevron-btn\"\n [disabled]=\"disabled\"\n (click)=\"toggleOpen()\"\n [attr.aria-label]=\"'ui.solaris.aria.toggleOptions' | translate\"\n >\n <i class=\"ph ph-caret-down\" aria-hidden=\"true\"></i>\n </button>\n\n <span class=\"solaris-select-measure solaris-select-token\" #measureSlot aria-hidden=\"true\">\n {{ selectedText() }}\n </span>\n </div>\n\n <ng-template solaris-popover-panel>\n <div\n class=\"solaris-select-panel\"\n (keydown)=\"onPanelKeydown($event)\"\n [style.max-height]=\"panelMaxHeight\"\n >\n @if (canGoBack()) {\n <div class=\"solaris-select-nav\">\n <button type=\"button\" class=\"solaris-select-back\" (click)=\"goBack()\">\n <i class=\"ph ph-arrow-left\"></i>\n <span>\n @if (backKey) {\n {{ backKey | translate }}\n } @else {\n {{ backText | translate }}\n }\n </span>\n </button>\n\n <div class=\"solaris-select-title\">\n @if (currentLevel().titleKey) {\n {{ currentLevel().titleKey! | translate }}\n } @else {\n {{ currentLevel().title ?? '' }}\n }\n </div>\n </div>\n }\n\n <div\n class=\"solaris-select-list\"\n role=\"listbox\"\n [id]=\"_id + '-listbox'\"\n [attr.aria-multiselectable]=\"multiple ? 'true' : null\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n >\n @for (row of rows(); track trackRow($index, row)) {\n @if (row.kind === 'group') {\n <div class=\"solaris-select-group\">\n @if (row.labelKey) {\n {{ row.labelKey | translate }}\n } @else {\n {{ row.label }}\n }\n </div>\n }\n\n @if (row.kind === 'divider') {\n <div class=\"solaris-select-divider\" aria-hidden=\"true\"></div>\n }\n\n @if (row.kind === 'item') {\n <button\n type=\"button\"\n class=\"solaris-select-option\"\n [id]=\"row.id\"\n [disabled]=\"row.disabled\"\n [attr.aria-selected]=\"row.selected ? 'true' : 'false'\"\n [class.is-active]=\"row.optionIndex === activeIndex()\"\n [class.is-selected]=\"row.selected\"\n [class.is-navigable]=\"row.hasChildren\"\n (click)=\"onOptionClick(row.item)\"\n >\n <span class=\"solaris-select-option-leading\">\n @if (multiple) {\n @if (!row.hasChildren) {\n <span\n class=\"solaris-select-checkbox\"\n aria-hidden=\"true\"\n [class.is-checked]=\"row.selected\"\n >\n <i class=\"ph ph-check\"></i>\n </span>\n } @else {\n @if (row.item.imageUrl) {\n <img class=\"solaris-select-avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill />\n } @else if (row.item.icon) {\n <i\n class=\"solaris-select-icon\"\n [class]=\"row.item.icon\"\n aria-hidden=\"true\"\n ></i>\n } @else {\n <span class=\"solaris-select-checkbox-spacer\" aria-hidden=\"true\"></span>\n }\n }\n }\n\n @if (!multiple) {\n @if (row.item.imageUrl) {\n <img class=\"solaris-select-avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill />\n } @else if (row.item.icon) {\n <i class=\"solaris-select-icon\" [class]=\"row.item.icon\" aria-hidden=\"true\"></i>\n }\n }\n </span>\n\n <span class=\"solaris-select-option-main\">\n <span class=\"solaris-select-option-label\">\n @if (row.item.labelKey) {\n {{ row.item.labelKey | translate }}\n } @else {\n {{ row.item.label }}\n }\n </span>\n\n @if (row.item.description || row.item.descriptionKey) {\n <span class=\"solaris-select-option-desc\">\n @if (row.item.descriptionKey) {\n {{ row.item.descriptionKey | translate }}\n } @else {\n {{ row.item.description }}\n }\n </span>\n }\n </span>\n\n <span class=\"solaris-select-option-end\">\n @if (row.item.endTextKey) {\n <span class=\"solaris-select-end-text\">{{\n row.item.endTextKey | translate\n }}</span>\n } @else if (row.item.endText) {\n <span class=\"solaris-select-end-text\">{{ row.item.endText }}</span>\n }\n\n @if (!multiple && row.selected) {\n <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\n }\n\n @if (row.hasChildren) {\n <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\n }\n </span>\n </button>\n }\n }\n </div>\n </div>\n </ng-template>\n</solaris-popover>\n\r\n", styles: [":host{width:100%;display:block}.solaris-select-trigger{width:100%;min-width:0;display:flex;position:relative;align-items:center;padding-right:2.8rem;gap:var(--solaris-space-2)}.solaris-select-token{opacity:1;min-width:0;flex:0 1 auto;max-width:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--solaris-color-text)}.solaris-select-input{border:0;width:100%;min-width:0;outline:none;flex:1 1 auto;padding:1rem 0;background:transparent;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-normal)}:host([data-compact=true]) .solaris-select-input{flex:0 0 2ch;width:2ch;min-width:2ch}.solaris-select-input::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select-chevron-btn i.ph{margin-right:1.5rem;transform:rotate(0);transition:transform var(--solaris-motion-duration-md) var(--solaris-motion-ease-standard),opacity var(--solaris-motion-duration-md) var(--solaris-motion-ease-standard)}:host([data-open=true]) .solaris-select-chevron-btn i.ph{opacity:.95;transform:rotate(180deg)}:host([data-multiple=false]) .solaris-select-trigger,:host([data-multiple=false]) .solaris-select-input,:host([data-multiple=false]) .solaris-select-chevron-btn:not(:disabled){cursor:pointer}.solaris-select-display{top:0;left:0;bottom:0;display:flex;right:2.8rem;overflow:hidden;position:absolute;align-items:center;white-space:nowrap;pointer-events:none;text-overflow:ellipsis}.solaris-select-display.is-hidden{opacity:0}.solaris-select-input::placeholder,.solaris-select-placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select-input::placeholder,.solaris-select-placeholder,.solaris-select-token{font-size:var(--solaris-fs-14)}.solaris-select-chevron-btn{top:50%;right:0;border:0;display:grid;width:2.8rem;opacity:.85;height:3.6rem;cursor:pointer;position:absolute;place-items:center;background:transparent;transform:translateY(-50%);color:var(--solaris-color-text-muted)}.solaris-select-chevron-btn:disabled{opacity:.5;cursor:not-allowed}.solaris-select-measure{top:-9999px;left:-9999px;position:absolute;visibility:hidden;pointer-events:none;max-width:none!important;overflow:visible!important;width:max-content!important;white-space:nowrap!important;text-overflow:clip!important;display:inline-block!important}.solaris-select-popover{padding:var(--solaris-space-2)}.solaris-select-panel{display:grid;overflow:auto;max-height:32rem;padding:.25rem;gap:var(--solaris-space-2);border-radius:var(--solaris-radius-sm);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border)}.solaris-select-checkbox-spacer{width:1.6rem;height:1.6rem}.solaris-select-nav{display:grid;align-items:center;padding-right:1rem;gap:var(--solaris-space-2);grid-template-columns:auto 1fr}.solaris-select-back{border:0;cursor:pointer;align-items:center;display:inline-flex;background:transparent;gap:var(--solaris-space-1);padding:var(--solaris-space-2);color:var(--solaris-color-text);border-radius:var(--solaris-radius-sm)}.solaris-select-back:hover{background:var(--solaris-color-surface-2)}.solaris-select-title{justify-self:end;font-size:var(--solaris-fs-12);padding-right:var(--solaris-space-1);color:var(--solaris-color-text-muted)}.solaris-select-list{gap:.25rem;display:grid}.solaris-select-group{opacity:.9;padding:.4rem .6rem;text-transform:uppercase;font-size:var(--solaris-fs-10);letter-spacing:var(--solaris-ls-md);color:var(--solaris-color-text-muted)}.solaris-select-divider{height:1px;margin:.35rem .2rem;background:color-mix(in srgb,var(--solaris-color-border) 75%,transparent)}.solaris-select-option{width:100%;border:0;display:grid;cursor:pointer;text-align:left;align-items:center;padding:.7rem .8rem;background:transparent;gap:var(--solaris-space-4);color:var(--solaris-color-text);grid-template-columns:auto 1fr auto;border-radius:var(--solaris-radius-sm)}.solaris-select-option:hover{background:var(--solaris-color-surface-2)}.solaris-select-option.is-active{background:color-mix(in srgb,var(--solaris-color-primary) 7%,var(--solaris-color-surface-2))}.solaris-select-option:disabled{opacity:.45;cursor:not-allowed}.solaris-select-option-leading{align-items:center;display:inline-flex;gap:var(--solaris-space-2)}.solaris-select-checkbox{display:grid;width:1.6rem;height:1.6rem;place-items:center;border-radius:.4rem;background:var(--solaris-color-surface);color:var(--solaris-color-primary-contrast);border:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-select-checkbox i.ph{opacity:0;line-height:1;font-size:1.2rem;transform:scale(.9);transition:opacity var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard),transform var(--solaris-motion-duration-fast) var(--solaris-motion-ease-standard)}.solaris-select-checkbox.is-checked{background:var(--solaris-color-primary);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-select-checkbox.is-checked i.ph{opacity:1;transform:scale(1)}.solaris-select-avatar{width:1.8rem;height:1.8rem;object-fit:cover;border-radius:var(--solaris-radius-full)}.solaris-select-icon{opacity:.9;font-size:var(--solaris-fs-16);color:var(--solaris-color-text-muted)}.solaris-select-option-main{min-width:0;gap:.15rem;display:grid}.solaris-select-option-label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select-option-desc{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-select-option-end{opacity:.9;align-items:center;display:inline-flex;gap:var(--solaris-space-2);color:var(--solaris-color-text-muted)}.solaris-select-option-end i.ph-check{color:var(--solaris-color-success)}.solaris-select-end-text{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}\n"] }]
|
|
9023
9024
|
}], ctorParameters: () => [], propDecorators: { field: [{
|
|
9024
9025
|
type: Optional
|
|
9025
9026
|
}], tokenEl: [{
|