@mozaic-ds/angular 2.0.7 → 2.0.10
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.
|
@@ -4,7 +4,7 @@ import { RouterLink, RouterLinkActive, RouterLinkWithHref } from '@angular/route
|
|
|
4
4
|
import { NgTemplateOutlet, NgClass, NgComponentOutlet } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
6
6
|
import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
7
|
-
import { WarningCircle32, Uploading32, CheckCircle32, CrossCircleFilled20, Refresh32, Refresh20, Eye20, Upload24, Cross24, ChevronLeft24, ChevronRight24, CrossCircleFilled24, More24, Less24, InfoCircle32, CrossCircle32, Cross20, CrossCircle24, ImageAlt32, ChevronDown24, CheckCircleFilled32, WarningCircleFilled32, CrossCircleFilled32, InfoCircleFilled32, SidebarExpand24, ChevronDown20,
|
|
7
|
+
import { WarningCircle32, Uploading32, CheckCircle32, CrossCircleFilled20, Refresh32, Refresh20, Eye20, Upload24, Cross24, ChevronLeft24, ChevronRight24, ChevronLeft20, ChevronRight20, CrossCircleFilled24, More24, Less24, InfoCircle32, CrossCircle32, Cross20, CrossCircle24, ImageAlt32, ChevronDown24, CheckCircleFilled32, WarningCircleFilled32, CrossCircleFilled32, InfoCircleFilled32, SidebarExpand24, ChevronDown20, InfoCircleFilled24, WarningCircleFilled24, CheckCircleFilled24, ArrowBottomRight24, ArrowTopRight24, StarHalf32, StarFilled32, Star32, StarHalf24, StarFilled24, Star24, StarHalf20, StarFilled20, Star20, Check20, Check24, ArrowBack24, ArrowNext24, HelpCircle24, Menu24, Notification24, Search24, PauseCircle24, PlayCircle24 } from '@mozaic-ds/icons-angular';
|
|
8
8
|
import { Overlay, OverlayConfig, OverlayPositionBuilder } from '@angular/cdk/overlay';
|
|
9
9
|
import { CdkPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
|
|
10
10
|
import { Subject } from 'rxjs';
|
|
@@ -884,10 +884,15 @@ class MozSelectComponent {
|
|
|
884
884
|
this._value.set(value);
|
|
885
885
|
this.onChange(value);
|
|
886
886
|
}
|
|
887
|
-
|
|
887
|
+
hostClasses = computed(() => {
|
|
888
888
|
return {
|
|
889
889
|
'select': true,
|
|
890
890
|
[`select--${this.size()}`]: this.size(),
|
|
891
|
+
};
|
|
892
|
+
}, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
|
|
893
|
+
classes = computed(() => {
|
|
894
|
+
return {
|
|
895
|
+
'select--control': true,
|
|
891
896
|
'select--readonly': this.readonly(),
|
|
892
897
|
'is-invalid': this.isInvalid(),
|
|
893
898
|
};
|
|
@@ -899,7 +904,7 @@ class MozSelectComponent {
|
|
|
899
904
|
useExisting: forwardRef(() => MozSelectComponent),
|
|
900
905
|
multi: true,
|
|
901
906
|
},
|
|
902
|
-
], ngImport: i0, template: "<select\n
|
|
907
|
+
], ngImport: i0, template: "<div [class]=\"hostClasses()\">\n <select\n [id]=\"id()\"\n [class]=\"classes()\"\n [name]=\"name()\"\n [disabled]=\"disabled() || readonly()\"\n (change)=\"handleChange($event)\"\n >\n <option value=\"\" [selected]=\"!_value()\" disabled>\n {{ placeholder() || 'Select an option' }}\n </option>\n @for (option of options(); track $index) {\n <option\n [value]=\"option.value\"\n [selected]=\"_value() === option.value\"\n [disabled]=\"option.disabled\"\n [attr.data-id]=\"option.id\"\n [attr.*]=\"option.attributes\"\n >\n {{ option.text }}\n </option>\n }\n </select>\n</div>\n", styles: [".mc-select,.select{position:relative;display:block;width:100%}.mc-select:after,.select:after{content:\"\";pointer-events:none;position:absolute;top:50%;right:1rem;transform:translateY(-50%);width:1rem;height:1rem;background-color:var(--forms-color-icon-interactive, #000000);mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\") no-repeat center/contain;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-select__control,.select--control{appearance:none;font-family:inherit;transition:box-shadow .2s ease;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);height:3rem;padding:0 3rem 0 .75rem;background-position:right 1rem center;border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);display:block;width:100%;color:var(--forms-color-text-default, #000000);background-color:var(--forms-color-background-default, #ffffff);text-overflow:ellipsis;border-radius:var(--border-radius-s, .25rem)}.mc-select__control:hover,.select--control:hover{border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-select__control:focus,.select--control:focus{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-select__control:disabled,.select--control:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);border-color:transparent;cursor:not-allowed;box-shadow:none;color:var(--forms-color-text-disabled, #737373)}.mc-select__control--readonly{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-select__control.is-invalid,.is-invalid.select--control{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-select__control.is-invalid:hover,.is-invalid.select--control:hover{border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-select--s .mc-select__control,.select--s .mc-select__control,.mc-select--s .select--control,.select--s .select--control{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);height:2rem;padding:0 2rem 0 .5rem;background-position:right .5rem center}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
903
908
|
}
|
|
904
909
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MozSelectComponent, decorators: [{
|
|
905
910
|
type: Component,
|
|
@@ -909,7 +914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
|
|
|
909
914
|
useExisting: forwardRef(() => MozSelectComponent),
|
|
910
915
|
multi: true,
|
|
911
916
|
},
|
|
912
|
-
], imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<select\n
|
|
917
|
+
], imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"hostClasses()\">\n <select\n [id]=\"id()\"\n [class]=\"classes()\"\n [name]=\"name()\"\n [disabled]=\"disabled() || readonly()\"\n (change)=\"handleChange($event)\"\n >\n <option value=\"\" [selected]=\"!_value()\" disabled>\n {{ placeholder() || 'Select an option' }}\n </option>\n @for (option of options(); track $index) {\n <option\n [value]=\"option.value\"\n [selected]=\"_value() === option.value\"\n [disabled]=\"option.disabled\"\n [attr.data-id]=\"option.id\"\n [attr.*]=\"option.attributes\"\n >\n {{ option.text }}\n </option>\n }\n </select>\n</div>\n", styles: [".mc-select,.select{position:relative;display:block;width:100%}.mc-select:after,.select:after{content:\"\";pointer-events:none;position:absolute;top:50%;right:1rem;transform:translateY(-50%);width:1rem;height:1rem;background-color:var(--forms-color-icon-interactive, #000000);mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\") no-repeat center/contain;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-select__control,.select--control{appearance:none;font-family:inherit;transition:box-shadow .2s ease;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);height:3rem;padding:0 3rem 0 .75rem;background-position:right 1rem center;border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);display:block;width:100%;color:var(--forms-color-text-default, #000000);background-color:var(--forms-color-background-default, #ffffff);text-overflow:ellipsis;border-radius:var(--border-radius-s, .25rem)}.mc-select__control:hover,.select--control:hover{border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-select__control:focus,.select--control:focus{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-select__control:disabled,.select--control:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);border-color:transparent;cursor:not-allowed;box-shadow:none;color:var(--forms-color-text-disabled, #737373)}.mc-select__control--readonly{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-select__control.is-invalid,.is-invalid.select--control{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-select__control.is-invalid:hover,.is-invalid.select--control:hover{border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-select--s .mc-select__control,.select--s .mc-select__control,.mc-select--s .select--control,.select--s .select--control{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);height:2rem;padding:0 2rem 0 .5rem;background-position:right .5rem center}\n"] }]
|
|
913
918
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
914
919
|
|
|
915
920
|
class MozPaginationComponent {
|
|
@@ -917,6 +922,8 @@ class MozPaginationComponent {
|
|
|
917
922
|
compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : []));
|
|
918
923
|
options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
919
924
|
selectLabel = input('Select page', ...(ngDevMode ? [{ debugName: "selectLabel" }] : []));
|
|
925
|
+
buttonAppearance = input('square', ...(ngDevMode ? [{ debugName: "buttonAppearance" }] : []));
|
|
926
|
+
buttonSize = input('m', ...(ngDevMode ? [{ debugName: "buttonSize" }] : []));
|
|
920
927
|
value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
921
928
|
updateValue = output();
|
|
922
929
|
_currentValue = linkedSignal(this.value, ...(ngDevMode ? [{ debugName: "_currentValue" }] : []));
|
|
@@ -945,7 +952,7 @@ class MozPaginationComponent {
|
|
|
945
952
|
this.updateValue.emit(+value);
|
|
946
953
|
}
|
|
947
954
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MozPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
948
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: MozPaginationComponent, isStandalone: true, selector: "moz-pagination", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateValue: "updateValue" }, ngImport: i0, template: "<nav class=\"pagination\" role=\"navigation\">\n @if (!compact()) {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Previous page\"\n [disabled]=\"isFirstPage()\"\n (click)=\"previous()\"\n >\n <ChevronLeft24 icon />\n </button>\n } @else {\n <moz-icon-button\n aria-label=\"Previous page\"\n [disabled]=\"isFirstPage()\"\n (click)=\"previous()\"\n [id]=\"'pagination-previous-button'\"\n >\n <ChevronLeft24 icon />\n </moz-icon-button>\n } @if (!compact()) {\n <div class=\"pagination__field\">\n <moz-select\n class=\"pagination__select\"\n [id]=\"id()\"\n [name]=\"id()\"\n [options]=\"options()\"\n [ngModel]=\"_currentValue()\"\n (ngModelChange)=\"onSelectChange($event)\"\n [ariaLabel]=\"selectLabel()\"\n />\n </div>\n } @else {\n <span class=\"pagination__label\" aria-current=\"page\">\n {{ currentPageText() }}\n </span>\n } @if (!compact()) {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Next page\"\n [disabled]=\"isLastPage()\"\n (click)=\"next()\"\n >\n <ChevronRight24 icon />\n </button>\n } @else {\n <moz-icon-button\n aria-label=\"Next page\"\n [disabled]=\"isLastPage()\"\n (click)=\"next()\"\n [id]=\"'pagination-next-button'\"\n >\n <ChevronRight24 icon />\n </moz-icon-button>\n }\n</nav>\n", styles: [".mc-pagination,.pagination{align-items:center;display:flex;justify-content:center;gap:.5rem}.mc-pagination__label,.pagination__label{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "component", type: ChevronLeft24, selector: "ChevronLeft24", inputs: ["hostClass"] }, { kind: "component", type: ChevronRight24, selector: "ChevronRight24", inputs: ["hostClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
955
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: MozPaginationComponent, isStandalone: true, selector: "moz-pagination", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, buttonAppearance: { classPropertyName: "buttonAppearance", publicName: "buttonAppearance", isSignal: true, isRequired: false, transformFunction: null }, buttonSize: { classPropertyName: "buttonSize", publicName: "buttonSize", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateValue: "updateValue" }, ngImport: i0, template: "<nav class=\"pagination\" role=\"navigation\">\n @if (!compact() && buttonAppearance() === 'square') {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Previous page\"\n [disabled]=\"isFirstPage()\"\n (click)=\"previous()\"\n [size]=\"buttonSize()\"\n >\n @if(buttonSize() === 'm') {\n <ChevronLeft24 icon />\n } @else {\n <ChevronLeft20 icon />\n }\n </button>\n } @else {\n <moz-icon-button\n aria-label=\"Previous page\"\n [disabled]=\"isFirstPage()\"\n (click)=\"previous()\"\n [size]=\"buttonSize()\"\n [id]=\"'pagination-previous-button'\"\n >\n @if(buttonSize() === 'm') {\n <ChevronLeft24 icon />\n } @else {\n <ChevronLeft20 icon />\n }\n </moz-icon-button>\n } @if (!compact()) {\n <div class=\"pagination__field\">\n <moz-select\n class=\"pagination__select\"\n [id]=\"id()\"\n [name]=\"id()\"\n [options]=\"options()\"\n [ngModel]=\"_currentValue()\"\n (ngModelChange)=\"onSelectChange($event)\"\n [ariaLabel]=\"selectLabel()\"\n [size]=\"buttonSize()\"\n />\n </div>\n } @else {\n <span class=\"pagination__label\" aria-current=\"page\">\n {{ currentPageText() }}\n </span>\n } @if (!compact() && buttonAppearance() === 'square') {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Next page\"\n [disabled]=\"isLastPage()\"\n (click)=\"next()\"\n [size]=\"buttonSize()\"\n >\n @if(buttonSize() === 'm') {\n <ChevronRight24 icon />\n } @else {\n <ChevronRight20 icon />\n }\n </button>\n } @else {\n <moz-icon-button\n aria-label=\"Next page\"\n [disabled]=\"isLastPage()\"\n (click)=\"next()\"\n [size]=\"buttonSize()\"\n [id]=\"'pagination-next-button'\"\n >\n @if(buttonSize() === 'm') {\n <ChevronRight24 icon />\n } @else {\n <ChevronRight20 icon />\n }\n </moz-icon-button>\n }\n</nav>\n", styles: [".mc-pagination,.pagination{align-items:center;display:flex;justify-content:center;gap:.5rem}.mc-pagination__label,.pagination__label{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "component", type: ChevronLeft24, selector: "ChevronLeft24", inputs: ["hostClass"] }, { kind: "component", type: ChevronRight24, selector: "ChevronRight24", inputs: ["hostClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ChevronLeft20, selector: "ChevronLeft20", inputs: ["hostClass"] }, { kind: "component", type: ChevronRight20, selector: "ChevronRight20", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
949
956
|
}
|
|
950
957
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MozPaginationComponent, decorators: [{
|
|
951
958
|
type: Component,
|
|
@@ -956,8 +963,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
|
|
|
956
963
|
ChevronLeft24,
|
|
957
964
|
ChevronRight24,
|
|
958
965
|
FormsModule,
|
|
959
|
-
|
|
960
|
-
|
|
966
|
+
ChevronLeft20,
|
|
967
|
+
ChevronRight20,
|
|
968
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"pagination\" role=\"navigation\">\n @if (!compact() && buttonAppearance() === 'square') {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Previous page\"\n [disabled]=\"isFirstPage()\"\n (click)=\"previous()\"\n [size]=\"buttonSize()\"\n >\n @if(buttonSize() === 'm') {\n <ChevronLeft24 icon />\n } @else {\n <ChevronLeft20 icon />\n }\n </button>\n } @else {\n <moz-icon-button\n aria-label=\"Previous page\"\n [disabled]=\"isFirstPage()\"\n (click)=\"previous()\"\n [size]=\"buttonSize()\"\n [id]=\"'pagination-previous-button'\"\n >\n @if(buttonSize() === 'm') {\n <ChevronLeft24 icon />\n } @else {\n <ChevronLeft20 icon />\n }\n </moz-icon-button>\n } @if (!compact()) {\n <div class=\"pagination__field\">\n <moz-select\n class=\"pagination__select\"\n [id]=\"id()\"\n [name]=\"id()\"\n [options]=\"options()\"\n [ngModel]=\"_currentValue()\"\n (ngModelChange)=\"onSelectChange($event)\"\n [ariaLabel]=\"selectLabel()\"\n [size]=\"buttonSize()\"\n />\n </div>\n } @else {\n <span class=\"pagination__label\" aria-current=\"page\">\n {{ currentPageText() }}\n </span>\n } @if (!compact() && buttonAppearance() === 'square') {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Next page\"\n [disabled]=\"isLastPage()\"\n (click)=\"next()\"\n [size]=\"buttonSize()\"\n >\n @if(buttonSize() === 'm') {\n <ChevronRight24 icon />\n } @else {\n <ChevronRight20 icon />\n }\n </button>\n } @else {\n <moz-icon-button\n aria-label=\"Next page\"\n [disabled]=\"isLastPage()\"\n (click)=\"next()\"\n [size]=\"buttonSize()\"\n [id]=\"'pagination-next-button'\"\n >\n @if(buttonSize() === 'm') {\n <ChevronRight24 icon />\n } @else {\n <ChevronRight20 icon />\n }\n </moz-icon-button>\n }\n</nav>\n", styles: [".mc-pagination,.pagination{align-items:center;display:flex;justify-content:center;gap:.5rem}.mc-pagination__label,.pagination__label{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}\n"] }]
|
|
969
|
+
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], selectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectLabel", required: false }] }], buttonAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonAppearance", required: false }] }], buttonSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonSize", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], updateValue: [{ type: i0.Output, args: ["updateValue"] }] } });
|
|
961
970
|
|
|
962
971
|
/**
|
|
963
972
|
* Directive that transforms a simple input into a styled password input with toggle visibility and clearable button.
|
|
@@ -2704,6 +2713,177 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
|
|
|
2704
2713
|
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mc-toaster\" [class]=\"classes()\" [attr.role]=\"role()\">\n <div class=\"mc-toaster__icon\">\n @switch (status()) { @case ('success') {\n <CheckCircleFilled32 />\n } @case ('warning') {\n <WarningCircleFilled32 />\n } @case ('error') {\n <CrossCircleFilled32 />\n } @case ('info') {\n <InfoCircleFilled32 />\n } }\n </div>\n\n <div class=\"mc-toaster__content\">\n <p class=\"mc-toaster__message\">{{ description() }}</p>\n\n @if (hasAction()) {\n <div class=\"mc-toaster__action\">\n <ng-content select=\"[action]\"></ng-content>\n </div>\n }\n </div>\n\n @if (closable()) {\n <moz-icon-button\n type=\"button\"\n [attr.aria-label]=\"closeAriaLabel()\"\n (click)=\"onCloseClick()\"\n [appearance]=\"'inverse'\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n [id]=\"'toaster-close-button'\"\n >\n <Cross20 icon />\n </moz-icon-button>\n } @if (progress() && timeout() && timeout()! > 0) {\n <moz-linear-progress-bar-buffer\n class=\"mc-toaster__indicator\"\n [valuePercent]=\"progressValue()\"\n size=\"m\"\n >\n </moz-linear-progress-bar-buffer>\n }\n</section>\n", styles: [".mc-toaster{border-radius:var(--border-radius-m, .5rem);background:var(--toaster-color-background-info, #002a41);display:flex;flex-flow:row wrap;align-items:flex-start;min-height:3.5rem;min-width:18rem;position:absolute;top:1.5rem;right:1.5rem;margin-left:1.5rem;box-sizing:border-box;color:var(--toaster-color-text, #ffffff);z-index:var(--toaster-z-index, 4);opacity:0;visibility:hidden;transform:translate(25%);transition:visibility 0s linear .4s,transform .4s ease-in-out,opacity .4s ease-in-out}.mc-toaster.is-open{opacity:1;visibility:visible;transform:translate(0)}.mc-toaster__icon{width:2rem;height:2rem;margin:.75rem;fill:var(--toaster-color-icon-info, #3facd7)}.mc-toaster__content{flex:1 1 0;flex-direction:column;align-self:stretch;display:flex;align-items:flex-start;gap:1rem;padding:.75rem 1rem .75rem 0}@media(width>=680px){.mc-toaster__content{flex-direction:row;align-items:center}}.mc-toaster__message{flex:1 1 0;margin:0;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3)}.mc-toaster--information{background:var(--toaster-color-background-info, #002a41)}.mc-toaster--information .mc-toaster__icon{fill:var(--toaster-color-icon-info, #3facd7)}.mc-toaster--information .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7)}.mc-toaster--success{background:var(--toaster-color-background-success, #023618)}.mc-toaster--success .mc-toaster__icon{fill:var(--toaster-color-icon-success, #78be20)}.mc-toaster--success .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-success, #78be20)}.mc-toaster--warning{background:var(--toaster-color-background-warning, #360e00)}.mc-toaster--warning .mc-toaster__icon{fill:var(--toaster-color-icon-warning, #ef934a)}.mc-toaster--warning .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-warning, #ef934a)}.mc-toaster--error{background:var(--toaster-color-background-error, #2d0000)}.mc-toaster--error .mc-toaster__icon{fill:var(--toaster-color-icon-error, #ef5f5c)}.mc-toaster--error .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-error, #ef5f5c)}.mc-toaster--bottom{top:inherit;bottom:1.5rem;right:1.5rem}.mc-toaster--top-center{top:1.5rem;right:50%;transform:translate(50%)!important}.mc-toaster--bottom-center{top:inherit;bottom:1.5rem;right:50%;transform:translate(50%)!important}.mc-toaster__indicator{width:100%;margin:.5rem;--progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7);--progressbar-color-background: var(--toaster-color-progress-bar-background, #ffffff)}.mc-toaster__close{margin:.25rem}\n"] }]
|
|
2705
2714
|
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], timeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeout", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], closeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeAriaLabel", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], closed: [{ type: i0.Output, args: ["closed"] }], actionSlot: [{ type: i0.ContentChild, args: ['[action]', { ...{ descendants: false }, isSignal: true }] }] } });
|
|
2706
2715
|
|
|
2716
|
+
const TOASTER_CONFIG = new InjectionToken('TOASTER_CONFIG');
|
|
2717
|
+
const DEFAULT_TOASTER_CONFIG = {
|
|
2718
|
+
open: false,
|
|
2719
|
+
position: 'top',
|
|
2720
|
+
description: '',
|
|
2721
|
+
status: 'info',
|
|
2722
|
+
closable: true,
|
|
2723
|
+
progress: false,
|
|
2724
|
+
timeout: null,
|
|
2725
|
+
role: 'status',
|
|
2726
|
+
closeAriaLabel: 'Close',
|
|
2727
|
+
};
|
|
2728
|
+
|
|
2729
|
+
class MozToasterRef {
|
|
2730
|
+
overlayRef;
|
|
2731
|
+
afterClosed$ = new Subject();
|
|
2732
|
+
afterOpened$ = new Subject();
|
|
2733
|
+
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
2734
|
+
description = signal('', ...(ngDevMode ? [{ debugName: "description" }] : []));
|
|
2735
|
+
status = signal('info', ...(ngDevMode ? [{ debugName: "status" }] : []));
|
|
2736
|
+
closable = signal(true, ...(ngDevMode ? [{ debugName: "closable" }] : []));
|
|
2737
|
+
timeout = signal(null, ...(ngDevMode ? [{ debugName: "timeout" }] : []));
|
|
2738
|
+
progress = signal(false, ...(ngDevMode ? [{ debugName: "progress" }] : []));
|
|
2739
|
+
position = signal('top', ...(ngDevMode ? [{ debugName: "position" }] : []));
|
|
2740
|
+
animationDuration = 300;
|
|
2741
|
+
constructor(overlayRef) {
|
|
2742
|
+
this.overlayRef = overlayRef;
|
|
2743
|
+
}
|
|
2744
|
+
open() {
|
|
2745
|
+
requestAnimationFrame(() => {
|
|
2746
|
+
this.isOpen.set(true);
|
|
2747
|
+
this.afterOpened$.next();
|
|
2748
|
+
this.afterOpened$.complete();
|
|
2749
|
+
});
|
|
2750
|
+
}
|
|
2751
|
+
close() {
|
|
2752
|
+
this.isOpen.set(false);
|
|
2753
|
+
setTimeout(() => {
|
|
2754
|
+
this.overlayRef.dispose();
|
|
2755
|
+
this.afterClosed$.next(undefined);
|
|
2756
|
+
this.afterClosed$.complete();
|
|
2757
|
+
}, this.animationDuration);
|
|
2758
|
+
}
|
|
2759
|
+
afterClosed() {
|
|
2760
|
+
return this.afterClosed$.asObservable();
|
|
2761
|
+
}
|
|
2762
|
+
afterOpened() {
|
|
2763
|
+
return this.afterOpened$.asObservable();
|
|
2764
|
+
}
|
|
2765
|
+
}
|
|
2766
|
+
|
|
2767
|
+
class ToasterContainerComponent {
|
|
2768
|
+
toasterRef = inject(MozToasterRef);
|
|
2769
|
+
config = inject(TOASTER_CONFIG);
|
|
2770
|
+
classes = computed(() => {
|
|
2771
|
+
const classes = [];
|
|
2772
|
+
if (this.toasterRef.isOpen()) {
|
|
2773
|
+
classes.push('is-open');
|
|
2774
|
+
}
|
|
2775
|
+
const s = this.toasterRef.status();
|
|
2776
|
+
const p = this.toasterRef.position();
|
|
2777
|
+
if (s && s !== 'info') {
|
|
2778
|
+
classes.push(`mc-toaster--${s}`);
|
|
2779
|
+
}
|
|
2780
|
+
if (p && p !== 'top') {
|
|
2781
|
+
classes.push(`mc-toaster--${p}`);
|
|
2782
|
+
}
|
|
2783
|
+
return classes.join(' ');
|
|
2784
|
+
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
2785
|
+
_progressValue = signal(0, ...(ngDevMode ? [{ debugName: "_progressValue" }] : [])); // 0 → 100
|
|
2786
|
+
progressValue = () => this._progressValue();
|
|
2787
|
+
intervalId = null;
|
|
2788
|
+
timeoutId = null;
|
|
2789
|
+
startAt = 0;
|
|
2790
|
+
constructor() {
|
|
2791
|
+
effect(() => {
|
|
2792
|
+
const isOpen = this.toasterRef.isOpen();
|
|
2793
|
+
const ms = this.toasterRef.timeout();
|
|
2794
|
+
const showProgress = this.toasterRef.progress();
|
|
2795
|
+
this.clearTimers();
|
|
2796
|
+
this._progressValue.set(0);
|
|
2797
|
+
if (!isOpen || !ms || ms <= 0) {
|
|
2798
|
+
return;
|
|
2799
|
+
}
|
|
2800
|
+
if (showProgress) {
|
|
2801
|
+
this.startAt = Date.now();
|
|
2802
|
+
const step = 100;
|
|
2803
|
+
this.intervalId = setInterval(() => {
|
|
2804
|
+
const elapsed = Date.now() - this.startAt;
|
|
2805
|
+
const pct = Math.min(100, (elapsed / ms) * 100);
|
|
2806
|
+
this._progressValue.set(pct);
|
|
2807
|
+
if (pct >= 100) {
|
|
2808
|
+
this.toasterRef.close();
|
|
2809
|
+
}
|
|
2810
|
+
}, step);
|
|
2811
|
+
}
|
|
2812
|
+
else {
|
|
2813
|
+
this.timeoutId = setTimeout(() => this.toasterRef.close(), ms);
|
|
2814
|
+
}
|
|
2815
|
+
});
|
|
2816
|
+
}
|
|
2817
|
+
clearTimers() {
|
|
2818
|
+
if (this.intervalId) {
|
|
2819
|
+
clearInterval(this.intervalId);
|
|
2820
|
+
this.intervalId = null;
|
|
2821
|
+
}
|
|
2822
|
+
if (this.timeoutId) {
|
|
2823
|
+
clearTimeout(this.timeoutId);
|
|
2824
|
+
this.timeoutId = null;
|
|
2825
|
+
}
|
|
2826
|
+
}
|
|
2827
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ToasterContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2828
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ToasterContainerComponent, isStandalone: true, selector: "moz-toaster-container", ngImport: i0, template: "<section class=\"mc-toaster\" [class]=\"classes()\">\n <div class=\"mc-toaster__icon\">\n @switch (toasterRef.status()) {\n @case ('success') {\n <CheckCircleFilled32 />\n }\n @case ('warning') {\n <WarningCircleFilled32 />\n }\n @case ('error') {\n <CrossCircleFilled32 />\n }\n @case ('info') {\n <InfoCircleFilled32 />\n }\n }\n </div>\n\n <div class=\"mc-toaster__content\">\n <p class=\"mc-toaster__message\">{{ toasterRef.description() }}</p>\n </div>\n\n @if (toasterRef.closable()) {\n <moz-icon-button\n type=\"button\"\n (click)=\"toasterRef.close()\"\n [appearance]=\"'inverse'\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n [id]=\"'toaster-close-button'\"\n >\n <Cross20 icon />\n </moz-icon-button>\n }\n @if (toasterRef.progress() && toasterRef.timeout() && toasterRef.timeout()! > 0) {\n <moz-linear-progress-bar-buffer\n class=\"mc-toaster__indicator\"\n [valuePercent]=\"progressValue()\"\n size=\"m\"\n >\n </moz-linear-progress-bar-buffer>\n }\n</section>\n", styles: [".mc-toaster{border-radius:var(--border-radius-m, .5rem);background:var(--toaster-color-background-info, #002a41);display:flex;flex-flow:row wrap;align-items:flex-start;min-height:3.5rem;min-width:18rem;position:absolute;top:1.5rem;right:1.5rem;margin-left:1.5rem;box-sizing:border-box;color:var(--toaster-color-text, #ffffff);z-index:var(--toaster-z-index, 4);opacity:0;visibility:hidden;transform:translate(25%);transition:visibility 0s linear .4s,transform .4s ease-in-out,opacity .4s ease-in-out}.mc-toaster.is-open{opacity:1;visibility:visible;transform:translate(0)}.mc-toaster__icon{width:2rem;height:2rem;margin:.75rem;fill:var(--toaster-color-icon-info, #3facd7)}.mc-toaster__content{flex:1 1 0;flex-direction:column;align-self:stretch;display:flex;align-items:flex-start;gap:1rem;padding:.75rem 1rem .75rem 0}@media(width>=680px){.mc-toaster__content{flex-direction:row;align-items:center}}.mc-toaster__message{flex:1 1 0;margin:0;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3)}.mc-toaster--information{background:var(--toaster-color-background-info, #002a41)}.mc-toaster--information .mc-toaster__icon{fill:var(--toaster-color-icon-info, #3facd7)}.mc-toaster--information .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7)}.mc-toaster--success{background:var(--toaster-color-background-success, #023618)}.mc-toaster--success .mc-toaster__icon{fill:var(--toaster-color-icon-success, #78be20)}.mc-toaster--success .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-success, #78be20)}.mc-toaster--warning{background:var(--toaster-color-background-warning, #360e00)}.mc-toaster--warning .mc-toaster__icon{fill:var(--toaster-color-icon-warning, #ef934a)}.mc-toaster--warning .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-warning, #ef934a)}.mc-toaster--error{background:var(--toaster-color-background-error, #2d0000)}.mc-toaster--error .mc-toaster__icon{fill:var(--toaster-color-icon-error, #ef5f5c)}.mc-toaster--error .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-error, #ef5f5c)}.mc-toaster--bottom{top:inherit;bottom:1.5rem;right:1.5rem}.mc-toaster--top-center{top:1.5rem;right:50%;transform:translate(50%)!important}.mc-toaster--bottom-center{top:inherit;bottom:1.5rem;right:50%;transform:translate(50%)!important}.mc-toaster__indicator{width:100%;margin:.5rem;--progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7);--progressbar-color-background: var(--toaster-color-progress-bar-background, #ffffff)}.mc-toaster__close{margin:.25rem}\n"], dependencies: [{ kind: "component", type: MozLinearProgressBarBufferComponent, selector: "moz-linear-progress-bar-buffer", inputs: ["valuePercent", "size", "ariaLabel"] }, { kind: "component", type: CheckCircleFilled32, selector: "CheckCircleFilled32", inputs: ["hostClass"] }, { kind: "component", type: WarningCircleFilled32, selector: "WarningCircleFilled32", inputs: ["hostClass"] }, { kind: "component", type: CrossCircleFilled32, selector: "CrossCircleFilled32", inputs: ["hostClass"] }, { kind: "component", type: InfoCircleFilled32, selector: "InfoCircleFilled32", inputs: ["hostClass"] }, { kind: "component", type: Cross20, selector: "Cross20", inputs: ["hostClass"] }, { kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2829
|
+
}
|
|
2830
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ToasterContainerComponent, decorators: [{
|
|
2831
|
+
type: Component,
|
|
2832
|
+
args: [{ selector: 'moz-toaster-container', imports: [
|
|
2833
|
+
MozLinearProgressBarBufferComponent,
|
|
2834
|
+
CheckCircleFilled32,
|
|
2835
|
+
WarningCircleFilled32,
|
|
2836
|
+
CrossCircleFilled32,
|
|
2837
|
+
InfoCircleFilled32,
|
|
2838
|
+
Cross20,
|
|
2839
|
+
MozIconButtonComponent,
|
|
2840
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mc-toaster\" [class]=\"classes()\">\n <div class=\"mc-toaster__icon\">\n @switch (toasterRef.status()) {\n @case ('success') {\n <CheckCircleFilled32 />\n }\n @case ('warning') {\n <WarningCircleFilled32 />\n }\n @case ('error') {\n <CrossCircleFilled32 />\n }\n @case ('info') {\n <InfoCircleFilled32 />\n }\n }\n </div>\n\n <div class=\"mc-toaster__content\">\n <p class=\"mc-toaster__message\">{{ toasterRef.description() }}</p>\n </div>\n\n @if (toasterRef.closable()) {\n <moz-icon-button\n type=\"button\"\n (click)=\"toasterRef.close()\"\n [appearance]=\"'inverse'\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n [id]=\"'toaster-close-button'\"\n >\n <Cross20 icon />\n </moz-icon-button>\n }\n @if (toasterRef.progress() && toasterRef.timeout() && toasterRef.timeout()! > 0) {\n <moz-linear-progress-bar-buffer\n class=\"mc-toaster__indicator\"\n [valuePercent]=\"progressValue()\"\n size=\"m\"\n >\n </moz-linear-progress-bar-buffer>\n }\n</section>\n", styles: [".mc-toaster{border-radius:var(--border-radius-m, .5rem);background:var(--toaster-color-background-info, #002a41);display:flex;flex-flow:row wrap;align-items:flex-start;min-height:3.5rem;min-width:18rem;position:absolute;top:1.5rem;right:1.5rem;margin-left:1.5rem;box-sizing:border-box;color:var(--toaster-color-text, #ffffff);z-index:var(--toaster-z-index, 4);opacity:0;visibility:hidden;transform:translate(25%);transition:visibility 0s linear .4s,transform .4s ease-in-out,opacity .4s ease-in-out}.mc-toaster.is-open{opacity:1;visibility:visible;transform:translate(0)}.mc-toaster__icon{width:2rem;height:2rem;margin:.75rem;fill:var(--toaster-color-icon-info, #3facd7)}.mc-toaster__content{flex:1 1 0;flex-direction:column;align-self:stretch;display:flex;align-items:flex-start;gap:1rem;padding:.75rem 1rem .75rem 0}@media(width>=680px){.mc-toaster__content{flex-direction:row;align-items:center}}.mc-toaster__message{flex:1 1 0;margin:0;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3)}.mc-toaster--information{background:var(--toaster-color-background-info, #002a41)}.mc-toaster--information .mc-toaster__icon{fill:var(--toaster-color-icon-info, #3facd7)}.mc-toaster--information .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7)}.mc-toaster--success{background:var(--toaster-color-background-success, #023618)}.mc-toaster--success .mc-toaster__icon{fill:var(--toaster-color-icon-success, #78be20)}.mc-toaster--success .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-success, #78be20)}.mc-toaster--warning{background:var(--toaster-color-background-warning, #360e00)}.mc-toaster--warning .mc-toaster__icon{fill:var(--toaster-color-icon-warning, #ef934a)}.mc-toaster--warning .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-warning, #ef934a)}.mc-toaster--error{background:var(--toaster-color-background-error, #2d0000)}.mc-toaster--error .mc-toaster__icon{fill:var(--toaster-color-icon-error, #ef5f5c)}.mc-toaster--error .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-error, #ef5f5c)}.mc-toaster--bottom{top:inherit;bottom:1.5rem;right:1.5rem}.mc-toaster--top-center{top:1.5rem;right:50%;transform:translate(50%)!important}.mc-toaster--bottom-center{top:inherit;bottom:1.5rem;right:50%;transform:translate(50%)!important}.mc-toaster__indicator{width:100%;margin:.5rem;--progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7);--progressbar-color-background: var(--toaster-color-progress-bar-background, #ffffff)}.mc-toaster__close{margin:.25rem}\n"] }]
|
|
2841
|
+
}], ctorParameters: () => [] });
|
|
2842
|
+
|
|
2843
|
+
// service/toaster.service.ts
|
|
2844
|
+
class MozToasterService {
|
|
2845
|
+
overlay = inject(Overlay);
|
|
2846
|
+
injector = inject(Injector);
|
|
2847
|
+
open(config) {
|
|
2848
|
+
const mergedConfig = {
|
|
2849
|
+
...DEFAULT_TOASTER_CONFIG,
|
|
2850
|
+
...config,
|
|
2851
|
+
};
|
|
2852
|
+
const overlayRef = this.createOverlay();
|
|
2853
|
+
const toasterRef = new MozToasterRef(overlayRef);
|
|
2854
|
+
toasterRef.description.set(mergedConfig.description);
|
|
2855
|
+
toasterRef.status.set(mergedConfig.status ?? 'info');
|
|
2856
|
+
toasterRef.closable.set(mergedConfig.closable ?? true);
|
|
2857
|
+
toasterRef.timeout.set(mergedConfig.timeout ?? null);
|
|
2858
|
+
toasterRef.progress.set(mergedConfig.progress ?? false);
|
|
2859
|
+
toasterRef.position.set(mergedConfig.position ?? 'top');
|
|
2860
|
+
const injector = Injector.create({
|
|
2861
|
+
parent: this.injector,
|
|
2862
|
+
providers: [
|
|
2863
|
+
{ provide: MozToasterRef, useValue: toasterRef },
|
|
2864
|
+
{ provide: TOASTER_CONFIG, useValue: mergedConfig },
|
|
2865
|
+
],
|
|
2866
|
+
});
|
|
2867
|
+
const containerPortal = new ComponentPortal(ToasterContainerComponent, null, injector);
|
|
2868
|
+
overlayRef.attach(containerPortal);
|
|
2869
|
+
toasterRef.open();
|
|
2870
|
+
return toasterRef;
|
|
2871
|
+
}
|
|
2872
|
+
createOverlay() {
|
|
2873
|
+
const config = new OverlayConfig({
|
|
2874
|
+
hasBackdrop: false,
|
|
2875
|
+
positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
|
|
2876
|
+
});
|
|
2877
|
+
return this.overlay.create(config);
|
|
2878
|
+
}
|
|
2879
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MozToasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2880
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MozToasterService, providedIn: 'root' });
|
|
2881
|
+
}
|
|
2882
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MozToasterService, decorators: [{
|
|
2883
|
+
type: Injectable,
|
|
2884
|
+
args: [{ providedIn: 'root' }]
|
|
2885
|
+
}] });
|
|
2886
|
+
|
|
2707
2887
|
class MozSidebarComponent {
|
|
2708
2888
|
expanded = input(false, { ...(ngDevMode ? { debugName: "expanded" } : {}), transform: booleanAttribute });
|
|
2709
2889
|
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
@@ -4566,5 +4746,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
|
|
|
4566
4746
|
* Generated bundle index. Do not edit.
|
|
4567
4747
|
*/
|
|
4568
4748
|
|
|
4569
|
-
export { ACTION_LISTBOX_CONFIG, ActionListboxContainerComponent, ActionListboxRef, BuiltInMenuComponent, DEFAULT_ACTION_LISTBOX_CONFIG, DEFAULT_MODAL_CONFIG, DRAWER_CONFIG, DRAWER_DATA, DrawerContainerComponent, MODAL_CONFIG, MODAL_DATA, MozAccordionComponent, MozAccordionContentComponent, MozAccordionHeaderComponent, MozAccordionPanelComponent, MozActionBottomBarComponent, MozActionListboxComponent, MozActionListboxTriggerDirective, MozAvatarComponent, MozBreadcrumbComponent, MozButtonComponent, MozCalloutComponent, MozCarouselComponent, MozCheckListMenuComponent, MozCheckboxComponent, MozCheckboxGroupComponent, MozCircularProgressBarComponent, MozDatepickerComponent, MozDividerComponent, MozDrawerComponent, MozDrawerFooterDirective, MozDrawerRef, MozDrawerService, MozFieldComponent, MozFieldGroupComponent, MozFileUploaderComponent, MozFileUploaderItemComponent, MozFlagComponent, MozIconButtonComponent, MozKpiComponent, MozLinearProgressBarBufferComponent, MozLinearProgressBarPercentageComponent, MozLinkComponent, MozLoaderComponent, MozLoadingOverlayComponent, MozModalComponent, MozModalFooterDirective, MozModalRef, MozModalService, MozNavigationIndicatorComponent, MozNumberBadgeComponent, MozOverlayComponent, MozPageHeaderComponent, MozPaginationComponent, MozPasswordInputDirective, MozPhoneNumberComponent, MozPincodeInputComponent, MozPopoverComponent, MozPopoverFooterDirective, MozPopoverTriggerDirective, MozQuantitySelectorComponent, MozRadioComponent, MozRadioGroupComponent, MozSegmentedControlComponent, MozSelectComponent, MozSidebarComponent, MozStarRatingComponent, MozStatusBadgeComponent, MozStatusDotComponent, MozStatusMessageComponent, MozStatusNotificationComponent, MozStepperBottomBarComponent, MozStepperCompactComponent, MozStepperInlineComponent, MozStepperStackedComponent, MozTabComponent, MozTabsComponent, MozTagComponent, MozTextInput, MozTextarea, MozTileComponent, MozTileExpandableComponent, MozTileSelectableComponent, MozToasterComponent, MozToggleComponent, MozTooltipComponent, MozTooltipDirective, POPOVER_CONFIG, POPOVER_DATA, PopoverContainerComponent, PopoverRef, PopoverService };
|
|
4749
|
+
export { ACTION_LISTBOX_CONFIG, ActionListboxContainerComponent, ActionListboxRef, BuiltInMenuComponent, DEFAULT_ACTION_LISTBOX_CONFIG, DEFAULT_MODAL_CONFIG, DEFAULT_TOASTER_CONFIG, DRAWER_CONFIG, DRAWER_DATA, DrawerContainerComponent, MODAL_CONFIG, MODAL_DATA, MozAccordionComponent, MozAccordionContentComponent, MozAccordionHeaderComponent, MozAccordionPanelComponent, MozActionBottomBarComponent, MozActionListboxComponent, MozActionListboxTriggerDirective, MozAvatarComponent, MozBreadcrumbComponent, MozButtonComponent, MozCalloutComponent, MozCarouselComponent, MozCheckListMenuComponent, MozCheckboxComponent, MozCheckboxGroupComponent, MozCircularProgressBarComponent, MozDatepickerComponent, MozDividerComponent, MozDrawerComponent, MozDrawerFooterDirective, MozDrawerRef, MozDrawerService, MozFieldComponent, MozFieldGroupComponent, MozFileUploaderComponent, MozFileUploaderItemComponent, MozFlagComponent, MozIconButtonComponent, MozKpiComponent, MozLinearProgressBarBufferComponent, MozLinearProgressBarPercentageComponent, MozLinkComponent, MozLoaderComponent, MozLoadingOverlayComponent, MozModalComponent, MozModalFooterDirective, MozModalRef, MozModalService, MozNavigationIndicatorComponent, MozNumberBadgeComponent, MozOverlayComponent, MozPageHeaderComponent, MozPaginationComponent, MozPasswordInputDirective, MozPhoneNumberComponent, MozPincodeInputComponent, MozPopoverComponent, MozPopoverFooterDirective, MozPopoverTriggerDirective, MozQuantitySelectorComponent, MozRadioComponent, MozRadioGroupComponent, MozSegmentedControlComponent, MozSelectComponent, MozSidebarComponent, MozStarRatingComponent, MozStatusBadgeComponent, MozStatusDotComponent, MozStatusMessageComponent, MozStatusNotificationComponent, MozStepperBottomBarComponent, MozStepperCompactComponent, MozStepperInlineComponent, MozStepperStackedComponent, MozTabComponent, MozTabsComponent, MozTagComponent, MozTextInput, MozTextarea, MozTileComponent, MozTileExpandableComponent, MozTileSelectableComponent, MozToasterComponent, MozToasterRef, MozToasterService, MozToggleComponent, MozTooltipComponent, MozTooltipDirective, POPOVER_CONFIG, POPOVER_DATA, PopoverContainerComponent, PopoverRef, PopoverService, TOASTER_CONFIG };
|
|
4570
4750
|
//# sourceMappingURL=mozaic-ds-angular.mjs.map
|