@educarehq/solaris-components 0.5.8 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3469,14 +3469,14 @@ class SolarisDialogContainer {
|
|
|
3469
3469
|
}
|
|
3470
3470
|
}
|
|
3471
3471
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDialogContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3472
|
-
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", actionAlignment: "actionAlignment", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy" }, outputs: { closeClick: "closeClick", actionClick: "actionClick" }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<section 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 | translate }}\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 | translate }}\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\" [attr.data-action-alignment]=\"actionAlignment\">\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.
|
|
3472
|
+
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", actionAlignment: "actionAlignment", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy" }, outputs: { closeClick: "closeClick", actionClick: "actionClick" }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<section 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 | translate }}\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 | translate }}\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\" [attr.data-action-alignment]=\"actionAlignment\">\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.prefixIcon) {\r\n <i [attr.class]=\"'solaris-dialog__action-icon solaris-dialog__action-icon--prefix ' + action.prefixIcon\"\r\n aria-hidden=\"true\"></i>\r\n }\r\n\r\n <span class=\"solaris-dialog__action-label\">\r\n @if (action.labelKey) {\r\n {{ action.labelKey | translate:action.labelParams }}\r\n } @else {\r\n {{ action.label }}\r\n }\r\n </span>\r\n\r\n @if (action.suffixIcon) {\r\n <i [attr.class]=\"'solaris-dialog__action-icon solaris-dialog__action-icon--suffix ' + action.suffixIcon\"\r\n aria-hidden=\"true\"></i>\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;gap:var(--solaris-space-3);border-block-start:1px solid var(--solaris-dialog-border);padding:var(--solaris-space-4) var(--solaris-dialog-padding);background:color-mix(in srgb,var(--solaris-color-surface-2) 45%,transparent)}.solaris-dialog__footer[data-action-alignment=start]{justify-content:flex-start}.solaris-dialog__footer[data-action-alignment=center]{justify-content:center}.solaris-dialog__footer[data-action-alignment=end]{justify-content:flex-end}.solaris-dialog__footer[data-action-alignment=space-between]{justify-content:space-between}.solaris-dialog__action{white-space:nowrap}.solaris-dialog__action-icon{line-height:1;font-size:1.15em}.solaris-dialog__action-label{min-inline-size:0}@keyframes solaris-dialog-in{0%{opacity:0;transform:translateY(.8rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], dependencies: [{ kind: "directive", type: SolarisButtonDirective, selector: "button[solaris-button], a[solaris-button]", inputs: ["size", "variant", "color", "textColor", "radius", "loading", "iconOnly", "disabled", "fullWidth", "badgeOverlay"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3473
3473
|
}
|
|
3474
3474
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDialogContainer, decorators: [{
|
|
3475
3475
|
type: Component,
|
|
3476
3476
|
args: [{ selector: 'solaris-dialog-container', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3477
3477
|
SolarisButtonDirective,
|
|
3478
3478
|
SolarisTranslationPipe
|
|
3479
|
-
], 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 | translate }}\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 | translate }}\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\" [attr.data-action-alignment]=\"actionAlignment\">\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.
|
|
3479
|
+
], 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 | translate }}\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 | translate }}\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\" [attr.data-action-alignment]=\"actionAlignment\">\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.prefixIcon) {\r\n <i [attr.class]=\"'solaris-dialog__action-icon solaris-dialog__action-icon--prefix ' + action.prefixIcon\"\r\n aria-hidden=\"true\"></i>\r\n }\r\n\r\n <span class=\"solaris-dialog__action-label\">\r\n @if (action.labelKey) {\r\n {{ action.labelKey | translate:action.labelParams }}\r\n } @else {\r\n {{ action.label }}\r\n }\r\n </span>\r\n\r\n @if (action.suffixIcon) {\r\n <i [attr.class]=\"'solaris-dialog__action-icon solaris-dialog__action-icon--suffix ' + action.suffixIcon\"\r\n aria-hidden=\"true\"></i>\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;gap:var(--solaris-space-3);border-block-start:1px solid var(--solaris-dialog-border);padding:var(--solaris-space-4) var(--solaris-dialog-padding);background:color-mix(in srgb,var(--solaris-color-surface-2) 45%,transparent)}.solaris-dialog__footer[data-action-alignment=start]{justify-content:flex-start}.solaris-dialog__footer[data-action-alignment=center]{justify-content:center}.solaris-dialog__footer[data-action-alignment=end]{justify-content:flex-end}.solaris-dialog__footer[data-action-alignment=space-between]{justify-content:space-between}.solaris-dialog__action{white-space:nowrap}.solaris-dialog__action-icon{line-height:1;font-size:1.15em}.solaris-dialog__action-label{min-inline-size:0}@keyframes solaris-dialog-in{0%{opacity:0;transform:translateY(.8rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
|
|
3480
3480
|
}], propDecorators: { contentHost: [{
|
|
3481
3481
|
type: ViewChild,
|
|
3482
3482
|
args: ['contentHost', { read: ViewContainerRef, static: true }]
|