@educarehq/solaris-components 0.4.5 → 0.4.8
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.
- package/fesm2022/educarehq-solaris-components.mjs +253 -13
- package/fesm2022/educarehq-solaris-components.mjs.map +1 -1
- package/package.json +3 -3
- package/styles/layouts/dialog/dialog.styles.scss +35 -0
- package/styles/solaris-components.scss +1 -0
- package/types/educarehq-solaris-components.d.ts +97 -6
|
@@ -1,9 +1,9 @@
|
|
|
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, ViewChildren, ContentChildren, ApplicationRef, signal, computed, effect, HostListener, Optional, EnvironmentInjector, createComponent, input, booleanAttribute, InjectionToken, makeEnvironmentProviders, PLATFORM_ID, viewChild, numberAttribute, afterNextRender, ViewChild, output, forwardRef, Host
|
|
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, EnvironmentInjector, createComponent, input, booleanAttribute, InjectionToken, makeEnvironmentProviders, PLATFORM_ID, viewChild, numberAttribute, afterNextRender, ViewChild, Injector, output, forwardRef, Host } 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';
|
|
6
|
-
import { fromEvent, merge } from 'rxjs';
|
|
6
|
+
import { fromEvent, Subject, 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';
|
|
@@ -1868,7 +1868,7 @@ function resolveRadius$2(v) {
|
|
|
1868
1868
|
return s;
|
|
1869
1869
|
}
|
|
1870
1870
|
}
|
|
1871
|
-
class
|
|
1871
|
+
class SolarisButtonDirective {
|
|
1872
1872
|
elementRef = inject((ElementRef));
|
|
1873
1873
|
_loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
|
|
1874
1874
|
_disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
|
|
@@ -1978,10 +1978,10 @@ class ButtonDirective {
|
|
|
1978
1978
|
ev.stopImmediatePropagation();
|
|
1979
1979
|
}
|
|
1980
1980
|
}
|
|
1981
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type:
|
|
1982
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.1", type:
|
|
1981
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1982
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.1", type: SolarisButtonDirective, isStandalone: true, selector: "button[solaris-button], a[solaris-button]", inputs: { size: "size", variant: "variant", color: "color", textColor: "textColor", radius: "radius", loading: ["loading", "loading", booleanAttribute], iconOnly: ["iconOnly", "iconOnly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], fullWidth: ["fullWidth", "fullWidth", booleanAttribute], badgeOverlay: ["badgeOverlay", "badgeOverlay", booleanAttribute] }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.solaris-button": "this.attr", "attr.tabindex": "this.tabIndex", "attr.aria-busy": "this.ariaBusy", "attr.data-size": "this.dataSize", "attr.data-color": "this.dataColor", "attr.disabled": "this.nativeDisabled", "attr.data-variant": "this.dataVariant", "attr.aria-disabled": "this.ariaDisabled", "attr.data-icon-only": "this.dataIconOnly", "attr.data-full-width": "this.dataFullWidth", "style.--sb-custom": "this.customColorValue", "attr.data-custom-ink": "this.dataCustomInk", "style.--sb-custom-ink": "this.customInkValue", "attr.data-badge-overlay": "this.dataBadgeOverlay", "style.--solaris-button-radius": "this.buttonRadius" } }, ngImport: i0 });
|
|
1983
1983
|
}
|
|
1984
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type:
|
|
1984
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisButtonDirective, decorators: [{
|
|
1985
1985
|
type: Directive,
|
|
1986
1986
|
args: [{
|
|
1987
1987
|
selector: 'button[solaris-button], a[solaris-button]',
|
|
@@ -2525,11 +2525,11 @@ class SolarisNotificationItemComponent {
|
|
|
2525
2525
|
return action.label ?? '';
|
|
2526
2526
|
}
|
|
2527
2527
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2528
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisNotificationItemComponent, isStandalone: true, selector: "solaris-notification-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"sn\" [attr.data-kind]=\"item().kind\" [attr.data-mode]=\"mode()\" [attr.data-expanded]=\"item().expanded ? 'true' : 'false'\"\r\n [attr.data-paused]=\"paused() ? 'true' : 'false'\" [attr.aria-live]=\"mode() === 'toast' ? item().ariaLive : null\"\r\n [attr.role]=\"item().ariaLive === 'assertive' ? 'alert' : 'status'\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n <div class=\"sn__header\" [attr.data-align]=\"isCompactHeader() ? 'center' : 'start'\">\r\n <div class=\"sn__leading\">\r\n <span class=\"sn__icon\" aria-hidden=\"true\">\r\n <i class=\"ph\" [ngClass]=\"iconClass()\"></i>\r\n </span>\r\n\r\n <div class=\"sn__heading\">\r\n <strong class=\"sn__title\">{{ item().title }}</strong>\r\n\r\n @if (!item().expanded && item().description) {\r\n <p class=\"sn__description sn__description--clamped\">\r\n {{ item().description }}\r\n </p>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"sn__controls\">\r\n @if (item().expandable && item().description) {\r\n <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-expanded]=\"item().expanded\"\r\n [attr.aria-label]=\"item().expanded ? intl.collapse() : intl.expand()\" (click)=\"toggleExpanded()\">\r\n <i class=\"ph\" [ngClass]=\"item().expanded ? 'ph-caret-up' : 'ph-caret-down'\" aria-hidden=\"true\"></i>\r\n </button>\r\n }\r\n\r\n @if (item().closeable) {\r\n <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-label]=\"intl.close()\" (click)=\"close()\">\r\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (item().expanded && item().description) {\r\n <div class=\"sn__body\">\r\n <p class=\"sn__body-text\">{{ item().description }}</p>\r\n @if (item().actions.length) {\r\n <div class=\"sn__actions\">\r\n @for (action of item().actions; track action.id) {\r\n <button type=\"button\" solaris-button [variant]=\"action.variant ?? 'outline'\" [color]=\"action.color ?? 'surface'\"\r\n [size]=\"action.size ?? 'sm'\" [radius]=\"action.radius ?? 'md'\" [disabled]=\"action.disabled ?? false\"\r\n (click)=\"runAction(action)\">\r\n {{ resolveActionLabel(action) }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (mode() === 'toast' && item().duration !== null) {\r\n <div class=\"sn__footer\">\r\n @if (!paused()) {\r\n <p class=\"sn__timer\">\r\n {{ intl.autoClose(secondsLeft()) }}\r\n <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n {{ intl.stopTimer() }}\r\n </button>.\r\n </p>\r\n } @else {\r\n <p class=\"sn__timer\">\r\n {{ intl.paused() }}\r\n <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n {{ intl.resumeTimer() }}\r\n </button>.\r\n </p>\r\n }\r\n </div>\r\n\r\n <div class=\"sn__progress\" aria-hidden=\"true\">\r\n <span [style.width.%]=\"progress()\"></span>\r\n </div>\r\n }\r\n</article>\r\n", styles: [":host{display:block;pointer-events:auto}.sn{--sn-accent: var(--solaris-color-info);overflow:hidden;color:var(--solaris-color-text);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(42rem,100vw - var(--solaris-space-4) * 2)}.sn[data-kind=success]{--sn-accent: var(--solaris-color-success)}.sn[data-kind=warning]{--sn-accent: var(--solaris-color-warning)}.sn[data-kind=error]{--sn-accent: var(--solaris-color-error)}.sn[data-kind=info]{--sn-accent: var(--solaris-color-info)}.sn__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3);padding:var(--solaris-space-4)}.sn__leading{display:flex;align-items:flex-start;gap:var(--solaris-space-3);min-width:0;flex:1}.sn__header[data-align=center],.sn__header[data-align=center] .sn__leading,.sn__header[data-align=center] .sn__controls{align-items:center}.sn[data-expanded=true] .sn__header{padding-bottom:0}.sn__icon{display:grid;flex:0 0 auto;block-size:3.2rem;inline-size:3.2rem;place-items:center;color:var(--sn-accent);border-radius:var(--solaris-radius-full)}.sn__icon .ph{line-height:1;font-size:var(--solaris-fs-24)}.sn__heading{flex:1;min-width:0}.sn__title{display:block;margin:0;font-size:var(--solaris-fs-16);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight);font-family:var(--solaris-font-sans-primary),ui-sans-serif,system-ui}.sn__description,.sn__body-text,.sn__timer{margin:0;font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed);color:var(--solaris-color-text-muted)}.sn__description--clamped{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:var(--solaris-space-1)}.sn__controls{flex:0 0 auto;align-items:center;display:inline-flex;gap:var(--solaris-space-1)}.sn__icon-btn{border:0;display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;background:transparent;cursor:pointer;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);transition:background-color .14s ease,color .14s ease,transform .14s ease}.sn__icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.sn__icon-btn:focus-visible{outline-offset:.2rem;outline:.2rem solid var(--solaris-color-primary)}.sn__icon-btn .ph{line-height:1;font-size:var(--solaris-fs-18)}.sn__body{padding:0 var(--solaris-space-4) var(--solaris-space-4) calc(var(--solaris-space-4) + 3.2rem + var(--solaris-space-3))}.sn__actions{display:flex;flex-wrap:wrap;gap:var(--solaris-space-2);margin-top:var(--solaris-space-4)}.sn__footer{background:var(--solaris-color-surface-2);border-top:.1rem solid var(--solaris-color-border);padding:var(--solaris-space-3) var(--solaris-space-4)}.sn__timer-link{margin:0;padding:0;border:0;font:inherit;cursor:pointer;font-weight:700;background:transparent;color:var(--solaris-color-text)}.sn__timer-link:focus-visible{outline-offset:.2rem;border-radius:var(--solaris-radius-xs);outline:.2rem solid var(--solaris-color-primary)}.sn__progress{block-size:.4rem;background:transparent}.sn__progress>span{display:block;block-size:100%;inline-size:100%;background:var(--sn-accent);transition:width .1s linear}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type:
|
|
2528
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisNotificationItemComponent, isStandalone: true, selector: "solaris-notification-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"sn\" [attr.data-kind]=\"item().kind\" [attr.data-mode]=\"mode()\" [attr.data-expanded]=\"item().expanded ? 'true' : 'false'\"\r\n [attr.data-paused]=\"paused() ? 'true' : 'false'\" [attr.aria-live]=\"mode() === 'toast' ? item().ariaLive : null\"\r\n [attr.role]=\"item().ariaLive === 'assertive' ? 'alert' : 'status'\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n <div class=\"sn__header\" [attr.data-align]=\"isCompactHeader() ? 'center' : 'start'\">\r\n <div class=\"sn__leading\">\r\n <span class=\"sn__icon\" aria-hidden=\"true\">\r\n <i class=\"ph\" [ngClass]=\"iconClass()\"></i>\r\n </span>\r\n\r\n <div class=\"sn__heading\">\r\n <strong class=\"sn__title\">{{ item().title }}</strong>\r\n\r\n @if (!item().expanded && item().description) {\r\n <p class=\"sn__description sn__description--clamped\">\r\n {{ item().description }}\r\n </p>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"sn__controls\">\r\n @if (item().expandable && item().description) {\r\n <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-expanded]=\"item().expanded\"\r\n [attr.aria-label]=\"item().expanded ? intl.collapse() : intl.expand()\" (click)=\"toggleExpanded()\">\r\n <i class=\"ph\" [ngClass]=\"item().expanded ? 'ph-caret-up' : 'ph-caret-down'\" aria-hidden=\"true\"></i>\r\n </button>\r\n }\r\n\r\n @if (item().closeable) {\r\n <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-label]=\"intl.close()\" (click)=\"close()\">\r\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (item().expanded && item().description) {\r\n <div class=\"sn__body\">\r\n <p class=\"sn__body-text\">{{ item().description }}</p>\r\n @if (item().actions.length) {\r\n <div class=\"sn__actions\">\r\n @for (action of item().actions; track action.id) {\r\n <button type=\"button\" solaris-button [variant]=\"action.variant ?? 'outline'\" [color]=\"action.color ?? 'surface'\"\r\n [size]=\"action.size ?? 'sm'\" [radius]=\"action.radius ?? 'md'\" [disabled]=\"action.disabled ?? false\"\r\n (click)=\"runAction(action)\">\r\n {{ resolveActionLabel(action) }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (mode() === 'toast' && item().duration !== null) {\r\n <div class=\"sn__footer\">\r\n @if (!paused()) {\r\n <p class=\"sn__timer\">\r\n {{ intl.autoClose(secondsLeft()) }}\r\n <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n {{ intl.stopTimer() }}\r\n </button>.\r\n </p>\r\n } @else {\r\n <p class=\"sn__timer\">\r\n {{ intl.paused() }}\r\n <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n {{ intl.resumeTimer() }}\r\n </button>.\r\n </p>\r\n }\r\n </div>\r\n\r\n <div class=\"sn__progress\" aria-hidden=\"true\">\r\n <span [style.width.%]=\"progress()\"></span>\r\n </div>\r\n }\r\n</article>\r\n", styles: [":host{display:block;pointer-events:auto}.sn{--sn-accent: var(--solaris-color-info);overflow:hidden;color:var(--solaris-color-text);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(42rem,100vw - var(--solaris-space-4) * 2)}.sn[data-kind=success]{--sn-accent: var(--solaris-color-success)}.sn[data-kind=warning]{--sn-accent: var(--solaris-color-warning)}.sn[data-kind=error]{--sn-accent: var(--solaris-color-error)}.sn[data-kind=info]{--sn-accent: var(--solaris-color-info)}.sn__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3);padding:var(--solaris-space-4)}.sn__leading{display:flex;align-items:flex-start;gap:var(--solaris-space-3);min-width:0;flex:1}.sn__header[data-align=center],.sn__header[data-align=center] .sn__leading,.sn__header[data-align=center] .sn__controls{align-items:center}.sn[data-expanded=true] .sn__header{padding-bottom:0}.sn__icon{display:grid;flex:0 0 auto;block-size:3.2rem;inline-size:3.2rem;place-items:center;color:var(--sn-accent);border-radius:var(--solaris-radius-full)}.sn__icon .ph{line-height:1;font-size:var(--solaris-fs-24)}.sn__heading{flex:1;min-width:0}.sn__title{display:block;margin:0;font-size:var(--solaris-fs-16);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight);font-family:var(--solaris-font-sans-primary),ui-sans-serif,system-ui}.sn__description,.sn__body-text,.sn__timer{margin:0;font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed);color:var(--solaris-color-text-muted)}.sn__description--clamped{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:var(--solaris-space-1)}.sn__controls{flex:0 0 auto;align-items:center;display:inline-flex;gap:var(--solaris-space-1)}.sn__icon-btn{border:0;display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;background:transparent;cursor:pointer;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);transition:background-color .14s ease,color .14s ease,transform .14s ease}.sn__icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.sn__icon-btn:focus-visible{outline-offset:.2rem;outline:.2rem solid var(--solaris-color-primary)}.sn__icon-btn .ph{line-height:1;font-size:var(--solaris-fs-18)}.sn__body{padding:0 var(--solaris-space-4) var(--solaris-space-4) calc(var(--solaris-space-4) + 3.2rem + var(--solaris-space-3))}.sn__actions{display:flex;flex-wrap:wrap;gap:var(--solaris-space-2);margin-top:var(--solaris-space-4)}.sn__footer{background:var(--solaris-color-surface-2);border-top:.1rem solid var(--solaris-color-border);padding:var(--solaris-space-3) var(--solaris-space-4)}.sn__timer-link{margin:0;padding:0;border:0;font:inherit;cursor:pointer;font-weight:700;background:transparent;color:var(--solaris-color-text)}.sn__timer-link:focus-visible{outline-offset:.2rem;border-radius:var(--solaris-radius-xs);outline:.2rem solid var(--solaris-color-primary)}.sn__progress{block-size:.4rem;background:transparent}.sn__progress>span{display:block;block-size:100%;inline-size:100%;background:var(--sn-accent);transition:width .1s linear}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: SolarisButtonDirective, selector: "button[solaris-button], a[solaris-button]", inputs: ["size", "variant", "color", "textColor", "radius", "loading", "iconOnly", "disabled", "fullWidth", "badgeOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2529
2529
|
}
|
|
2530
2530
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationItemComponent, decorators: [{
|
|
2531
2531
|
type: Component,
|
|
2532
|
-
args: [{ selector: 'solaris-notification-item', standalone: true, imports: [NgClass,
|
|
2532
|
+
args: [{ selector: 'solaris-notification-item', standalone: true, imports: [NgClass, SolarisButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"sn\" [attr.data-kind]=\"item().kind\" [attr.data-mode]=\"mode()\" [attr.data-expanded]=\"item().expanded ? 'true' : 'false'\"\r\n [attr.data-paused]=\"paused() ? 'true' : 'false'\" [attr.aria-live]=\"mode() === 'toast' ? item().ariaLive : null\"\r\n [attr.role]=\"item().ariaLive === 'assertive' ? 'alert' : 'status'\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n <div class=\"sn__header\" [attr.data-align]=\"isCompactHeader() ? 'center' : 'start'\">\r\n <div class=\"sn__leading\">\r\n <span class=\"sn__icon\" aria-hidden=\"true\">\r\n <i class=\"ph\" [ngClass]=\"iconClass()\"></i>\r\n </span>\r\n\r\n <div class=\"sn__heading\">\r\n <strong class=\"sn__title\">{{ item().title }}</strong>\r\n\r\n @if (!item().expanded && item().description) {\r\n <p class=\"sn__description sn__description--clamped\">\r\n {{ item().description }}\r\n </p>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"sn__controls\">\r\n @if (item().expandable && item().description) {\r\n <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-expanded]=\"item().expanded\"\r\n [attr.aria-label]=\"item().expanded ? intl.collapse() : intl.expand()\" (click)=\"toggleExpanded()\">\r\n <i class=\"ph\" [ngClass]=\"item().expanded ? 'ph-caret-up' : 'ph-caret-down'\" aria-hidden=\"true\"></i>\r\n </button>\r\n }\r\n\r\n @if (item().closeable) {\r\n <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-label]=\"intl.close()\" (click)=\"close()\">\r\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (item().expanded && item().description) {\r\n <div class=\"sn__body\">\r\n <p class=\"sn__body-text\">{{ item().description }}</p>\r\n @if (item().actions.length) {\r\n <div class=\"sn__actions\">\r\n @for (action of item().actions; track action.id) {\r\n <button type=\"button\" solaris-button [variant]=\"action.variant ?? 'outline'\" [color]=\"action.color ?? 'surface'\"\r\n [size]=\"action.size ?? 'sm'\" [radius]=\"action.radius ?? 'md'\" [disabled]=\"action.disabled ?? false\"\r\n (click)=\"runAction(action)\">\r\n {{ resolveActionLabel(action) }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (mode() === 'toast' && item().duration !== null) {\r\n <div class=\"sn__footer\">\r\n @if (!paused()) {\r\n <p class=\"sn__timer\">\r\n {{ intl.autoClose(secondsLeft()) }}\r\n <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n {{ intl.stopTimer() }}\r\n </button>.\r\n </p>\r\n } @else {\r\n <p class=\"sn__timer\">\r\n {{ intl.paused() }}\r\n <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n {{ intl.resumeTimer() }}\r\n </button>.\r\n </p>\r\n }\r\n </div>\r\n\r\n <div class=\"sn__progress\" aria-hidden=\"true\">\r\n <span [style.width.%]=\"progress()\"></span>\r\n </div>\r\n }\r\n</article>\r\n", styles: [":host{display:block;pointer-events:auto}.sn{--sn-accent: var(--solaris-color-info);overflow:hidden;color:var(--solaris-color-text);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(42rem,100vw - var(--solaris-space-4) * 2)}.sn[data-kind=success]{--sn-accent: var(--solaris-color-success)}.sn[data-kind=warning]{--sn-accent: var(--solaris-color-warning)}.sn[data-kind=error]{--sn-accent: var(--solaris-color-error)}.sn[data-kind=info]{--sn-accent: var(--solaris-color-info)}.sn__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3);padding:var(--solaris-space-4)}.sn__leading{display:flex;align-items:flex-start;gap:var(--solaris-space-3);min-width:0;flex:1}.sn__header[data-align=center],.sn__header[data-align=center] .sn__leading,.sn__header[data-align=center] .sn__controls{align-items:center}.sn[data-expanded=true] .sn__header{padding-bottom:0}.sn__icon{display:grid;flex:0 0 auto;block-size:3.2rem;inline-size:3.2rem;place-items:center;color:var(--sn-accent);border-radius:var(--solaris-radius-full)}.sn__icon .ph{line-height:1;font-size:var(--solaris-fs-24)}.sn__heading{flex:1;min-width:0}.sn__title{display:block;margin:0;font-size:var(--solaris-fs-16);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight);font-family:var(--solaris-font-sans-primary),ui-sans-serif,system-ui}.sn__description,.sn__body-text,.sn__timer{margin:0;font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed);color:var(--solaris-color-text-muted)}.sn__description--clamped{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:var(--solaris-space-1)}.sn__controls{flex:0 0 auto;align-items:center;display:inline-flex;gap:var(--solaris-space-1)}.sn__icon-btn{border:0;display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;background:transparent;cursor:pointer;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);transition:background-color .14s ease,color .14s ease,transform .14s ease}.sn__icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.sn__icon-btn:focus-visible{outline-offset:.2rem;outline:.2rem solid var(--solaris-color-primary)}.sn__icon-btn .ph{line-height:1;font-size:var(--solaris-fs-18)}.sn__body{padding:0 var(--solaris-space-4) var(--solaris-space-4) calc(var(--solaris-space-4) + 3.2rem + var(--solaris-space-3))}.sn__actions{display:flex;flex-wrap:wrap;gap:var(--solaris-space-2);margin-top:var(--solaris-space-4)}.sn__footer{background:var(--solaris-color-surface-2);border-top:.1rem solid var(--solaris-color-border);padding:var(--solaris-space-3) var(--solaris-space-4)}.sn__timer-link{margin:0;padding:0;border:0;font:inherit;cursor:pointer;font-weight:700;background:transparent;color:var(--solaris-color-text)}.sn__timer-link:focus-visible{outline-offset:.2rem;border-radius:var(--solaris-radius-xs);outline:.2rem solid var(--solaris-color-primary)}.sn__progress{block-size:.4rem;background:transparent}.sn__progress>span{display:block;block-size:100%;inline-size:100%;background:var(--sn-accent);transition:width .1s linear}\n"] }]
|
|
2533
2533
|
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
|
|
2534
2534
|
|
|
2535
2535
|
class SolarisNotificationCenterComponent {
|
|
@@ -2541,11 +2541,11 @@ class SolarisNotificationCenterComponent {
|
|
|
2541
2541
|
}
|
|
2542
2542
|
}
|
|
2543
2543
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2544
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisNotificationCenterComponent, isStandalone: true, selector: "solaris-notification-center", host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (notificationService.centerOpen()) {\r\n <div class=\"snc__backdrop\" (click)=\"notificationService.closeCenter()\"></div>\r\n\r\n <aside class=\"snc\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"intl.centerTitle()\">\r\n <header class=\"snc__header\">\r\n <div>\r\n <strong class=\"snc__title\">{{ intl.centerTitle() }}</strong>\r\n </div>\r\n\r\n <div class=\"snc__controls\">\r\n <button type=\"button\" solaris-button variant=\"outline\" color=\"surface\" size=\"sm\" radius=\"md\"\r\n (click)=\"notificationService.clearHistory()\">\r\n {{ intl.clearHistory() }}\r\n </button>\r\n\r\n <button type=\"button\" class=\"snc__icon-btn\" [attr.aria-label]=\"intl.close()\" (click)=\"notificationService.closeCenter()\">\r\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n </button>\r\n </div>\r\n </header>\r\n\r\n <div class=\"snc__list\">\r\n @for (item of notificationService.centerItems(); track item.id) {\r\n <solaris-notification-item [item]=\"item\" mode=\"center\"/>\r\n } @empty {\r\n <div class=\"snc__empty\">\r\n {{ intl.emptyCenter() }}\r\n </div>\r\n }\r\n </div>\r\n </aside>\r\n}\r\n", styles: [".snc__backdrop{inset:0;position:fixed;pointer-events:auto;-webkit-backdrop-filter:blur(.2rem);backdrop-filter:blur(.2rem);background:#00000047;z-index:var(--solaris-z-overlay)}.snc{display:flex;position:fixed;overflow:hidden;pointer-events:auto;flex-direction:column;top:var(--solaris-space-4);z-index:var(--solaris-z-max);right:var(--solaris-space-4);bottom:var(--solaris-space-4);box-shadow:var(--solaris-shadow-lg);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(46rem,100vw - var(--solaris-space-4) * 2)}.snc__header{display:flex;align-items:center;gap:var(--solaris-space-3);justify-content:space-between;padding:var(--solaris-space-4);border-bottom:.1rem solid var(--solaris-color-border)}.snc__title{font-size:var(--solaris-h-6);line-height:var(--solaris-lh-tight)}.snc__controls{display:flex;align-items:center;gap:var(--solaris-space-2)}.snc__icon-btn{border:0;display:grid;cursor:pointer;block-size:4rem;inline-size:4rem;place-items:center;background:transparent;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full)}.snc__icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.snc__list{flex:1;display:flex;overflow:auto;flex-direction:column;gap:var(--solaris-space-3);padding:var(--solaris-space-4);background:var(--solaris-color-bg)}.snc__empty{display:grid;min-height:16rem;text-align:center;place-items:center;color:var(--solaris-color-text-muted)}\n"], dependencies: [{ kind: "directive", type:
|
|
2544
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisNotificationCenterComponent, isStandalone: true, selector: "solaris-notification-center", host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (notificationService.centerOpen()) {\r\n <div class=\"snc__backdrop\" (click)=\"notificationService.closeCenter()\"></div>\r\n\r\n <aside class=\"snc\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"intl.centerTitle()\">\r\n <header class=\"snc__header\">\r\n <div>\r\n <strong class=\"snc__title\">{{ intl.centerTitle() }}</strong>\r\n </div>\r\n\r\n <div class=\"snc__controls\">\r\n <button type=\"button\" solaris-button variant=\"outline\" color=\"surface\" size=\"sm\" radius=\"md\"\r\n (click)=\"notificationService.clearHistory()\">\r\n {{ intl.clearHistory() }}\r\n </button>\r\n\r\n <button type=\"button\" class=\"snc__icon-btn\" [attr.aria-label]=\"intl.close()\" (click)=\"notificationService.closeCenter()\">\r\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n </button>\r\n </div>\r\n </header>\r\n\r\n <div class=\"snc__list\">\r\n @for (item of notificationService.centerItems(); track item.id) {\r\n <solaris-notification-item [item]=\"item\" mode=\"center\"/>\r\n } @empty {\r\n <div class=\"snc__empty\">\r\n {{ intl.emptyCenter() }}\r\n </div>\r\n }\r\n </div>\r\n </aside>\r\n}\r\n", styles: [".snc__backdrop{inset:0;position:fixed;pointer-events:auto;-webkit-backdrop-filter:blur(.2rem);backdrop-filter:blur(.2rem);background:#00000047;z-index:var(--solaris-z-overlay)}.snc{display:flex;position:fixed;overflow:hidden;pointer-events:auto;flex-direction:column;top:var(--solaris-space-4);z-index:var(--solaris-z-max);right:var(--solaris-space-4);bottom:var(--solaris-space-4);box-shadow:var(--solaris-shadow-lg);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(46rem,100vw - var(--solaris-space-4) * 2)}.snc__header{display:flex;align-items:center;gap:var(--solaris-space-3);justify-content:space-between;padding:var(--solaris-space-4);border-bottom:.1rem solid var(--solaris-color-border)}.snc__title{font-size:var(--solaris-h-6);line-height:var(--solaris-lh-tight)}.snc__controls{display:flex;align-items:center;gap:var(--solaris-space-2)}.snc__icon-btn{border:0;display:grid;cursor:pointer;block-size:4rem;inline-size:4rem;place-items:center;background:transparent;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full)}.snc__icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.snc__list{flex:1;display:flex;overflow:auto;flex-direction:column;gap:var(--solaris-space-3);padding:var(--solaris-space-4);background:var(--solaris-color-bg)}.snc__empty{display:grid;min-height:16rem;text-align:center;place-items:center;color:var(--solaris-color-text-muted)}\n"], dependencies: [{ kind: "directive", type: SolarisButtonDirective, selector: "button[solaris-button], a[solaris-button]", inputs: ["size", "variant", "color", "textColor", "radius", "loading", "iconOnly", "disabled", "fullWidth", "badgeOverlay"] }, { kind: "component", type: SolarisNotificationItemComponent, selector: "solaris-notification-item", inputs: ["item", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2545
2545
|
}
|
|
2546
2546
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationCenterComponent, decorators: [{
|
|
2547
2547
|
type: Component,
|
|
2548
|
-
args: [{ selector: 'solaris-notification-center', standalone: true, imports: [
|
|
2548
|
+
args: [{ selector: 'solaris-notification-center', standalone: true, imports: [SolarisButtonDirective, SolarisNotificationItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (notificationService.centerOpen()) {\r\n <div class=\"snc__backdrop\" (click)=\"notificationService.closeCenter()\"></div>\r\n\r\n <aside class=\"snc\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"intl.centerTitle()\">\r\n <header class=\"snc__header\">\r\n <div>\r\n <strong class=\"snc__title\">{{ intl.centerTitle() }}</strong>\r\n </div>\r\n\r\n <div class=\"snc__controls\">\r\n <button type=\"button\" solaris-button variant=\"outline\" color=\"surface\" size=\"sm\" radius=\"md\"\r\n (click)=\"notificationService.clearHistory()\">\r\n {{ intl.clearHistory() }}\r\n </button>\r\n\r\n <button type=\"button\" class=\"snc__icon-btn\" [attr.aria-label]=\"intl.close()\" (click)=\"notificationService.closeCenter()\">\r\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n </button>\r\n </div>\r\n </header>\r\n\r\n <div class=\"snc__list\">\r\n @for (item of notificationService.centerItems(); track item.id) {\r\n <solaris-notification-item [item]=\"item\" mode=\"center\"/>\r\n } @empty {\r\n <div class=\"snc__empty\">\r\n {{ intl.emptyCenter() }}\r\n </div>\r\n }\r\n </div>\r\n </aside>\r\n}\r\n", styles: [".snc__backdrop{inset:0;position:fixed;pointer-events:auto;-webkit-backdrop-filter:blur(.2rem);backdrop-filter:blur(.2rem);background:#00000047;z-index:var(--solaris-z-overlay)}.snc{display:flex;position:fixed;overflow:hidden;pointer-events:auto;flex-direction:column;top:var(--solaris-space-4);z-index:var(--solaris-z-max);right:var(--solaris-space-4);bottom:var(--solaris-space-4);box-shadow:var(--solaris-shadow-lg);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(46rem,100vw - var(--solaris-space-4) * 2)}.snc__header{display:flex;align-items:center;gap:var(--solaris-space-3);justify-content:space-between;padding:var(--solaris-space-4);border-bottom:.1rem solid var(--solaris-color-border)}.snc__title{font-size:var(--solaris-h-6);line-height:var(--solaris-lh-tight)}.snc__controls{display:flex;align-items:center;gap:var(--solaris-space-2)}.snc__icon-btn{border:0;display:grid;cursor:pointer;block-size:4rem;inline-size:4rem;place-items:center;background:transparent;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full)}.snc__icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.snc__list{flex:1;display:flex;overflow:auto;flex-direction:column;gap:var(--solaris-space-3);padding:var(--solaris-space-4);background:var(--solaris-color-bg)}.snc__empty{display:grid;min-height:16rem;text-align:center;place-items:center;color:var(--solaris-color-text-muted)}\n"] }]
|
|
2549
2549
|
}], propDecorators: { onEscape: [{
|
|
2550
2550
|
type: HostListener,
|
|
2551
2551
|
args: ['document:keydown.escape']
|
|
@@ -3039,6 +3039,246 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
3039
3039
|
args: ['attr.aria-orientation']
|
|
3040
3040
|
}] } });
|
|
3041
3041
|
|
|
3042
|
+
class SolarisDialogContainer {
|
|
3043
|
+
contentHost;
|
|
3044
|
+
title;
|
|
3045
|
+
titleKey;
|
|
3046
|
+
titleParams;
|
|
3047
|
+
description;
|
|
3048
|
+
descriptionKey;
|
|
3049
|
+
descriptionParams;
|
|
3050
|
+
size = 'md';
|
|
3051
|
+
showCloseButton = true;
|
|
3052
|
+
actionSize;
|
|
3053
|
+
actions = [];
|
|
3054
|
+
ariaLabel;
|
|
3055
|
+
ariaLabelledBy;
|
|
3056
|
+
ariaDescribedBy;
|
|
3057
|
+
closeClick = new EventEmitter();
|
|
3058
|
+
actionClick = new EventEmitter();
|
|
3059
|
+
titleId = `solaris-dialog-title-${Math.round(Math.random() * 1_000_000)}`;
|
|
3060
|
+
descriptionId = `solaris-dialog-description-${Math.round(Math.random() * 1_000_000)}`;
|
|
3061
|
+
get hasHeader() {
|
|
3062
|
+
return !!this.title || !!this.titleKey || !!this.description || !!this.descriptionKey || this.showCloseButton;
|
|
3063
|
+
}
|
|
3064
|
+
get hasDescription() {
|
|
3065
|
+
return !!this.description || !!this.descriptionKey;
|
|
3066
|
+
}
|
|
3067
|
+
get hasActions() {
|
|
3068
|
+
return this.actions.length > 0;
|
|
3069
|
+
}
|
|
3070
|
+
get resolvedAriaLabelledBy() {
|
|
3071
|
+
if (this.ariaLabelledBy)
|
|
3072
|
+
return this.ariaLabelledBy;
|
|
3073
|
+
if (this.title || this.titleKey)
|
|
3074
|
+
return this.titleId;
|
|
3075
|
+
return null;
|
|
3076
|
+
}
|
|
3077
|
+
get resolvedAriaDescribedBy() {
|
|
3078
|
+
if (this.ariaDescribedBy)
|
|
3079
|
+
return this.ariaDescribedBy;
|
|
3080
|
+
if (this.description || this.descriptionKey)
|
|
3081
|
+
return this.descriptionId;
|
|
3082
|
+
return null;
|
|
3083
|
+
}
|
|
3084
|
+
resolveActionSize(action) {
|
|
3085
|
+
if (action.size) {
|
|
3086
|
+
return action.size;
|
|
3087
|
+
}
|
|
3088
|
+
if (this.actionSize) {
|
|
3089
|
+
return this.actionSize;
|
|
3090
|
+
}
|
|
3091
|
+
switch (this.size) {
|
|
3092
|
+
case 'sm':
|
|
3093
|
+
return 'sm';
|
|
3094
|
+
case 'md':
|
|
3095
|
+
return 'md';
|
|
3096
|
+
case 'lg':
|
|
3097
|
+
case 'xl':
|
|
3098
|
+
case 'fullscreen':
|
|
3099
|
+
return 'lg';
|
|
3100
|
+
}
|
|
3101
|
+
}
|
|
3102
|
+
resolveActionVariant(action) {
|
|
3103
|
+
if (action.variant) {
|
|
3104
|
+
return action.variant;
|
|
3105
|
+
}
|
|
3106
|
+
return 'solid';
|
|
3107
|
+
}
|
|
3108
|
+
resolveActionColor(action) {
|
|
3109
|
+
if (action.color) {
|
|
3110
|
+
return action.color;
|
|
3111
|
+
}
|
|
3112
|
+
switch (action.variant) {
|
|
3113
|
+
case 'ghost':
|
|
3114
|
+
case 'outline':
|
|
3115
|
+
case 'soft':
|
|
3116
|
+
return 'surface';
|
|
3117
|
+
default:
|
|
3118
|
+
return 'primary';
|
|
3119
|
+
}
|
|
3120
|
+
}
|
|
3121
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDialogContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3122
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisDialogContainer, isStandalone: true, selector: "solaris-dialog-container", inputs: { title: "title", titleKey: "titleKey", titleParams: "titleParams", description: "description", descriptionKey: "descriptionKey", descriptionParams: "descriptionParams", size: "size", showCloseButton: "showCloseButton", actionSize: "actionSize", actions: "actions", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy" }, outputs: { closeClick: "closeClick", actionClick: "actionClick" }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<section class=\"solaris-dialog\" [attr.data-size]=\"size\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"ariaLabel || null\"\r\n [attr.aria-labelledby]=\"resolvedAriaLabelledBy\" [attr.aria-describedby]=\"resolvedAriaDescribedBy\">\r\n @if (hasHeader) {\r\n <header class=\"solaris-dialog__header\">\r\n <div class=\"solaris-dialog__heading\">\r\n @if (title || titleKey) {\r\n <h2 class=\"solaris-dialog__title\" [id]=\"titleId\">\r\n @if (titleKey) {\r\n {{ titleKey }}\r\n } @else {\r\n {{ title }}\r\n }\r\n </h2>\r\n }\r\n\r\n @if (hasDescription) {\r\n <p class=\"solaris-dialog__description\" [id]=\"descriptionId\">\r\n @if (descriptionKey) {\r\n {{ descriptionKey }}\r\n } @else {\r\n {{ description }}\r\n }\r\n </p>\r\n }\r\n </div>\r\n\r\n @if (showCloseButton) {\r\n <button type=\"button\" class=\"solaris-dialog__close\" aria-label=\"Fechar\" (click)=\"closeClick.emit()\">\r\n <i class=\"ph ph-x\"></i>\r\n </button>\r\n }\r\n </header>\r\n }\r\n\r\n <div class=\"solaris-dialog__body\">\r\n <ng-template #contentHost></ng-template>\r\n </div>\r\n\r\n @if (hasActions) {\r\n <footer class=\"solaris-dialog__footer\">\r\n @for (action of actions; track action.label ?? action.labelKey ?? $index) {\r\n <button type=\"button\" solaris-button class=\"solaris-dialog__action\" [size]=\"resolveActionSize(action)\"\r\n [variant]=\"resolveActionVariant(action)\" [color]=\"resolveActionColor(action)\" [disabled]=\"action.disabled\"\r\n [loading]=\"action.loading\" [fullWidth]=\"action.fullWidth\" (click)=\"actionClick.emit(action)\">\r\n @if (action.labelKey) {\r\n {{ action.labelKey }}\r\n } @else {\r\n {{ action.label }}\r\n }\r\n </button>\r\n }\r\n </footer>\r\n }\r\n</section>\r\n", styles: [":host{display:grid;inline-size:100%;block-size:100%;pointer-events:none;max-inline-size:100%}:host>.solaris-dialog{pointer-events:auto}.solaris-dialog{--solaris-dialog-max-width: 56rem;--solaris-dialog-max-height: min(88vh, 72rem);--solaris-dialog-fg: var(--solaris-color-text);--solaris-dialog-padding: var(--solaris-space-5);--solaris-dialog-bg: var(--solaris-color-surface);--solaris-dialog-radius: var(--solaris-radius-lg);--solaris-dialog-shadow: var(--solaris-shadow-lg);--solaris-dialog-border: color-mix(in srgb, var(--solaris-color-border) 82%, transparent);inline-size:min(100vw - 3.2rem,var(--solaris-dialog-max-width));max-block-size:var(--solaris-dialog-max-height);display:grid;grid-template-rows:auto minmax(0,1fr) auto;color:var(--solaris-dialog-fg);background:var(--solaris-dialog-bg);border:1px solid var(--solaris-dialog-border);border-radius:var(--solaris-dialog-radius);box-shadow:var(--solaris-dialog-shadow);overflow:hidden;animation:solaris-dialog-in .14s ease}.solaris-dialog[data-size=sm]{--solaris-dialog-max-width: 40rem}.solaris-dialog[data-size=md]{--solaris-dialog-max-width: 56rem}.solaris-dialog[data-size=lg]{--solaris-dialog-max-width: 72rem}.solaris-dialog[data-size=xl]{--solaris-dialog-max-width: 96rem}.solaris-dialog[data-size=fullscreen]{inline-size:calc(100vw - 3.2rem);block-size:calc(100vh - 3.2rem);--solaris-dialog-max-width: none;--solaris-dialog-max-height: none}.solaris-dialog__header{display:grid;min-inline-size:0;align-items:start;gap:var(--solaris-space-4);padding:var(--solaris-dialog-padding);grid-template-columns:minmax(0,1fr) auto;border-block-end:1px solid var(--solaris-dialog-border)}.solaris-dialog__heading{display:grid;min-inline-size:0;gap:var(--solaris-space-1)}.solaris-dialog__title{margin:0;font-weight:750;font-size:var(--solaris-fs-18);color:var(--solaris-color-text);line-height:var(--solaris-lh-tight)}.solaris-dialog__description{margin:0;font-size:var(--solaris-fs-13);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text-muted)}.solaris-dialog__close{padding:0;border:0;outline:none;cursor:pointer;block-size:3.2rem;inline-size:3.2rem;place-items:center;display:inline-grid;background:transparent;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);transition:background-color .12s ease,color .12s ease,box-shadow .12s ease}.solaris-dialog__close:hover,.solaris-dialog__close:focus-visible{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.solaris-dialog__close:focus-visible{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--solaris-color-primary) 24%,transparent)}.solaris-dialog__close i{line-height:1;font-size:var(--solaris-fs-18)}.solaris-dialog__body{overflow:auto;min-block-size:0;padding:var(--solaris-dialog-padding)}.solaris-dialog__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--solaris-space-2);border-block-start:1px solid var(--solaris-dialog-border);padding:var(--solaris-space-4) var(--solaris-dialog-padding);background:color-mix(in srgb,var(--solaris-color-surface-2) 45%,transparent)}.solaris-dialog__action{white-space:nowrap}@keyframes solaris-dialog-in{0%{opacity:0;transform:translateY(.8rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], dependencies: [{ kind: "directive", type: SolarisButtonDirective, selector: "button[solaris-button], a[solaris-button]", inputs: ["size", "variant", "color", "textColor", "radius", "loading", "iconOnly", "disabled", "fullWidth", "badgeOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3123
|
+
}
|
|
3124
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDialogContainer, decorators: [{
|
|
3125
|
+
type: Component,
|
|
3126
|
+
args: [{ selector: 'solaris-dialog-container', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3127
|
+
SolarisButtonDirective
|
|
3128
|
+
], template: "<section class=\"solaris-dialog\" [attr.data-size]=\"size\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"ariaLabel || null\"\r\n [attr.aria-labelledby]=\"resolvedAriaLabelledBy\" [attr.aria-describedby]=\"resolvedAriaDescribedBy\">\r\n @if (hasHeader) {\r\n <header class=\"solaris-dialog__header\">\r\n <div class=\"solaris-dialog__heading\">\r\n @if (title || titleKey) {\r\n <h2 class=\"solaris-dialog__title\" [id]=\"titleId\">\r\n @if (titleKey) {\r\n {{ titleKey }}\r\n } @else {\r\n {{ title }}\r\n }\r\n </h2>\r\n }\r\n\r\n @if (hasDescription) {\r\n <p class=\"solaris-dialog__description\" [id]=\"descriptionId\">\r\n @if (descriptionKey) {\r\n {{ descriptionKey }}\r\n } @else {\r\n {{ description }}\r\n }\r\n </p>\r\n }\r\n </div>\r\n\r\n @if (showCloseButton) {\r\n <button type=\"button\" class=\"solaris-dialog__close\" aria-label=\"Fechar\" (click)=\"closeClick.emit()\">\r\n <i class=\"ph ph-x\"></i>\r\n </button>\r\n }\r\n </header>\r\n }\r\n\r\n <div class=\"solaris-dialog__body\">\r\n <ng-template #contentHost></ng-template>\r\n </div>\r\n\r\n @if (hasActions) {\r\n <footer class=\"solaris-dialog__footer\">\r\n @for (action of actions; track action.label ?? action.labelKey ?? $index) {\r\n <button type=\"button\" solaris-button class=\"solaris-dialog__action\" [size]=\"resolveActionSize(action)\"\r\n [variant]=\"resolveActionVariant(action)\" [color]=\"resolveActionColor(action)\" [disabled]=\"action.disabled\"\r\n [loading]=\"action.loading\" [fullWidth]=\"action.fullWidth\" (click)=\"actionClick.emit(action)\">\r\n @if (action.labelKey) {\r\n {{ action.labelKey }}\r\n } @else {\r\n {{ action.label }}\r\n }\r\n </button>\r\n }\r\n </footer>\r\n }\r\n</section>\r\n", styles: [":host{display:grid;inline-size:100%;block-size:100%;pointer-events:none;max-inline-size:100%}:host>.solaris-dialog{pointer-events:auto}.solaris-dialog{--solaris-dialog-max-width: 56rem;--solaris-dialog-max-height: min(88vh, 72rem);--solaris-dialog-fg: var(--solaris-color-text);--solaris-dialog-padding: var(--solaris-space-5);--solaris-dialog-bg: var(--solaris-color-surface);--solaris-dialog-radius: var(--solaris-radius-lg);--solaris-dialog-shadow: var(--solaris-shadow-lg);--solaris-dialog-border: color-mix(in srgb, var(--solaris-color-border) 82%, transparent);inline-size:min(100vw - 3.2rem,var(--solaris-dialog-max-width));max-block-size:var(--solaris-dialog-max-height);display:grid;grid-template-rows:auto minmax(0,1fr) auto;color:var(--solaris-dialog-fg);background:var(--solaris-dialog-bg);border:1px solid var(--solaris-dialog-border);border-radius:var(--solaris-dialog-radius);box-shadow:var(--solaris-dialog-shadow);overflow:hidden;animation:solaris-dialog-in .14s ease}.solaris-dialog[data-size=sm]{--solaris-dialog-max-width: 40rem}.solaris-dialog[data-size=md]{--solaris-dialog-max-width: 56rem}.solaris-dialog[data-size=lg]{--solaris-dialog-max-width: 72rem}.solaris-dialog[data-size=xl]{--solaris-dialog-max-width: 96rem}.solaris-dialog[data-size=fullscreen]{inline-size:calc(100vw - 3.2rem);block-size:calc(100vh - 3.2rem);--solaris-dialog-max-width: none;--solaris-dialog-max-height: none}.solaris-dialog__header{display:grid;min-inline-size:0;align-items:start;gap:var(--solaris-space-4);padding:var(--solaris-dialog-padding);grid-template-columns:minmax(0,1fr) auto;border-block-end:1px solid var(--solaris-dialog-border)}.solaris-dialog__heading{display:grid;min-inline-size:0;gap:var(--solaris-space-1)}.solaris-dialog__title{margin:0;font-weight:750;font-size:var(--solaris-fs-18);color:var(--solaris-color-text);line-height:var(--solaris-lh-tight)}.solaris-dialog__description{margin:0;font-size:var(--solaris-fs-13);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text-muted)}.solaris-dialog__close{padding:0;border:0;outline:none;cursor:pointer;block-size:3.2rem;inline-size:3.2rem;place-items:center;display:inline-grid;background:transparent;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);transition:background-color .12s ease,color .12s ease,box-shadow .12s ease}.solaris-dialog__close:hover,.solaris-dialog__close:focus-visible{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.solaris-dialog__close:focus-visible{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--solaris-color-primary) 24%,transparent)}.solaris-dialog__close i{line-height:1;font-size:var(--solaris-fs-18)}.solaris-dialog__body{overflow:auto;min-block-size:0;padding:var(--solaris-dialog-padding)}.solaris-dialog__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--solaris-space-2);border-block-start:1px solid var(--solaris-dialog-border);padding:var(--solaris-space-4) var(--solaris-dialog-padding);background:color-mix(in srgb,var(--solaris-color-surface-2) 45%,transparent)}.solaris-dialog__action{white-space:nowrap}@keyframes solaris-dialog-in{0%{opacity:0;transform:translateY(.8rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
|
|
3129
|
+
}], propDecorators: { contentHost: [{
|
|
3130
|
+
type: ViewChild,
|
|
3131
|
+
args: ['contentHost', { read: ViewContainerRef, static: true }]
|
|
3132
|
+
}], title: [{
|
|
3133
|
+
type: Input
|
|
3134
|
+
}], titleKey: [{
|
|
3135
|
+
type: Input
|
|
3136
|
+
}], titleParams: [{
|
|
3137
|
+
type: Input
|
|
3138
|
+
}], description: [{
|
|
3139
|
+
type: Input
|
|
3140
|
+
}], descriptionKey: [{
|
|
3141
|
+
type: Input
|
|
3142
|
+
}], descriptionParams: [{
|
|
3143
|
+
type: Input
|
|
3144
|
+
}], size: [{
|
|
3145
|
+
type: Input
|
|
3146
|
+
}], showCloseButton: [{
|
|
3147
|
+
type: Input
|
|
3148
|
+
}], actionSize: [{
|
|
3149
|
+
type: Input
|
|
3150
|
+
}], actions: [{
|
|
3151
|
+
type: Input
|
|
3152
|
+
}], ariaLabel: [{
|
|
3153
|
+
type: Input
|
|
3154
|
+
}], ariaLabelledBy: [{
|
|
3155
|
+
type: Input
|
|
3156
|
+
}], ariaDescribedBy: [{
|
|
3157
|
+
type: Input
|
|
3158
|
+
}], closeClick: [{
|
|
3159
|
+
type: Output
|
|
3160
|
+
}], actionClick: [{
|
|
3161
|
+
type: Output
|
|
3162
|
+
}] } });
|
|
3163
|
+
|
|
3164
|
+
const SOLARIS_DIALOG_DATA = new InjectionToken('SOLARIS_DIALOG_DATA');
|
|
3165
|
+
|
|
3166
|
+
class SolarisDialogRef {
|
|
3167
|
+
closedSubject = new Subject();
|
|
3168
|
+
closeFn;
|
|
3169
|
+
afterClosed() {
|
|
3170
|
+
return this.closedSubject.asObservable();
|
|
3171
|
+
}
|
|
3172
|
+
close(result) {
|
|
3173
|
+
this.closeFn?.(result);
|
|
3174
|
+
}
|
|
3175
|
+
_attachCloseFn(fn) {
|
|
3176
|
+
this.closeFn = fn;
|
|
3177
|
+
}
|
|
3178
|
+
_finishClose(result) {
|
|
3179
|
+
this.closedSubject.next(result);
|
|
3180
|
+
this.closedSubject.complete();
|
|
3181
|
+
}
|
|
3182
|
+
}
|
|
3183
|
+
|
|
3184
|
+
class SolarisDialogService {
|
|
3185
|
+
appRef = inject(ApplicationRef);
|
|
3186
|
+
environmentInjector = inject(EnvironmentInjector);
|
|
3187
|
+
open(component, configuration = {}) {
|
|
3188
|
+
const dialogRef = new SolarisDialogRef();
|
|
3189
|
+
const backdrop = document.createElement('div');
|
|
3190
|
+
backdrop.className = 'solaris-dialog-backdrop';
|
|
3191
|
+
const host = document.createElement('div');
|
|
3192
|
+
const positionClass = `position-${configuration.position ?? 'center'}`;
|
|
3193
|
+
host.className = [
|
|
3194
|
+
'solaris-dialog-host',
|
|
3195
|
+
positionClass,
|
|
3196
|
+
configuration.panelClass ?? '',
|
|
3197
|
+
].filter(Boolean).join(' ');
|
|
3198
|
+
document.body.appendChild(backdrop);
|
|
3199
|
+
document.body.appendChild(host);
|
|
3200
|
+
const dialogInjector = Injector.create({
|
|
3201
|
+
providers: [
|
|
3202
|
+
{ provide: SOLARIS_DIALOG_DATA, useValue: configuration.data },
|
|
3203
|
+
{ provide: SolarisDialogRef, useValue: dialogRef },
|
|
3204
|
+
],
|
|
3205
|
+
parent: this.environmentInjector,
|
|
3206
|
+
});
|
|
3207
|
+
const containerRef = createComponent((SolarisDialogContainer), {
|
|
3208
|
+
environmentInjector: this.environmentInjector,
|
|
3209
|
+
hostElement: host,
|
|
3210
|
+
});
|
|
3211
|
+
containerRef.setInput('title', configuration.title);
|
|
3212
|
+
containerRef.setInput('titleKey', configuration.titleKey);
|
|
3213
|
+
containerRef.setInput('titleParams', configuration.titleParams);
|
|
3214
|
+
containerRef.setInput('description', configuration.description);
|
|
3215
|
+
containerRef.setInput('descriptionKey', configuration.descriptionKey);
|
|
3216
|
+
containerRef.setInput('descriptionParams', configuration.descriptionParams);
|
|
3217
|
+
containerRef.setInput('size', configuration.size ?? 'md');
|
|
3218
|
+
containerRef.setInput('showCloseButton', configuration.showCloseButton ?? !configuration.disableClose);
|
|
3219
|
+
containerRef.setInput('actions', configuration.actions ?? []);
|
|
3220
|
+
containerRef.setInput('actionSize', configuration.actionSize);
|
|
3221
|
+
containerRef.setInput('ariaLabel', configuration.ariaLabel);
|
|
3222
|
+
containerRef.setInput('ariaLabelledBy', configuration.ariaLabelledBy);
|
|
3223
|
+
containerRef.setInput('ariaDescribedBy', configuration.ariaDescribedBy);
|
|
3224
|
+
this.appRef.attachView(containerRef.hostView);
|
|
3225
|
+
containerRef.changeDetectorRef.detectChanges();
|
|
3226
|
+
const contentRef = createComponent(component, {
|
|
3227
|
+
environmentInjector: this.environmentInjector,
|
|
3228
|
+
elementInjector: dialogInjector,
|
|
3229
|
+
});
|
|
3230
|
+
containerRef.instance.contentHost.insert(contentRef.hostView);
|
|
3231
|
+
contentRef.changeDetectorRef.detectChanges();
|
|
3232
|
+
const close = (result) => {
|
|
3233
|
+
this.appRef.detachView(contentRef.hostView);
|
|
3234
|
+
contentRef.destroy();
|
|
3235
|
+
this.appRef.detachView(containerRef.hostView);
|
|
3236
|
+
containerRef.destroy();
|
|
3237
|
+
backdrop.remove();
|
|
3238
|
+
host.remove();
|
|
3239
|
+
document.removeEventListener('keydown', onKeyDown, true);
|
|
3240
|
+
backdrop.removeEventListener('pointerdown', onBackdropClick, true);
|
|
3241
|
+
dialogRef._finishClose(result);
|
|
3242
|
+
};
|
|
3243
|
+
dialogRef._attachCloseFn(close);
|
|
3244
|
+
const closeOnBackdropClick = configuration.closeOnBackdropClick ?? !configuration.disableClose;
|
|
3245
|
+
const closeOnEscape = configuration.closeOnEscape ?? !configuration.disableClose;
|
|
3246
|
+
const onBackdropClick = () => {
|
|
3247
|
+
if (closeOnBackdropClick) {
|
|
3248
|
+
dialogRef.close();
|
|
3249
|
+
}
|
|
3250
|
+
};
|
|
3251
|
+
const onKeyDown = (event) => {
|
|
3252
|
+
if (event.key === 'Escape' && closeOnEscape) {
|
|
3253
|
+
dialogRef.close();
|
|
3254
|
+
}
|
|
3255
|
+
};
|
|
3256
|
+
backdrop.addEventListener('pointerdown', onBackdropClick, true);
|
|
3257
|
+
document.addEventListener('keydown', onKeyDown, true);
|
|
3258
|
+
containerRef.instance.closeClick.subscribe(() => {
|
|
3259
|
+
if (!configuration.disableClose) {
|
|
3260
|
+
dialogRef.close();
|
|
3261
|
+
}
|
|
3262
|
+
});
|
|
3263
|
+
containerRef.instance.actionClick.subscribe((action) => {
|
|
3264
|
+
if (action.disabled)
|
|
3265
|
+
return;
|
|
3266
|
+
if (action.closesDialog ?? true) {
|
|
3267
|
+
dialogRef.close(action.value);
|
|
3268
|
+
}
|
|
3269
|
+
});
|
|
3270
|
+
return dialogRef;
|
|
3271
|
+
}
|
|
3272
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
3273
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDialogService, providedIn: 'root' });
|
|
3274
|
+
}
|
|
3275
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDialogService, decorators: [{
|
|
3276
|
+
type: Injectable,
|
|
3277
|
+
args: [{
|
|
3278
|
+
providedIn: 'root',
|
|
3279
|
+
}]
|
|
3280
|
+
}] });
|
|
3281
|
+
|
|
3042
3282
|
class SolarisDrawerHeaderDirective {
|
|
3043
3283
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDrawerHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3044
3284
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisDrawerHeaderDirective, isStandalone: true, selector: "[solaris-drawer-header]", ngImport: i0 });
|
|
@@ -3430,13 +3670,13 @@ class SolarisFilterPanel {
|
|
|
3430
3670
|
this.setOpen(!this.isOpen());
|
|
3431
3671
|
}
|
|
3432
3672
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFilterPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3433
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisFilterPanel, isStandalone: true, selector: "solaris-filter-panel", inputs: { count: "count", labelKey: "labelKey", titleKey: "titleKey", disabled: "disabled", drawerSide: "drawerSide", radius: "radius", drawerWidth: "drawerWidth", label: "label", title: "title", open: "open" }, outputs: { apply: "apply", clearAll: "clearAll", openChange: "openChange" }, host: { classAttribute: "solaris-filter-panel-host" }, queries: [{ propertyName: "footerSlot", first: true, predicate: SolarisFilterPanelFooterDirective, descendants: true }, { propertyName: "chipsSlot", first: true, predicate: SolarisFilterPanelChipsDirective, descendants: true }], ngImport: i0, template: "<button type=\"button\" class=\"solaris-filter-panel__trigger\" [disabled]=\"disabled\" (click)=\"toggle()\"\r\n [attr.data-radius]=\"radius\">\r\n <i class=\"ph ph-sliders-horizontal\"></i>\r\n\r\n @if (labelKey) { {{ labelKey | translate }} } @else { {{ label | translate }} }\r\n\r\n @if (count > 0) {\r\n <span class=\"solaris-filter-panel__count\">{{ count }}</span>\r\n }\r\n</button>\r\n\r\n<solaris-drawer [open]=\"isOpen()\" (openChange)=\"setOpen($event)\" [side]=\"drawerSide\" [width]=\"drawerWidth\"\r\n [backdrop]=\"true\" [closeOnEscape]=\"true\" [closeOnOutsideClick]=\"true\" [lockScroll]=\"true\"\r\n [restoreFocus]=\"true\" [trapFocus]=\"true\" panelClass=\"solaris-filter-panel__drawer\">\r\n <div solaris-drawer-header class=\"solaris-filter-panel__header\">\r\n <div class=\"solaris-filter-panel__title\">\r\n @if (titleKey) { {{ titleKey | translate }} } @else { {{ title | translate }} }\r\n </div>\r\n\r\n <button type=\"button\" class=\"solaris-filter-panel__close\" (click)=\"setOpen(false)\">\r\n <i class=\"ph ph-x\"></i>\r\n </button>\r\n </div>\r\n\r\n @if (hasChips()) {\r\n <div class=\"solaris-filter-panel__chips\">\r\n <ng-content select=\"[solarisFilterPanelChips]\"></ng-content>\r\n </div>\r\n }\r\n\r\n <div class=\"solaris-filter-panel__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <footer solaris-drawer-footer class=\"solaris-filter-panel__footer\">\r\n <ng-content select=\"[solarisFilterPanelFooter]\"></ng-content>\r\n\r\n @if (!hasCustomFooter) {\r\n <div class=\"solaris-filter-panel__footer-default\">\r\n <button solaris-button color=\"surface\" variant=\"outline\" type=\"button\" (click)=\"clearAll.emit()\">\r\n {{ 'ui.solaris.common.clearAll' | translate }}\r\n </button>\r\n\r\n <button solaris-button type=\"button\" (click)=\"apply.emit()\">\r\n {{ 'ui.solaris.common.apply' | translate }}\r\n </button>\r\n </div>\r\n }\r\n </footer>\r\n</solaris-drawer>\r\n", styles: [".solaris-filter-panel__trigger{--solaris-filter-panel-radius: var(--solaris-radius-sm);cursor:pointer;align-items:center;display:inline-flex;padding:.55rem .9rem;gap:var(--solaris-space-2);color:var(--solaris-color-text);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border);height:var(--solaris-filter-bar-height, 3.8rem);border-radius:var(--solaris-filter-panel-radius)}.solaris-filter-panel__trigger[data-radius=sm]{--solaris-filter-panel-radius: var(--solaris-radius-sm)}.solaris-filter-panel__trigger[data-radius=md]{--solaris-filter-panel-radius: var(--solaris-radius-md)}.solaris-filter-panel__trigger[data-radius=full]{--solaris-filter-panel-radius: var(--solaris-radius-full)}.solaris-filter-panel__trigger:disabled{opacity:.55;cursor:not-allowed}.solaris-filter-panel__count{padding:.1rem .5rem;font-size:var(--solaris-fs-12);margin-left:var(--solaris-space-1);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border)}:host ::ng-deep .solaris-filter-panel__drawer{width:min(30rem,92vw)}.solaris-filter-panel__header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--solaris-space-4)}.solaris-filter-panel__title{font-size:var(--solaris-fs-14);color:var(--solaris-color-text)}.solaris-filter-panel__close{border:none;cursor:pointer;background:transparent;padding:var(--solaris-space-2);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-sm)}.solaris-filter-panel__close:hover{background:var(--solaris-color-surface-2)}.solaris-filter-panel__chips{display:flex;flex-wrap:wrap;gap:var(--solaris-space-2);border-bottom:1px solid var(--solaris-color-border);padding:var(--solaris-space-3) var(--solaris-space-4)}.solaris-filter-panel__content{min-height:0;overflow:auto;display:grid;align-content:flex-start;gap:var(--solaris-space-8);padding:var(--solaris-space-4)}.solaris-filter-panel__footer-default{display:grid;gap:var(--solaris-space-3);grid-template-columns:1fr 1fr}.solaris-filter-panel__footer-default button{font-weight:400;font-size:var(--solaris-fs-14)}\n"], dependencies: [{ kind: "directive", type:
|
|
3673
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisFilterPanel, isStandalone: true, selector: "solaris-filter-panel", inputs: { count: "count", labelKey: "labelKey", titleKey: "titleKey", disabled: "disabled", drawerSide: "drawerSide", radius: "radius", drawerWidth: "drawerWidth", label: "label", title: "title", open: "open" }, outputs: { apply: "apply", clearAll: "clearAll", openChange: "openChange" }, host: { classAttribute: "solaris-filter-panel-host" }, queries: [{ propertyName: "footerSlot", first: true, predicate: SolarisFilterPanelFooterDirective, descendants: true }, { propertyName: "chipsSlot", first: true, predicate: SolarisFilterPanelChipsDirective, descendants: true }], ngImport: i0, template: "<button type=\"button\" class=\"solaris-filter-panel__trigger\" [disabled]=\"disabled\" (click)=\"toggle()\"\r\n [attr.data-radius]=\"radius\">\r\n <i class=\"ph ph-sliders-horizontal\"></i>\r\n\r\n @if (labelKey) { {{ labelKey | translate }} } @else { {{ label | translate }} }\r\n\r\n @if (count > 0) {\r\n <span class=\"solaris-filter-panel__count\">{{ count }}</span>\r\n }\r\n</button>\r\n\r\n<solaris-drawer [open]=\"isOpen()\" (openChange)=\"setOpen($event)\" [side]=\"drawerSide\" [width]=\"drawerWidth\"\r\n [backdrop]=\"true\" [closeOnEscape]=\"true\" [closeOnOutsideClick]=\"true\" [lockScroll]=\"true\"\r\n [restoreFocus]=\"true\" [trapFocus]=\"true\" panelClass=\"solaris-filter-panel__drawer\">\r\n <div solaris-drawer-header class=\"solaris-filter-panel__header\">\r\n <div class=\"solaris-filter-panel__title\">\r\n @if (titleKey) { {{ titleKey | translate }} } @else { {{ title | translate }} }\r\n </div>\r\n\r\n <button type=\"button\" class=\"solaris-filter-panel__close\" (click)=\"setOpen(false)\">\r\n <i class=\"ph ph-x\"></i>\r\n </button>\r\n </div>\r\n\r\n @if (hasChips()) {\r\n <div class=\"solaris-filter-panel__chips\">\r\n <ng-content select=\"[solarisFilterPanelChips]\"></ng-content>\r\n </div>\r\n }\r\n\r\n <div class=\"solaris-filter-panel__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <footer solaris-drawer-footer class=\"solaris-filter-panel__footer\">\r\n <ng-content select=\"[solarisFilterPanelFooter]\"></ng-content>\r\n\r\n @if (!hasCustomFooter) {\r\n <div class=\"solaris-filter-panel__footer-default\">\r\n <button solaris-button color=\"surface\" variant=\"outline\" type=\"button\" (click)=\"clearAll.emit()\">\r\n {{ 'ui.solaris.common.clearAll' | translate }}\r\n </button>\r\n\r\n <button solaris-button type=\"button\" (click)=\"apply.emit()\">\r\n {{ 'ui.solaris.common.apply' | translate }}\r\n </button>\r\n </div>\r\n }\r\n </footer>\r\n</solaris-drawer>\r\n", styles: [".solaris-filter-panel__trigger{--solaris-filter-panel-radius: var(--solaris-radius-sm);cursor:pointer;align-items:center;display:inline-flex;padding:.55rem .9rem;gap:var(--solaris-space-2);color:var(--solaris-color-text);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border);height:var(--solaris-filter-bar-height, 3.8rem);border-radius:var(--solaris-filter-panel-radius)}.solaris-filter-panel__trigger[data-radius=sm]{--solaris-filter-panel-radius: var(--solaris-radius-sm)}.solaris-filter-panel__trigger[data-radius=md]{--solaris-filter-panel-radius: var(--solaris-radius-md)}.solaris-filter-panel__trigger[data-radius=full]{--solaris-filter-panel-radius: var(--solaris-radius-full)}.solaris-filter-panel__trigger:disabled{opacity:.55;cursor:not-allowed}.solaris-filter-panel__count{padding:.1rem .5rem;font-size:var(--solaris-fs-12);margin-left:var(--solaris-space-1);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border)}:host ::ng-deep .solaris-filter-panel__drawer{width:min(30rem,92vw)}.solaris-filter-panel__header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--solaris-space-4)}.solaris-filter-panel__title{font-size:var(--solaris-fs-14);color:var(--solaris-color-text)}.solaris-filter-panel__close{border:none;cursor:pointer;background:transparent;padding:var(--solaris-space-2);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-sm)}.solaris-filter-panel__close:hover{background:var(--solaris-color-surface-2)}.solaris-filter-panel__chips{display:flex;flex-wrap:wrap;gap:var(--solaris-space-2);border-bottom:1px solid var(--solaris-color-border);padding:var(--solaris-space-3) var(--solaris-space-4)}.solaris-filter-panel__content{min-height:0;overflow:auto;display:grid;align-content:flex-start;gap:var(--solaris-space-8);padding:var(--solaris-space-4)}.solaris-filter-panel__footer-default{display:grid;gap:var(--solaris-space-3);grid-template-columns:1fr 1fr}.solaris-filter-panel__footer-default button{font-weight:400;font-size:var(--solaris-fs-14)}\n"], dependencies: [{ kind: "directive", type: SolarisButtonDirective, selector: "button[solaris-button], a[solaris-button]", inputs: ["size", "variant", "color", "textColor", "radius", "loading", "iconOnly", "disabled", "fullWidth", "badgeOverlay"] }, { kind: "directive", type: SolarisDrawerHeaderDirective, selector: "[solaris-drawer-header]" }, { kind: "directive", type: SolarisDrawerFooterDirective, selector: "[solaris-drawer-footer]" }, { kind: "component", type: SolarisDrawer, selector: "solaris-drawer", inputs: ["title", "titleKey", "panelClass", "backdrop", "showClose", "trapFocus", "backdropClass", "showHeader", "lockScroll", "restoreFocus", "closeOnEscape", "width", "side", "height", "closeOnOutsideClick", "open"], outputs: ["openChange"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3434
3674
|
}
|
|
3435
3675
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFilterPanel, decorators: [{
|
|
3436
3676
|
type: Component,
|
|
3437
3677
|
args: [{ selector: 'solaris-filter-panel', standalone: true, imports: [
|
|
3438
3678
|
SolarisTranslationPipe,
|
|
3439
|
-
|
|
3679
|
+
SolarisButtonDirective,
|
|
3440
3680
|
SolarisDrawerHeaderDirective,
|
|
3441
3681
|
SolarisDrawerFooterDirective,
|
|
3442
3682
|
SolarisDrawer
|
|
@@ -7896,5 +8136,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
7896
8136
|
* Generated bundle index. Do not edit.
|
|
7897
8137
|
*/
|
|
7898
8138
|
|
|
7899
|
-
export {
|
|
8139
|
+
export { ButtonGroupDirective, FieldErrorComponent, FormField, InputTextDirective, PasswordToggle, SOLARIS_CARD_GROUP, SOLARIS_CARD_SLOT_DIRECTIVES, SOLARIS_DIALOG_DATA, SOLARIS_FORM_FIELD_CONTROLLER, SOLARIS_FORM_FIELD_FEATURES, SOLARIS_INPUT, SOLARIS_NOTIFICATION_CONFIG, SOLARIS_NOTIFICATION_DEFAULT_CONFIG, SOLARIS_NOTIFICATION_POSITIONS, SOLARIS_RADIO_GROUP, SolarisAvatar, SolarisAvatarDropdown, SolarisAvatarOverlayDirective, SolarisAvatarStack, SolarisBadge, SolarisBodyDirective, SolarisBreadcrumb, SolarisButtonDirective, SolarisCard, SolarisCardActionsDirective, SolarisCardBadgeDirective, SolarisCardDescriptionDirective, SolarisCardEyebrowDirective, SolarisCardFooterDirective, SolarisCardGroup, SolarisCardMedia, SolarisCardMediaDirective, SolarisCardMediaOverlayDirective, SolarisCardMetaDirective, SolarisCardTitleDirective, SolarisCheckbox, SolarisColumnCellDef, SolarisColumnHeaderDef, SolarisControlBridgeDirective, SolarisDialogContainer, SolarisDialogRef, SolarisDialogService, SolarisDivider, SolarisDrawer, SolarisDrawerFooterDirective, SolarisDrawerHeaderDirective, SolarisDropdownContent, SolarisDropdownContentPanelDirective, SolarisDropdownContentRegistry, SolarisDropdownContentTriggerDirective, SolarisEmailDirective, SolarisFilterBar, SolarisFilterChip, SolarisFilterField, SolarisFilterPanel, SolarisFilterPanelFooterDirective, SolarisFloatingOverlayService, SolarisFooterDirective, SolarisFormFieldController, SolarisHeaderDirective, SolarisIdGenerator, SolarisImageSliderComponent, SolarisLoading, SolarisLoadingOverlay, SolarisNotificationCenterComponent, SolarisNotificationHostComponent, SolarisNotificationIntlService, SolarisNotificationItemComponent, SolarisNotificationService, SolarisPage, SolarisPageHeader, SolarisPageHeaderBreadcrumbDirective, SolarisPageHeaderDescriptionDirective, SolarisPageHeaderTitle, SolarisPageHeaderTitleDirective, SolarisPasswordDirective, SolarisPhoneInput, SolarisPopover, SolarisPopoverPanelDirective, SolarisPopoverTriggerDirective, SolarisPrefixDirective, SolarisPresenceAvatar, SolarisRadio, SolarisRadioGroup, SolarisRichTooltipDirective, SolarisRichTooltipPanel, SolarisRowComponent, SolarisSectionComponent, SolarisSelect, SolarisSelectionCard, SolarisStepper, SolarisStepperItem, SolarisSuffixDirective, SolarisTab, SolarisTable, SolarisTableColumn, SolarisTableFilters, SolarisTableSkeleton, SolarisTabs, SolarisTooltipDirective, SolarisTooltipPanel, computeFloatingPosition, computePopoverPosition, provideSolarisNotifications, repositionTooltipOverlay, uniqueId };
|
|
7900
8140
|
//# sourceMappingURL=educarehq-solaris-components.mjs.map
|