@educarehq/solaris-components 0.4.7 → 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.
|
@@ -3049,6 +3049,7 @@ class SolarisDialogContainer {
|
|
|
3049
3049
|
descriptionParams;
|
|
3050
3050
|
size = 'md';
|
|
3051
3051
|
showCloseButton = true;
|
|
3052
|
+
actionSize;
|
|
3052
3053
|
actions = [];
|
|
3053
3054
|
ariaLabel;
|
|
3054
3055
|
ariaLabelledBy;
|
|
@@ -3080,12 +3081,51 @@ class SolarisDialogContainer {
|
|
|
3080
3081
|
return this.descriptionId;
|
|
3081
3082
|
return null;
|
|
3082
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
|
+
}
|
|
3083
3121
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDialogContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3084
|
-
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", 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\" class=\"solaris-dialog__action\" [
|
|
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 });
|
|
3085
3123
|
}
|
|
3086
3124
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDialogContainer, decorators: [{
|
|
3087
3125
|
type: Component,
|
|
3088
|
-
args: [{ selector: 'solaris-dialog-container', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush,
|
|
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"] }]
|
|
3089
3129
|
}], propDecorators: { contentHost: [{
|
|
3090
3130
|
type: ViewChild,
|
|
3091
3131
|
args: ['contentHost', { read: ViewContainerRef, static: true }]
|
|
@@ -3105,6 +3145,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
3105
3145
|
type: Input
|
|
3106
3146
|
}], showCloseButton: [{
|
|
3107
3147
|
type: Input
|
|
3148
|
+
}], actionSize: [{
|
|
3149
|
+
type: Input
|
|
3108
3150
|
}], actions: [{
|
|
3109
3151
|
type: Input
|
|
3110
3152
|
}], ariaLabel: [{
|
|
@@ -3175,6 +3217,7 @@ class SolarisDialogService {
|
|
|
3175
3217
|
containerRef.setInput('size', configuration.size ?? 'md');
|
|
3176
3218
|
containerRef.setInput('showCloseButton', configuration.showCloseButton ?? !configuration.disableClose);
|
|
3177
3219
|
containerRef.setInput('actions', configuration.actions ?? []);
|
|
3220
|
+
containerRef.setInput('actionSize', configuration.actionSize);
|
|
3178
3221
|
containerRef.setInput('ariaLabel', configuration.ariaLabel);
|
|
3179
3222
|
containerRef.setInput('ariaLabelledBy', configuration.ariaLabelledBy);
|
|
3180
3223
|
containerRef.setInput('ariaDescribedBy', configuration.ariaDescribedBy);
|