@educarehq/solaris-components 0.3.9 → 0.4.1
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, ElementRef, Renderer2, Directive, TemplateRef, Injectable, ViewContainerRef, DestroyRef, Input, ContentChild, ViewEncapsulation, Component, EventEmitter, Output, HostBinding, ChangeDetectionStrategy, ApplicationRef, signal, computed, effect,
|
|
2
|
+
import { inject, ElementRef, Renderer2, Directive, TemplateRef, Injectable, ViewContainerRef, DestroyRef, Input, ContentChild, ViewEncapsulation, Component, EventEmitter, Output, HostBinding, ChangeDetectionStrategy, ViewChildren, ContentChildren, ApplicationRef, signal, computed, effect, HostListener, Optional, booleanAttribute, InjectionToken, makeEnvironmentProviders, PLATFORM_ID, input, viewChild, numberAttribute, afterNextRender, ViewChild, output, forwardRef, Host, Injector } from '@angular/core';
|
|
3
3
|
import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
|
|
4
4
|
import { Overlay } from '@angular/cdk/overlay';
|
|
5
5
|
import { TemplatePortal } from '@angular/cdk/portal';
|
|
@@ -7,9 +7,10 @@ import { fromEvent, merge } from 'rxjs';
|
|
|
7
7
|
import { filter } from 'rxjs/operators';
|
|
8
8
|
import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
|
|
9
9
|
import { RouterLink } from '@angular/router';
|
|
10
|
-
import
|
|
11
|
-
import {
|
|
12
|
-
import
|
|
10
|
+
import * as i1 from '@angular/common';
|
|
11
|
+
import { NgClass, NgTemplateOutlet, CommonModule, NgStyle, isPlatformBrowser, DOCUMENT, NgOptimizedImage } from '@angular/common';
|
|
12
|
+
import { SolarisTranslationPipe, SOLARIS_TRANSLATION, SOLARIS_TRANSLATION_CONFIGURATION } from '@educarehq/solaris-services';
|
|
13
|
+
import * as i1$1 from '@angular/forms';
|
|
13
14
|
import { NG_VALUE_ACCESSOR, FormsModule, NgForm, FormGroupDirective, NgControl, NG_VALIDATORS } from '@angular/forms';
|
|
14
15
|
import { getCountries, getCountryCallingCode, parsePhoneNumberFromString, AsYouType } from 'libphonenumber-js';
|
|
15
16
|
import intlTelInput from 'intl-tel-input';
|
|
@@ -453,6 +454,504 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
453
454
|
type: Output
|
|
454
455
|
}] } });
|
|
455
456
|
|
|
457
|
+
class SolarisStepperItem {
|
|
458
|
+
stepId;
|
|
459
|
+
label;
|
|
460
|
+
labelKey;
|
|
461
|
+
title;
|
|
462
|
+
titleKey;
|
|
463
|
+
description;
|
|
464
|
+
descriptionKey;
|
|
465
|
+
icon;
|
|
466
|
+
optional = false;
|
|
467
|
+
phase = null;
|
|
468
|
+
status = 'default';
|
|
469
|
+
badgeText;
|
|
470
|
+
badgeTextKey;
|
|
471
|
+
badgeColor;
|
|
472
|
+
badgeVariant = 'subtle';
|
|
473
|
+
badgeSize = 'sm';
|
|
474
|
+
badgePill = true;
|
|
475
|
+
active = false;
|
|
476
|
+
index = 0;
|
|
477
|
+
headerId = '';
|
|
478
|
+
panelId = '';
|
|
479
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisStepperItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
480
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", 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", badgeVariant: "badgeVariant", badgeSize: "badgeSize", badgePill: "badgePill" }, ngImport: i0, template: "<section class=\"solaris-stepper-item__panel\" role=\"tabpanel\" [id]=\"panelId\"\r\n [attr.aria-labelledby]=\"headerId\" [attr.aria-hidden]=\"!active\"\r\n [attr.hidden]=\"active ? null : ''\">\r\n <ng-content></ng-content>\r\n</section>\r\n", styles: [":host{display:block;min-width:0}.solaris-stepper-item__panel{min-width:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
481
|
+
}
|
|
482
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisStepperItem, decorators: [{
|
|
483
|
+
type: Component,
|
|
484
|
+
args: [{ selector: 'solaris-stepper-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"solaris-stepper-item__panel\" role=\"tabpanel\" [id]=\"panelId\"\r\n [attr.aria-labelledby]=\"headerId\" [attr.aria-hidden]=\"!active\"\r\n [attr.hidden]=\"active ? null : ''\">\r\n <ng-content></ng-content>\r\n</section>\r\n", styles: [":host{display:block;min-width:0}.solaris-stepper-item__panel{min-width:0}\n"] }]
|
|
485
|
+
}], propDecorators: { stepId: [{
|
|
486
|
+
type: Input
|
|
487
|
+
}], label: [{
|
|
488
|
+
type: Input
|
|
489
|
+
}], labelKey: [{
|
|
490
|
+
type: Input
|
|
491
|
+
}], title: [{
|
|
492
|
+
type: Input
|
|
493
|
+
}], titleKey: [{
|
|
494
|
+
type: Input
|
|
495
|
+
}], description: [{
|
|
496
|
+
type: Input
|
|
497
|
+
}], descriptionKey: [{
|
|
498
|
+
type: Input
|
|
499
|
+
}], icon: [{
|
|
500
|
+
type: Input
|
|
501
|
+
}], optional: [{
|
|
502
|
+
type: Input
|
|
503
|
+
}], phase: [{
|
|
504
|
+
type: Input
|
|
505
|
+
}], status: [{
|
|
506
|
+
type: Input
|
|
507
|
+
}], badgeText: [{
|
|
508
|
+
type: Input
|
|
509
|
+
}], badgeTextKey: [{
|
|
510
|
+
type: Input
|
|
511
|
+
}], badgeColor: [{
|
|
512
|
+
type: Input
|
|
513
|
+
}], badgeVariant: [{
|
|
514
|
+
type: Input
|
|
515
|
+
}], badgeSize: [{
|
|
516
|
+
type: Input
|
|
517
|
+
}], badgePill: [{
|
|
518
|
+
type: Input
|
|
519
|
+
}] } });
|
|
520
|
+
|
|
521
|
+
class SolarisBadge {
|
|
522
|
+
pill = false;
|
|
523
|
+
customTextColor;
|
|
524
|
+
interactive = false;
|
|
525
|
+
size = 'md';
|
|
526
|
+
variant = 'subtle';
|
|
527
|
+
color = 'surface';
|
|
528
|
+
ariaHidden = null;
|
|
529
|
+
hostClass = 'solaris-badge-host';
|
|
530
|
+
presetColors = new Set([
|
|
531
|
+
'primary', 'success', 'warning', 'error', 'info', 'surface',
|
|
532
|
+
]);
|
|
533
|
+
get colorClass() {
|
|
534
|
+
return this.isCustomColor ? 'color-custom' : `color-${this.color}`;
|
|
535
|
+
}
|
|
536
|
+
get isCustomColor() {
|
|
537
|
+
return !this.presetColors.has(this.color);
|
|
538
|
+
}
|
|
539
|
+
get customColorValue() {
|
|
540
|
+
return this.isCustomColor ? String(this.color) : null;
|
|
541
|
+
}
|
|
542
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
543
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: SolarisBadge, isStandalone: true, selector: "solaris-badge", inputs: { pill: "pill", customTextColor: "customTextColor", interactive: "interactive", size: "size", variant: "variant", color: "color", ariaHidden: ["aria-hidden", "ariaHidden"] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<span class=\"solaris-badge\" [attr.aria-hidden]=\"ariaHidden\"\r\n [ngClass]=\"[ 'variant-' + variant, colorClass,\r\n 'size-' + size, pill ? 'is-pill' : '',\r\n interactive ? 'is-interactive' : '' ]\"\r\n [style.--solaris-badge-custom]=\"customColorValue\"\r\n [style.--solaris-badge-custom-fg]=\"customTextColor\">\r\n <ng-content></ng-content>\r\n</span>\r\n", styles: [":host.solaris-badge-host{display:inline-flex}.solaris-badge{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-radius: var(--solaris-radius-full);--solaris-badge-fg-solid: var(--solaris-badge-fg);line-height:1;font-weight:600;-webkit-user-select:none;user-select:none;white-space:nowrap;align-items:center;display:inline-flex;gap:var(--solaris-space-2);border:1px solid transparent;letter-spacing:var(--solaris-ls-sm);border-radius:var(--solaris-badge-radius)}.solaris-badge.size-sm{padding:.3rem .6rem;font-size:var(--solaris-fs-10)}.solaris-badge.size-md{padding:.4rem .8rem;font-size:var(--solaris-fs-12)}.solaris-badge.size-lg{padding:.5rem 1rem;font-size:var(--solaris-fs-14)}.solaris-badge.is-pill{--solaris-badge-radius: var(--solaris-radius-full)}.solaris-badge.is-interactive{cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}.solaris-badge.is-interactive:hover{box-shadow:var(--solaris-shadow-xs)}.solaris-badge.color-surface{--_base: var(--solaris-color-surface-2);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 75%, black))}.solaris-badge.color-primary{--_base: var(--solaris-color-primary);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 82%, black))}.solaris-badge.color-success{--_base: var(--solaris-color-success);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 75%, black))}.solaris-badge.color-warning{--_base: var(--solaris-color-warning);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 75%, black))}.solaris-badge.color-error{--_base: var(--solaris-color-error);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 82%, black))}.solaris-badge.color-info{--_base: var(--solaris-color-info);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 82%, black))}.solaris-badge.color-custom{--_base: var(--solaris-badge-custom, var(--solaris-color-surface-2));--solaris-badge-fg-solid: var(--solaris-badge-custom-fg, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-fg: var(--solaris-badge-custom-fg, var(--solaris-color-text));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 82%, black))}.solaris-badge.variant-solid{color:var(--solaris-badge-fg-solid);background:var(--solaris-badge-bg-solid, var(--solaris-badge-bg));border-color:var(--solaris-badge-border-solid, var(--solaris-badge-border))}.solaris-badge.variant-subtle{color:var(--solaris-badge-fg);background:var(--solaris-badge-bg);border-color:var(--solaris-badge-border)}.solaris-badge.variant-outline{border-color:var(--solaris-badge-border);color:color-mix(in srgb,var(--solaris-badge-border) 30%,white);background:color-mix(in srgb,var(--solaris-badge-border) 20%,transparent)}.solaris-badge.variant-solid.color-surface{color:var(--solaris-color-text);border-color:var(--solaris-color-border);background:var(--solaris-color-surface-2)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
544
|
+
}
|
|
545
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisBadge, decorators: [{
|
|
546
|
+
type: Component,
|
|
547
|
+
args: [{ selector: 'solaris-badge', standalone: true, imports: [
|
|
548
|
+
NgClass
|
|
549
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"solaris-badge\" [attr.aria-hidden]=\"ariaHidden\"\r\n [ngClass]=\"[ 'variant-' + variant, colorClass,\r\n 'size-' + size, pill ? 'is-pill' : '',\r\n interactive ? 'is-interactive' : '' ]\"\r\n [style.--solaris-badge-custom]=\"customColorValue\"\r\n [style.--solaris-badge-custom-fg]=\"customTextColor\">\r\n <ng-content></ng-content>\r\n</span>\r\n", styles: [":host.solaris-badge-host{display:inline-flex}.solaris-badge{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-radius: var(--solaris-radius-full);--solaris-badge-fg-solid: var(--solaris-badge-fg);line-height:1;font-weight:600;-webkit-user-select:none;user-select:none;white-space:nowrap;align-items:center;display:inline-flex;gap:var(--solaris-space-2);border:1px solid transparent;letter-spacing:var(--solaris-ls-sm);border-radius:var(--solaris-badge-radius)}.solaris-badge.size-sm{padding:.3rem .6rem;font-size:var(--solaris-fs-10)}.solaris-badge.size-md{padding:.4rem .8rem;font-size:var(--solaris-fs-12)}.solaris-badge.size-lg{padding:.5rem 1rem;font-size:var(--solaris-fs-14)}.solaris-badge.is-pill{--solaris-badge-radius: var(--solaris-radius-full)}.solaris-badge.is-interactive{cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}.solaris-badge.is-interactive:hover{box-shadow:var(--solaris-shadow-xs)}.solaris-badge.color-surface{--_base: var(--solaris-color-surface-2);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 75%, black))}.solaris-badge.color-primary{--_base: var(--solaris-color-primary);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 82%, black))}.solaris-badge.color-success{--_base: var(--solaris-color-success);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 75%, black))}.solaris-badge.color-warning{--_base: var(--solaris-color-warning);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 75%, black))}.solaris-badge.color-error{--_base: var(--solaris-color-error);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 82%, black))}.solaris-badge.color-info{--_base: var(--solaris-color-info);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 82%, black))}.solaris-badge.color-custom{--_base: var(--solaris-badge-custom, var(--solaris-color-surface-2));--solaris-badge-fg-solid: var(--solaris-badge-custom-fg, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-fg: var(--solaris-badge-custom-fg, var(--solaris-color-text));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 82%, black))}.solaris-badge.variant-solid{color:var(--solaris-badge-fg-solid);background:var(--solaris-badge-bg-solid, var(--solaris-badge-bg));border-color:var(--solaris-badge-border-solid, var(--solaris-badge-border))}.solaris-badge.variant-subtle{color:var(--solaris-badge-fg);background:var(--solaris-badge-bg);border-color:var(--solaris-badge-border)}.solaris-badge.variant-outline{border-color:var(--solaris-badge-border);color:color-mix(in srgb,var(--solaris-badge-border) 30%,white);background:color-mix(in srgb,var(--solaris-badge-border) 20%,transparent)}.solaris-badge.variant-solid.color-surface{color:var(--solaris-color-text);border-color:var(--solaris-color-border);background:var(--solaris-color-surface-2)}\n"] }]
|
|
550
|
+
}], propDecorators: { pill: [{
|
|
551
|
+
type: Input
|
|
552
|
+
}], customTextColor: [{
|
|
553
|
+
type: Input
|
|
554
|
+
}], interactive: [{
|
|
555
|
+
type: Input
|
|
556
|
+
}], size: [{
|
|
557
|
+
type: Input
|
|
558
|
+
}], variant: [{
|
|
559
|
+
type: Input
|
|
560
|
+
}], color: [{
|
|
561
|
+
type: Input
|
|
562
|
+
}], ariaHidden: [{
|
|
563
|
+
type: Input,
|
|
564
|
+
args: [{ alias: 'aria-hidden' }]
|
|
565
|
+
}], hostClass: [{
|
|
566
|
+
type: HostBinding,
|
|
567
|
+
args: ['class']
|
|
568
|
+
}] } });
|
|
569
|
+
|
|
570
|
+
class SolarisStepper {
|
|
571
|
+
changeDetectorRef;
|
|
572
|
+
destroyRef = inject(DestroyRef);
|
|
573
|
+
static nextId = 0;
|
|
574
|
+
orientation = 'horizontal';
|
|
575
|
+
appearance = 'default';
|
|
576
|
+
linear = true;
|
|
577
|
+
interactive = true;
|
|
578
|
+
activeIndex = null;
|
|
579
|
+
defaultActiveIndex = 0;
|
|
580
|
+
allowBackNavigation = true;
|
|
581
|
+
allowFutureNavigation = false;
|
|
582
|
+
allowSkip = false;
|
|
583
|
+
renderPanels = true;
|
|
584
|
+
showStateBadges = false;
|
|
585
|
+
activeIndexChange = new EventEmitter();
|
|
586
|
+
nextChange = new EventEmitter();
|
|
587
|
+
previousChange = new EventEmitter();
|
|
588
|
+
stepChange = new EventEmitter();
|
|
589
|
+
itemsQuery;
|
|
590
|
+
stepButtons;
|
|
591
|
+
items = [];
|
|
592
|
+
uid = SolarisStepper.nextId++;
|
|
593
|
+
internalActiveIndex = 0;
|
|
594
|
+
get currentIndex() {
|
|
595
|
+
return this.normalizeIndex(this.isControlled() ? this.activeIndex ?? 0 : this.internalActiveIndex);
|
|
596
|
+
}
|
|
597
|
+
constructor(changeDetectorRef) {
|
|
598
|
+
this.changeDetectorRef = changeDetectorRef;
|
|
599
|
+
}
|
|
600
|
+
ngAfterContentInit() {
|
|
601
|
+
this.internalActiveIndex = this.defaultActiveIndex;
|
|
602
|
+
this.syncItems();
|
|
603
|
+
this.itemsQuery?.changes
|
|
604
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
605
|
+
.subscribe(() => {
|
|
606
|
+
this.syncItems();
|
|
607
|
+
});
|
|
608
|
+
}
|
|
609
|
+
ngOnChanges(changes) {
|
|
610
|
+
if (changes['defaultActiveIndex'] && !this.isControlled()) {
|
|
611
|
+
this.internalActiveIndex = this.defaultActiveIndex;
|
|
612
|
+
}
|
|
613
|
+
if (changes['activeIndex'] ||
|
|
614
|
+
changes['orientation'] ||
|
|
615
|
+
changes['appearance'] ||
|
|
616
|
+
changes['linear']) {
|
|
617
|
+
this.syncItems();
|
|
618
|
+
}
|
|
619
|
+
}
|
|
620
|
+
next() {
|
|
621
|
+
const target = this.findAdjacentNavigableIndex(this.currentIndex, 1);
|
|
622
|
+
if (target === null)
|
|
623
|
+
return;
|
|
624
|
+
this.commitIndexChange(target, 'next');
|
|
625
|
+
this.nextChange.emit(target);
|
|
626
|
+
}
|
|
627
|
+
previous() {
|
|
628
|
+
const target = this.findAdjacentNavigableIndex(this.currentIndex, -1);
|
|
629
|
+
if (target === null)
|
|
630
|
+
return;
|
|
631
|
+
this.commitIndexChange(target, 'previous');
|
|
632
|
+
this.previousChange.emit(target);
|
|
633
|
+
}
|
|
634
|
+
setActiveStep(index) {
|
|
635
|
+
if (!this.isProgrammaticallyNavigable(index))
|
|
636
|
+
return;
|
|
637
|
+
this.commitIndexChange(index, 'programmatic');
|
|
638
|
+
}
|
|
639
|
+
onStepHeaderClick(index) {
|
|
640
|
+
if (!this.canActivateByHeaderClick(index))
|
|
641
|
+
return;
|
|
642
|
+
this.commitIndexChange(index, 'header');
|
|
643
|
+
}
|
|
644
|
+
onStepKeydown(event, index) {
|
|
645
|
+
const isHorizontal = this.orientation === 'horizontal';
|
|
646
|
+
switch (event.key) {
|
|
647
|
+
case 'ArrowRight':
|
|
648
|
+
if (!isHorizontal)
|
|
649
|
+
return;
|
|
650
|
+
event.preventDefault();
|
|
651
|
+
this.focusRelativeButton(index, 1);
|
|
652
|
+
return;
|
|
653
|
+
case 'ArrowLeft':
|
|
654
|
+
if (!isHorizontal)
|
|
655
|
+
return;
|
|
656
|
+
event.preventDefault();
|
|
657
|
+
this.focusRelativeButton(index, -1);
|
|
658
|
+
return;
|
|
659
|
+
case 'ArrowDown':
|
|
660
|
+
if (isHorizontal)
|
|
661
|
+
return;
|
|
662
|
+
event.preventDefault();
|
|
663
|
+
this.focusRelativeButton(index, 1);
|
|
664
|
+
return;
|
|
665
|
+
case 'ArrowUp':
|
|
666
|
+
if (isHorizontal)
|
|
667
|
+
return;
|
|
668
|
+
event.preventDefault();
|
|
669
|
+
this.focusRelativeButton(index, -1);
|
|
670
|
+
return;
|
|
671
|
+
case 'Home':
|
|
672
|
+
event.preventDefault();
|
|
673
|
+
this.focusButton(0);
|
|
674
|
+
return;
|
|
675
|
+
case 'End':
|
|
676
|
+
event.preventDefault();
|
|
677
|
+
this.focusButton(this.items.length - 1);
|
|
678
|
+
return;
|
|
679
|
+
default:
|
|
680
|
+
return;
|
|
681
|
+
}
|
|
682
|
+
}
|
|
683
|
+
isCurrent(index) {
|
|
684
|
+
return index === this.currentIndex;
|
|
685
|
+
}
|
|
686
|
+
isCompleted(index) {
|
|
687
|
+
return this.resolvePhase(this.items[index], index) === 'completed';
|
|
688
|
+
}
|
|
689
|
+
isPending(index) {
|
|
690
|
+
return this.resolvePhase(this.items[index], index) === 'pending';
|
|
691
|
+
}
|
|
692
|
+
resolvePhase(item, index) {
|
|
693
|
+
if (item.phase)
|
|
694
|
+
return item.phase;
|
|
695
|
+
if (index < this.currentIndex)
|
|
696
|
+
return 'completed';
|
|
697
|
+
if (index === this.currentIndex)
|
|
698
|
+
return 'current';
|
|
699
|
+
return 'pending';
|
|
700
|
+
}
|
|
701
|
+
getStepClasses(item, index) {
|
|
702
|
+
return {
|
|
703
|
+
'is-current': this.isCurrent(index),
|
|
704
|
+
'is-completed': this.isCompleted(index),
|
|
705
|
+
'is-pending': this.isPending(index),
|
|
706
|
+
'is-warning': item.status === 'warning',
|
|
707
|
+
'is-error': item.status === 'error',
|
|
708
|
+
'is-disabled': item.status === 'disabled',
|
|
709
|
+
'is-locked': item.status === 'locked',
|
|
710
|
+
'is-clickable': this.canActivateByHeaderClick(index),
|
|
711
|
+
};
|
|
712
|
+
}
|
|
713
|
+
getConnectorClasses(index) {
|
|
714
|
+
return {
|
|
715
|
+
'is-completed': index < this.currentIndex,
|
|
716
|
+
'is-current': index === this.currentIndex,
|
|
717
|
+
};
|
|
718
|
+
}
|
|
719
|
+
getMarkerIcon(item, index) {
|
|
720
|
+
if (this.appearance === 'compact')
|
|
721
|
+
return null;
|
|
722
|
+
if (item.status === 'locked')
|
|
723
|
+
return 'ph-lock';
|
|
724
|
+
if (item.status === 'error')
|
|
725
|
+
return 'ph-x-circle';
|
|
726
|
+
if (item.status === 'warning')
|
|
727
|
+
return 'ph-warning-circle';
|
|
728
|
+
if (this.isCompleted(index))
|
|
729
|
+
return 'ph-check';
|
|
730
|
+
return item.icon ?? null;
|
|
731
|
+
}
|
|
732
|
+
getMarkerText(item, index) {
|
|
733
|
+
if (this.appearance === 'compact') {
|
|
734
|
+
return `${index + 1}.`;
|
|
735
|
+
}
|
|
736
|
+
return this.getMarkerIcon(item, index) ? null : String(index + 1);
|
|
737
|
+
}
|
|
738
|
+
hasBadge(item, index) {
|
|
739
|
+
if (!this.showStateBadges || this.appearance === 'compact')
|
|
740
|
+
return false;
|
|
741
|
+
return Boolean(item.badgeText ||
|
|
742
|
+
item.badgeTextKey ||
|
|
743
|
+
this.getAutoBadgeTranslationKey(item, index));
|
|
744
|
+
}
|
|
745
|
+
getResolvedLabel(item, index) {
|
|
746
|
+
if (item.labelKey || item.label)
|
|
747
|
+
return null;
|
|
748
|
+
return `${index + 1}`;
|
|
749
|
+
}
|
|
750
|
+
getResolvedBadgeColor(item, index) {
|
|
751
|
+
if (item.badgeColor)
|
|
752
|
+
return item.badgeColor;
|
|
753
|
+
if (item.status === 'error')
|
|
754
|
+
return 'error';
|
|
755
|
+
if (item.status === 'warning')
|
|
756
|
+
return 'warning';
|
|
757
|
+
if (item.status === 'locked' || item.status === 'disabled')
|
|
758
|
+
return 'surface';
|
|
759
|
+
const phase = this.resolvePhase(item, index);
|
|
760
|
+
if (phase === 'completed')
|
|
761
|
+
return 'success';
|
|
762
|
+
if (phase === 'current')
|
|
763
|
+
return 'primary';
|
|
764
|
+
return 'surface';
|
|
765
|
+
}
|
|
766
|
+
getResolvedBadgeVariant(item) {
|
|
767
|
+
return item.badgeVariant;
|
|
768
|
+
}
|
|
769
|
+
getAutoBadgeTranslationKey(item, index) {
|
|
770
|
+
if (item.status === 'error')
|
|
771
|
+
return 'ui.solaris.stepper.error';
|
|
772
|
+
if (item.status === 'warning')
|
|
773
|
+
return 'ui.solaris.stepper.warning';
|
|
774
|
+
if (item.status === 'locked')
|
|
775
|
+
return 'ui.solaris.stepper.locked';
|
|
776
|
+
if (item.status === 'disabled')
|
|
777
|
+
return 'ui.solaris.stepper.disabled';
|
|
778
|
+
const phase = this.resolvePhase(item, index);
|
|
779
|
+
if (phase === 'completed')
|
|
780
|
+
return 'ui.solaris.stepper.completed';
|
|
781
|
+
if (phase === 'current')
|
|
782
|
+
return 'ui.solaris.stepper.inProgress';
|
|
783
|
+
return 'ui.solaris.stepper.pending';
|
|
784
|
+
}
|
|
785
|
+
getTitle(item) {
|
|
786
|
+
return item.title ?? '';
|
|
787
|
+
}
|
|
788
|
+
getDescription(item) {
|
|
789
|
+
return item.description ?? '';
|
|
790
|
+
}
|
|
791
|
+
getStepAriaLabel(item, index) {
|
|
792
|
+
const phase = this.resolvePhase(item, index);
|
|
793
|
+
const title = item.title ?? item.titleKey ?? `${index + 1}`;
|
|
794
|
+
if (phase === 'completed') {
|
|
795
|
+
return `${title} completed`;
|
|
796
|
+
}
|
|
797
|
+
if (phase === 'current') {
|
|
798
|
+
return `${title} current step`;
|
|
799
|
+
}
|
|
800
|
+
if (item.status === 'locked') {
|
|
801
|
+
return `${title} locked`;
|
|
802
|
+
}
|
|
803
|
+
if (item.status === 'disabled') {
|
|
804
|
+
return `${title} disabled`;
|
|
805
|
+
}
|
|
806
|
+
return title;
|
|
807
|
+
}
|
|
808
|
+
trackByIndex(index) {
|
|
809
|
+
return index;
|
|
810
|
+
}
|
|
811
|
+
syncItems() {
|
|
812
|
+
this.items = this.itemsQuery?.toArray() ?? [];
|
|
813
|
+
const currentIndex = this.normalizeIndex(this.isControlled() ? this.activeIndex ?? 0 : this.internalActiveIndex);
|
|
814
|
+
this.items.forEach((item, index) => {
|
|
815
|
+
item.index = index;
|
|
816
|
+
item.headerId = `solaris-stepper-${this.uid}-tab-${index}`;
|
|
817
|
+
item.panelId = `solaris-stepper-${this.uid}-panel-${index}`;
|
|
818
|
+
item.active = index === currentIndex;
|
|
819
|
+
});
|
|
820
|
+
this.changeDetectorRef.markForCheck();
|
|
821
|
+
}
|
|
822
|
+
commitIndexChange(index, reason) {
|
|
823
|
+
const normalized = this.normalizeIndex(index);
|
|
824
|
+
if (normalized === this.currentIndex)
|
|
825
|
+
return;
|
|
826
|
+
const previousIndex = this.currentIndex;
|
|
827
|
+
if (!this.isControlled()) {
|
|
828
|
+
this.internalActiveIndex = normalized;
|
|
829
|
+
this.syncItems();
|
|
830
|
+
}
|
|
831
|
+
this.activeIndexChange.emit(normalized);
|
|
832
|
+
this.stepChange.emit({
|
|
833
|
+
previousIndex,
|
|
834
|
+
currentIndex: normalized,
|
|
835
|
+
reason,
|
|
836
|
+
});
|
|
837
|
+
}
|
|
838
|
+
canActivateByHeaderClick(index) {
|
|
839
|
+
if (!this.interactive)
|
|
840
|
+
return false;
|
|
841
|
+
if (!this.isInBounds(index))
|
|
842
|
+
return false;
|
|
843
|
+
const item = this.items[index];
|
|
844
|
+
if (!item || this.isDisabledLike(item))
|
|
845
|
+
return false;
|
|
846
|
+
if (index === this.currentIndex)
|
|
847
|
+
return true;
|
|
848
|
+
if (index < this.currentIndex)
|
|
849
|
+
return this.allowBackNavigation;
|
|
850
|
+
if (!this.linear)
|
|
851
|
+
return true;
|
|
852
|
+
if (!this.allowFutureNavigation)
|
|
853
|
+
return false;
|
|
854
|
+
if (!this.allowSkip)
|
|
855
|
+
return index === this.currentIndex + 1;
|
|
856
|
+
return true;
|
|
857
|
+
}
|
|
858
|
+
isProgrammaticallyNavigable(index) {
|
|
859
|
+
if (!this.isInBounds(index))
|
|
860
|
+
return false;
|
|
861
|
+
const item = this.items[index];
|
|
862
|
+
if (!item)
|
|
863
|
+
return false;
|
|
864
|
+
return !this.isDisabledLike(item);
|
|
865
|
+
}
|
|
866
|
+
findAdjacentNavigableIndex(start, direction) {
|
|
867
|
+
let cursor = start + direction;
|
|
868
|
+
while (this.isInBounds(cursor)) {
|
|
869
|
+
const item = this.items[cursor];
|
|
870
|
+
if (item && !this.isDisabledLike(item)) {
|
|
871
|
+
return cursor;
|
|
872
|
+
}
|
|
873
|
+
cursor += direction;
|
|
874
|
+
}
|
|
875
|
+
return null;
|
|
876
|
+
}
|
|
877
|
+
isDisabledLike(item) {
|
|
878
|
+
return item.status === 'disabled' || item.status === 'locked';
|
|
879
|
+
}
|
|
880
|
+
isControlled() {
|
|
881
|
+
return this.activeIndex !== null && this.activeIndex !== undefined;
|
|
882
|
+
}
|
|
883
|
+
isInBounds(index) {
|
|
884
|
+
return index >= 0 && index < this.items.length;
|
|
885
|
+
}
|
|
886
|
+
normalizeIndex(index) {
|
|
887
|
+
if (this.items.length === 0)
|
|
888
|
+
return 0;
|
|
889
|
+
return Math.min(Math.max(index, 0), this.items.length - 1);
|
|
890
|
+
}
|
|
891
|
+
focusRelativeButton(index, direction) {
|
|
892
|
+
let cursor = index + direction;
|
|
893
|
+
while (cursor >= 0 && cursor < this.items.length) {
|
|
894
|
+
if (!this.isDisabledLike(this.items[cursor])) {
|
|
895
|
+
this.focusButton(cursor);
|
|
896
|
+
return;
|
|
897
|
+
}
|
|
898
|
+
cursor += direction;
|
|
899
|
+
}
|
|
900
|
+
}
|
|
901
|
+
focusButton(index) {
|
|
902
|
+
const button = this.stepButtons?.get(index)?.nativeElement;
|
|
903
|
+
button?.focus();
|
|
904
|
+
}
|
|
905
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisStepper, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
906
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", 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]=\"[\r\n 'orientation-' + orientation,\r\n 'appearance-' + appearance\r\n ]\">\r\n\r\n <div class=\"solaris-stepper__rail\" role=\"tablist\" [attr.aria-orientation]=\"orientation\">\r\n\r\n @for (item of items; track trackByIndex($index); let i = $index; let last = $last) {\r\n <div class=\"solaris-stepper__node\">\r\n <button #stepButton type=\"button\" role=\"tab\" class=\"solaris-stepper__step\"\r\n [id]=\"item.headerId\" [attr.aria-controls]=\"item.panelId\" [attr.aria-selected]=\"isCurrent(i)\"\r\n [attr.aria-current]=\"isCurrent(i) ? 'step' : null\"\r\n [attr.aria-disabled]=\"item.status === 'disabled' || item.status === 'locked'\"\r\n [attr.tabindex]=\"isCurrent(i) ? 0 : -1\" [ngClass]=\"getStepClasses(item, i)\"\r\n (click)=\"onStepHeaderClick(i)\" (keydown)=\"onStepKeydown($event, i)\">\r\n\r\n <span class=\"solaris-stepper__marker\" [ngClass]=\"getStepClasses(item, i)\">\r\n @if (getMarkerIcon(item, i)) {\r\n <i class=\"ph\" [ngClass]=\"getMarkerIcon(item, i)\" aria-hidden=\"true\"></i>\r\n }\r\n\r\n @if (getMarkerText(item, i)) {\r\n <span>{{ getMarkerText(item, i) }}</span>\r\n }\r\n </span>\r\n\r\n <span class=\"solaris-stepper__meta\">\r\n <span class=\"solaris-stepper__label\">\r\n @if (item.labelKey) {\r\n {{ item.labelKey | translate }}\r\n } @else if (item.label) {\r\n {{ item.label }}\r\n } @else {\r\n {{ 'ui.solaris.stepper.step' | translate }} {{ i + 1 }}\r\n }\r\n </span>\r\n\r\n <span class=\"solaris-stepper__title\">\r\n @if (item.titleKey) {\r\n {{ item.titleKey | translate }}\r\n } @else {\r\n {{ item.title }}\r\n }\r\n </span>\r\n\r\n @if (item.descriptionKey || item.description) {\r\n <span class=\"solaris-stepper__description\">\r\n @if (item.descriptionKey) {\r\n {{ item.descriptionKey | translate }}\r\n } @else {\r\n {{ item.description }}\r\n }\r\n </span>\r\n }\r\n\r\n @if (item.optional) {\r\n <span class=\"solaris-stepper__optional\">\r\n {{ 'ui.solaris.stepper.optional' | translate }}\r\n </span>\r\n }\r\n </span>\r\n\r\n @if (hasBadge(item, i)) {\r\n <solaris-badge class=\"solaris-stepper__badge\" [pill]=\"item.badgePill\" [size]=\"item.badgeSize\"\r\n [variant]=\"getResolvedBadgeVariant(item)\" [color]=\"getResolvedBadgeColor(item, i)\" aria-hidden=\"true\">\r\n\r\n @if (item.badgeTextKey) {\r\n {{ item.badgeTextKey | translate }}\r\n } @else if (item.badgeText) {\r\n {{ item.badgeText }}\r\n } @else {\r\n {{ getAutoBadgeTranslationKey(item, i) | translate }}\r\n }\r\n </solaris-badge>\r\n }\r\n </button>\r\n\r\n @if (!last) {\r\n <span class=\"solaris-stepper__connector\" [ngClass]=\"getConnectorClasses(i)\" aria-hidden=\"true\"></span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (renderPanels) {\r\n <div class=\"solaris-stepper__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block;min-width:0}.solaris-stepper{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 .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease}.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{width:2rem;height:2rem;flex:0 0 2rem;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--solaris-radius-full);border:1px solid var(--solaris-color-border);background:var(--solaris-color-surface);color:var(--solaris-color-text);font-size:var(--solaris-fs-12);font-weight:700;line-height:1;box-shadow:var(--solaris-shadow-xs)}.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{width:auto;height:auto;flex:0 0 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%,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: ["pill", "customTextColor", "interactive", "size", "variant", "color", "aria-hidden"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
907
|
+
}
|
|
908
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisStepper, decorators: [{
|
|
909
|
+
type: Component,
|
|
910
|
+
args: [{ selector: 'solaris-stepper', standalone: true, imports: [
|
|
911
|
+
CommonModule,
|
|
912
|
+
SolarisTranslationPipe,
|
|
913
|
+
SolarisBadge,
|
|
914
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-stepper\" [ngClass]=\"[\r\n 'orientation-' + orientation,\r\n 'appearance-' + appearance\r\n ]\">\r\n\r\n <div class=\"solaris-stepper__rail\" role=\"tablist\" [attr.aria-orientation]=\"orientation\">\r\n\r\n @for (item of items; track trackByIndex($index); let i = $index; let last = $last) {\r\n <div class=\"solaris-stepper__node\">\r\n <button #stepButton type=\"button\" role=\"tab\" class=\"solaris-stepper__step\"\r\n [id]=\"item.headerId\" [attr.aria-controls]=\"item.panelId\" [attr.aria-selected]=\"isCurrent(i)\"\r\n [attr.aria-current]=\"isCurrent(i) ? 'step' : null\"\r\n [attr.aria-disabled]=\"item.status === 'disabled' || item.status === 'locked'\"\r\n [attr.tabindex]=\"isCurrent(i) ? 0 : -1\" [ngClass]=\"getStepClasses(item, i)\"\r\n (click)=\"onStepHeaderClick(i)\" (keydown)=\"onStepKeydown($event, i)\">\r\n\r\n <span class=\"solaris-stepper__marker\" [ngClass]=\"getStepClasses(item, i)\">\r\n @if (getMarkerIcon(item, i)) {\r\n <i class=\"ph\" [ngClass]=\"getMarkerIcon(item, i)\" aria-hidden=\"true\"></i>\r\n }\r\n\r\n @if (getMarkerText(item, i)) {\r\n <span>{{ getMarkerText(item, i) }}</span>\r\n }\r\n </span>\r\n\r\n <span class=\"solaris-stepper__meta\">\r\n <span class=\"solaris-stepper__label\">\r\n @if (item.labelKey) {\r\n {{ item.labelKey | translate }}\r\n } @else if (item.label) {\r\n {{ item.label }}\r\n } @else {\r\n {{ 'ui.solaris.stepper.step' | translate }} {{ i + 1 }}\r\n }\r\n </span>\r\n\r\n <span class=\"solaris-stepper__title\">\r\n @if (item.titleKey) {\r\n {{ item.titleKey | translate }}\r\n } @else {\r\n {{ item.title }}\r\n }\r\n </span>\r\n\r\n @if (item.descriptionKey || item.description) {\r\n <span class=\"solaris-stepper__description\">\r\n @if (item.descriptionKey) {\r\n {{ item.descriptionKey | translate }}\r\n } @else {\r\n {{ item.description }}\r\n }\r\n </span>\r\n }\r\n\r\n @if (item.optional) {\r\n <span class=\"solaris-stepper__optional\">\r\n {{ 'ui.solaris.stepper.optional' | translate }}\r\n </span>\r\n }\r\n </span>\r\n\r\n @if (hasBadge(item, i)) {\r\n <solaris-badge class=\"solaris-stepper__badge\" [pill]=\"item.badgePill\" [size]=\"item.badgeSize\"\r\n [variant]=\"getResolvedBadgeVariant(item)\" [color]=\"getResolvedBadgeColor(item, i)\" aria-hidden=\"true\">\r\n\r\n @if (item.badgeTextKey) {\r\n {{ item.badgeTextKey | translate }}\r\n } @else if (item.badgeText) {\r\n {{ item.badgeText }}\r\n } @else {\r\n {{ getAutoBadgeTranslationKey(item, i) | translate }}\r\n }\r\n </solaris-badge>\r\n }\r\n </button>\r\n\r\n @if (!last) {\r\n <span class=\"solaris-stepper__connector\" [ngClass]=\"getConnectorClasses(i)\" aria-hidden=\"true\"></span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (renderPanels) {\r\n <div class=\"solaris-stepper__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block;min-width:0}.solaris-stepper{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 .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease}.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{width:2rem;height:2rem;flex:0 0 2rem;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--solaris-radius-full);border:1px solid var(--solaris-color-border);background:var(--solaris-color-surface);color:var(--solaris-color-text);font-size:var(--solaris-fs-12);font-weight:700;line-height:1;box-shadow:var(--solaris-shadow-xs)}.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{width:auto;height:auto;flex:0 0 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%,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"] }]
|
|
915
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { orientation: [{
|
|
916
|
+
type: Input
|
|
917
|
+
}], appearance: [{
|
|
918
|
+
type: Input
|
|
919
|
+
}], linear: [{
|
|
920
|
+
type: Input
|
|
921
|
+
}], interactive: [{
|
|
922
|
+
type: Input
|
|
923
|
+
}], activeIndex: [{
|
|
924
|
+
type: Input
|
|
925
|
+
}], defaultActiveIndex: [{
|
|
926
|
+
type: Input
|
|
927
|
+
}], allowBackNavigation: [{
|
|
928
|
+
type: Input
|
|
929
|
+
}], allowFutureNavigation: [{
|
|
930
|
+
type: Input
|
|
931
|
+
}], allowSkip: [{
|
|
932
|
+
type: Input
|
|
933
|
+
}], renderPanels: [{
|
|
934
|
+
type: Input
|
|
935
|
+
}], showStateBadges: [{
|
|
936
|
+
type: Input
|
|
937
|
+
}], activeIndexChange: [{
|
|
938
|
+
type: Output
|
|
939
|
+
}], nextChange: [{
|
|
940
|
+
type: Output,
|
|
941
|
+
args: ['next']
|
|
942
|
+
}], previousChange: [{
|
|
943
|
+
type: Output,
|
|
944
|
+
args: ['previous']
|
|
945
|
+
}], stepChange: [{
|
|
946
|
+
type: Output
|
|
947
|
+
}], itemsQuery: [{
|
|
948
|
+
type: ContentChildren,
|
|
949
|
+
args: [SolarisStepperItem]
|
|
950
|
+
}], stepButtons: [{
|
|
951
|
+
type: ViewChildren,
|
|
952
|
+
args: ['stepButton']
|
|
953
|
+
}] } });
|
|
954
|
+
|
|
456
955
|
class SolarisPopoverTriggerDirective {
|
|
457
956
|
elementRef = inject((ElementRef));
|
|
458
957
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -1837,55 +2336,6 @@ function buildSpokes(count, minOpacity = 0.12) {
|
|
|
1837
2336
|
return res;
|
|
1838
2337
|
}
|
|
1839
2338
|
|
|
1840
|
-
class SolarisBadge {
|
|
1841
|
-
pill = false;
|
|
1842
|
-
customTextColor;
|
|
1843
|
-
interactive = false;
|
|
1844
|
-
size = 'md';
|
|
1845
|
-
variant = 'subtle';
|
|
1846
|
-
color = 'surface';
|
|
1847
|
-
ariaHidden = null;
|
|
1848
|
-
hostClass = 'solaris-badge-host';
|
|
1849
|
-
presetColors = new Set([
|
|
1850
|
-
'primary', 'success', 'warning', 'error', 'info', 'surface',
|
|
1851
|
-
]);
|
|
1852
|
-
get colorClass() {
|
|
1853
|
-
return this.isCustomColor ? 'color-custom' : `color-${this.color}`;
|
|
1854
|
-
}
|
|
1855
|
-
get isCustomColor() {
|
|
1856
|
-
return !this.presetColors.has(this.color);
|
|
1857
|
-
}
|
|
1858
|
-
get customColorValue() {
|
|
1859
|
-
return this.isCustomColor ? String(this.color) : null;
|
|
1860
|
-
}
|
|
1861
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1862
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: SolarisBadge, isStandalone: true, selector: "solaris-badge", inputs: { pill: "pill", customTextColor: "customTextColor", interactive: "interactive", size: "size", variant: "variant", color: "color", ariaHidden: ["aria-hidden", "ariaHidden"] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<span class=\"solaris-badge\" [attr.aria-hidden]=\"ariaHidden\"\r\n [ngClass]=\"[ 'variant-' + variant, colorClass,\r\n 'size-' + size, pill ? 'is-pill' : '',\r\n interactive ? 'is-interactive' : '' ]\"\r\n [style.--solaris-badge-custom]=\"customColorValue\"\r\n [style.--solaris-badge-custom-fg]=\"customTextColor\">\r\n <ng-content></ng-content>\r\n</span>\r\n", styles: [":host.solaris-badge-host{display:inline-flex}.solaris-badge{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-radius: var(--solaris-radius-full);--solaris-badge-fg-solid: var(--solaris-badge-fg);line-height:1;font-weight:600;-webkit-user-select:none;user-select:none;white-space:nowrap;align-items:center;display:inline-flex;gap:var(--solaris-space-2);border:1px solid transparent;letter-spacing:var(--solaris-ls-sm);border-radius:var(--solaris-badge-radius)}.solaris-badge.size-sm{padding:.3rem .6rem;font-size:var(--solaris-fs-10)}.solaris-badge.size-md{padding:.4rem .8rem;font-size:var(--solaris-fs-12)}.solaris-badge.size-lg{padding:.5rem 1rem;font-size:var(--solaris-fs-14)}.solaris-badge.is-pill{--solaris-badge-radius: var(--solaris-radius-full)}.solaris-badge.is-interactive{cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}.solaris-badge.is-interactive:hover{box-shadow:var(--solaris-shadow-xs)}.solaris-badge.color-surface{--_base: var(--solaris-color-surface-2);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 75%, black))}.solaris-badge.color-primary{--_base: var(--solaris-color-primary);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 82%, black))}.solaris-badge.color-success{--_base: var(--solaris-color-success);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 75%, black))}.solaris-badge.color-warning{--_base: var(--solaris-color-warning);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 75%, black))}.solaris-badge.color-error{--_base: var(--solaris-color-error);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 82%, black))}.solaris-badge.color-info{--_base: var(--solaris-color-info);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 82%, black))}.solaris-badge.color-custom{--_base: var(--solaris-badge-custom, var(--solaris-color-surface-2));--solaris-badge-fg-solid: var(--solaris-badge-custom-fg, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-fg: var(--solaris-badge-custom-fg, var(--solaris-color-text));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 82%, black))}.solaris-badge.variant-solid{color:var(--solaris-badge-fg-solid);background:var(--solaris-badge-bg-solid, var(--solaris-badge-bg));border-color:var(--solaris-badge-border-solid, var(--solaris-badge-border))}.solaris-badge.variant-subtle{color:var(--solaris-badge-fg);background:var(--solaris-badge-bg);border-color:var(--solaris-badge-border)}.solaris-badge.variant-outline{border-color:var(--solaris-badge-border);color:color-mix(in srgb,var(--solaris-badge-border) 30%,white);background:color-mix(in srgb,var(--solaris-badge-border) 20%,transparent)}.solaris-badge.variant-solid.color-surface{color:var(--solaris-color-text);border-color:var(--solaris-color-border);background:var(--solaris-color-surface-2)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1863
|
-
}
|
|
1864
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisBadge, decorators: [{
|
|
1865
|
-
type: Component,
|
|
1866
|
-
args: [{ selector: 'solaris-badge', standalone: true, imports: [
|
|
1867
|
-
NgClass
|
|
1868
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"solaris-badge\" [attr.aria-hidden]=\"ariaHidden\"\r\n [ngClass]=\"[ 'variant-' + variant, colorClass,\r\n 'size-' + size, pill ? 'is-pill' : '',\r\n interactive ? 'is-interactive' : '' ]\"\r\n [style.--solaris-badge-custom]=\"customColorValue\"\r\n [style.--solaris-badge-custom-fg]=\"customTextColor\">\r\n <ng-content></ng-content>\r\n</span>\r\n", styles: [":host.solaris-badge-host{display:inline-flex}.solaris-badge{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-radius: var(--solaris-radius-full);--solaris-badge-fg-solid: var(--solaris-badge-fg);line-height:1;font-weight:600;-webkit-user-select:none;user-select:none;white-space:nowrap;align-items:center;display:inline-flex;gap:var(--solaris-space-2);border:1px solid transparent;letter-spacing:var(--solaris-ls-sm);border-radius:var(--solaris-badge-radius)}.solaris-badge.size-sm{padding:.3rem .6rem;font-size:var(--solaris-fs-10)}.solaris-badge.size-md{padding:.4rem .8rem;font-size:var(--solaris-fs-12)}.solaris-badge.size-lg{padding:.5rem 1rem;font-size:var(--solaris-fs-14)}.solaris-badge.is-pill{--solaris-badge-radius: var(--solaris-radius-full)}.solaris-badge.is-interactive{cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}.solaris-badge.is-interactive:hover{box-shadow:var(--solaris-shadow-xs)}.solaris-badge.color-surface{--_base: var(--solaris-color-surface-2);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 75%, black))}.solaris-badge.color-primary{--_base: var(--solaris-color-primary);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 82%, black))}.solaris-badge.color-success{--_base: var(--solaris-color-success);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 75%, black))}.solaris-badge.color-warning{--_base: var(--solaris-color-warning);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 75%, black))}.solaris-badge.color-error{--_base: var(--solaris-color-error);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 82%, black))}.solaris-badge.color-info{--_base: var(--solaris-color-info);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 82%, black))}.solaris-badge.color-custom{--_base: var(--solaris-badge-custom, var(--solaris-color-surface-2));--solaris-badge-fg-solid: var(--solaris-badge-custom-fg, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-fg: var(--solaris-badge-custom-fg, var(--solaris-color-text));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 82%, black))}.solaris-badge.variant-solid{color:var(--solaris-badge-fg-solid);background:var(--solaris-badge-bg-solid, var(--solaris-badge-bg));border-color:var(--solaris-badge-border-solid, var(--solaris-badge-border))}.solaris-badge.variant-subtle{color:var(--solaris-badge-fg);background:var(--solaris-badge-bg);border-color:var(--solaris-badge-border)}.solaris-badge.variant-outline{border-color:var(--solaris-badge-border);color:color-mix(in srgb,var(--solaris-badge-border) 30%,white);background:color-mix(in srgb,var(--solaris-badge-border) 20%,transparent)}.solaris-badge.variant-solid.color-surface{color:var(--solaris-color-text);border-color:var(--solaris-color-border);background:var(--solaris-color-surface-2)}\n"] }]
|
|
1869
|
-
}], propDecorators: { pill: [{
|
|
1870
|
-
type: Input
|
|
1871
|
-
}], customTextColor: [{
|
|
1872
|
-
type: Input
|
|
1873
|
-
}], interactive: [{
|
|
1874
|
-
type: Input
|
|
1875
|
-
}], size: [{
|
|
1876
|
-
type: Input
|
|
1877
|
-
}], variant: [{
|
|
1878
|
-
type: Input
|
|
1879
|
-
}], color: [{
|
|
1880
|
-
type: Input
|
|
1881
|
-
}], ariaHidden: [{
|
|
1882
|
-
type: Input,
|
|
1883
|
-
args: [{ alias: 'aria-hidden' }]
|
|
1884
|
-
}], hostClass: [{
|
|
1885
|
-
type: HostBinding,
|
|
1886
|
-
args: ['class']
|
|
1887
|
-
}] } });
|
|
1888
|
-
|
|
1889
2339
|
class SolarisImageSliderComponent {
|
|
1890
2340
|
viewport = viewChild('viewport', ...(ngDevMode ? [{ debugName: "viewport" }] : []));
|
|
1891
2341
|
timer = null;
|
|
@@ -3303,7 +3753,7 @@ class SolarisTable {
|
|
|
3303
3753
|
}).join(' ');
|
|
3304
3754
|
}
|
|
3305
3755
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3306
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", 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>\r\n\r\n<div class=\"solaris-table\" [class.solaris-table--grid]=\"variant === 'grid'\"\r\n [class.solaris-table--zebra]=\"variant === 'zebra'\">\r\n <div #tableRoot class=\"solaris-table__inner\" role=\"table\" [attr.aria-rowcount]=\"rowsCount\">\r\n <div class=\"solaris-table__header\" role=\"rowgroup\">\r\n <div class=\"solaris-table__row solaris-table__row--header\" role=\"row\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\r\n @for (col of columns(); track col.id; let i = $index) {\r\n <div class=\"solaris-table__cell solaris-table__cell--header\" role=\"columnheader\" [attr.data-col-idx]=\"i\"\r\n [attr.aria-sort]=\"ariaSort(col)\" [style.--solaris-col-max]=\"col.maxWidth || null\">\r\n\r\n <div class=\"solaris-table__header-content\">\r\n <span class=\"solaris-table__header-left\">\r\n @if (selectable && i === 0) {\r\n <span class=\"solaris-table__select-prefix\" (click)=\"$event.stopPropagation()\">\r\n <solaris-checkbox variant=\"square\" color=\"primary\" size=\"sm\" [ngModel]=\"selectAllChecked()\"\r\n (ngModelChange)=\"onToggleSelectAll($event)\" [indeterminate]=\"selectAllIndeterminate()\">\r\n </solaris-checkbox>\r\n </span>\r\n }\r\n\r\n @if (col.headerIconClass) { <i [class]=\"col.headerIconClass\"></i> }\r\n\r\n @if (col.headerDef?.template) {\r\n <ng-container [ngTemplateOutlet]=\"col.headerDef?.template\"></ng-container>\r\n } @else {\r\n @if (col.headerKey) {\r\n <span class=\"solaris-table__header-text\">{{ col.headerKey | translate }}</span>\r\n } @else {\r\n <span class=\"solaris-table__header-text\">{{ col.header }}</span>\r\n }\r\n }\r\n </span>\r\n\r\n @if (col.sortable) {\r\n <button type=\"button\" class=\"solaris-table__sort-btn\" (click)=\"onHeaderSortClick($event, col)\">\r\n <span class=\"solaris-table__sort\">\r\n <i class=\"ph ph-arrow-up\" [class.is-active]=\"getSortFor(col)?.direction === 'asc'\"></i>\r\n <i class=\"ph ph-arrow-down\" [class.is-active]=\"getSortFor(col)?.direction === 'desc'\"></i>\r\n\r\n @if (getSortFor(col)?.order && sortState().length > 1) {\r\n <span class=\"solaris-table__sort-order\">{{ getSortFor(col)!.order }}</span>\r\n }\r\n </span>\r\n </button>\r\n }\r\n </div>\r\n\r\n @if (col.resizable && !col.width) {\r\n <span class=\"solaris-table__col-resizer\" role=\"separator\" aria-orientation=\"vertical\"\r\n (pointerdown)=\"onResizeStart($event, i)\" (dblclick)=\"clearManualWidth(i)\"\r\n (click)=\"$event.stopPropagation()\">\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"solaris-table__body\" role=\"rowgroup\">\r\n @if (loading) {\r\n <solaris-table-skeleton [rows]=\"pageSize\" [columns]=\"columns().length\" [selectable]=\"selectable\"\r\n [gridTemplateColumns]=\"gridTemplateColumns()\">\r\n </solaris-table-skeleton>\r\n } @else {\r\n @if (rowsCount === 0) {\r\n <div class=\"solaris-table__empty\" role=\"row\">\r\n <i [class]=\"emptyIconClass\"></i>\r\n <div class=\"solaris-table__empty-text\">{{ 'ui.solaris.tables.empty' | translate }}</div>\r\n </div>\r\n } @else {\r\n <ng-content select=\"solaris-row\"></ng-content>\r\n }\r\n }\r\n </div>\r\n\r\n <div class=\"solaris-table__footer\" role=\"rowgroup\">\r\n <div class=\"solaris-table__footer-left\">\r\n @if (selectedCount() > 0) {\r\n <div class=\"solaris-table__selected\">\r\n {{ selectedCount() }} {{ 'ui.solaris.tables.selection.selected' | translate }}\r\n </div>\r\n } @else if (tableDescription != null) {\r\n <div class=\"solaris-table__description\">\r\n {{ tableDescription }}\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"solaris-table__footer-right\">\r\n <div class=\"solaris-table__rows-per-page\">\r\n <span>{{ 'ui.solaris.tables.pagination.rowsPerPage' | translate }}:</span>\r\n <select [ngModel]=\"pageSize\" (ngModelChange)=\"changePageSize($event)\">\r\n @for (opt of pageSizeOptions; track opt) {\r\n <option [ngValue]=\"opt\">{{ opt }}</option>\r\n }\r\n </select>\r\n </div>\r\n\r\n <div class=\"solaris-table__range\">\r\n {{ rangeStart }}\u2013{{ rangeEnd }} {{ 'ui.solaris.common.of' | translate }} {{ length }}\r\n </div>\r\n\r\n <div class=\"solaris-table__pager\">\r\n <button type=\"button\" (click)=\"firstPage()\" [disabled]=\"pageIndex === 0\">\r\n <i class=\"ph ph-caret-line-left\"></i>\r\n </button>\r\n <button type=\"button\" (click)=\"prevPage()\" [disabled]=\"pageIndex === 0\">\r\n <i class=\"ph ph-caret-left\"></i>\r\n </button>\r\n <button type=\"button\" (click)=\"nextPage()\" [disabled]=\"pageIndex >= totalPages - 1\">\r\n <i class=\"ph ph-caret-right\"></i>\r\n </button>\r\n <button type=\"button\" (click)=\"lastPage()\" [disabled]=\"pageIndex >= totalPages - 1\">\r\n <i class=\"ph ph-caret-line-right\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\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 .14s ease,color .14s ease,transform .14s ease}.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 .12s ease}.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 .14s ease,opacity .14s ease}.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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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 });
|
|
3756
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", 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>\r\n\r\n<div class=\"solaris-table\" [class.solaris-table--grid]=\"variant === 'grid'\"\r\n [class.solaris-table--zebra]=\"variant === 'zebra'\">\r\n <div #tableRoot class=\"solaris-table__inner\" role=\"table\" [attr.aria-rowcount]=\"rowsCount\">\r\n <div class=\"solaris-table__header\" role=\"rowgroup\">\r\n <div class=\"solaris-table__row solaris-table__row--header\" role=\"row\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\r\n @for (col of columns(); track col.id; let i = $index) {\r\n <div class=\"solaris-table__cell solaris-table__cell--header\" role=\"columnheader\" [attr.data-col-idx]=\"i\"\r\n [attr.aria-sort]=\"ariaSort(col)\" [style.--solaris-col-max]=\"col.maxWidth || null\">\r\n\r\n <div class=\"solaris-table__header-content\">\r\n <span class=\"solaris-table__header-left\">\r\n @if (selectable && i === 0) {\r\n <span class=\"solaris-table__select-prefix\" (click)=\"$event.stopPropagation()\">\r\n <solaris-checkbox variant=\"square\" color=\"primary\" size=\"sm\" [ngModel]=\"selectAllChecked()\"\r\n (ngModelChange)=\"onToggleSelectAll($event)\" [indeterminate]=\"selectAllIndeterminate()\">\r\n </solaris-checkbox>\r\n </span>\r\n }\r\n\r\n @if (col.headerIconClass) { <i [class]=\"col.headerIconClass\"></i> }\r\n\r\n @if (col.headerDef?.template) {\r\n <ng-container [ngTemplateOutlet]=\"col.headerDef?.template\"></ng-container>\r\n } @else {\r\n @if (col.headerKey) {\r\n <span class=\"solaris-table__header-text\">{{ col.headerKey | translate }}</span>\r\n } @else {\r\n <span class=\"solaris-table__header-text\">{{ col.header }}</span>\r\n }\r\n }\r\n </span>\r\n\r\n @if (col.sortable) {\r\n <button type=\"button\" class=\"solaris-table__sort-btn\" (click)=\"onHeaderSortClick($event, col)\">\r\n <span class=\"solaris-table__sort\">\r\n <i class=\"ph ph-arrow-up\" [class.is-active]=\"getSortFor(col)?.direction === 'asc'\"></i>\r\n <i class=\"ph ph-arrow-down\" [class.is-active]=\"getSortFor(col)?.direction === 'desc'\"></i>\r\n\r\n @if (getSortFor(col)?.order && sortState().length > 1) {\r\n <span class=\"solaris-table__sort-order\">{{ getSortFor(col)!.order }}</span>\r\n }\r\n </span>\r\n </button>\r\n }\r\n </div>\r\n\r\n @if (col.resizable && !col.width) {\r\n <span class=\"solaris-table__col-resizer\" role=\"separator\" aria-orientation=\"vertical\"\r\n (pointerdown)=\"onResizeStart($event, i)\" (dblclick)=\"clearManualWidth(i)\"\r\n (click)=\"$event.stopPropagation()\">\r\n </span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"solaris-table__body\" role=\"rowgroup\">\r\n @if (loading) {\r\n <solaris-table-skeleton [rows]=\"pageSize\" [columns]=\"columns().length\" [selectable]=\"selectable\"\r\n [gridTemplateColumns]=\"gridTemplateColumns()\">\r\n </solaris-table-skeleton>\r\n } @else {\r\n @if (rowsCount === 0) {\r\n <div class=\"solaris-table__empty\" role=\"row\">\r\n <i [class]=\"emptyIconClass\"></i>\r\n <div class=\"solaris-table__empty-text\">{{ 'ui.solaris.tables.empty' | translate }}</div>\r\n </div>\r\n } @else {\r\n <ng-content select=\"solaris-row\"></ng-content>\r\n }\r\n }\r\n </div>\r\n\r\n <div class=\"solaris-table__footer\" role=\"rowgroup\">\r\n <div class=\"solaris-table__footer-left\">\r\n @if (selectedCount() > 0) {\r\n <div class=\"solaris-table__selected\">\r\n {{ selectedCount() }} {{ 'ui.solaris.tables.selection.selected' | translate }}\r\n </div>\r\n } @else if (tableDescription != null) {\r\n <div class=\"solaris-table__description\">\r\n {{ tableDescription }}\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"solaris-table__footer-right\">\r\n <div class=\"solaris-table__rows-per-page\">\r\n <span>{{ 'ui.solaris.tables.pagination.rowsPerPage' | translate }}:</span>\r\n <select [ngModel]=\"pageSize\" (ngModelChange)=\"changePageSize($event)\">\r\n @for (opt of pageSizeOptions; track opt) {\r\n <option [ngValue]=\"opt\">{{ opt }}</option>\r\n }\r\n </select>\r\n </div>\r\n\r\n <div class=\"solaris-table__range\">\r\n {{ rangeStart }}\u2013{{ rangeEnd }} {{ 'ui.solaris.common.of' | translate }} {{ length }}\r\n </div>\r\n\r\n <div class=\"solaris-table__pager\">\r\n <button type=\"button\" (click)=\"firstPage()\" [disabled]=\"pageIndex === 0\">\r\n <i class=\"ph ph-caret-line-left\"></i>\r\n </button>\r\n <button type=\"button\" (click)=\"prevPage()\" [disabled]=\"pageIndex === 0\">\r\n <i class=\"ph ph-caret-left\"></i>\r\n </button>\r\n <button type=\"button\" (click)=\"nextPage()\" [disabled]=\"pageIndex >= totalPages - 1\">\r\n <i class=\"ph ph-caret-right\"></i>\r\n </button>\r\n <button type=\"button\" (click)=\"lastPage()\" [disabled]=\"pageIndex >= totalPages - 1\">\r\n <i class=\"ph ph-caret-line-right\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\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 .14s ease,color .14s ease,transform .14s ease}.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 .12s ease}.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 .14s ease,opacity .14s ease}.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 });
|
|
3307
3757
|
}
|
|
3308
3758
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisTable, decorators: [{
|
|
3309
3759
|
type: Component,
|
|
@@ -3381,7 +3831,7 @@ class SolarisRowComponent {
|
|
|
3381
3831
|
return this.table.isSelected(this.rowKey);
|
|
3382
3832
|
}
|
|
3383
3833
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisRowComponent, deps: [{ token: SolarisTable, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
3384
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisRowComponent, isStandalone: true, selector: "solaris-row", inputs: { rowKey: "rowKey", value: "value" }, host: { classAttribute: "solaris-row-host" }, ngImport: i0, template: "<div class=\"solaris-row\" role=\"row\" [attr.aria-selected]=\"isSelected\" [class.is-selected]=\"isSelected\"\r\n [style.gridTemplateColumns]=\"table.gridTemplateColumns()\">\r\n\r\n @for (col of table.columns(); track col.id; let i = $index) {\r\n <div class=\"solaris-row__cell\" role=\"cell\" [attr.data-col-idx]=\"i\" [class.align-end]=\"col.align === 'end'\"\r\n [class.align-center]=\"col.align === 'center'\" [style.--solaris-col-max]=\"col.maxWidth || null\">\r\n\r\n @if (table.selectable && i === 0) {\r\n <span class=\"solaris-row__select-prefix\">\r\n <solaris-checkbox variant=\"square\" color=\"primary\" size=\"sm\" [ngModel]=\"isSelected\"\r\n (ngModelChange)=\"table.toggleRow(rowKey, $event)\" [attr.aria-label]=\"'ui.solaris.tables.aria.selectRow' | translate\"/>\r\n </span>\r\n }\r\n\r\n <span class=\"solaris-row__label\">\r\n @if (col.headerKey) { {{ col.headerKey | translate }} } @else { {{ col.header }} }\r\n </span>\r\n\r\n <span class=\"solaris-row__content\">\r\n @if (col.cellDef?.template) {\r\n <ng-container [ngTemplateOutlet]=\"col.cellDef!.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: value, row: value, col: col }\"/>\r\n } @else {\r\n {{ table.readField(value, col.field) }}\r\n }\r\n </span>\r\n </div>\r\n }\r\n</div>\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 .3s 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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 });
|
|
3834
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisRowComponent, isStandalone: true, selector: "solaris-row", inputs: { rowKey: "rowKey", value: "value" }, host: { classAttribute: "solaris-row-host" }, ngImport: i0, template: "<div class=\"solaris-row\" role=\"row\" [attr.aria-selected]=\"isSelected\" [class.is-selected]=\"isSelected\"\r\n [style.gridTemplateColumns]=\"table.gridTemplateColumns()\">\r\n\r\n @for (col of table.columns(); track col.id; let i = $index) {\r\n <div class=\"solaris-row__cell\" role=\"cell\" [attr.data-col-idx]=\"i\" [class.align-end]=\"col.align === 'end'\"\r\n [class.align-center]=\"col.align === 'center'\" [style.--solaris-col-max]=\"col.maxWidth || null\">\r\n\r\n @if (table.selectable && i === 0) {\r\n <span class=\"solaris-row__select-prefix\">\r\n <solaris-checkbox variant=\"square\" color=\"primary\" size=\"sm\" [ngModel]=\"isSelected\"\r\n (ngModelChange)=\"table.toggleRow(rowKey, $event)\" [attr.aria-label]=\"'ui.solaris.tables.aria.selectRow' | translate\"/>\r\n </span>\r\n }\r\n\r\n <span class=\"solaris-row__label\">\r\n @if (col.headerKey) { {{ col.headerKey | translate }} } @else { {{ col.header }} }\r\n </span>\r\n\r\n <span class=\"solaris-row__content\">\r\n @if (col.cellDef?.template) {\r\n <ng-container [ngTemplateOutlet]=\"col.cellDef!.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: value, row: value, col: col }\"/>\r\n } @else {\r\n {{ table.readField(value, col.field) }}\r\n }\r\n </span>\r\n </div>\r\n }\r\n</div>\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 .3s 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 });
|
|
3385
3835
|
}
|
|
3386
3836
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisRowComponent, decorators: [{
|
|
3387
3837
|
type: Component,
|
|
@@ -5311,5 +5761,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
5311
5761
|
* Generated bundle index. Do not edit.
|
|
5312
5762
|
*/
|
|
5313
5763
|
|
|
5314
|
-
export { ButtonDirective, ButtonGroupDirective, FieldErrorComponent, FormField, InputTextDirective, PasswordToggle, SOLARIS_FORM_FIELD_CONTROLLER, SOLARIS_FORM_FIELD_FEATURES, SOLARIS_INPUT, SOLARIS_NOTIFICATION_CONFIG, SOLARIS_NOTIFICATION_DEFAULT_CONFIG, SOLARIS_NOTIFICATION_POSITIONS, SolarisBadge, SolarisBodyDirective, SolarisBreadcrumb, SolarisCheckbox, SolarisColumnCellDef, SolarisColumnHeaderDef, SolarisControlBridgeDirective, SolarisDivider, SolarisDrawer, SolarisDrawerFooterDirective, SolarisDrawerHeaderDirective, SolarisDropdownContent, SolarisDropdownContentPanelDirective, SolarisDropdownContentRegistry, SolarisDropdownContentTriggerDirective, SolarisEmailDirective, SolarisFilterBar, SolarisFilterChip, SolarisFilterField, SolarisFilterPanel, SolarisFilterPanelFooterDirective, SolarisFooterDirective, SolarisFormFieldController, SolarisHeaderDirective, SolarisIdGenerator, SolarisImageSliderComponent, SolarisLoading, SolarisLoadingOverlay, SolarisNotificationCenterComponent, SolarisNotificationHostComponent, SolarisNotificationIntlService, SolarisNotificationItemComponent, SolarisNotificationService, SolarisPage, SolarisPageHeader, SolarisPageHeaderBreadcrumbDirective, SolarisPageHeaderDescriptionDirective, SolarisPageHeaderTitle, SolarisPageHeaderTitleDirective, SolarisPasswordDirective, SolarisPhoneInput, SolarisPopover, SolarisPopoverPanelDirective, SolarisPopoverTriggerDirective, SolarisPrefixDirective, SolarisRowComponent, SolarisSectionComponent, SolarisSelect, SolarisSuffixDirective, SolarisTab, SolarisTable, SolarisTableColumn, SolarisTableFilters, SolarisTableSkeleton, SolarisTabs, computePopoverPosition, provideSolarisNotifications, uniqueId };
|
|
5764
|
+
export { ButtonDirective, ButtonGroupDirective, FieldErrorComponent, FormField, InputTextDirective, PasswordToggle, SOLARIS_FORM_FIELD_CONTROLLER, SOLARIS_FORM_FIELD_FEATURES, SOLARIS_INPUT, SOLARIS_NOTIFICATION_CONFIG, SOLARIS_NOTIFICATION_DEFAULT_CONFIG, SOLARIS_NOTIFICATION_POSITIONS, SolarisBadge, SolarisBodyDirective, SolarisBreadcrumb, SolarisCheckbox, SolarisColumnCellDef, SolarisColumnHeaderDef, SolarisControlBridgeDirective, SolarisDivider, SolarisDrawer, SolarisDrawerFooterDirective, SolarisDrawerHeaderDirective, SolarisDropdownContent, SolarisDropdownContentPanelDirective, SolarisDropdownContentRegistry, SolarisDropdownContentTriggerDirective, SolarisEmailDirective, SolarisFilterBar, SolarisFilterChip, SolarisFilterField, SolarisFilterPanel, SolarisFilterPanelFooterDirective, SolarisFooterDirective, SolarisFormFieldController, SolarisHeaderDirective, SolarisIdGenerator, SolarisImageSliderComponent, SolarisLoading, SolarisLoadingOverlay, SolarisNotificationCenterComponent, SolarisNotificationHostComponent, SolarisNotificationIntlService, SolarisNotificationItemComponent, SolarisNotificationService, SolarisPage, SolarisPageHeader, SolarisPageHeaderBreadcrumbDirective, SolarisPageHeaderDescriptionDirective, SolarisPageHeaderTitle, SolarisPageHeaderTitleDirective, SolarisPasswordDirective, SolarisPhoneInput, SolarisPopover, SolarisPopoverPanelDirective, SolarisPopoverTriggerDirective, SolarisPrefixDirective, SolarisRowComponent, SolarisSectionComponent, SolarisSelect, SolarisStepper, SolarisStepperItem, SolarisSuffixDirective, SolarisTab, SolarisTable, SolarisTableColumn, SolarisTableFilters, SolarisTableSkeleton, SolarisTabs, computePopoverPosition, provideSolarisNotifications, uniqueId };
|
|
5315
5765
|
//# sourceMappingURL=educarehq-solaris-components.mjs.map
|