@mozaic-ds/angular 2.0.27 → 2.0.29
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.
|
@@ -291,6 +291,7 @@ class MozIconButtonComponent {
|
|
|
291
291
|
outlined = input(...(ngDevMode ? [undefined, { debugName: "outlined" }] : /* istanbul ignore next */ []));
|
|
292
292
|
type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
293
293
|
ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
294
|
+
activated = output();
|
|
294
295
|
classes = computed(() => {
|
|
295
296
|
return {
|
|
296
297
|
'mc-button': true,
|
|
@@ -301,13 +302,17 @@ class MozIconButtonComponent {
|
|
|
301
302
|
'mc-button--outlined': this.outlined() ?? false,
|
|
302
303
|
};
|
|
303
304
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
305
|
+
onActivated(event) {
|
|
306
|
+
event.stopPropagation();
|
|
307
|
+
this.activated.emit(event);
|
|
308
|
+
}
|
|
304
309
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MozIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
305
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: MozIconButtonComponent, isStandalone: true, selector: "moz-icon-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ghost: { classPropertyName: "ghost", publicName: "ghost", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n [disabled]=\"disabled()\"\n [attr.type]=\"type()\"\n [class]=\"classes()\"\n [attr.aria-label]=\"ariaLabel()\"\n [id]=\"id()\"\n>\n <span class=\"mc-button__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n</button>\n", styles: [".mc-button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c)}.mc-button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus-visible{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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902)}.mc-button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined.mc-button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de)}.mc-button--outlined.mc-button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea)}.mc-button--outlined.mc-button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--outlined.mc-button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost.mc-button--standard:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1))}.mc-button--ghost.mc-button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1))}.mc-button--ghost.mc-button--danger:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--ghost.mc-button--inverse:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
310
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: MozIconButtonComponent, isStandalone: true, selector: "moz-icon-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ghost: { classPropertyName: "ghost", publicName: "ghost", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, ngImport: i0, template: "<button\n (click)=\"onActivated($event)\"\n [disabled]=\"disabled()\"\n [attr.type]=\"type()\"\n [class]=\"classes()\"\n [attr.aria-label]=\"ariaLabel()\"\n [id]=\"id()\"\n>\n <span class=\"mc-button__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n</button>\n", styles: [".mc-button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c)}.mc-button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus-visible{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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902)}.mc-button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined.mc-button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de)}.mc-button--outlined.mc-button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea)}.mc-button--outlined.mc-button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--outlined.mc-button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost.mc-button--standard:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1))}.mc-button--ghost.mc-button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1))}.mc-button--ghost.mc-button--danger:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--ghost.mc-button--inverse:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
306
311
|
}
|
|
307
312
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MozIconButtonComponent, decorators: [{
|
|
308
313
|
type: Component,
|
|
309
|
-
args: [{ selector: 'moz-icon-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n [disabled]=\"disabled()\"\n [attr.type]=\"type()\"\n [class]=\"classes()\"\n [attr.aria-label]=\"ariaLabel()\"\n [id]=\"id()\"\n>\n <span class=\"mc-button__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n</button>\n", styles: [".mc-button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c)}.mc-button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus-visible{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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902)}.mc-button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined.mc-button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de)}.mc-button--outlined.mc-button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea)}.mc-button--outlined.mc-button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--outlined.mc-button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost.mc-button--standard:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1))}.mc-button--ghost.mc-button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1))}.mc-button--ghost.mc-button--danger:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--ghost.mc-button--inverse:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"] }]
|
|
310
|
-
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ghost: [{ type: i0.Input, args: [{ isSignal: true, alias: "ghost", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
314
|
+
args: [{ selector: 'moz-icon-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n (click)=\"onActivated($event)\"\n [disabled]=\"disabled()\"\n [attr.type]=\"type()\"\n [class]=\"classes()\"\n [attr.aria-label]=\"ariaLabel()\"\n [id]=\"id()\"\n>\n <span class=\"mc-button__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n</button>\n", styles: [".mc-button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c)}.mc-button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus-visible{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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902)}.mc-button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined.mc-button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de)}.mc-button--outlined.mc-button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea)}.mc-button--outlined.mc-button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--outlined.mc-button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost.mc-button--standard:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1))}.mc-button--ghost.mc-button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1))}.mc-button--ghost.mc-button--danger:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--ghost.mc-button--inverse:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"] }]
|
|
315
|
+
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ghost: [{ type: i0.Input, args: [{ isSignal: true, alias: "ghost", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
|
|
311
316
|
|
|
312
317
|
class MozLinearProgressBarBufferComponent {
|
|
313
318
|
valuePercent = input(0, ...(ngDevMode ? [{ debugName: "valuePercent" }] : /* istanbul ignore next */ []));
|
|
@@ -398,7 +403,7 @@ class MozFileUploaderItemComponent {
|
|
|
398
403
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
|
|
399
404
|
}
|
|
400
405
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MozFileUploaderItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
401
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MozFileUploaderItemComponent, isStandalone: true, selector: "moz-file-uploader-item", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, uploading: { classPropertyName: "uploading", publicName: "uploading", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hasPreview: { classPropertyName: "hasPreview", publicName: "hasPreview", isSignal: true, isRequired: false, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, fileInformation: { classPropertyName: "fileInformation", publicName: "fileInformation", isSignal: true, isRequired: false, transformFunction: null }, retryButtonLabel: { classPropertyName: "retryButtonLabel", publicName: "retryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, deleteButtonLabel: { classPropertyName: "deleteButtonLabel", publicName: "deleteButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, previewButtonLabel: { classPropertyName: "previewButtonLabel", publicName: "previewButtonLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { delete: "delete", retry: "retry", preview: "preview" }, ngImport: i0, template: "<div class=\"mc-file-uploader-item\" [class]=\"modifierClass()\">\n <div class=\"mc-file-uploader-item__container mc-file-uploader-item__container--{{ format() }}\">\n <div\n class=\"mc-file-uploader-item__meta-row\"\n [class.mc-file-uploader-item__meta-row--with-info]=\"true\"\n >\n @if (isUploading() && !invalid()) {\n <Uploading32 class=\"mc-file-uploader-item__status-icon\" />\n } @else if(invalid()) {\n <WarningCircle32 class=\"mc-file-uploader-item__status-icon\" />\n } @else {\n <CheckCircle32 class=\"mc-file-uploader-item__status-icon\" />\n }\n <div class=\"mc-file-uploader-item__info-content\">\n <span class=\"mc-file-uploader-item__label\">{{ fileName() }}</span>\n <span class=\"mc-file-uploader-item__details\">{{ fileInfo() }}</span>\n </div>\n </div>\n\n @if (showInlineActions()) {\n <div class=\"mc-file-uploader-item__inline-actions\">\n @if (invalid()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onRetry()\"\n >\n <Refresh32 icon />\n <span class=\"mc-button__label\">{{ retryButtonLabel() }}</span>\n </button>\n } @if (!invalid() && hasPreview()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onPreview()\"\n >\n <span class=\"mc-button__label\">{{ previewButtonLabel() }}</span>\n </button>\n }\n </div>\n <div class=\"mc-file-uploader-item__delete-button-container\">\n <moz-icon-button\n [id]=\"'file-uploader-item-delete-button'\"\n (click)=\"onDelete()\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n >\n <CrossCircleFilled20 icon />\n </moz-icon-button>\n </div>\n } @if (showStackedActions()) {\n <moz-divider orientation=\"horizontal\"></moz-divider>\n <div class=\"mc-file-uploader-item__actions-container\">\n @if (!invalid() && hasPreview()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onPreview()\"\n [iconPosition]=\"'left'\"\n >\n <Eye20 icon />\n <span class=\"mc-button__label\">{{ previewButtonLabel() }}</span>\n </button>\n } @if (invalid()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onRetry()\"\n [iconPosition]=\"'left'\"\n >\n <Refresh20 icon />\n <span class=\"mc-button__label\">{{ retryButtonLabel() }}</span>\n </button>\n }\n\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onDelete()\"\n [iconPosition]=\"'left'\"\n >\n <CrossCircleFilled20 icon />\n <span class=\"mc-button__label\">{{ deleteButtonLabel() }}</span>\n </button>\n </div>\n } @if (isUploading() && !invalid()) {\n <moz-linear-progress-bar-buffer size=\"l\" [valuePercent]=\"75\" />\n }\n </div>\n\n @if (errorMessage() && invalid()) {\n <span class=\"mc-file-uploader-item__error-message\">{{ errorMessage() }}</span>\n }\n</div>\n", styles: [".mc-file-uploader{display:flex;flex-direction:column;gap:1rem;box-sizing:border-box}.mc-file-uploader__files-list{display:flex;flex-direction:column;gap:1rem}.mc-file-uploader__hidden-input{clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}.mc-file-uploader__input{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);border-radius:var(--border-radius-m, .5rem);color:var(--file-uploader-color-drag-and-drop-text-default, #242938)}.mc-file-uploader__input .mc-file-uploader__button{width:100%}.mc-file-uploader__input--disabled .mc-file-uploader__button.mc-button.mc-button--outlined{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-file-uploader__input-title{height:1.125rem;font-size:var(--font-size-150, 1rem)}.mc-file-uploader__input-subtitle{height:1.125rem;font-size:var(--font-size-100, .875rem)}.mc-file-uploader--draggable .mc-file-uploader__input{padding:2rem;outline:.125rem dashed var(--file-uploader-color-drag-and-drop-border-default, #464e63);display:flex}.mc-file-uploader--draggable .mc-file-uploader__input--disabled{outline-color:var(--file-uploader-color-drag-and-drop-border-disabled, #b3b3b3);color:var(--file-uploader-color-drag-and-drop-text-disabled, #b3b3b3);cursor:not-allowed}.mc-file-uploader--draggable .mc-file-uploader__input--dragged{outline-width:.25rem}.mc-file-uploader-item{display:flex;flex-direction:column;gap:.25rem}.mc-file-uploader-item__container{border:1px solid var(--file-uploader-color-file-item-border-default, #cccccc);border-radius:var(--border-radius-m, .5rem);padding:.75rem}.mc-file-uploader-item__meta-row{display:flex;align-items:center;flex-grow:1}.mc-file-uploader-item__meta-row--with-info{align-items:start}.mc-file-uploader-item__status-icon{fill:var(--file-uploader-color-file-item-icon-valid, #3f9e10)}.mc-file-uploader-item__info-content{display:flex;flex-direction:column;flex-grow:1;padding-left:.5rem;padding-right:1rem}.mc-file-uploader-item__label{color:var(--file-uploader-color-file-item-text-file-name, #000000);font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600)}.mc-file-uploader-item__details{color:var(--file-uploader-color-file-item-text-information, #666666);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400)}.mc-file-uploader-item__error-message{color:var(--field-color-validation-invalid, #c61112);font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400)}.mc-file-uploader-item__container--inline{display:flex;align-items:center}.mc-file-uploader-item__container--stacked{display:flex;flex-direction:column;gap:.75rem}.mc-file-uploader-item__delete-button-container{padding-left:.25rem;margin-left:.25rem;border-left:1px solid var(--divider-color-primary, #cccccc)}.mc-file-uploader-item__actions-container{padding:0 2rem;display:flex;align-items:center;gap:.25rem;justify-content:center}.mc-file-uploader-item__action{padding:0 .75rem;flex-grow:1}.mc-file-uploader-item--error .mc-file-uploader-item__container{border-width:var(--border-width-m, .125rem);border-color:var(--file-uploader-color-file-item-border-invalid, #ea302d)}.mc-file-uploader-item--error .mc-file-uploader-item__status-icon{fill:var(--file-uploader-color-file-item-icon-invalid, #ea302d)}.mc-file-uploader-item--loading .mc-file-uploader-item__container{gap:1rem;flex-direction:column;align-items:normal}.mc-file-uploader-item--loading .mc-file-uploader-item__status-icon{fill:var(--color-standalone-disabled, #b3b3b3)}.mc-file-uploader-item--loading .mc-file-uploader-item__label,.mc-file-uploader-item--loading .mc-file-uploader-item__details{color:var(--color-standalone-disabled, #b3b3b3)}\n"], dependencies: [{ kind: "component", type: MozLinearProgressBarBufferComponent, selector: "moz-linear-progress-bar-buffer", inputs: ["valuePercent", "size", "ariaLabel"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "component", type: CheckCircle32, selector: "CheckCircle32", inputs: ["hostClass"] }, { kind: "component", type: CrossCircleFilled20, selector: "CrossCircleFilled20", inputs: ["hostClass"] }, { kind: "component", type: Refresh32, selector: "Refresh32", inputs: ["hostClass"] }, { kind: "component", type: MozDividerComponent, selector: "moz-divider", inputs: ["orientation", "appearance", "size"] }, { kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { kind: "component", type: Refresh20, selector: "Refresh20", inputs: ["hostClass"] }, { kind: "component", type: Uploading32, selector: "Uploading32", inputs: ["hostClass"] }, { kind: "component", type: Eye20, selector: "Eye20", inputs: ["hostClass"] }, { kind: "component", type: WarningCircle32, selector: "WarningCircle32", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
406
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MozFileUploaderItemComponent, isStandalone: true, selector: "moz-file-uploader-item", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, uploading: { classPropertyName: "uploading", publicName: "uploading", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hasPreview: { classPropertyName: "hasPreview", publicName: "hasPreview", isSignal: true, isRequired: false, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, fileInformation: { classPropertyName: "fileInformation", publicName: "fileInformation", isSignal: true, isRequired: false, transformFunction: null }, retryButtonLabel: { classPropertyName: "retryButtonLabel", publicName: "retryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, deleteButtonLabel: { classPropertyName: "deleteButtonLabel", publicName: "deleteButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, previewButtonLabel: { classPropertyName: "previewButtonLabel", publicName: "previewButtonLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { delete: "delete", retry: "retry", preview: "preview" }, ngImport: i0, template: "<div class=\"mc-file-uploader-item\" [class]=\"modifierClass()\">\n <div class=\"mc-file-uploader-item__container mc-file-uploader-item__container--{{ format() }}\">\n <div\n class=\"mc-file-uploader-item__meta-row\"\n [class.mc-file-uploader-item__meta-row--with-info]=\"true\"\n >\n @if (isUploading() && !invalid()) {\n <Uploading32 class=\"mc-file-uploader-item__status-icon\" />\n } @else if(invalid()) {\n <WarningCircle32 class=\"mc-file-uploader-item__status-icon\" />\n } @else {\n <CheckCircle32 class=\"mc-file-uploader-item__status-icon\" />\n }\n <div class=\"mc-file-uploader-item__info-content\">\n <span class=\"mc-file-uploader-item__label\">{{ fileName() }}</span>\n <span class=\"mc-file-uploader-item__details\">{{ fileInfo() }}</span>\n </div>\n </div>\n\n @if (showInlineActions()) {\n <div class=\"mc-file-uploader-item__inline-actions\">\n @if (invalid()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onRetry()\"\n >\n <Refresh32 icon />\n <span class=\"mc-button__label\">{{ retryButtonLabel() }}</span>\n </button>\n } @if (!invalid() && hasPreview()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onPreview()\"\n >\n <span class=\"mc-button__label\">{{ previewButtonLabel() }}</span>\n </button>\n }\n </div>\n <div class=\"mc-file-uploader-item__delete-button-container\">\n <moz-icon-button\n [id]=\"'file-uploader-item-delete-button'\"\n (activated)=\"onDelete()\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n >\n <CrossCircleFilled20 icon />\n </moz-icon-button>\n </div>\n } @if (showStackedActions()) {\n <moz-divider orientation=\"horizontal\"></moz-divider>\n <div class=\"mc-file-uploader-item__actions-container\">\n @if (!invalid() && hasPreview()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onPreview()\"\n [iconPosition]=\"'left'\"\n >\n <Eye20 icon />\n <span class=\"mc-button__label\">{{ previewButtonLabel() }}</span>\n </button>\n } @if (invalid()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onRetry()\"\n [iconPosition]=\"'left'\"\n >\n <Refresh20 icon />\n <span class=\"mc-button__label\">{{ retryButtonLabel() }}</span>\n </button>\n }\n\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onDelete()\"\n [iconPosition]=\"'left'\"\n >\n <CrossCircleFilled20 icon />\n <span class=\"mc-button__label\">{{ deleteButtonLabel() }}</span>\n </button>\n </div>\n } @if (isUploading() && !invalid()) {\n <moz-linear-progress-bar-buffer size=\"l\" [valuePercent]=\"75\" />\n }\n </div>\n\n @if (errorMessage() && invalid()) {\n <span class=\"mc-file-uploader-item__error-message\">{{ errorMessage() }}</span>\n }\n</div>\n", styles: [".mc-file-uploader{display:flex;flex-direction:column;gap:1rem;box-sizing:border-box}.mc-file-uploader__files-list{display:flex;flex-direction:column;gap:1rem}.mc-file-uploader__hidden-input{clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}.mc-file-uploader__input{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);border-radius:var(--border-radius-m, .5rem);color:var(--file-uploader-color-drag-and-drop-text-default, #242938)}.mc-file-uploader__input .mc-file-uploader__button{width:100%}.mc-file-uploader__input--disabled .mc-file-uploader__button.mc-button.mc-button--outlined{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-file-uploader__input-title{height:1.125rem;font-size:var(--font-size-150, 1rem)}.mc-file-uploader__input-subtitle{height:1.125rem;font-size:var(--font-size-100, .875rem)}.mc-file-uploader--draggable .mc-file-uploader__input{padding:2rem;outline:.125rem dashed var(--file-uploader-color-drag-and-drop-border-default, #464e63);display:flex}.mc-file-uploader--draggable .mc-file-uploader__input--disabled{outline-color:var(--file-uploader-color-drag-and-drop-border-disabled, #b3b3b3);color:var(--file-uploader-color-drag-and-drop-text-disabled, #b3b3b3);cursor:not-allowed}.mc-file-uploader--draggable .mc-file-uploader__input--dragged{outline-width:.25rem}.mc-file-uploader-item{display:flex;flex-direction:column;gap:.25rem}.mc-file-uploader-item__container{border:1px solid var(--file-uploader-color-file-item-border-default, #cccccc);border-radius:var(--border-radius-m, .5rem);padding:.75rem}.mc-file-uploader-item__meta-row{display:flex;align-items:center;flex-grow:1}.mc-file-uploader-item__meta-row--with-info{align-items:start}.mc-file-uploader-item__status-icon{fill:var(--file-uploader-color-file-item-icon-valid, #3f9e10)}.mc-file-uploader-item__info-content{display:flex;flex-direction:column;flex-grow:1;padding-left:.5rem;padding-right:1rem}.mc-file-uploader-item__label{color:var(--file-uploader-color-file-item-text-file-name, #000000);font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600)}.mc-file-uploader-item__details{color:var(--file-uploader-color-file-item-text-information, #666666);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400)}.mc-file-uploader-item__error-message{color:var(--field-color-validation-invalid, #c61112);font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400)}.mc-file-uploader-item__container--inline{display:flex;align-items:center}.mc-file-uploader-item__container--stacked{display:flex;flex-direction:column;gap:.75rem}.mc-file-uploader-item__delete-button-container{padding-left:.25rem;margin-left:.25rem;border-left:1px solid var(--divider-color-primary, #cccccc)}.mc-file-uploader-item__actions-container{padding:0 2rem;display:flex;align-items:center;gap:.25rem;justify-content:center}.mc-file-uploader-item__action{padding:0 .75rem;flex-grow:1}.mc-file-uploader-item--error .mc-file-uploader-item__container{border-width:var(--border-width-m, .125rem);border-color:var(--file-uploader-color-file-item-border-invalid, #ea302d)}.mc-file-uploader-item--error .mc-file-uploader-item__status-icon{fill:var(--file-uploader-color-file-item-icon-invalid, #ea302d)}.mc-file-uploader-item--loading .mc-file-uploader-item__container{gap:1rem;flex-direction:column;align-items:normal}.mc-file-uploader-item--loading .mc-file-uploader-item__status-icon{fill:var(--color-standalone-disabled, #b3b3b3)}.mc-file-uploader-item--loading .mc-file-uploader-item__label,.mc-file-uploader-item--loading .mc-file-uploader-item__details{color:var(--color-standalone-disabled, #b3b3b3)}\n"], dependencies: [{ kind: "component", type: MozLinearProgressBarBufferComponent, selector: "moz-linear-progress-bar-buffer", inputs: ["valuePercent", "size", "ariaLabel"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "component", type: CheckCircle32, selector: "CheckCircle32", inputs: ["hostClass"] }, { kind: "component", type: CrossCircleFilled20, selector: "CrossCircleFilled20", inputs: ["hostClass"] }, { kind: "component", type: Refresh32, selector: "Refresh32", inputs: ["hostClass"] }, { kind: "component", type: MozDividerComponent, selector: "moz-divider", inputs: ["orientation", "appearance", "size"] }, { kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: Refresh20, selector: "Refresh20", inputs: ["hostClass"] }, { kind: "component", type: Uploading32, selector: "Uploading32", inputs: ["hostClass"] }, { kind: "component", type: Eye20, selector: "Eye20", inputs: ["hostClass"] }, { kind: "component", type: WarningCircle32, selector: "WarningCircle32", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
402
407
|
}
|
|
403
408
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MozFileUploaderItemComponent, decorators: [{
|
|
404
409
|
type: Component,
|
|
@@ -414,7 +419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
414
419
|
Uploading32,
|
|
415
420
|
Eye20,
|
|
416
421
|
WarningCircle32,
|
|
417
|
-
], template: "<div class=\"mc-file-uploader-item\" [class]=\"modifierClass()\">\n <div class=\"mc-file-uploader-item__container mc-file-uploader-item__container--{{ format() }}\">\n <div\n class=\"mc-file-uploader-item__meta-row\"\n [class.mc-file-uploader-item__meta-row--with-info]=\"true\"\n >\n @if (isUploading() && !invalid()) {\n <Uploading32 class=\"mc-file-uploader-item__status-icon\" />\n } @else if(invalid()) {\n <WarningCircle32 class=\"mc-file-uploader-item__status-icon\" />\n } @else {\n <CheckCircle32 class=\"mc-file-uploader-item__status-icon\" />\n }\n <div class=\"mc-file-uploader-item__info-content\">\n <span class=\"mc-file-uploader-item__label\">{{ fileName() }}</span>\n <span class=\"mc-file-uploader-item__details\">{{ fileInfo() }}</span>\n </div>\n </div>\n\n @if (showInlineActions()) {\n <div class=\"mc-file-uploader-item__inline-actions\">\n @if (invalid()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onRetry()\"\n >\n <Refresh32 icon />\n <span class=\"mc-button__label\">{{ retryButtonLabel() }}</span>\n </button>\n } @if (!invalid() && hasPreview()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onPreview()\"\n >\n <span class=\"mc-button__label\">{{ previewButtonLabel() }}</span>\n </button>\n }\n </div>\n <div class=\"mc-file-uploader-item__delete-button-container\">\n <moz-icon-button\n [id]=\"'file-uploader-item-delete-button'\"\n (
|
|
422
|
+
], template: "<div class=\"mc-file-uploader-item\" [class]=\"modifierClass()\">\n <div class=\"mc-file-uploader-item__container mc-file-uploader-item__container--{{ format() }}\">\n <div\n class=\"mc-file-uploader-item__meta-row\"\n [class.mc-file-uploader-item__meta-row--with-info]=\"true\"\n >\n @if (isUploading() && !invalid()) {\n <Uploading32 class=\"mc-file-uploader-item__status-icon\" />\n } @else if(invalid()) {\n <WarningCircle32 class=\"mc-file-uploader-item__status-icon\" />\n } @else {\n <CheckCircle32 class=\"mc-file-uploader-item__status-icon\" />\n }\n <div class=\"mc-file-uploader-item__info-content\">\n <span class=\"mc-file-uploader-item__label\">{{ fileName() }}</span>\n <span class=\"mc-file-uploader-item__details\">{{ fileInfo() }}</span>\n </div>\n </div>\n\n @if (showInlineActions()) {\n <div class=\"mc-file-uploader-item__inline-actions\">\n @if (invalid()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onRetry()\"\n >\n <Refresh32 icon />\n <span class=\"mc-button__label\">{{ retryButtonLabel() }}</span>\n </button>\n } @if (!invalid() && hasPreview()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onPreview()\"\n >\n <span class=\"mc-button__label\">{{ previewButtonLabel() }}</span>\n </button>\n }\n </div>\n <div class=\"mc-file-uploader-item__delete-button-container\">\n <moz-icon-button\n [id]=\"'file-uploader-item-delete-button'\"\n (activated)=\"onDelete()\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n >\n <CrossCircleFilled20 icon />\n </moz-icon-button>\n </div>\n } @if (showStackedActions()) {\n <moz-divider orientation=\"horizontal\"></moz-divider>\n <div class=\"mc-file-uploader-item__actions-container\">\n @if (!invalid() && hasPreview()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onPreview()\"\n [iconPosition]=\"'left'\"\n >\n <Eye20 icon />\n <span class=\"mc-button__label\">{{ previewButtonLabel() }}</span>\n </button>\n } @if (invalid()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onRetry()\"\n [iconPosition]=\"'left'\"\n >\n <Refresh20 icon />\n <span class=\"mc-button__label\">{{ retryButtonLabel() }}</span>\n </button>\n }\n\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onDelete()\"\n [iconPosition]=\"'left'\"\n >\n <CrossCircleFilled20 icon />\n <span class=\"mc-button__label\">{{ deleteButtonLabel() }}</span>\n </button>\n </div>\n } @if (isUploading() && !invalid()) {\n <moz-linear-progress-bar-buffer size=\"l\" [valuePercent]=\"75\" />\n }\n </div>\n\n @if (errorMessage() && invalid()) {\n <span class=\"mc-file-uploader-item__error-message\">{{ errorMessage() }}</span>\n }\n</div>\n", styles: [".mc-file-uploader{display:flex;flex-direction:column;gap:1rem;box-sizing:border-box}.mc-file-uploader__files-list{display:flex;flex-direction:column;gap:1rem}.mc-file-uploader__hidden-input{clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}.mc-file-uploader__input{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);border-radius:var(--border-radius-m, .5rem);color:var(--file-uploader-color-drag-and-drop-text-default, #242938)}.mc-file-uploader__input .mc-file-uploader__button{width:100%}.mc-file-uploader__input--disabled .mc-file-uploader__button.mc-button.mc-button--outlined{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-file-uploader__input-title{height:1.125rem;font-size:var(--font-size-150, 1rem)}.mc-file-uploader__input-subtitle{height:1.125rem;font-size:var(--font-size-100, .875rem)}.mc-file-uploader--draggable .mc-file-uploader__input{padding:2rem;outline:.125rem dashed var(--file-uploader-color-drag-and-drop-border-default, #464e63);display:flex}.mc-file-uploader--draggable .mc-file-uploader__input--disabled{outline-color:var(--file-uploader-color-drag-and-drop-border-disabled, #b3b3b3);color:var(--file-uploader-color-drag-and-drop-text-disabled, #b3b3b3);cursor:not-allowed}.mc-file-uploader--draggable .mc-file-uploader__input--dragged{outline-width:.25rem}.mc-file-uploader-item{display:flex;flex-direction:column;gap:.25rem}.mc-file-uploader-item__container{border:1px solid var(--file-uploader-color-file-item-border-default, #cccccc);border-radius:var(--border-radius-m, .5rem);padding:.75rem}.mc-file-uploader-item__meta-row{display:flex;align-items:center;flex-grow:1}.mc-file-uploader-item__meta-row--with-info{align-items:start}.mc-file-uploader-item__status-icon{fill:var(--file-uploader-color-file-item-icon-valid, #3f9e10)}.mc-file-uploader-item__info-content{display:flex;flex-direction:column;flex-grow:1;padding-left:.5rem;padding-right:1rem}.mc-file-uploader-item__label{color:var(--file-uploader-color-file-item-text-file-name, #000000);font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600)}.mc-file-uploader-item__details{color:var(--file-uploader-color-file-item-text-information, #666666);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400)}.mc-file-uploader-item__error-message{color:var(--field-color-validation-invalid, #c61112);font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400)}.mc-file-uploader-item__container--inline{display:flex;align-items:center}.mc-file-uploader-item__container--stacked{display:flex;flex-direction:column;gap:.75rem}.mc-file-uploader-item__delete-button-container{padding-left:.25rem;margin-left:.25rem;border-left:1px solid var(--divider-color-primary, #cccccc)}.mc-file-uploader-item__actions-container{padding:0 2rem;display:flex;align-items:center;gap:.25rem;justify-content:center}.mc-file-uploader-item__action{padding:0 .75rem;flex-grow:1}.mc-file-uploader-item--error .mc-file-uploader-item__container{border-width:var(--border-width-m, .125rem);border-color:var(--file-uploader-color-file-item-border-invalid, #ea302d)}.mc-file-uploader-item--error .mc-file-uploader-item__status-icon{fill:var(--file-uploader-color-file-item-icon-invalid, #ea302d)}.mc-file-uploader-item--loading .mc-file-uploader-item__container{gap:1rem;flex-direction:column;align-items:normal}.mc-file-uploader-item--loading .mc-file-uploader-item__status-icon{fill:var(--color-standalone-disabled, #b3b3b3)}.mc-file-uploader-item--loading .mc-file-uploader-item__label,.mc-file-uploader-item--loading .mc-file-uploader-item__details{color:var(--color-standalone-disabled, #b3b3b3)}\n"] }]
|
|
418
423
|
}], propDecorators: { format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], uploading: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploading", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], hasPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPreview", required: false }] }], file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }], fileInformation: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileInformation", required: false }] }], retryButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "retryButtonLabel", required: false }] }], deleteButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteButtonLabel", required: false }] }], previewButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewButtonLabel", required: false }] }], delete: [{ type: i0.Output, args: ["delete"] }], retry: [{ type: i0.Output, args: ["retry"] }], preview: [{ type: i0.Output, args: ["preview"] }] } });
|
|
419
424
|
|
|
420
425
|
class MozFileUploaderComponent {
|
|
@@ -648,11 +653,11 @@ class MozModalComponent {
|
|
|
648
653
|
}
|
|
649
654
|
}
|
|
650
655
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MozModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
651
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MozModalComponent, isStandalone: true, selector: "moz-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hasCloseButton: { classPropertyName: "hasCloseButton", publicName: "hasCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, queries: [{ propertyName: "footerTpl", first: true, predicate: ["modalFooter"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n [class]=\"classes()\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n [attr.aria-modal]=\"isOpen() ? 'true' : 'false'\"\n>\n <div class=\"modal__dialog\" role=\"document\" (click)=\"$event.stopPropagation()\">\n <header class=\"modal__header\">\n <h2 class=\"modal__title\" id=\"modalTitle\">{{ title() }}</h2>\n\n @if (hasCloseButton()) {\n <moz-icon-button\n class=\"modal__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (
|
|
656
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MozModalComponent, isStandalone: true, selector: "moz-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hasCloseButton: { classPropertyName: "hasCloseButton", publicName: "hasCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, queries: [{ propertyName: "footerTpl", first: true, predicate: ["modalFooter"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n [class]=\"classes()\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n [attr.aria-modal]=\"isOpen() ? 'true' : 'false'\"\n>\n <div class=\"modal__dialog\" role=\"document\" (click)=\"$event.stopPropagation()\">\n <header class=\"modal__header\">\n <h2 class=\"modal__title\" id=\"modalTitle\">{{ title() }}</h2>\n\n @if (hasCloseButton()) {\n <moz-icon-button\n class=\"modal__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (activated)=\"close()\"\n [id]=\"'modal-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n }\n </header>\n\n <main class=\"modal__body\">\n <ng-content />\n </main>\n\n @if (footerTpl()) {\n <footer class=\"modal__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl()!\" />\n </footer>\n }\n </div>\n\n @if (isOpen()) {\n <div class=\"overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick()\"></div>\n }\n</div>\n", styles: [".mc-modal,.modal{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:var(--modal-z-index, 5);display:flex;justify-content:center;align-items:flex-end;overflow:hidden auto}@media(width>=680px){.mc-modal,.modal{align-items:center}}.mc-modal__dialog,.modal__dialog{background:var(--modal-color-background, #ffffff);display:flex;flex-direction:column;opacity:0;position:relative;transform:translateY(-25%);transition:visibility 0s linear .4s,transform .4s ease,opacity .4s ease;visibility:hidden;width:100%;border-radius:var(--border-radius-l, 1rem) var(--border-radius-l, 1rem) 0 0;z-index:var(--modal-z-index, 5)}@media(width>=680px){.mc-modal__dialog,.modal__dialog{width:38rem;border-radius:var(--border-radius-l, 1rem)}}.mc-modal.is-open .mc-modal__dialog,.is-open.modal .mc-modal__dialog,.mc-modal.is-open .modal__dialog,.is-open.modal .modal__dialog{opacity:1;pointer-events:all;transform:translateY(0);transition:visibility 0s linear 0s,transform .4s ease,opacity .4s ease;visibility:visible}.mc-modal__header,.modal__header{align-items:center;display:flex;gap:.5rem;min-height:3rem;padding:1rem;position:relative}@media(width>=680px){.mc-modal__header,.modal__header{padding:1.5rem 1.5rem 1rem}}.mc-modal__icon,.modal__icon{width:2rem;height:2rem;color:var(--modal-color-title, #000000)}.mc-modal__title,.modal__title{font-size:var(--font-title-m, 1.5rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--modal-color-title, #000000);margin-bottom:.5rem;margin-top:.5rem;padding-right:3rem}.mc-modal__close,.modal__close{position:absolute;top:.75rem;right:.75rem}.mc-modal__body,.modal__body{font-size:var(--font-size-150, 1rem);color:var(--modal-color-paragraph, #404040);padding:0 1rem;margin-bottom:1rem}@media(width>=680px){.mc-modal__body,.modal__body{padding:0 1.5rem}}.mc-modal__body p,.modal__body p{margin:0;line-height:var(--line-height-s, 1.3)}.mc-modal__footer,.modal__footer{align-items:stretch;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:1rem;padding:.5rem 1rem 1rem}@media(width>=680px){.mc-modal__footer,.modal__footer{flex-direction:row;padding:.5rem 1.5rem 1.5rem}}.mc-modal__link{order:1}@media(width>=680px){.mc-modal__link{margin-right:auto;order:0}}.mc-modal-open{overflow:hidden}.mc-overlay,.overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible,.is-visible.overlay{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.modal__icon:empty{display:none}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["hostClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
652
657
|
}
|
|
653
658
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MozModalComponent, decorators: [{
|
|
654
659
|
type: Component,
|
|
655
|
-
args: [{ selector: 'moz-modal', imports: [MozIconButtonComponent, Cross24, NgClass, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class]=\"classes()\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n [attr.aria-modal]=\"isOpen() ? 'true' : 'false'\"\n>\n <div class=\"modal__dialog\" role=\"document\" (click)=\"$event.stopPropagation()\">\n <header class=\"modal__header\">\n <h2 class=\"modal__title\" id=\"modalTitle\">{{ title() }}</h2>\n\n @if (hasCloseButton()) {\n <moz-icon-button\n class=\"modal__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (
|
|
660
|
+
args: [{ selector: 'moz-modal', imports: [MozIconButtonComponent, Cross24, NgClass, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class]=\"classes()\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n [attr.aria-modal]=\"isOpen() ? 'true' : 'false'\"\n>\n <div class=\"modal__dialog\" role=\"document\" (click)=\"$event.stopPropagation()\">\n <header class=\"modal__header\">\n <h2 class=\"modal__title\" id=\"modalTitle\">{{ title() }}</h2>\n\n @if (hasCloseButton()) {\n <moz-icon-button\n class=\"modal__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (activated)=\"close()\"\n [id]=\"'modal-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n }\n </header>\n\n <main class=\"modal__body\">\n <ng-content />\n </main>\n\n @if (footerTpl()) {\n <footer class=\"modal__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl()!\" />\n </footer>\n }\n </div>\n\n @if (isOpen()) {\n <div class=\"overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick()\"></div>\n }\n</div>\n", styles: [".mc-modal,.modal{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:var(--modal-z-index, 5);display:flex;justify-content:center;align-items:flex-end;overflow:hidden auto}@media(width>=680px){.mc-modal,.modal{align-items:center}}.mc-modal__dialog,.modal__dialog{background:var(--modal-color-background, #ffffff);display:flex;flex-direction:column;opacity:0;position:relative;transform:translateY(-25%);transition:visibility 0s linear .4s,transform .4s ease,opacity .4s ease;visibility:hidden;width:100%;border-radius:var(--border-radius-l, 1rem) var(--border-radius-l, 1rem) 0 0;z-index:var(--modal-z-index, 5)}@media(width>=680px){.mc-modal__dialog,.modal__dialog{width:38rem;border-radius:var(--border-radius-l, 1rem)}}.mc-modal.is-open .mc-modal__dialog,.is-open.modal .mc-modal__dialog,.mc-modal.is-open .modal__dialog,.is-open.modal .modal__dialog{opacity:1;pointer-events:all;transform:translateY(0);transition:visibility 0s linear 0s,transform .4s ease,opacity .4s ease;visibility:visible}.mc-modal__header,.modal__header{align-items:center;display:flex;gap:.5rem;min-height:3rem;padding:1rem;position:relative}@media(width>=680px){.mc-modal__header,.modal__header{padding:1.5rem 1.5rem 1rem}}.mc-modal__icon,.modal__icon{width:2rem;height:2rem;color:var(--modal-color-title, #000000)}.mc-modal__title,.modal__title{font-size:var(--font-title-m, 1.5rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--modal-color-title, #000000);margin-bottom:.5rem;margin-top:.5rem;padding-right:3rem}.mc-modal__close,.modal__close{position:absolute;top:.75rem;right:.75rem}.mc-modal__body,.modal__body{font-size:var(--font-size-150, 1rem);color:var(--modal-color-paragraph, #404040);padding:0 1rem;margin-bottom:1rem}@media(width>=680px){.mc-modal__body,.modal__body{padding:0 1.5rem}}.mc-modal__body p,.modal__body p{margin:0;line-height:var(--line-height-s, 1.3)}.mc-modal__footer,.modal__footer{align-items:stretch;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:1rem;padding:.5rem 1rem 1rem}@media(width>=680px){.mc-modal__footer,.modal__footer{flex-direction:row;padding:.5rem 1.5rem 1.5rem}}.mc-modal__link{order:1}@media(width>=680px){.mc-modal__link{margin-right:auto;order:0}}.mc-modal-open{overflow:hidden}.mc-overlay,.overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible,.is-visible.overlay{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.modal__icon:empty{display:none}\n"] }]
|
|
656
661
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hasCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasCloseButton", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], footerTpl: [{ type: i0.ContentChild, args: ['modalFooter', { isSignal: true }] }] } });
|
|
657
662
|
|
|
658
663
|
const MODAL_CONFIG = new InjectionToken('MODAL_CONFIG');
|
|
@@ -737,11 +742,11 @@ class ModalContainerComponent {
|
|
|
737
742
|
}
|
|
738
743
|
}
|
|
739
744
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ModalContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
740
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ModalContainerComponent, isStandalone: true, selector: "moz-modal-container", host: { listeners: { "keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n [class]=\"classes()\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n [attr.aria-hidden]=\"!modalRef.isOpen()\"\n>\n <div class=\"modal__dialog\" role=\"document\" (click)=\"$event.stopPropagation()\">\n <header class=\"modal__header\">\n <h2 class=\"modal__title\" id=\"modalTitle\">{{ modalRef.title() }}</h2>\n\n @if (modalRef.hasCloseButton()) {\n <moz-icon-button\n class=\"modal__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (
|
|
745
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ModalContainerComponent, isStandalone: true, selector: "moz-modal-container", host: { listeners: { "keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n [class]=\"classes()\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n [attr.aria-hidden]=\"!modalRef.isOpen()\"\n>\n <div class=\"modal__dialog\" role=\"document\" (click)=\"$event.stopPropagation()\">\n <header class=\"modal__header\">\n <h2 class=\"modal__title\" id=\"modalTitle\">{{ modalRef.title() }}</h2>\n\n @if (modalRef.hasCloseButton()) {\n <moz-icon-button\n class=\"modal__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (activated)=\"modalRef.close()\"\n [id]=\"'modal-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n }\n </header>\n\n <main class=\"modal__body\">\n <ng-template cdkPortalOutlet />\n </main>\n\n @if (footerTpl) {\n <footer class=\"modal__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl\" />\n </footer>\n }\n </div>\n\n @if (modalRef.isOpen()) {\n <div class=\"overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\"></div>\n }\n</div>\n", styles: [".mc-modal,.modal{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:var(--modal-z-index, 5);display:flex;justify-content:center;align-items:flex-end;overflow:hidden auto}@media(width>=680px){.mc-modal,.modal{align-items:center}}.mc-modal__dialog,.modal__dialog{background:var(--modal-color-background, #ffffff);display:flex;flex-direction:column;opacity:0;position:relative;transform:translateY(-25%);transition:visibility 0s linear .4s,transform .4s ease,opacity .4s ease;visibility:hidden;width:100%;border-radius:var(--border-radius-l, 1rem) var(--border-radius-l, 1rem) 0 0;z-index:var(--modal-z-index, 5)}@media(width>=680px){.mc-modal__dialog,.modal__dialog{width:38rem;border-radius:var(--border-radius-l, 1rem)}}.mc-modal.is-open .mc-modal__dialog,.is-open.modal .mc-modal__dialog,.mc-modal.is-open .modal__dialog,.is-open.modal .modal__dialog{opacity:1;pointer-events:all;transform:translateY(0);transition:visibility 0s linear 0s,transform .4s ease,opacity .4s ease;visibility:visible}.mc-modal__header,.modal__header{align-items:center;display:flex;gap:.5rem;min-height:3rem;padding:1rem;position:relative}@media(width>=680px){.mc-modal__header,.modal__header{padding:1.5rem 1.5rem 1rem}}.mc-modal__icon,.modal__icon{width:2rem;height:2rem;color:var(--modal-color-title, #000000)}.mc-modal__title,.modal__title{font-size:var(--font-title-m, 1.5rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--modal-color-title, #000000);margin-bottom:.5rem;margin-top:.5rem;padding-right:3rem}.mc-modal__close,.modal__close{position:absolute;top:.75rem;right:.75rem}.mc-modal__body,.modal__body{font-size:var(--font-size-150, 1rem);color:var(--modal-color-paragraph, #404040);padding:0 1rem;margin-bottom:1rem}@media(width>=680px){.mc-modal__body,.modal__body{padding:0 1.5rem}}.mc-modal__body p,.modal__body p{margin:0;line-height:var(--line-height-s, 1.3)}.mc-modal__footer,.modal__footer{align-items:stretch;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:1rem;padding:.5rem 1rem 1rem}@media(width>=680px){.mc-modal__footer,.modal__footer{flex-direction:row;padding:.5rem 1.5rem 1.5rem}}.mc-modal__link{order:1}@media(width>=680px){.mc-modal__link{margin-right:auto;order:0}}.mc-modal-open{overflow:hidden}.mc-overlay,.overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible,.is-visible.overlay{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.modal__icon:empty{display:none}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["hostClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
741
746
|
}
|
|
742
747
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ModalContainerComponent, decorators: [{
|
|
743
748
|
type: Component,
|
|
744
|
-
args: [{ selector: 'moz-modal-container', imports: [MozIconButtonComponent, Cross24, NgTemplateOutlet, CdkPortalOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class]=\"classes()\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n [attr.aria-hidden]=\"!modalRef.isOpen()\"\n>\n <div class=\"modal__dialog\" role=\"document\" (click)=\"$event.stopPropagation()\">\n <header class=\"modal__header\">\n <h2 class=\"modal__title\" id=\"modalTitle\">{{ modalRef.title() }}</h2>\n\n @if (modalRef.hasCloseButton()) {\n <moz-icon-button\n class=\"modal__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (
|
|
749
|
+
args: [{ selector: 'moz-modal-container', imports: [MozIconButtonComponent, Cross24, NgTemplateOutlet, CdkPortalOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class]=\"classes()\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n [attr.aria-hidden]=\"!modalRef.isOpen()\"\n>\n <div class=\"modal__dialog\" role=\"document\" (click)=\"$event.stopPropagation()\">\n <header class=\"modal__header\">\n <h2 class=\"modal__title\" id=\"modalTitle\">{{ modalRef.title() }}</h2>\n\n @if (modalRef.hasCloseButton()) {\n <moz-icon-button\n class=\"modal__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (activated)=\"modalRef.close()\"\n [id]=\"'modal-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n }\n </header>\n\n <main class=\"modal__body\">\n <ng-template cdkPortalOutlet />\n </main>\n\n @if (footerTpl) {\n <footer class=\"modal__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl\" />\n </footer>\n }\n </div>\n\n @if (modalRef.isOpen()) {\n <div class=\"overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\"></div>\n }\n</div>\n", styles: [".mc-modal,.modal{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:var(--modal-z-index, 5);display:flex;justify-content:center;align-items:flex-end;overflow:hidden auto}@media(width>=680px){.mc-modal,.modal{align-items:center}}.mc-modal__dialog,.modal__dialog{background:var(--modal-color-background, #ffffff);display:flex;flex-direction:column;opacity:0;position:relative;transform:translateY(-25%);transition:visibility 0s linear .4s,transform .4s ease,opacity .4s ease;visibility:hidden;width:100%;border-radius:var(--border-radius-l, 1rem) var(--border-radius-l, 1rem) 0 0;z-index:var(--modal-z-index, 5)}@media(width>=680px){.mc-modal__dialog,.modal__dialog{width:38rem;border-radius:var(--border-radius-l, 1rem)}}.mc-modal.is-open .mc-modal__dialog,.is-open.modal .mc-modal__dialog,.mc-modal.is-open .modal__dialog,.is-open.modal .modal__dialog{opacity:1;pointer-events:all;transform:translateY(0);transition:visibility 0s linear 0s,transform .4s ease,opacity .4s ease;visibility:visible}.mc-modal__header,.modal__header{align-items:center;display:flex;gap:.5rem;min-height:3rem;padding:1rem;position:relative}@media(width>=680px){.mc-modal__header,.modal__header{padding:1.5rem 1.5rem 1rem}}.mc-modal__icon,.modal__icon{width:2rem;height:2rem;color:var(--modal-color-title, #000000)}.mc-modal__title,.modal__title{font-size:var(--font-title-m, 1.5rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--modal-color-title, #000000);margin-bottom:.5rem;margin-top:.5rem;padding-right:3rem}.mc-modal__close,.modal__close{position:absolute;top:.75rem;right:.75rem}.mc-modal__body,.modal__body{font-size:var(--font-size-150, 1rem);color:var(--modal-color-paragraph, #404040);padding:0 1rem;margin-bottom:1rem}@media(width>=680px){.mc-modal__body,.modal__body{padding:0 1.5rem}}.mc-modal__body p,.modal__body p{margin:0;line-height:var(--line-height-s, 1.3)}.mc-modal__footer,.modal__footer{align-items:stretch;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:1rem;padding:.5rem 1rem 1rem}@media(width>=680px){.mc-modal__footer,.modal__footer{flex-direction:row;padding:.5rem 1.5rem 1.5rem}}.mc-modal__link{order:1}@media(width>=680px){.mc-modal__link{margin-right:auto;order:0}}.mc-modal-open{overflow:hidden}.mc-overlay,.overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible,.is-visible.overlay{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.modal__icon:empty{display:none}\n"] }]
|
|
745
750
|
}], propDecorators: { portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }], onEscape: [{
|
|
746
751
|
type: HostListener,
|
|
747
752
|
args: ['keydown.escape']
|
|
@@ -958,7 +963,7 @@ class MozPaginationComponent {
|
|
|
958
963
|
this.updateValue.emit(+value);
|
|
959
964
|
}
|
|
960
965
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MozPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
961
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.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 (
|
|
966
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.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 (activated)=\"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 (activated)=\"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%);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"], outputs: ["activated"] }, { 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 });
|
|
962
967
|
}
|
|
963
968
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MozPaginationComponent, decorators: [{
|
|
964
969
|
type: Component,
|
|
@@ -971,7 +976,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
971
976
|
FormsModule,
|
|
972
977
|
ChevronLeft20,
|
|
973
978
|
ChevronRight20,
|
|
974
|
-
], 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 (
|
|
979
|
+
], 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 (activated)=\"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 (activated)=\"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%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}\n"] }]
|
|
975
980
|
}], 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"] }] } });
|
|
976
981
|
|
|
977
982
|
/**
|
|
@@ -1511,11 +1516,11 @@ class MozStatusNotificationComponent {
|
|
|
1511
1516
|
this.closed.emit();
|
|
1512
1517
|
}
|
|
1513
1518
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MozStatusNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1514
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MozStatusNotificationComponent, isStandalone: true, selector: "moz-status-notification", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, queries: [{ propertyName: "descriptionTpl", first: true, predicate: ["description"], isSignal: true }, { propertyName: "footerTpl", first: true, predicate: ["footer"], isSignal: true }], ngImport: i0, template: "<section role=\"status\" [class]=\"classes()\" [id]=\"id()\">\n <div class=\"mc-status-notification__icon\">\n <ng-container [ngComponentOutlet]=\"iconComponent()\" />\n </div>\n\n <div class=\"mc-status-notification__content\">\n @if(title()){\n <span class=\"mc-status-notification__title\">{{ title() }}</span>\n } @if (descriptionTpl()) {\n <div class=\"mc-status-notification__message\">\n <ng-container [ngTemplateOutlet]=\"descriptionTpl()\" />\n </div>\n } @if (footerTpl()) {\n <div class=\"mc-status-notification__footer\">\n <ng-container [ngTemplateOutlet]=\"footerTpl()\" />\n </div>\n }\n </div>\n\n @if (closable()) {\n <moz-icon-button\n size=\"s\"\n class=\"mc-status-notification-closable__close\"\n [ghost]=\"true\"\n type=\"button\"\n [appearance]=\"'standard'\"\n (
|
|
1519
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MozStatusNotificationComponent, isStandalone: true, selector: "moz-status-notification", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, queries: [{ propertyName: "descriptionTpl", first: true, predicate: ["description"], isSignal: true }, { propertyName: "footerTpl", first: true, predicate: ["footer"], isSignal: true }], ngImport: i0, template: "<section role=\"status\" [class]=\"classes()\" [id]=\"id()\">\n <div class=\"mc-status-notification__icon\">\n <ng-container [ngComponentOutlet]=\"iconComponent()\" />\n </div>\n\n <div class=\"mc-status-notification__content\">\n @if(title()){\n <span class=\"mc-status-notification__title\">{{ title() }}</span>\n } @if (descriptionTpl()) {\n <div class=\"mc-status-notification__message\">\n <ng-container [ngTemplateOutlet]=\"descriptionTpl()\" />\n </div>\n } @if (footerTpl()) {\n <div class=\"mc-status-notification__footer\">\n <ng-container [ngTemplateOutlet]=\"footerTpl()\" />\n </div>\n }\n </div>\n\n @if (closable()) {\n <moz-icon-button\n size=\"s\"\n class=\"mc-status-notification-closable__close\"\n [ghost]=\"true\"\n type=\"button\"\n [appearance]=\"'standard'\"\n (activated)=\"onCloseClick()\"\n ariaLabel=\"Close notification\"\n [id]=\"'status-notification-close-button'\"\n >\n <Cross20 icon />\n </moz-icon-button>\n }\n</section>\n", styles: [".mc-status-notification{border-radius:var(--border-radius-m, .5rem);background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-info, #3facd7);display:flex;flex-flow:row wrap;align-items:flex-start;position:relative;box-sizing:border-box;color:var(--status-notification-color-text, #000000)}.mc-status-notification__icon{width:2rem;height:2rem;margin:.75rem;fill:var(--status-notification-color-icon-info, #0b96cc);color:var(--status-notification-color-icon-info, #0b96cc)}.mc-status-notification__content{flex:1 1 0;padding:.75rem 1rem .75rem 0}.mc-status-notification__title,.mc-status-notification__message{line-height:var(--line-height-s, 1.3);margin-block:0}.mc-status-notification__title{font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-150, 1rem);margin-block-end:.25rem}.mc-status-notification__message{font-size:var(--font-size-100, .875rem)}.mc-status-notification__footer{align-items:flex-start;display:flex;flex-flow:row wrap;gap:.5rem;margin-top:.75rem;margin-bottom:.5rem}.mc-status-notification--information{background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-info, #3facd7)}.mc-status-notification--information .mc-status-notification__icon{fill:var(--status-notification-color-icon-info, #0b96cc);color:var(--status-notification-color-icon-info, #0b96cc)}.mc-status-notification--success{background:var(--status-notification-color-background-success, #ebf5de);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-success, #78be20)}.mc-status-notification--success .mc-status-notification__icon{fill:var(--status-notification-color-icon-success, #3f9e10);color:var(--status-notification-color-icon-success, #3f9e10)}.mc-status-notification--warning{background:var(--status-notification-color-background-warning, #fdf1e8);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-warning, #ef934a)}.mc-status-notification--warning .mc-status-notification__icon{fill:var(--status-notification-color-icon-warning, #ea7315);color:var(--status-notification-color-icon-warning, #ea7315)}.mc-status-notification--error{background:var(--status-notification-color-background-error, #fdeaea);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-error, #ef5f5c)}.mc-status-notification--error .mc-status-notification__icon{fill:var(--status-notification-color-icon-error, #ea302d);color:var(--status-notification-color-icon-error, #ea302d)}.mc-status-notification-closable__close{margin:.25rem}\n"], dependencies: [{ 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"], outputs: ["activated"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1515
1520
|
}
|
|
1516
1521
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MozStatusNotificationComponent, decorators: [{
|
|
1517
1522
|
type: Component,
|
|
1518
|
-
args: [{ selector: 'moz-status-notification', changeDetection: ChangeDetectionStrategy.OnPush, imports: [Cross20, MozIconButtonComponent, NgComponentOutlet, NgTemplateOutlet], template: "<section role=\"status\" [class]=\"classes()\" [id]=\"id()\">\n <div class=\"mc-status-notification__icon\">\n <ng-container [ngComponentOutlet]=\"iconComponent()\" />\n </div>\n\n <div class=\"mc-status-notification__content\">\n @if(title()){\n <span class=\"mc-status-notification__title\">{{ title() }}</span>\n } @if (descriptionTpl()) {\n <div class=\"mc-status-notification__message\">\n <ng-container [ngTemplateOutlet]=\"descriptionTpl()\" />\n </div>\n } @if (footerTpl()) {\n <div class=\"mc-status-notification__footer\">\n <ng-container [ngTemplateOutlet]=\"footerTpl()\" />\n </div>\n }\n </div>\n\n @if (closable()) {\n <moz-icon-button\n size=\"s\"\n class=\"mc-status-notification-closable__close\"\n [ghost]=\"true\"\n type=\"button\"\n [appearance]=\"'standard'\"\n (
|
|
1523
|
+
args: [{ selector: 'moz-status-notification', changeDetection: ChangeDetectionStrategy.OnPush, imports: [Cross20, MozIconButtonComponent, NgComponentOutlet, NgTemplateOutlet], template: "<section role=\"status\" [class]=\"classes()\" [id]=\"id()\">\n <div class=\"mc-status-notification__icon\">\n <ng-container [ngComponentOutlet]=\"iconComponent()\" />\n </div>\n\n <div class=\"mc-status-notification__content\">\n @if(title()){\n <span class=\"mc-status-notification__title\">{{ title() }}</span>\n } @if (descriptionTpl()) {\n <div class=\"mc-status-notification__message\">\n <ng-container [ngTemplateOutlet]=\"descriptionTpl()\" />\n </div>\n } @if (footerTpl()) {\n <div class=\"mc-status-notification__footer\">\n <ng-container [ngTemplateOutlet]=\"footerTpl()\" />\n </div>\n }\n </div>\n\n @if (closable()) {\n <moz-icon-button\n size=\"s\"\n class=\"mc-status-notification-closable__close\"\n [ghost]=\"true\"\n type=\"button\"\n [appearance]=\"'standard'\"\n (activated)=\"onCloseClick()\"\n ariaLabel=\"Close notification\"\n [id]=\"'status-notification-close-button'\"\n >\n <Cross20 icon />\n </moz-icon-button>\n }\n</section>\n", styles: [".mc-status-notification{border-radius:var(--border-radius-m, .5rem);background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-info, #3facd7);display:flex;flex-flow:row wrap;align-items:flex-start;position:relative;box-sizing:border-box;color:var(--status-notification-color-text, #000000)}.mc-status-notification__icon{width:2rem;height:2rem;margin:.75rem;fill:var(--status-notification-color-icon-info, #0b96cc);color:var(--status-notification-color-icon-info, #0b96cc)}.mc-status-notification__content{flex:1 1 0;padding:.75rem 1rem .75rem 0}.mc-status-notification__title,.mc-status-notification__message{line-height:var(--line-height-s, 1.3);margin-block:0}.mc-status-notification__title{font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-150, 1rem);margin-block-end:.25rem}.mc-status-notification__message{font-size:var(--font-size-100, .875rem)}.mc-status-notification__footer{align-items:flex-start;display:flex;flex-flow:row wrap;gap:.5rem;margin-top:.75rem;margin-bottom:.5rem}.mc-status-notification--information{background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-info, #3facd7)}.mc-status-notification--information .mc-status-notification__icon{fill:var(--status-notification-color-icon-info, #0b96cc);color:var(--status-notification-color-icon-info, #0b96cc)}.mc-status-notification--success{background:var(--status-notification-color-background-success, #ebf5de);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-success, #78be20)}.mc-status-notification--success .mc-status-notification__icon{fill:var(--status-notification-color-icon-success, #3f9e10);color:var(--status-notification-color-icon-success, #3f9e10)}.mc-status-notification--warning{background:var(--status-notification-color-background-warning, #fdf1e8);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-warning, #ef934a)}.mc-status-notification--warning .mc-status-notification__icon{fill:var(--status-notification-color-icon-warning, #ea7315);color:var(--status-notification-color-icon-warning, #ea7315)}.mc-status-notification--error{background:var(--status-notification-color-background-error, #fdeaea);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-error, #ef5f5c)}.mc-status-notification--error .mc-status-notification__icon{fill:var(--status-notification-color-icon-error, #ea302d);color:var(--status-notification-color-icon-error, #ea302d)}.mc-status-notification-closable__close{margin:.25rem}\n"] }]
|
|
1519
1524
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], descriptionTpl: [{ type: i0.ContentChild, args: ['description', { ...{ descendants: false }, isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: ['footer', { ...{ descendants: false }, isSignal: true }] }] } });
|
|
1520
1525
|
|
|
1521
1526
|
class MozTabComponent {
|
|
@@ -2705,7 +2710,7 @@ class MozToasterComponent {
|
|
|
2705
2710
|
}
|
|
2706
2711
|
}
|
|
2707
2712
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MozToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2708
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MozToasterComponent, isStandalone: true, selector: "moz-toaster", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, timeout: { classPropertyName: "timeout", publicName: "timeout", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, closeAriaLabel: { classPropertyName: "closeAriaLabel", publicName: "closeAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange", closed: "closed" }, queries: [{ propertyName: "actionSlot", first: true, predicate: ["[action]"], isSignal: true }], ngImport: i0, 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 (
|
|
2713
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MozToasterComponent, isStandalone: true, selector: "moz-toaster", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, timeout: { classPropertyName: "timeout", publicName: "timeout", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, closeAriaLabel: { classPropertyName: "closeAriaLabel", publicName: "closeAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange", closed: "closed" }, queries: [{ propertyName: "actionSlot", first: true, predicate: ["[action]"], isSignal: true }], ngImport: i0, 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 (activated)=\"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, 6);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);color: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);color: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);color: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);color: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);color: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"], outputs: ["activated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2709
2714
|
}
|
|
2710
2715
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MozToasterComponent, decorators: [{
|
|
2711
2716
|
type: Component,
|
|
@@ -2717,7 +2722,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
2717
2722
|
InfoCircleFilled32,
|
|
2718
2723
|
Cross20,
|
|
2719
2724
|
MozIconButtonComponent,
|
|
2720
|
-
], 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 (
|
|
2725
|
+
], 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 (activated)=\"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, 6);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);color: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);color: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);color: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);color: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);color: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"] }]
|
|
2721
2726
|
}], 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 }] }] } });
|
|
2722
2727
|
|
|
2723
2728
|
const TOASTER_CONFIG = new InjectionToken('TOASTER_CONFIG');
|
|
@@ -2832,7 +2837,7 @@ class ToasterContainerComponent {
|
|
|
2832
2837
|
}
|
|
2833
2838
|
}
|
|
2834
2839
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ToasterContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2835
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.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 (
|
|
2840
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.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 (activated)=\"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, 6);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);color: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);color: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);color: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);color: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);color: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"], outputs: ["activated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2836
2841
|
}
|
|
2837
2842
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ToasterContainerComponent, decorators: [{
|
|
2838
2843
|
type: Component,
|
|
@@ -2844,7 +2849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
2844
2849
|
InfoCircleFilled32,
|
|
2845
2850
|
Cross20,
|
|
2846
2851
|
MozIconButtonComponent,
|
|
2847
|
-
], 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 (
|
|
2852
|
+
], 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 (activated)=\"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, 6);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);color: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);color: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);color: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);color: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);color: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"] }]
|
|
2848
2853
|
}], ctorParameters: () => [] });
|
|
2849
2854
|
|
|
2850
2855
|
// service/toaster.service.ts
|
|
@@ -3374,11 +3379,11 @@ class MozCarouselComponent {
|
|
|
3374
3379
|
root.scrollBy({ left: root.clientWidth, behavior: 'smooth' });
|
|
3375
3380
|
}
|
|
3376
3381
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MozCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3377
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.5", type: MozCarouselComponent, isStandalone: true, selector: "moz-carousel", inputs: { ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, previousButtonAriaLabel: { classPropertyName: "previousButtonAriaLabel", publicName: "previousButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, nextButtonAriaLabel: { classPropertyName: "nextButtonAriaLabel", publicName: "nextButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { index: "indexChange" }, viewQueries: [{ propertyName: "contentEl", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"mc-carousel\"\n role=\"group\"\n aria-roledescription=\"carousel\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n>\n <div class=\"mc-carousel__header\">\n <div class=\"mc-carousel__headings\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n\n <div class=\"mc-carousel__controls\">\n <moz-icon-button\n (
|
|
3382
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.5", type: MozCarouselComponent, isStandalone: true, selector: "moz-carousel", inputs: { ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, previousButtonAriaLabel: { classPropertyName: "previousButtonAriaLabel", publicName: "previousButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, nextButtonAriaLabel: { classPropertyName: "nextButtonAriaLabel", publicName: "nextButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { index: "indexChange" }, viewQueries: [{ propertyName: "contentEl", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"mc-carousel\"\n role=\"group\"\n aria-roledescription=\"carousel\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n>\n <div class=\"mc-carousel__header\">\n <div class=\"mc-carousel__headings\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n\n <div class=\"mc-carousel__controls\">\n <moz-icon-button\n (activated)=\"goPrevious()\"\n [disabled]=\"!canPrev()\"\n [ariaLabel]=\"previousButtonAriaLabel()\"\n [size]=\"'s'\"\n [outlined]=\"true\"\n [id]=\"'carousel-previous-button'\"\n >\n <ChevronLeft20 icon aria-hidden=\"true\" />\n </moz-icon-button>\n\n <moz-icon-button\n (activated)=\"goNext()\"\n [disabled]=\"!canNext()\"\n [ariaLabel]=\"nextButtonAriaLabel()\"\n [size]=\"'s'\"\n [outlined]=\"true\"\n [id]=\"'carousel-next-button'\"\n >\n <ChevronRight20 icon aria-hidden=\"true\" />\n </moz-icon-button>\n </div>\n </div>\n\n <div class=\"mc-carousel__content\" #content>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".mt-title{font-weight:var(--font-accent, 600)}.mt-title--l{font-size:var(--font-title-l, 1.75rem);line-height:calc(var(--font-title-l, 1.75rem) * var(--line-height-s, 1.3))}.mt-title--m{font-size:var(--font-title-m, 1.5rem);line-height:calc(var(--font-title-m, 1.5rem) * var(--line-height-s, 1.3))}.mt-title--s{font-size:var(--font-title-s, 1.125rem);line-height:calc(var(--font-title-s, 1.125rem) * var(--line-height-s, 1.3))}.mc-carousel{display:flex;flex-direction:column;row-gap:1rem}.mc-carousel__header{display:flex;align-items:flex-start}.mc-carousel__headings{display:flex;flex-direction:column;row-gap:.25rem;flex:1;align-items:flex-start;color:var(--color-text-primary, #000000)}.mc-carousel__controls{display:flex;column-gap:.5rem;margin:.25rem .25rem 0 0}.mc-carousel__content{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.mc-carousel__content>*{scroll-snap-align:start}:host ::ng-deep .mc-carousel__title{margin:0}:host ::ng-deep .mc-carousel__sub-title{margin:0}\n"], dependencies: [{ kind: "component", type: ChevronLeft20, selector: "ChevronLeft20", inputs: ["hostClass"] }, { kind: "component", type: ChevronRight20, selector: "ChevronRight20", inputs: ["hostClass"] }, { kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3378
3383
|
}
|
|
3379
3384
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MozCarouselComponent, decorators: [{
|
|
3380
3385
|
type: Component,
|
|
3381
|
-
args: [{ selector: 'moz-carousel', imports: [ChevronLeft20, ChevronRight20, MozIconButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"mc-carousel\"\n role=\"group\"\n aria-roledescription=\"carousel\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n>\n <div class=\"mc-carousel__header\">\n <div class=\"mc-carousel__headings\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n\n <div class=\"mc-carousel__controls\">\n <moz-icon-button\n (
|
|
3386
|
+
args: [{ selector: 'moz-carousel', imports: [ChevronLeft20, ChevronRight20, MozIconButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"mc-carousel\"\n role=\"group\"\n aria-roledescription=\"carousel\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n>\n <div class=\"mc-carousel__header\">\n <div class=\"mc-carousel__headings\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n\n <div class=\"mc-carousel__controls\">\n <moz-icon-button\n (activated)=\"goPrevious()\"\n [disabled]=\"!canPrev()\"\n [ariaLabel]=\"previousButtonAriaLabel()\"\n [size]=\"'s'\"\n [outlined]=\"true\"\n [id]=\"'carousel-previous-button'\"\n >\n <ChevronLeft20 icon aria-hidden=\"true\" />\n </moz-icon-button>\n\n <moz-icon-button\n (activated)=\"goNext()\"\n [disabled]=\"!canNext()\"\n [ariaLabel]=\"nextButtonAriaLabel()\"\n [size]=\"'s'\"\n [outlined]=\"true\"\n [id]=\"'carousel-next-button'\"\n >\n <ChevronRight20 icon aria-hidden=\"true\" />\n </moz-icon-button>\n </div>\n </div>\n\n <div class=\"mc-carousel__content\" #content>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".mt-title{font-weight:var(--font-accent, 600)}.mt-title--l{font-size:var(--font-title-l, 1.75rem);line-height:calc(var(--font-title-l, 1.75rem) * var(--line-height-s, 1.3))}.mt-title--m{font-size:var(--font-title-m, 1.5rem);line-height:calc(var(--font-title-m, 1.5rem) * var(--line-height-s, 1.3))}.mt-title--s{font-size:var(--font-title-s, 1.125rem);line-height:calc(var(--font-title-s, 1.125rem) * var(--line-height-s, 1.3))}.mc-carousel{display:flex;flex-direction:column;row-gap:1rem}.mc-carousel__header{display:flex;align-items:flex-start}.mc-carousel__headings{display:flex;flex-direction:column;row-gap:.25rem;flex:1;align-items:flex-start;color:var(--color-text-primary, #000000)}.mc-carousel__controls{display:flex;column-gap:.5rem;margin:.25rem .25rem 0 0}.mc-carousel__content{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.mc-carousel__content>*{scroll-snap-align:start}:host ::ng-deep .mc-carousel__title{margin:0}:host ::ng-deep .mc-carousel__sub-title{margin:0}\n"] }]
|
|
3382
3387
|
}], ctorParameters: () => [], propDecorators: { ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], previousButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousButtonAriaLabel", required: false }] }], nextButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextButtonAriaLabel", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }, { type: i0.Output, args: ["indexChange"] }], contentEl: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
|
|
3383
3388
|
|
|
3384
3389
|
class MozStatusMessageComponent {
|
|
@@ -3946,7 +3951,7 @@ class MozPageHeaderComponent {
|
|
|
3946
3951
|
this.activeTabChange.emit(index);
|
|
3947
3952
|
}
|
|
3948
3953
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MozPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3949
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MozPageHeaderComponent, isStandalone: true, selector: "moz-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, backButton: { classPropertyName: "backButton", publicName: "backButton", isSignal: true, isRequired: false, transformFunction: null }, searchButton: { classPropertyName: "searchButton", publicName: "searchButton", isSignal: true, isRequired: false, transformFunction: null }, helpButton: { classPropertyName: "helpButton", publicName: "helpButton", isSignal: true, isRequired: false, transformFunction: null }, notificationButton: { classPropertyName: "notificationButton", publicName: "notificationButton", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusLabel: { classPropertyName: "statusLabel", publicName: "statusLabel", isSignal: true, isRequired: false, transformFunction: null }, extraInfo: { classPropertyName: "extraInfo", publicName: "extraInfo", isSignal: true, isRequired: false, transformFunction: null }, scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, scopeValue: { classPropertyName: "scopeValue", publicName: "scopeValue", isSignal: true, isRequired: false, transformFunction: null }, scopePlaceholder: { classPropertyName: "scopePlaceholder", publicName: "scopePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange", back: "back", search: "search", help: "help", notification: "notification", toggleMenu: "toggleMenu", toggleScope: "toggleScope", scopeValueChange: "scopeValueChange", activeTabChange: "activeTabChange" }, ngImport: i0, template: "<div [class]=\"classes()\">\n <div class=\"mc-page-header__top-wrapper\">\n <div class=\"mc-page-header__top-content\">\n @if (backButton()) {\n <moz-icon-button\n [ghost]=\"true\"\n [id]=\"'page-header-back-button'\"\n ariaLabel=\"Back button\"\n (click)=\"onBack()\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <div class=\"mc-page-header__content-wrapper\">\n <span class=\"mc-page-header__title\">\n {{ title() }}\n </span>\n\n @if (hasStatusOrExtraInfo()) {\n <div class=\"mc-page-header__info-wrapper\">\n @if (hasStatusBadge()) {\n <moz-status-badge [label]=\"statusLabel()!\" [status]=\"status()!\" />\n } @if (extraInfo()) {\n <span class=\"mc-page-header__extra-info\">\n {{ extraInfo() }}\n </span>\n }\n </div>\n }\n\n <ng-content select=\"[content]\" />\n </div>\n </div>\n\n <div class=\"mc-page-header__actions-wrapper\">\n <moz-icon-button\n class=\"mc-page-header__burger-menu\"\n [ghost]=\"true\"\n [id]=\"'page-header-burger-menu'\"\n ariaLabel=\"Burger menu\"\n (click)=\"onToggleMenu()\"\n >\n <Menu24 icon />\n </moz-icon-button>\n\n <ng-content select=\"[actions]\">\n <div class=\"mc-page-header__actions-content\">\n @if (hasIconButtons()) {\n <div class=\"mc-page-header__icons\">\n @if (searchButton()) {\n <moz-icon-button\n [ghost]=\"true\"\n [id]=\"'page-header-search-button'\"\n ariaLabel=\"Search button\"\n (click)=\"onSearch()\"\n >\n <Search24 icon />\n </moz-icon-button>\n } @if (helpButton()) {\n <moz-icon-button\n [ghost]=\"true\"\n [id]=\"'page-header-help-button'\"\n ariaLabel=\"Help button\"\n (click)=\"onHelp()\"\n >\n <HelpCircle24 icon />\n </moz-icon-button>\n } @if (notificationButton()) {\n <moz-icon-button\n [ghost]=\"true\"\n [id]=\"'page-header-notification-button'\"\n ariaLabel=\"Notification button\"\n (click)=\"onNotification()\"\n >\n <Notification24 icon />\n </moz-icon-button>\n }\n </div>\n } @if (isScopeString() && isScopeValueBoolean()) {\n <moz-tag type=\"interactive\" [id]=\"'scope-tag'\" (click)=\"onScopeTagClick()\">{{\n $any(scope())\n }}</moz-tag>\n } @if (isScopeArray() && isScopeValueNotBoolean()) {\n <div class=\"mc-page-header__scope--select\">\n <moz-select\n [name]=\"'scope-select'\"\n id=\"scope-select\"\n size=\"s\"\n [options]=\"scopeAsArray()\"\n [placeholder]=\"scopePlaceholder()\"\n [ngModel]=\"scopeValue()\"\n (ngModelChange)=\"onScopeSelectChange($event)\"\n />\n </div>\n\n <div class=\"mc-page-header__scope--tag\">\n <moz-tag type=\"interactive\" [id]=\"'mobile-scope-tag'\" (click)=\"onToggleScope()\">{{\n mobileTagLabel()\n }}</moz-tag>\n </div>\n }\n </div>\n </ng-content>\n </div>\n </div>\n\n @if (tabs() && tabs()!.length > 0) {\n <div class=\"mc-page-header__tabs\">\n <moz-tabs\n [tabs]=\"tabs()!\"\n [(selectedIndex)]=\"activeTab\"\n (selectedIndexChange)=\"onActiveTabChange($event)\"\n />\n </div>\n }\n</div>\n", styles: [".mc-page-header,.mc-page-header :host{--tabs-list-padding: .5rem 1rem}@media screen and (min-width:680px){.mc-page-header,.mc-page-header :host{--tabs-list-padding: .5rem 2.5rem}}.mc-page-header--with-shadow{box-shadow:var(--shadow-bottom-xs-x, 0px) var(--shadow-bottom-xs-y, 3px) var(--shadow-bottom-xs-blur, 5px) var(--shadow-bottom-xs-spread, -2px) rgba(0,0,0,var(--shadow-bottom-xs-opacity, 15%))}.mc-page-header__top-wrapper{padding:0 0 .75rem;display:flex;flex-direction:column-reverse;justify-content:space-between;background-color:var(--page-header-color-background, #ffffff)}@media screen and (min-width:680px){.mc-page-header__top-wrapper{padding:.75rem 2.5rem;flex-direction:row;gap:2rem}}.mc-page-header__top-content{padding:.5rem 0 0;display:flex;gap:.25rem;align-items:center}@media screen and (min-width:680px){.mc-page-header__top-content{padding:.5rem 0;gap:.75rem}}.mc-page-header__content-wrapper{display:flex;flex-direction:column;gap:.5rem}.mc-page-header__title{font-size:var(--font-size-200, 1.125rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--page-header-color-text-title, #000000)}@media screen and (min-width:680px){.mc-page-header__title{font-size:var(--font-size-300, 1.5rem)}}.mc-page-header__info-wrapper{display:flex;align-items:center;gap:.5rem}.mc-page-header__extra-info{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--page-header-color-text-extra-info, #404040)}.mc-page-header__actions-wrapper{display:flex;align-items:start;justify-content:space-between;border-bottom:1px solid var(--divider-color-primary, #cccccc);padding-right:1rem}@media screen and (min-width:680px){.mc-page-header__actions-wrapper{border-bottom:none;padding-right:0}}.mc-page-header__actions-wrapper .mc-page-header__burger-menu{display:inline-flex}@media screen and (min-width:680px){.mc-page-header__actions-wrapper .mc-page-header__burger-menu{display:none}}.mc-page-header__actions-content{display:flex;align-items:center}@media screen and (min-width:680px){.mc-page-header__actions-content{gap:1rem}}.mc-page-header__scope--tag{display:block}@media screen and (min-width:680px){.mc-page-header__scope--tag{display:none}}.mc-page-header__scope--select{display:none}@media screen and (min-width:680px){.mc-page-header__scope--select{display:block}}.mc-page-header__icons{display:flex;align-items:center}.mc-page-header__tabs{border-top:1px solid var(--divider-color-primary, #cccccc)}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { kind: "component", type: MozTagComponent, selector: "moz-tag", inputs: ["type", "size", "id", "name", "disabled", "contextualisedNumber", "removableLabel"], outputs: ["removeTag"] }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozStatusBadgeComponent, selector: "moz-status-badge", inputs: ["label", "status"] }, { kind: "component", type: MozTabsComponent, selector: "moz-tabs", inputs: ["description", "divider", "centered", "selectedIndex", "tabs"], outputs: ["selectedIndexChange"] }, { kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["hostClass"] }, { kind: "component", type: HelpCircle24, selector: "HelpCircle24", inputs: ["hostClass"] }, { kind: "component", type: Menu24, selector: "Menu24", inputs: ["hostClass"] }, { kind: "component", type: Notification24, selector: "Notification24", inputs: ["hostClass"] }, { kind: "component", type: Search24, selector: "Search24", inputs: ["hostClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3954
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MozPageHeaderComponent, isStandalone: true, selector: "moz-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, backButton: { classPropertyName: "backButton", publicName: "backButton", isSignal: true, isRequired: false, transformFunction: null }, searchButton: { classPropertyName: "searchButton", publicName: "searchButton", isSignal: true, isRequired: false, transformFunction: null }, helpButton: { classPropertyName: "helpButton", publicName: "helpButton", isSignal: true, isRequired: false, transformFunction: null }, notificationButton: { classPropertyName: "notificationButton", publicName: "notificationButton", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusLabel: { classPropertyName: "statusLabel", publicName: "statusLabel", isSignal: true, isRequired: false, transformFunction: null }, extraInfo: { classPropertyName: "extraInfo", publicName: "extraInfo", isSignal: true, isRequired: false, transformFunction: null }, scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, scopeValue: { classPropertyName: "scopeValue", publicName: "scopeValue", isSignal: true, isRequired: false, transformFunction: null }, scopePlaceholder: { classPropertyName: "scopePlaceholder", publicName: "scopePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange", back: "back", search: "search", help: "help", notification: "notification", toggleMenu: "toggleMenu", toggleScope: "toggleScope", scopeValueChange: "scopeValueChange", activeTabChange: "activeTabChange" }, ngImport: i0, template: "<div [class]=\"classes()\">\n <div class=\"mc-page-header__top-wrapper\">\n <div class=\"mc-page-header__top-content\">\n @if (backButton()) {\n <moz-icon-button\n [ghost]=\"true\"\n [id]=\"'page-header-back-button'\"\n ariaLabel=\"Back button\"\n (activated)=\"onBack()\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <div class=\"mc-page-header__content-wrapper\">\n <span class=\"mc-page-header__title\">\n {{ title() }}\n </span>\n\n @if (hasStatusOrExtraInfo()) {\n <div class=\"mc-page-header__info-wrapper\">\n @if (hasStatusBadge()) {\n <moz-status-badge [label]=\"statusLabel()!\" [status]=\"status()!\" />\n } @if (extraInfo()) {\n <span class=\"mc-page-header__extra-info\">\n {{ extraInfo() }}\n </span>\n }\n </div>\n }\n\n <ng-content select=\"[content]\" />\n </div>\n </div>\n\n <div class=\"mc-page-header__actions-wrapper\">\n <moz-icon-button\n class=\"mc-page-header__burger-menu\"\n [ghost]=\"true\"\n [id]=\"'page-header-burger-menu'\"\n ariaLabel=\"Burger menu\"\n (activated)=\"onToggleMenu()\"\n >\n <Menu24 icon />\n </moz-icon-button>\n\n <ng-content select=\"[actions]\">\n <div class=\"mc-page-header__actions-content\">\n @if (hasIconButtons()) {\n <div class=\"mc-page-header__icons\">\n @if (searchButton()) {\n <moz-icon-button\n [ghost]=\"true\"\n [id]=\"'page-header-search-button'\"\n ariaLabel=\"Search button\"\n (activated)=\"onSearch()\"\n >\n <Search24 icon />\n </moz-icon-button>\n } @if (helpButton()) {\n <moz-icon-button\n [ghost]=\"true\"\n [id]=\"'page-header-help-button'\"\n ariaLabel=\"Help button\"\n (activated)=\"onHelp()\"\n >\n <HelpCircle24 icon />\n </moz-icon-button>\n } @if (notificationButton()) {\n <moz-icon-button\n [ghost]=\"true\"\n [id]=\"'page-header-notification-button'\"\n ariaLabel=\"Notification button\"\n (activated)=\"onNotification()\"\n >\n <Notification24 icon />\n </moz-icon-button>\n }\n </div>\n } @if (isScopeString() && isScopeValueBoolean()) {\n <moz-tag type=\"interactive\" [id]=\"'scope-tag'\" (click)=\"onScopeTagClick()\">{{\n $any(scope())\n }}</moz-tag>\n } @if (isScopeArray() && isScopeValueNotBoolean()) {\n <div class=\"mc-page-header__scope--select\">\n <moz-select\n [name]=\"'scope-select'\"\n id=\"scope-select\"\n size=\"s\"\n [options]=\"scopeAsArray()\"\n [placeholder]=\"scopePlaceholder()\"\n [ngModel]=\"scopeValue()\"\n (ngModelChange)=\"onScopeSelectChange($event)\"\n />\n </div>\n\n <div class=\"mc-page-header__scope--tag\">\n <moz-tag type=\"interactive\" [id]=\"'mobile-scope-tag'\" (click)=\"onToggleScope()\">{{\n mobileTagLabel()\n }}</moz-tag>\n </div>\n }\n </div>\n </ng-content>\n </div>\n </div>\n\n @if (tabs() && tabs()!.length > 0) {\n <div class=\"mc-page-header__tabs\">\n <moz-tabs\n [tabs]=\"tabs()!\"\n [(selectedIndex)]=\"activeTab\"\n (selectedIndexChange)=\"onActiveTabChange($event)\"\n />\n </div>\n }\n</div>\n", styles: [".mc-page-header,.mc-page-header :host{--tabs-list-padding: .5rem 1rem}@media screen and (min-width:680px){.mc-page-header,.mc-page-header :host{--tabs-list-padding: .5rem 2.5rem}}.mc-page-header--with-shadow{box-shadow:var(--shadow-bottom-xs-x, 0px) var(--shadow-bottom-xs-y, 3px) var(--shadow-bottom-xs-blur, 5px) var(--shadow-bottom-xs-spread, -2px) rgba(0,0,0,var(--shadow-bottom-xs-opacity, 15%))}.mc-page-header__top-wrapper{padding:0 0 .75rem;display:flex;flex-direction:column-reverse;justify-content:space-between;background-color:var(--page-header-color-background, #ffffff)}@media screen and (min-width:680px){.mc-page-header__top-wrapper{padding:.75rem 2.5rem;flex-direction:row;gap:2rem}}.mc-page-header__top-content{padding:.5rem 0 0;display:flex;gap:.25rem;align-items:center}@media screen and (min-width:680px){.mc-page-header__top-content{padding:.5rem 0;gap:.75rem}}.mc-page-header__content-wrapper{display:flex;flex-direction:column;gap:.5rem}.mc-page-header__title{font-size:var(--font-size-200, 1.125rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--page-header-color-text-title, #000000)}@media screen and (min-width:680px){.mc-page-header__title{font-size:var(--font-size-300, 1.5rem)}}.mc-page-header__info-wrapper{display:flex;align-items:center;gap:.5rem}.mc-page-header__extra-info{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--page-header-color-text-extra-info, #404040)}.mc-page-header__actions-wrapper{display:flex;align-items:start;justify-content:space-between;border-bottom:1px solid var(--divider-color-primary, #cccccc);padding-right:1rem}@media screen and (min-width:680px){.mc-page-header__actions-wrapper{border-bottom:none;padding-right:0}}.mc-page-header__actions-wrapper .mc-page-header__burger-menu{display:inline-flex}@media screen and (min-width:680px){.mc-page-header__actions-wrapper .mc-page-header__burger-menu{display:none}}.mc-page-header__actions-content{display:flex;align-items:center}@media screen and (min-width:680px){.mc-page-header__actions-content{gap:1rem}}.mc-page-header__scope--tag{display:block}@media screen and (min-width:680px){.mc-page-header__scope--tag{display:none}}.mc-page-header__scope--select{display:none}@media screen and (min-width:680px){.mc-page-header__scope--select{display:block}}.mc-page-header__icons{display:flex;align-items:center}.mc-page-header__tabs{border-top:1px solid var(--divider-color-primary, #cccccc)}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: MozTagComponent, selector: "moz-tag", inputs: ["type", "size", "id", "name", "disabled", "contextualisedNumber", "removableLabel"], outputs: ["removeTag"] }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozStatusBadgeComponent, selector: "moz-status-badge", inputs: ["label", "status"] }, { kind: "component", type: MozTabsComponent, selector: "moz-tabs", inputs: ["description", "divider", "centered", "selectedIndex", "tabs"], outputs: ["selectedIndexChange"] }, { kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["hostClass"] }, { kind: "component", type: HelpCircle24, selector: "HelpCircle24", inputs: ["hostClass"] }, { kind: "component", type: Menu24, selector: "Menu24", inputs: ["hostClass"] }, { kind: "component", type: Notification24, selector: "Notification24", inputs: ["hostClass"] }, { kind: "component", type: Search24, selector: "Search24", inputs: ["hostClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3950
3955
|
}
|
|
3951
3956
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MozPageHeaderComponent, decorators: [{
|
|
3952
3957
|
type: Component,
|
|
@@ -3967,7 +3972,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
3967
3972
|
MozSelectComponent,
|
|
3968
3973
|
FormsModule,
|
|
3969
3974
|
MozTabsComponent,
|
|
3970
|
-
], template: "<div [class]=\"classes()\">\n <div class=\"mc-page-header__top-wrapper\">\n <div class=\"mc-page-header__top-content\">\n @if (backButton()) {\n <moz-icon-button\n [ghost]=\"true\"\n [id]=\"'page-header-back-button'\"\n ariaLabel=\"Back button\"\n (
|
|
3975
|
+
], template: "<div [class]=\"classes()\">\n <div class=\"mc-page-header__top-wrapper\">\n <div class=\"mc-page-header__top-content\">\n @if (backButton()) {\n <moz-icon-button\n [ghost]=\"true\"\n [id]=\"'page-header-back-button'\"\n ariaLabel=\"Back button\"\n (activated)=\"onBack()\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <div class=\"mc-page-header__content-wrapper\">\n <span class=\"mc-page-header__title\">\n {{ title() }}\n </span>\n\n @if (hasStatusOrExtraInfo()) {\n <div class=\"mc-page-header__info-wrapper\">\n @if (hasStatusBadge()) {\n <moz-status-badge [label]=\"statusLabel()!\" [status]=\"status()!\" />\n } @if (extraInfo()) {\n <span class=\"mc-page-header__extra-info\">\n {{ extraInfo() }}\n </span>\n }\n </div>\n }\n\n <ng-content select=\"[content]\" />\n </div>\n </div>\n\n <div class=\"mc-page-header__actions-wrapper\">\n <moz-icon-button\n class=\"mc-page-header__burger-menu\"\n [ghost]=\"true\"\n [id]=\"'page-header-burger-menu'\"\n ariaLabel=\"Burger menu\"\n (activated)=\"onToggleMenu()\"\n >\n <Menu24 icon />\n </moz-icon-button>\n\n <ng-content select=\"[actions]\">\n <div class=\"mc-page-header__actions-content\">\n @if (hasIconButtons()) {\n <div class=\"mc-page-header__icons\">\n @if (searchButton()) {\n <moz-icon-button\n [ghost]=\"true\"\n [id]=\"'page-header-search-button'\"\n ariaLabel=\"Search button\"\n (activated)=\"onSearch()\"\n >\n <Search24 icon />\n </moz-icon-button>\n } @if (helpButton()) {\n <moz-icon-button\n [ghost]=\"true\"\n [id]=\"'page-header-help-button'\"\n ariaLabel=\"Help button\"\n (activated)=\"onHelp()\"\n >\n <HelpCircle24 icon />\n </moz-icon-button>\n } @if (notificationButton()) {\n <moz-icon-button\n [ghost]=\"true\"\n [id]=\"'page-header-notification-button'\"\n ariaLabel=\"Notification button\"\n (activated)=\"onNotification()\"\n >\n <Notification24 icon />\n </moz-icon-button>\n }\n </div>\n } @if (isScopeString() && isScopeValueBoolean()) {\n <moz-tag type=\"interactive\" [id]=\"'scope-tag'\" (click)=\"onScopeTagClick()\">{{\n $any(scope())\n }}</moz-tag>\n } @if (isScopeArray() && isScopeValueNotBoolean()) {\n <div class=\"mc-page-header__scope--select\">\n <moz-select\n [name]=\"'scope-select'\"\n id=\"scope-select\"\n size=\"s\"\n [options]=\"scopeAsArray()\"\n [placeholder]=\"scopePlaceholder()\"\n [ngModel]=\"scopeValue()\"\n (ngModelChange)=\"onScopeSelectChange($event)\"\n />\n </div>\n\n <div class=\"mc-page-header__scope--tag\">\n <moz-tag type=\"interactive\" [id]=\"'mobile-scope-tag'\" (click)=\"onToggleScope()\">{{\n mobileTagLabel()\n }}</moz-tag>\n </div>\n }\n </div>\n </ng-content>\n </div>\n </div>\n\n @if (tabs() && tabs()!.length > 0) {\n <div class=\"mc-page-header__tabs\">\n <moz-tabs\n [tabs]=\"tabs()!\"\n [(selectedIndex)]=\"activeTab\"\n (selectedIndexChange)=\"onActiveTabChange($event)\"\n />\n </div>\n }\n</div>\n", styles: [".mc-page-header,.mc-page-header :host{--tabs-list-padding: .5rem 1rem}@media screen and (min-width:680px){.mc-page-header,.mc-page-header :host{--tabs-list-padding: .5rem 2.5rem}}.mc-page-header--with-shadow{box-shadow:var(--shadow-bottom-xs-x, 0px) var(--shadow-bottom-xs-y, 3px) var(--shadow-bottom-xs-blur, 5px) var(--shadow-bottom-xs-spread, -2px) rgba(0,0,0,var(--shadow-bottom-xs-opacity, 15%))}.mc-page-header__top-wrapper{padding:0 0 .75rem;display:flex;flex-direction:column-reverse;justify-content:space-between;background-color:var(--page-header-color-background, #ffffff)}@media screen and (min-width:680px){.mc-page-header__top-wrapper{padding:.75rem 2.5rem;flex-direction:row;gap:2rem}}.mc-page-header__top-content{padding:.5rem 0 0;display:flex;gap:.25rem;align-items:center}@media screen and (min-width:680px){.mc-page-header__top-content{padding:.5rem 0;gap:.75rem}}.mc-page-header__content-wrapper{display:flex;flex-direction:column;gap:.5rem}.mc-page-header__title{font-size:var(--font-size-200, 1.125rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--page-header-color-text-title, #000000)}@media screen and (min-width:680px){.mc-page-header__title{font-size:var(--font-size-300, 1.5rem)}}.mc-page-header__info-wrapper{display:flex;align-items:center;gap:.5rem}.mc-page-header__extra-info{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--page-header-color-text-extra-info, #404040)}.mc-page-header__actions-wrapper{display:flex;align-items:start;justify-content:space-between;border-bottom:1px solid var(--divider-color-primary, #cccccc);padding-right:1rem}@media screen and (min-width:680px){.mc-page-header__actions-wrapper{border-bottom:none;padding-right:0}}.mc-page-header__actions-wrapper .mc-page-header__burger-menu{display:inline-flex}@media screen and (min-width:680px){.mc-page-header__actions-wrapper .mc-page-header__burger-menu{display:none}}.mc-page-header__actions-content{display:flex;align-items:center}@media screen and (min-width:680px){.mc-page-header__actions-content{gap:1rem}}.mc-page-header__scope--tag{display:block}@media screen and (min-width:680px){.mc-page-header__scope--tag{display:none}}.mc-page-header__scope--select{display:none}@media screen and (min-width:680px){.mc-page-header__scope--select{display:block}}.mc-page-header__icons{display:flex;align-items:center}.mc-page-header__tabs{border-top:1px solid var(--divider-color-primary, #cccccc)}\n"] }]
|
|
3971
3976
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], backButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButton", required: false }] }], searchButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchButton", required: false }] }], helpButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpButton", required: false }] }], notificationButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "notificationButton", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], statusLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusLabel", required: false }] }], extraInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraInfo", required: false }] }], scope: [{ type: i0.Input, args: [{ isSignal: true, alias: "scope", required: false }] }], scopeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "scopeValue", required: false }] }], scopePlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "scopePlaceholder", required: false }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], back: [{ type: i0.Output, args: ["back"] }], search: [{ type: i0.Output, args: ["search"] }], help: [{ type: i0.Output, args: ["help"] }], notification: [{ type: i0.Output, args: ["notification"] }], toggleMenu: [{ type: i0.Output, args: ["toggleMenu"] }], toggleScope: [{ type: i0.Output, args: ["toggleScope"] }], scopeValueChange: [{ type: i0.Output, args: ["scopeValueChange"] }], activeTabChange: [{ type: i0.Output, args: ["activeTabChange"] }] } });
|
|
3972
3977
|
|
|
3973
3978
|
class MozTileComponent {
|
|
@@ -4100,11 +4105,11 @@ class MozTileExpandableComponent {
|
|
|
4100
4105
|
return cls.join(' ');
|
|
4101
4106
|
}, ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
|
|
4102
4107
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MozTileExpandableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4103
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MozTileExpandableComponent, isStandalone: true, selector: "moz-tile-expandable", inputs: { triggerMode: { classPropertyName: "triggerMode", publicName: "triggerMode", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"hostClass()\">\n @if (isContainerTrigger()) {\n <button\n class=\"mc-tile__header\"\n type=\"button\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"contentId\"\n (click)=\"toggle()\"\n >\n <div class=\"mc-tile__body\">\n <ng-container [ngTemplateOutlet]=\"bodyTemplate\"></ng-container>\n </div>\n <div class=\"mc-tile__action\"></div>\n </button>\n } @else {\n <div class=\"mc-tile__header\">\n <div class=\"mc-tile__body\">\n <ng-container [ngTemplateOutlet]=\"bodyTemplate\"></ng-container>\n </div>\n <div class=\"mc-tile__action\">\n @if (isButtonTrigger()) {\n <button\n moz-button\n class=\"mc-tile__action-button\"\n [ghost]=\"true\"\n [iconPosition]=\"'right'\"\n (click)=\"toggle(); $event.stopPropagation()\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"contentId\"\n >\n <span class=\"mc-tile__action-label\">See more</span>\n <ChevronDown24 icon />\n </button>\n } @else if (isIconTrigger()) {\n <moz-icon-button\n class=\"mc-tile__action-button\"\n [ghost]=\"true\"\n [ariaLabel]=\"'Toggle content'\"\n (click)=\"toggle(); $event.stopPropagation()\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"contentId\"\n [id]=\"'expandable-tile-toggle-button'\"\n >\n <ChevronDown24 icon />\n </moz-icon-button>\n }\n </div>\n </div>\n }\n\n <div class=\"mc-tile__content\" [id]=\"contentId\" [attr.aria-hidden]=\"!expanded()\">\n <ng-content select=\"[segmented]\" />\n </div>\n\n <ng-template #bodyTemplate>\n <ng-content select=\"[body]\" />\n </ng-template>\n</div>\n", styles: [".mc-tile{border-radius:var(--border-radius-m, .5rem);background-color:var(--tile-color-background-primary, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile{transition:none}}.mc-tile{box-sizing:border-box;display:flex;flex-direction:column;position:relative;overflow:hidden}.mc-tile--secondary{background-color:var(--tile-color-background-secondary, #eff1f6)}@media(prefers-reduced-motion:no-preference){.mc-tile--secondary{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--secondary{transition:none}}.mc-tile--inverse{background-color:var(--tile-color-background-inverse, #242938);color:var(--color-text-primary-inverse, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile--inverse{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--inverse{transition:none}}.mc-tile--inverse svg,.mc-tile--inverse .mc-tile__action:after,.mc-tile--inverse .mc-tile__action-icon{color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff)}.mc-tile--inverse.mc-tile--navigate .mc-tile__action:after{background-color:var(--color-text-primary-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-tile--inverse.mc-tile--open .mc-tile__action:after{background-color:var(--color-text-primary-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-tile--inverse.mc-tile--external-link .mc-tile__action:after{background-color:var(--color-text-primary-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-tile__body{flex:1}.mc-tile--bordered{box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc)}.mc-tile--action-right{flex-direction:row;align-items:stretch}.mc-tile--action-right .mc-tile__body{border-radius:var(--border-radius-m, .5rem) 0 0 var(--border-radius-m, .5rem)}.mc-tile--action-right .mc-tile__action{border-radius:0 var(--border-radius-m, .5rem) var(--border-radius-m, .5rem) 0;min-width:4rem;justify-content:center}.mc-tile__action{border-radius:0 0 var(--border-radius-m, .5rem) var(--border-radius-m, .5rem);box-sizing:border-box;background-color:transparent;display:flex;align-items:center;justify-content:flex-end;padding:.5rem;gap:.5rem}.mc-tile__action-icon{margin:.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center}.mc-tile--navigate .mc-tile__action:after{content:\"\";margin:.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;background-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-tile--open .mc-tile__action:after{content:\"\";margin:.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;background-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-tile--external-link .mc-tile__action:after{content:\"\";margin:.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;background-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-tile__item{display:flex;flex-direction:column}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable){border-radius:var(--border-radius-m, .5rem);background-color:var(--tile-color-background-primary, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable){transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable){transition:none}}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable){cursor:default;pointer-events:none}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--secondary{background-color:var(--tile-color-background-secondary, #eff1f6)}@media(prefers-reduced-motion:no-preference){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--secondary{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--secondary{transition:none}}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse{background-color:var(--tile-color-background-inverse, #242938);color:var(--color-text-primary-inverse, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse{transition:none}}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse svg,.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse .mc-tile__action:after,.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse .mc-tile__action-icon{color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff)}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--bordered{box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc)}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__content){display:flex;flex-direction:column}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__content) .mc-tile__content{border-top:1px solid var(--tile-color-border-default, #cccccc)}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action){pointer-events:auto;display:flex;flex-direction:column}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action) .mc-tile__header{display:flex;flex-direction:row;align-items:stretch;justify-content:space-between}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action) .mc-tile__body{flex-grow:1;display:flex;flex-direction:column;justify-content:center}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action) .mc-tile__action{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:.75rem;pointer-events:auto;background-color:transparent}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action) .mc-tile__action .mc-tile__action-button{pointer-events:auto}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action) .mc-tile__action .mc-tile__action-button svg{color:inherit;fill:currentcolor}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action).mc-tile--inverse .mc-tile__action .mc-tile__action-button svg{color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff)}.mc-tile--clickable{border-radius:var(--border-radius-m, .5rem);background-color:var(--tile-color-background-primary, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile--clickable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}.mc-tile--clickable:hover,.mc-tile--clickable:active{box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable.mc-tile--bordered:hover,.mc-tile--clickable.mc-tile--bordered:active{box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc)}@media(prefers-reduced-motion:no-preference){.mc-tile--clickable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67),box-shadow .2s ease}}@media(prefers-reduced-motion:reduce){.mc-tile--clickable{transition:none}}.mc-tile--clickable{transition:box-shadow .2s ease;cursor:pointer;position:relative}.mc-tile--clickable:before{border-radius:var(--border-radius-s, .25rem);content:\"\";position:absolute;inset:.25rem;background-color:transparent;pointer-events:none;outline:0 solid transparent;outline-offset:-.125rem}.mc-tile--clickable.mc-tile--secondary{background-color:var(--tile-color-background-secondary, #eff1f6)}@media(prefers-reduced-motion:no-preference){.mc-tile--clickable.mc-tile--secondary{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--clickable.mc-tile--secondary{transition:none}}.mc-tile--clickable.mc-tile--secondary:hover,.mc-tile--clickable.mc-tile--secondary:active{box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable.mc-tile--secondary.mc-tile--bordered:hover,.mc-tile--clickable.mc-tile--secondary.mc-tile--bordered:active{box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable.mc-tile--inverse{background-color:var(--tile-color-background-inverse, #242938);color:var(--color-text-primary-inverse, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile--clickable.mc-tile--inverse{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--clickable.mc-tile--inverse{transition:none}}.mc-tile--clickable.mc-tile--inverse:hover,.mc-tile--clickable.mc-tile--inverse:active{box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable.mc-tile--inverse.mc-tile--bordered:hover,.mc-tile--clickable.mc-tile--inverse.mc-tile--bordered:active{box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable.mc-tile--inverse svg,.mc-tile--clickable.mc-tile--inverse .mc-tile__action:after,.mc-tile--clickable.mc-tile--inverse .mc-tile__action-icon{color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff)}.mc-tile--clickable.mc-tile--bordered{box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable:focus-visible{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-tile--clickable:is(button){width:100%;border:0;padding:0;font-family:inherit;font-size:inherit;text-align:left;appearance:none}.mc-tile--clickable:is(a){display:flex;text-decoration:none;color:inherit}.mc-tile--clickable:is(a):visited{color:inherit}.mc-tile--clickable:is(a):not(.mc-tile--action-right){flex-direction:column}.mc-tile--clickable:is(div[role=button]){width:100%;cursor:pointer}.mc-tile--expandable{border-radius:var(--border-radius-m, .5rem);background-color:var(--tile-color-background-primary, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67),box-shadow .2s ease}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable{transition:none}}.mc-tile--expandable{display:block;position:relative;overflow:hidden}@supports (interpolate-size: allow-keywords){.mc-tile--expandable{interpolate-size:allow-keywords}}.mc-tile--expandable.mc-tile--secondary{background-color:var(--tile-color-background-secondary, #eff1f6)}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--secondary{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable.mc-tile--secondary{transition:none}}.mc-tile--expandable.mc-tile--bordered{box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc)}.mc-tile--expandable.mc-tile--borderless{border:none}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button){cursor:default}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button]{cursor:pointer}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button] .mc-tile__action:after{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button] .mc-tile__action:after{transition:none}}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button] .mc-tile__action:after{transform:rotateX(0);background-color:var(--button-color-filled-inverse-font, #242938);-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;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;content:\"\";width:1rem;height:1rem;flex-shrink:0;background-repeat:no-repeat;background-position:center;background-size:1rem}.mc-tile--expandable .mc-tile__header{display:flex;align-items:stretch;position:relative;z-index:2}.mc-tile--expandable .mc-tile__header:after{border-radius:var(--border-radius-m, .5rem);content:\"\";position:absolute;inset:.25rem;background-color:transparent;pointer-events:none;z-index:-1}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable .mc-tile__header:after{transition:background-color .2s cubic-bezier(.17,.67,.83,.67),box-shadow .2s ease}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable .mc-tile__header:after{transition:none}}.mc-tile--expandable .mc-tile__header[type=button]{width:100%;border:none;background:none;padding:0;margin:0;font:inherit;text-align:inherit;cursor:pointer;appearance:none}.mc-tile--expandable .mc-tile__header[type=button]:focus-visible{outline:none}.mc-tile--expandable .mc-tile__header[type=button]:focus-visible:after{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-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button]:hover:after{background-color:var(--tile-color-background-hover, rgba(0, 0, 0, .05))}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button]:active:after{background-color:var(--tile-color-background-hover, rgba(0, 0, 0, .05))}.mc-tile--expandable .mc-tile__body{flex-grow:1;position:relative;z-index:1}.mc-tile--expandable:has(.mc-tile__action) .mc-tile__body{border-radius:var(--border-radius-m, .5rem) 0 0 0}.mc-tile--expandable .mc-tile__action{border-radius:0 var(--border-radius-m, .5rem) var(--border-radius-m, .5rem) 0;box-sizing:border-box;min-width:4rem;flex-shrink:0;background-color:transparent;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}.mc-tile--expandable .mc-tile__content{width:100%;overflow:hidden;max-height:0;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;position:relative;z-index:1}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable .mc-tile__content{transition:max-height .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable .mc-tile__content{transition:none}}.mc-tile--expandable .mc-tile__content[aria-hidden=false]{max-height:50rem}@supports (interpolate-size: allow-keywords){.mc-tile--expandable .mc-tile__content{height:0;max-height:none}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable .mc-tile__content{transition:height .2s cubic-bezier(.17,.67,.83,.67);transition-behavior:allow-discrete}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable .mc-tile__content{transition:none}}.mc-tile--expandable .mc-tile__content[aria-hidden=false]{height:auto}}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button][aria-expanded=true] .mc-tile__action:after{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button][aria-expanded=true] .mc-tile__action:after{transition:none}}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button][aria-expanded=true] .mc-tile__action:after{transform:rotateX(180deg)}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button[aria-expanded=true] svg{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button[aria-expanded=true] svg{transition:none}}.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button[aria-expanded=true] svg{transform:rotateX(180deg)}.mc-tile--expandable .mc-tile__action-button{position:relative;z-index:2}.mc-tile--expandable .mc-tile__action-button svg{fill:currentcolor}.mc-tile--expandable .mc-tile__action-button:not(.mc-button){display:flex;align-items:center;gap:.5rem;border:0;background-color:transparent;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;text-align:left;padding:0;margin:0;cursor:pointer;appearance:none}.mc-tile--expandable .mc-tile__action-button:not(.mc-button):focus-visible{outline:.125rem solid var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline-offset:.125rem;border-radius:var(--border-radius-s, .25rem)}.mc-tile--expandable .mc-tile__action-label{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);line-height:var(--line-height-m, 1.5)}.mc-tile--expandable.mc-tile--trigger-icon,.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__body{cursor:default}.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action{justify-content:center}.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action:after{content:none;display:none}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button svg{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button svg{transition:none}}.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button svg{transform:rotateX(0);fill:currentcolor}.mc-tile--expandable.mc-tile--trigger-button{cursor:default;display:flex;flex-direction:column}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__body{cursor:default;order:1}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__header{display:contents}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action{cursor:pointer;min-width:auto;justify-content:flex-start;padding:.5rem;order:3;box-shadow:0 1px 0 0 var(--tile-color-border-default, #cccccc);border-radius:0}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action:after{display:none}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__content{order:2;border-radius:0}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button{font-weight:var(--font-weight-semi-bold, 600);width:100%;margin:0}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg{transition:background-color .2s cubic-bezier(.17,.67,.83,.67),box-shadow .2s ease}}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg{transition:none}}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg{transform:rotateX(0);fill:currentcolor}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button[aria-expanded=true] svg{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button[aria-expanded=true] svg{transition:none}}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button[aria-expanded=true] svg{transform:rotateX(180deg)}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-label{flex:initial}.mc-tile--selectable{border-radius:var(--border-radius-m, .5rem);background-color:var(--tile-color-background-primary, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile--selectable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:no-preference){.mc-tile--selectable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67),box-shadow .2s ease}}@media(prefers-reduced-motion:reduce){.mc-tile--selectable{transition:none}}.mc-tile--selectable{cursor:pointer;position:relative;display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;overflow:hidden;box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc)}.mc-tile--selectable .mc-tile__body{flex-grow:1;display:flex;flex-direction:column}.mc-tile--selectable .mc-tile__action{background-color:transparent;box-sizing:border-box;flex-shrink:0;display:flex;align-items:flex-start;justify-content:center;border-radius:initial;padding:.75rem}.mc-tile--selectable:has(.mc-tile__content){flex-direction:column;align-items:stretch}.mc-tile--selectable:has(.mc-tile__content) .mc-tile__header{display:flex;flex-direction:row;align-items:stretch;justify-content:space-between}.mc-tile--selectable:has(.mc-tile__content) .mc-tile__header .mc-tile__body{display:flex;flex-direction:column}.mc-tile--selectable:has(.mc-tile__content) .mc-tile__content{border-top:1px solid var(--tile-color-border-default, #cccccc)}.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-left{flex-direction:column}.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-left .mc-tile__header{flex-direction:row-reverse}.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-center{align-items:stretch}.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-center .mc-tile__header{align-items:center}.mc-tile--selectable.mc-tile--input-left{flex-direction:row-reverse}.mc-tile--selectable.mc-tile--input-center{align-items:center}.mc-tile--selectable:hover{box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc)}.mc-tile--selectable.mc-tile--selected{box-shadow:0 0 0 2px var(--color-brand, #78be20),0 0 0 4px var(--color-background-accent, #ebf5de)}.mc-tile--selectable.mc-tile--no-input .mc-tile__action{visibility:hidden;position:absolute}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { kind: "component", type: ChevronDown24, selector: "ChevronDown24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4108
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MozTileExpandableComponent, isStandalone: true, selector: "moz-tile-expandable", inputs: { triggerMode: { classPropertyName: "triggerMode", publicName: "triggerMode", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"hostClass()\">\n @if (isContainerTrigger()) {\n <button\n class=\"mc-tile__header\"\n type=\"button\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"contentId\"\n (click)=\"toggle()\"\n >\n <div class=\"mc-tile__body\">\n <ng-container [ngTemplateOutlet]=\"bodyTemplate\"></ng-container>\n </div>\n <div class=\"mc-tile__action\"></div>\n </button>\n } @else {\n <div class=\"mc-tile__header\">\n <div class=\"mc-tile__body\">\n <ng-container [ngTemplateOutlet]=\"bodyTemplate\"></ng-container>\n </div>\n <div class=\"mc-tile__action\">\n @if (isButtonTrigger()) {\n <button\n moz-button\n class=\"mc-tile__action-button\"\n [ghost]=\"true\"\n [iconPosition]=\"'right'\"\n (click)=\"toggle(); $event.stopPropagation()\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"contentId\"\n >\n <span class=\"mc-tile__action-label\">See more</span>\n <ChevronDown24 icon />\n </button>\n } @else if (isIconTrigger()) {\n <moz-icon-button\n class=\"mc-tile__action-button\"\n [ghost]=\"true\"\n [ariaLabel]=\"'Toggle content'\"\n (activated)=\"toggle(); $event.stopPropagation()\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"contentId\"\n [id]=\"'expandable-tile-toggle-button'\"\n >\n <ChevronDown24 icon />\n </moz-icon-button>\n }\n </div>\n </div>\n }\n\n <div class=\"mc-tile__content\" [id]=\"contentId\" [attr.aria-hidden]=\"!expanded()\">\n <ng-content select=\"[segmented]\" />\n </div>\n\n <ng-template #bodyTemplate>\n <ng-content select=\"[body]\" />\n </ng-template>\n</div>\n", styles: [".mc-tile{border-radius:var(--border-radius-m, .5rem);background-color:var(--tile-color-background-primary, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile{transition:none}}.mc-tile{box-sizing:border-box;display:flex;flex-direction:column;position:relative;overflow:hidden}.mc-tile--secondary{background-color:var(--tile-color-background-secondary, #eff1f6)}@media(prefers-reduced-motion:no-preference){.mc-tile--secondary{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--secondary{transition:none}}.mc-tile--inverse{background-color:var(--tile-color-background-inverse, #242938);color:var(--color-text-primary-inverse, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile--inverse{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--inverse{transition:none}}.mc-tile--inverse svg,.mc-tile--inverse .mc-tile__action:after,.mc-tile--inverse .mc-tile__action-icon{color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff)}.mc-tile--inverse.mc-tile--navigate .mc-tile__action:after{background-color:var(--color-text-primary-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-tile--inverse.mc-tile--open .mc-tile__action:after{background-color:var(--color-text-primary-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-tile--inverse.mc-tile--external-link .mc-tile__action:after{background-color:var(--color-text-primary-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-tile__body{flex:1}.mc-tile--bordered{box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc)}.mc-tile--action-right{flex-direction:row;align-items:stretch}.mc-tile--action-right .mc-tile__body{border-radius:var(--border-radius-m, .5rem) 0 0 var(--border-radius-m, .5rem)}.mc-tile--action-right .mc-tile__action{border-radius:0 var(--border-radius-m, .5rem) var(--border-radius-m, .5rem) 0;min-width:4rem;justify-content:center}.mc-tile__action{border-radius:0 0 var(--border-radius-m, .5rem) var(--border-radius-m, .5rem);box-sizing:border-box;background-color:transparent;display:flex;align-items:center;justify-content:flex-end;padding:.5rem;gap:.5rem}.mc-tile__action-icon{margin:.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center}.mc-tile--navigate .mc-tile__action:after{content:\"\";margin:.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;background-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-tile--open .mc-tile__action:after{content:\"\";margin:.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;background-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-tile--external-link .mc-tile__action:after{content:\"\";margin:.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;background-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-tile__item{display:flex;flex-direction:column}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable){border-radius:var(--border-radius-m, .5rem);background-color:var(--tile-color-background-primary, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable){transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable){transition:none}}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable){cursor:default;pointer-events:none}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--secondary{background-color:var(--tile-color-background-secondary, #eff1f6)}@media(prefers-reduced-motion:no-preference){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--secondary{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--secondary{transition:none}}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse{background-color:var(--tile-color-background-inverse, #242938);color:var(--color-text-primary-inverse, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse{transition:none}}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse svg,.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse .mc-tile__action:after,.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse .mc-tile__action-icon{color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff)}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--bordered{box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc)}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__content){display:flex;flex-direction:column}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__content) .mc-tile__content{border-top:1px solid var(--tile-color-border-default, #cccccc)}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action){pointer-events:auto;display:flex;flex-direction:column}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action) .mc-tile__header{display:flex;flex-direction:row;align-items:stretch;justify-content:space-between}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action) .mc-tile__body{flex-grow:1;display:flex;flex-direction:column;justify-content:center}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action) .mc-tile__action{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:.75rem;pointer-events:auto;background-color:transparent}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action) .mc-tile__action .mc-tile__action-button{pointer-events:auto}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action) .mc-tile__action .mc-tile__action-button svg{color:inherit;fill:currentcolor}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action).mc-tile--inverse .mc-tile__action .mc-tile__action-button svg{color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff)}.mc-tile--clickable{border-radius:var(--border-radius-m, .5rem);background-color:var(--tile-color-background-primary, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile--clickable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}.mc-tile--clickable:hover,.mc-tile--clickable:active{box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable.mc-tile--bordered:hover,.mc-tile--clickable.mc-tile--bordered:active{box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc)}@media(prefers-reduced-motion:no-preference){.mc-tile--clickable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67),box-shadow .2s ease}}@media(prefers-reduced-motion:reduce){.mc-tile--clickable{transition:none}}.mc-tile--clickable{transition:box-shadow .2s ease;cursor:pointer;position:relative}.mc-tile--clickable:before{border-radius:var(--border-radius-s, .25rem);content:\"\";position:absolute;inset:.25rem;background-color:transparent;pointer-events:none;outline:0 solid transparent;outline-offset:-.125rem}.mc-tile--clickable.mc-tile--secondary{background-color:var(--tile-color-background-secondary, #eff1f6)}@media(prefers-reduced-motion:no-preference){.mc-tile--clickable.mc-tile--secondary{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--clickable.mc-tile--secondary{transition:none}}.mc-tile--clickable.mc-tile--secondary:hover,.mc-tile--clickable.mc-tile--secondary:active{box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable.mc-tile--secondary.mc-tile--bordered:hover,.mc-tile--clickable.mc-tile--secondary.mc-tile--bordered:active{box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable.mc-tile--inverse{background-color:var(--tile-color-background-inverse, #242938);color:var(--color-text-primary-inverse, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile--clickable.mc-tile--inverse{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--clickable.mc-tile--inverse{transition:none}}.mc-tile--clickable.mc-tile--inverse:hover,.mc-tile--clickable.mc-tile--inverse:active{box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable.mc-tile--inverse.mc-tile--bordered:hover,.mc-tile--clickable.mc-tile--inverse.mc-tile--bordered:active{box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable.mc-tile--inverse svg,.mc-tile--clickable.mc-tile--inverse .mc-tile__action:after,.mc-tile--clickable.mc-tile--inverse .mc-tile__action-icon{color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff)}.mc-tile--clickable.mc-tile--bordered{box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable:focus-visible{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-tile--clickable:is(button){width:100%;border:0;padding:0;font-family:inherit;font-size:inherit;text-align:left;appearance:none}.mc-tile--clickable:is(a){display:flex;text-decoration:none;color:inherit}.mc-tile--clickable:is(a):visited{color:inherit}.mc-tile--clickable:is(a):not(.mc-tile--action-right){flex-direction:column}.mc-tile--clickable:is(div[role=button]){width:100%;cursor:pointer}.mc-tile--expandable{border-radius:var(--border-radius-m, .5rem);background-color:var(--tile-color-background-primary, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67),box-shadow .2s ease}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable{transition:none}}.mc-tile--expandable{display:block;position:relative;overflow:hidden}@supports (interpolate-size: allow-keywords){.mc-tile--expandable{interpolate-size:allow-keywords}}.mc-tile--expandable.mc-tile--secondary{background-color:var(--tile-color-background-secondary, #eff1f6)}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--secondary{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable.mc-tile--secondary{transition:none}}.mc-tile--expandable.mc-tile--bordered{box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc)}.mc-tile--expandable.mc-tile--borderless{border:none}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button){cursor:default}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button]{cursor:pointer}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button] .mc-tile__action:after{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button] .mc-tile__action:after{transition:none}}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button] .mc-tile__action:after{transform:rotateX(0);background-color:var(--button-color-filled-inverse-font, #242938);-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;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;content:\"\";width:1rem;height:1rem;flex-shrink:0;background-repeat:no-repeat;background-position:center;background-size:1rem}.mc-tile--expandable .mc-tile__header{display:flex;align-items:stretch;position:relative;z-index:2}.mc-tile--expandable .mc-tile__header:after{border-radius:var(--border-radius-m, .5rem);content:\"\";position:absolute;inset:.25rem;background-color:transparent;pointer-events:none;z-index:-1}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable .mc-tile__header:after{transition:background-color .2s cubic-bezier(.17,.67,.83,.67),box-shadow .2s ease}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable .mc-tile__header:after{transition:none}}.mc-tile--expandable .mc-tile__header[type=button]{width:100%;border:none;background:none;padding:0;margin:0;font:inherit;text-align:inherit;cursor:pointer;appearance:none}.mc-tile--expandable .mc-tile__header[type=button]:focus-visible{outline:none}.mc-tile--expandable .mc-tile__header[type=button]:focus-visible:after{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-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button]:hover:after{background-color:var(--tile-color-background-hover, rgba(0, 0, 0, .05))}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button]:active:after{background-color:var(--tile-color-background-hover, rgba(0, 0, 0, .05))}.mc-tile--expandable .mc-tile__body{flex-grow:1;position:relative;z-index:1}.mc-tile--expandable:has(.mc-tile__action) .mc-tile__body{border-radius:var(--border-radius-m, .5rem) 0 0 0}.mc-tile--expandable .mc-tile__action{border-radius:0 var(--border-radius-m, .5rem) var(--border-radius-m, .5rem) 0;box-sizing:border-box;min-width:4rem;flex-shrink:0;background-color:transparent;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}.mc-tile--expandable .mc-tile__content{width:100%;overflow:hidden;max-height:0;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;position:relative;z-index:1}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable .mc-tile__content{transition:max-height .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable .mc-tile__content{transition:none}}.mc-tile--expandable .mc-tile__content[aria-hidden=false]{max-height:50rem}@supports (interpolate-size: allow-keywords){.mc-tile--expandable .mc-tile__content{height:0;max-height:none}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable .mc-tile__content{transition:height .2s cubic-bezier(.17,.67,.83,.67);transition-behavior:allow-discrete}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable .mc-tile__content{transition:none}}.mc-tile--expandable .mc-tile__content[aria-hidden=false]{height:auto}}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button][aria-expanded=true] .mc-tile__action:after{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button][aria-expanded=true] .mc-tile__action:after{transition:none}}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button][aria-expanded=true] .mc-tile__action:after{transform:rotateX(180deg)}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button[aria-expanded=true] svg{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button[aria-expanded=true] svg{transition:none}}.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button[aria-expanded=true] svg{transform:rotateX(180deg)}.mc-tile--expandable .mc-tile__action-button{position:relative;z-index:2}.mc-tile--expandable .mc-tile__action-button svg{fill:currentcolor}.mc-tile--expandable .mc-tile__action-button:not(.mc-button){display:flex;align-items:center;gap:.5rem;border:0;background-color:transparent;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;text-align:left;padding:0;margin:0;cursor:pointer;appearance:none}.mc-tile--expandable .mc-tile__action-button:not(.mc-button):focus-visible{outline:.125rem solid var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline-offset:.125rem;border-radius:var(--border-radius-s, .25rem)}.mc-tile--expandable .mc-tile__action-label{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);line-height:var(--line-height-m, 1.5)}.mc-tile--expandable.mc-tile--trigger-icon,.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__body{cursor:default}.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action{justify-content:center}.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action:after{content:none;display:none}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button svg{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button svg{transition:none}}.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button svg{transform:rotateX(0);fill:currentcolor}.mc-tile--expandable.mc-tile--trigger-button{cursor:default;display:flex;flex-direction:column}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__body{cursor:default;order:1}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__header{display:contents}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action{cursor:pointer;min-width:auto;justify-content:flex-start;padding:.5rem;order:3;box-shadow:0 1px 0 0 var(--tile-color-border-default, #cccccc);border-radius:0}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action:after{display:none}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__content{order:2;border-radius:0}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button{font-weight:var(--font-weight-semi-bold, 600);width:100%;margin:0}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg{transition:background-color .2s cubic-bezier(.17,.67,.83,.67),box-shadow .2s ease}}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg{transition:none}}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg{transform:rotateX(0);fill:currentcolor}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button[aria-expanded=true] svg{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button[aria-expanded=true] svg{transition:none}}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button[aria-expanded=true] svg{transform:rotateX(180deg)}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-label{flex:initial}.mc-tile--selectable{border-radius:var(--border-radius-m, .5rem);background-color:var(--tile-color-background-primary, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile--selectable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:no-preference){.mc-tile--selectable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67),box-shadow .2s ease}}@media(prefers-reduced-motion:reduce){.mc-tile--selectable{transition:none}}.mc-tile--selectable{cursor:pointer;position:relative;display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;overflow:hidden;box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc)}.mc-tile--selectable .mc-tile__body{flex-grow:1;display:flex;flex-direction:column}.mc-tile--selectable .mc-tile__action{background-color:transparent;box-sizing:border-box;flex-shrink:0;display:flex;align-items:flex-start;justify-content:center;border-radius:initial;padding:.75rem}.mc-tile--selectable:has(.mc-tile__content){flex-direction:column;align-items:stretch}.mc-tile--selectable:has(.mc-tile__content) .mc-tile__header{display:flex;flex-direction:row;align-items:stretch;justify-content:space-between}.mc-tile--selectable:has(.mc-tile__content) .mc-tile__header .mc-tile__body{display:flex;flex-direction:column}.mc-tile--selectable:has(.mc-tile__content) .mc-tile__content{border-top:1px solid var(--tile-color-border-default, #cccccc)}.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-left{flex-direction:column}.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-left .mc-tile__header{flex-direction:row-reverse}.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-center{align-items:stretch}.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-center .mc-tile__header{align-items:center}.mc-tile--selectable.mc-tile--input-left{flex-direction:row-reverse}.mc-tile--selectable.mc-tile--input-center{align-items:center}.mc-tile--selectable:hover{box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc)}.mc-tile--selectable.mc-tile--selected{box-shadow:0 0 0 2px var(--color-brand, #78be20),0 0 0 4px var(--color-background-accent, #ebf5de)}.mc-tile--selectable.mc-tile--no-input .mc-tile__action{visibility:hidden;position:absolute}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: ChevronDown24, selector: "ChevronDown24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4104
4109
|
}
|
|
4105
4110
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MozTileExpandableComponent, decorators: [{
|
|
4106
4111
|
type: Component,
|
|
4107
|
-
args: [{ selector: 'moz-tile-expandable', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, MozButtonComponent, MozIconButtonComponent, ChevronDown24], template: "<div [class]=\"hostClass()\">\n @if (isContainerTrigger()) {\n <button\n class=\"mc-tile__header\"\n type=\"button\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"contentId\"\n (click)=\"toggle()\"\n >\n <div class=\"mc-tile__body\">\n <ng-container [ngTemplateOutlet]=\"bodyTemplate\"></ng-container>\n </div>\n <div class=\"mc-tile__action\"></div>\n </button>\n } @else {\n <div class=\"mc-tile__header\">\n <div class=\"mc-tile__body\">\n <ng-container [ngTemplateOutlet]=\"bodyTemplate\"></ng-container>\n </div>\n <div class=\"mc-tile__action\">\n @if (isButtonTrigger()) {\n <button\n moz-button\n class=\"mc-tile__action-button\"\n [ghost]=\"true\"\n [iconPosition]=\"'right'\"\n (click)=\"toggle(); $event.stopPropagation()\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"contentId\"\n >\n <span class=\"mc-tile__action-label\">See more</span>\n <ChevronDown24 icon />\n </button>\n } @else if (isIconTrigger()) {\n <moz-icon-button\n class=\"mc-tile__action-button\"\n [ghost]=\"true\"\n [ariaLabel]=\"'Toggle content'\"\n (click)=\"toggle(); $event.stopPropagation()\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"contentId\"\n [id]=\"'expandable-tile-toggle-button'\"\n >\n <ChevronDown24 icon />\n </moz-icon-button>\n }\n </div>\n </div>\n }\n\n <div class=\"mc-tile__content\" [id]=\"contentId\" [attr.aria-hidden]=\"!expanded()\">\n <ng-content select=\"[segmented]\" />\n </div>\n\n <ng-template #bodyTemplate>\n <ng-content select=\"[body]\" />\n </ng-template>\n</div>\n", styles: [".mc-tile{border-radius:var(--border-radius-m, .5rem);background-color:var(--tile-color-background-primary, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile{transition:none}}.mc-tile{box-sizing:border-box;display:flex;flex-direction:column;position:relative;overflow:hidden}.mc-tile--secondary{background-color:var(--tile-color-background-secondary, #eff1f6)}@media(prefers-reduced-motion:no-preference){.mc-tile--secondary{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--secondary{transition:none}}.mc-tile--inverse{background-color:var(--tile-color-background-inverse, #242938);color:var(--color-text-primary-inverse, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile--inverse{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--inverse{transition:none}}.mc-tile--inverse svg,.mc-tile--inverse .mc-tile__action:after,.mc-tile--inverse .mc-tile__action-icon{color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff)}.mc-tile--inverse.mc-tile--navigate .mc-tile__action:after{background-color:var(--color-text-primary-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-tile--inverse.mc-tile--open .mc-tile__action:after{background-color:var(--color-text-primary-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-tile--inverse.mc-tile--external-link .mc-tile__action:after{background-color:var(--color-text-primary-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-tile__body{flex:1}.mc-tile--bordered{box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc)}.mc-tile--action-right{flex-direction:row;align-items:stretch}.mc-tile--action-right .mc-tile__body{border-radius:var(--border-radius-m, .5rem) 0 0 var(--border-radius-m, .5rem)}.mc-tile--action-right .mc-tile__action{border-radius:0 var(--border-radius-m, .5rem) var(--border-radius-m, .5rem) 0;min-width:4rem;justify-content:center}.mc-tile__action{border-radius:0 0 var(--border-radius-m, .5rem) var(--border-radius-m, .5rem);box-sizing:border-box;background-color:transparent;display:flex;align-items:center;justify-content:flex-end;padding:.5rem;gap:.5rem}.mc-tile__action-icon{margin:.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center}.mc-tile--navigate .mc-tile__action:after{content:\"\";margin:.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;background-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-tile--open .mc-tile__action:after{content:\"\";margin:.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;background-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-tile--external-link .mc-tile__action:after{content:\"\";margin:.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;background-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-tile__item{display:flex;flex-direction:column}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable){border-radius:var(--border-radius-m, .5rem);background-color:var(--tile-color-background-primary, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable){transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable){transition:none}}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable){cursor:default;pointer-events:none}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--secondary{background-color:var(--tile-color-background-secondary, #eff1f6)}@media(prefers-reduced-motion:no-preference){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--secondary{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--secondary{transition:none}}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse{background-color:var(--tile-color-background-inverse, #242938);color:var(--color-text-primary-inverse, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse{transition:none}}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse svg,.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse .mc-tile__action:after,.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse .mc-tile__action-icon{color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff)}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--bordered{box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc)}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__content){display:flex;flex-direction:column}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__content) .mc-tile__content{border-top:1px solid var(--tile-color-border-default, #cccccc)}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action){pointer-events:auto;display:flex;flex-direction:column}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action) .mc-tile__header{display:flex;flex-direction:row;align-items:stretch;justify-content:space-between}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action) .mc-tile__body{flex-grow:1;display:flex;flex-direction:column;justify-content:center}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action) .mc-tile__action{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:.75rem;pointer-events:auto;background-color:transparent}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action) .mc-tile__action .mc-tile__action-button{pointer-events:auto}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action) .mc-tile__action .mc-tile__action-button svg{color:inherit;fill:currentcolor}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action).mc-tile--inverse .mc-tile__action .mc-tile__action-button svg{color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff)}.mc-tile--clickable{border-radius:var(--border-radius-m, .5rem);background-color:var(--tile-color-background-primary, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile--clickable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}.mc-tile--clickable:hover,.mc-tile--clickable:active{box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable.mc-tile--bordered:hover,.mc-tile--clickable.mc-tile--bordered:active{box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc)}@media(prefers-reduced-motion:no-preference){.mc-tile--clickable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67),box-shadow .2s ease}}@media(prefers-reduced-motion:reduce){.mc-tile--clickable{transition:none}}.mc-tile--clickable{transition:box-shadow .2s ease;cursor:pointer;position:relative}.mc-tile--clickable:before{border-radius:var(--border-radius-s, .25rem);content:\"\";position:absolute;inset:.25rem;background-color:transparent;pointer-events:none;outline:0 solid transparent;outline-offset:-.125rem}.mc-tile--clickable.mc-tile--secondary{background-color:var(--tile-color-background-secondary, #eff1f6)}@media(prefers-reduced-motion:no-preference){.mc-tile--clickable.mc-tile--secondary{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--clickable.mc-tile--secondary{transition:none}}.mc-tile--clickable.mc-tile--secondary:hover,.mc-tile--clickable.mc-tile--secondary:active{box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable.mc-tile--secondary.mc-tile--bordered:hover,.mc-tile--clickable.mc-tile--secondary.mc-tile--bordered:active{box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable.mc-tile--inverse{background-color:var(--tile-color-background-inverse, #242938);color:var(--color-text-primary-inverse, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile--clickable.mc-tile--inverse{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--clickable.mc-tile--inverse{transition:none}}.mc-tile--clickable.mc-tile--inverse:hover,.mc-tile--clickable.mc-tile--inverse:active{box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable.mc-tile--inverse.mc-tile--bordered:hover,.mc-tile--clickable.mc-tile--inverse.mc-tile--bordered:active{box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable.mc-tile--inverse svg,.mc-tile--clickable.mc-tile--inverse .mc-tile__action:after,.mc-tile--clickable.mc-tile--inverse .mc-tile__action-icon{color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff)}.mc-tile--clickable.mc-tile--bordered{box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable:focus-visible{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-tile--clickable:is(button){width:100%;border:0;padding:0;font-family:inherit;font-size:inherit;text-align:left;appearance:none}.mc-tile--clickable:is(a){display:flex;text-decoration:none;color:inherit}.mc-tile--clickable:is(a):visited{color:inherit}.mc-tile--clickable:is(a):not(.mc-tile--action-right){flex-direction:column}.mc-tile--clickable:is(div[role=button]){width:100%;cursor:pointer}.mc-tile--expandable{border-radius:var(--border-radius-m, .5rem);background-color:var(--tile-color-background-primary, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67),box-shadow .2s ease}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable{transition:none}}.mc-tile--expandable{display:block;position:relative;overflow:hidden}@supports (interpolate-size: allow-keywords){.mc-tile--expandable{interpolate-size:allow-keywords}}.mc-tile--expandable.mc-tile--secondary{background-color:var(--tile-color-background-secondary, #eff1f6)}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--secondary{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable.mc-tile--secondary{transition:none}}.mc-tile--expandable.mc-tile--bordered{box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc)}.mc-tile--expandable.mc-tile--borderless{border:none}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button){cursor:default}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button]{cursor:pointer}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button] .mc-tile__action:after{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button] .mc-tile__action:after{transition:none}}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button] .mc-tile__action:after{transform:rotateX(0);background-color:var(--button-color-filled-inverse-font, #242938);-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;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;content:\"\";width:1rem;height:1rem;flex-shrink:0;background-repeat:no-repeat;background-position:center;background-size:1rem}.mc-tile--expandable .mc-tile__header{display:flex;align-items:stretch;position:relative;z-index:2}.mc-tile--expandable .mc-tile__header:after{border-radius:var(--border-radius-m, .5rem);content:\"\";position:absolute;inset:.25rem;background-color:transparent;pointer-events:none;z-index:-1}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable .mc-tile__header:after{transition:background-color .2s cubic-bezier(.17,.67,.83,.67),box-shadow .2s ease}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable .mc-tile__header:after{transition:none}}.mc-tile--expandable .mc-tile__header[type=button]{width:100%;border:none;background:none;padding:0;margin:0;font:inherit;text-align:inherit;cursor:pointer;appearance:none}.mc-tile--expandable .mc-tile__header[type=button]:focus-visible{outline:none}.mc-tile--expandable .mc-tile__header[type=button]:focus-visible:after{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-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button]:hover:after{background-color:var(--tile-color-background-hover, rgba(0, 0, 0, .05))}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button]:active:after{background-color:var(--tile-color-background-hover, rgba(0, 0, 0, .05))}.mc-tile--expandable .mc-tile__body{flex-grow:1;position:relative;z-index:1}.mc-tile--expandable:has(.mc-tile__action) .mc-tile__body{border-radius:var(--border-radius-m, .5rem) 0 0 0}.mc-tile--expandable .mc-tile__action{border-radius:0 var(--border-radius-m, .5rem) var(--border-radius-m, .5rem) 0;box-sizing:border-box;min-width:4rem;flex-shrink:0;background-color:transparent;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}.mc-tile--expandable .mc-tile__content{width:100%;overflow:hidden;max-height:0;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;position:relative;z-index:1}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable .mc-tile__content{transition:max-height .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable .mc-tile__content{transition:none}}.mc-tile--expandable .mc-tile__content[aria-hidden=false]{max-height:50rem}@supports (interpolate-size: allow-keywords){.mc-tile--expandable .mc-tile__content{height:0;max-height:none}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable .mc-tile__content{transition:height .2s cubic-bezier(.17,.67,.83,.67);transition-behavior:allow-discrete}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable .mc-tile__content{transition:none}}.mc-tile--expandable .mc-tile__content[aria-hidden=false]{height:auto}}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button][aria-expanded=true] .mc-tile__action:after{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button][aria-expanded=true] .mc-tile__action:after{transition:none}}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button][aria-expanded=true] .mc-tile__action:after{transform:rotateX(180deg)}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button[aria-expanded=true] svg{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button[aria-expanded=true] svg{transition:none}}.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button[aria-expanded=true] svg{transform:rotateX(180deg)}.mc-tile--expandable .mc-tile__action-button{position:relative;z-index:2}.mc-tile--expandable .mc-tile__action-button svg{fill:currentcolor}.mc-tile--expandable .mc-tile__action-button:not(.mc-button){display:flex;align-items:center;gap:.5rem;border:0;background-color:transparent;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;text-align:left;padding:0;margin:0;cursor:pointer;appearance:none}.mc-tile--expandable .mc-tile__action-button:not(.mc-button):focus-visible{outline:.125rem solid var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline-offset:.125rem;border-radius:var(--border-radius-s, .25rem)}.mc-tile--expandable .mc-tile__action-label{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);line-height:var(--line-height-m, 1.5)}.mc-tile--expandable.mc-tile--trigger-icon,.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__body{cursor:default}.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action{justify-content:center}.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action:after{content:none;display:none}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button svg{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button svg{transition:none}}.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button svg{transform:rotateX(0);fill:currentcolor}.mc-tile--expandable.mc-tile--trigger-button{cursor:default;display:flex;flex-direction:column}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__body{cursor:default;order:1}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__header{display:contents}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action{cursor:pointer;min-width:auto;justify-content:flex-start;padding:.5rem;order:3;box-shadow:0 1px 0 0 var(--tile-color-border-default, #cccccc);border-radius:0}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action:after{display:none}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__content{order:2;border-radius:0}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button{font-weight:var(--font-weight-semi-bold, 600);width:100%;margin:0}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg{transition:background-color .2s cubic-bezier(.17,.67,.83,.67),box-shadow .2s ease}}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg{transition:none}}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg{transform:rotateX(0);fill:currentcolor}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button[aria-expanded=true] svg{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button[aria-expanded=true] svg{transition:none}}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button[aria-expanded=true] svg{transform:rotateX(180deg)}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-label{flex:initial}.mc-tile--selectable{border-radius:var(--border-radius-m, .5rem);background-color:var(--tile-color-background-primary, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile--selectable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:no-preference){.mc-tile--selectable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67),box-shadow .2s ease}}@media(prefers-reduced-motion:reduce){.mc-tile--selectable{transition:none}}.mc-tile--selectable{cursor:pointer;position:relative;display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;overflow:hidden;box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc)}.mc-tile--selectable .mc-tile__body{flex-grow:1;display:flex;flex-direction:column}.mc-tile--selectable .mc-tile__action{background-color:transparent;box-sizing:border-box;flex-shrink:0;display:flex;align-items:flex-start;justify-content:center;border-radius:initial;padding:.75rem}.mc-tile--selectable:has(.mc-tile__content){flex-direction:column;align-items:stretch}.mc-tile--selectable:has(.mc-tile__content) .mc-tile__header{display:flex;flex-direction:row;align-items:stretch;justify-content:space-between}.mc-tile--selectable:has(.mc-tile__content) .mc-tile__header .mc-tile__body{display:flex;flex-direction:column}.mc-tile--selectable:has(.mc-tile__content) .mc-tile__content{border-top:1px solid var(--tile-color-border-default, #cccccc)}.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-left{flex-direction:column}.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-left .mc-tile__header{flex-direction:row-reverse}.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-center{align-items:stretch}.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-center .mc-tile__header{align-items:center}.mc-tile--selectable.mc-tile--input-left{flex-direction:row-reverse}.mc-tile--selectable.mc-tile--input-center{align-items:center}.mc-tile--selectable:hover{box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc)}.mc-tile--selectable.mc-tile--selected{box-shadow:0 0 0 2px var(--color-brand, #78be20),0 0 0 4px var(--color-background-accent, #ebf5de)}.mc-tile--selectable.mc-tile--no-input .mc-tile__action{visibility:hidden;position:absolute}\n"] }]
|
|
4112
|
+
args: [{ selector: 'moz-tile-expandable', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, MozButtonComponent, MozIconButtonComponent, ChevronDown24], template: "<div [class]=\"hostClass()\">\n @if (isContainerTrigger()) {\n <button\n class=\"mc-tile__header\"\n type=\"button\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"contentId\"\n (click)=\"toggle()\"\n >\n <div class=\"mc-tile__body\">\n <ng-container [ngTemplateOutlet]=\"bodyTemplate\"></ng-container>\n </div>\n <div class=\"mc-tile__action\"></div>\n </button>\n } @else {\n <div class=\"mc-tile__header\">\n <div class=\"mc-tile__body\">\n <ng-container [ngTemplateOutlet]=\"bodyTemplate\"></ng-container>\n </div>\n <div class=\"mc-tile__action\">\n @if (isButtonTrigger()) {\n <button\n moz-button\n class=\"mc-tile__action-button\"\n [ghost]=\"true\"\n [iconPosition]=\"'right'\"\n (click)=\"toggle(); $event.stopPropagation()\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"contentId\"\n >\n <span class=\"mc-tile__action-label\">See more</span>\n <ChevronDown24 icon />\n </button>\n } @else if (isIconTrigger()) {\n <moz-icon-button\n class=\"mc-tile__action-button\"\n [ghost]=\"true\"\n [ariaLabel]=\"'Toggle content'\"\n (activated)=\"toggle(); $event.stopPropagation()\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"contentId\"\n [id]=\"'expandable-tile-toggle-button'\"\n >\n <ChevronDown24 icon />\n </moz-icon-button>\n }\n </div>\n </div>\n }\n\n <div class=\"mc-tile__content\" [id]=\"contentId\" [attr.aria-hidden]=\"!expanded()\">\n <ng-content select=\"[segmented]\" />\n </div>\n\n <ng-template #bodyTemplate>\n <ng-content select=\"[body]\" />\n </ng-template>\n</div>\n", styles: [".mc-tile{border-radius:var(--border-radius-m, .5rem);background-color:var(--tile-color-background-primary, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile{transition:none}}.mc-tile{box-sizing:border-box;display:flex;flex-direction:column;position:relative;overflow:hidden}.mc-tile--secondary{background-color:var(--tile-color-background-secondary, #eff1f6)}@media(prefers-reduced-motion:no-preference){.mc-tile--secondary{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--secondary{transition:none}}.mc-tile--inverse{background-color:var(--tile-color-background-inverse, #242938);color:var(--color-text-primary-inverse, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile--inverse{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--inverse{transition:none}}.mc-tile--inverse svg,.mc-tile--inverse .mc-tile__action:after,.mc-tile--inverse .mc-tile__action-icon{color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff)}.mc-tile--inverse.mc-tile--navigate .mc-tile__action:after{background-color:var(--color-text-primary-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-tile--inverse.mc-tile--open .mc-tile__action:after{background-color:var(--color-text-primary-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-tile--inverse.mc-tile--external-link .mc-tile__action:after{background-color:var(--color-text-primary-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-tile__body{flex:1}.mc-tile--bordered{box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc)}.mc-tile--action-right{flex-direction:row;align-items:stretch}.mc-tile--action-right .mc-tile__body{border-radius:var(--border-radius-m, .5rem) 0 0 var(--border-radius-m, .5rem)}.mc-tile--action-right .mc-tile__action{border-radius:0 var(--border-radius-m, .5rem) var(--border-radius-m, .5rem) 0;min-width:4rem;justify-content:center}.mc-tile__action{border-radius:0 0 var(--border-radius-m, .5rem) var(--border-radius-m, .5rem);box-sizing:border-box;background-color:transparent;display:flex;align-items:center;justify-content:flex-end;padding:.5rem;gap:.5rem}.mc-tile__action-icon{margin:.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center}.mc-tile--navigate .mc-tile__action:after{content:\"\";margin:.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;background-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-tile--open .mc-tile__action:after{content:\"\";margin:.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;background-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-tile--external-link .mc-tile__action:after{content:\"\";margin:.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;background-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-tile__item{display:flex;flex-direction:column}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable){border-radius:var(--border-radius-m, .5rem);background-color:var(--tile-color-background-primary, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable){transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable){transition:none}}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable){cursor:default;pointer-events:none}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--secondary{background-color:var(--tile-color-background-secondary, #eff1f6)}@media(prefers-reduced-motion:no-preference){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--secondary{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--secondary{transition:none}}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse{background-color:var(--tile-color-background-inverse, #242938);color:var(--color-text-primary-inverse, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse{transition:none}}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse svg,.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse .mc-tile__action:after,.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse .mc-tile__action-icon{color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff)}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--bordered{box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc)}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__content){display:flex;flex-direction:column}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__content) .mc-tile__content{border-top:1px solid var(--tile-color-border-default, #cccccc)}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action){pointer-events:auto;display:flex;flex-direction:column}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action) .mc-tile__header{display:flex;flex-direction:row;align-items:stretch;justify-content:space-between}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action) .mc-tile__body{flex-grow:1;display:flex;flex-direction:column;justify-content:center}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action) .mc-tile__action{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:.75rem;pointer-events:auto;background-color:transparent}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action) .mc-tile__action .mc-tile__action-button{pointer-events:auto}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action) .mc-tile__action .mc-tile__action-button svg{color:inherit;fill:currentcolor}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action).mc-tile--inverse .mc-tile__action .mc-tile__action-button svg{color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff)}.mc-tile--clickable{border-radius:var(--border-radius-m, .5rem);background-color:var(--tile-color-background-primary, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile--clickable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}.mc-tile--clickable:hover,.mc-tile--clickable:active{box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable.mc-tile--bordered:hover,.mc-tile--clickable.mc-tile--bordered:active{box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc)}@media(prefers-reduced-motion:no-preference){.mc-tile--clickable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67),box-shadow .2s ease}}@media(prefers-reduced-motion:reduce){.mc-tile--clickable{transition:none}}.mc-tile--clickable{transition:box-shadow .2s ease;cursor:pointer;position:relative}.mc-tile--clickable:before{border-radius:var(--border-radius-s, .25rem);content:\"\";position:absolute;inset:.25rem;background-color:transparent;pointer-events:none;outline:0 solid transparent;outline-offset:-.125rem}.mc-tile--clickable.mc-tile--secondary{background-color:var(--tile-color-background-secondary, #eff1f6)}@media(prefers-reduced-motion:no-preference){.mc-tile--clickable.mc-tile--secondary{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--clickable.mc-tile--secondary{transition:none}}.mc-tile--clickable.mc-tile--secondary:hover,.mc-tile--clickable.mc-tile--secondary:active{box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable.mc-tile--secondary.mc-tile--bordered:hover,.mc-tile--clickable.mc-tile--secondary.mc-tile--bordered:active{box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable.mc-tile--inverse{background-color:var(--tile-color-background-inverse, #242938);color:var(--color-text-primary-inverse, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile--clickable.mc-tile--inverse{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--clickable.mc-tile--inverse{transition:none}}.mc-tile--clickable.mc-tile--inverse:hover,.mc-tile--clickable.mc-tile--inverse:active{box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable.mc-tile--inverse.mc-tile--bordered:hover,.mc-tile--clickable.mc-tile--inverse.mc-tile--bordered:active{box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable.mc-tile--inverse svg,.mc-tile--clickable.mc-tile--inverse .mc-tile__action:after,.mc-tile--clickable.mc-tile--inverse .mc-tile__action-icon{color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff)}.mc-tile--clickable.mc-tile--bordered{box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable:focus-visible{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-tile--clickable:is(button){width:100%;border:0;padding:0;font-family:inherit;font-size:inherit;text-align:left;appearance:none}.mc-tile--clickable:is(a){display:flex;text-decoration:none;color:inherit}.mc-tile--clickable:is(a):visited{color:inherit}.mc-tile--clickable:is(a):not(.mc-tile--action-right){flex-direction:column}.mc-tile--clickable:is(div[role=button]){width:100%;cursor:pointer}.mc-tile--expandable{border-radius:var(--border-radius-m, .5rem);background-color:var(--tile-color-background-primary, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67),box-shadow .2s ease}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable{transition:none}}.mc-tile--expandable{display:block;position:relative;overflow:hidden}@supports (interpolate-size: allow-keywords){.mc-tile--expandable{interpolate-size:allow-keywords}}.mc-tile--expandable.mc-tile--secondary{background-color:var(--tile-color-background-secondary, #eff1f6)}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--secondary{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable.mc-tile--secondary{transition:none}}.mc-tile--expandable.mc-tile--bordered{box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc)}.mc-tile--expandable.mc-tile--borderless{border:none}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button){cursor:default}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button]{cursor:pointer}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button] .mc-tile__action:after{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button] .mc-tile__action:after{transition:none}}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button] .mc-tile__action:after{transform:rotateX(0);background-color:var(--button-color-filled-inverse-font, #242938);-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;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;content:\"\";width:1rem;height:1rem;flex-shrink:0;background-repeat:no-repeat;background-position:center;background-size:1rem}.mc-tile--expandable .mc-tile__header{display:flex;align-items:stretch;position:relative;z-index:2}.mc-tile--expandable .mc-tile__header:after{border-radius:var(--border-radius-m, .5rem);content:\"\";position:absolute;inset:.25rem;background-color:transparent;pointer-events:none;z-index:-1}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable .mc-tile__header:after{transition:background-color .2s cubic-bezier(.17,.67,.83,.67),box-shadow .2s ease}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable .mc-tile__header:after{transition:none}}.mc-tile--expandable .mc-tile__header[type=button]{width:100%;border:none;background:none;padding:0;margin:0;font:inherit;text-align:inherit;cursor:pointer;appearance:none}.mc-tile--expandable .mc-tile__header[type=button]:focus-visible{outline:none}.mc-tile--expandable .mc-tile__header[type=button]:focus-visible:after{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-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button]:hover:after{background-color:var(--tile-color-background-hover, rgba(0, 0, 0, .05))}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button]:active:after{background-color:var(--tile-color-background-hover, rgba(0, 0, 0, .05))}.mc-tile--expandable .mc-tile__body{flex-grow:1;position:relative;z-index:1}.mc-tile--expandable:has(.mc-tile__action) .mc-tile__body{border-radius:var(--border-radius-m, .5rem) 0 0 0}.mc-tile--expandable .mc-tile__action{border-radius:0 var(--border-radius-m, .5rem) var(--border-radius-m, .5rem) 0;box-sizing:border-box;min-width:4rem;flex-shrink:0;background-color:transparent;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}.mc-tile--expandable .mc-tile__content{width:100%;overflow:hidden;max-height:0;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;position:relative;z-index:1}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable .mc-tile__content{transition:max-height .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable .mc-tile__content{transition:none}}.mc-tile--expandable .mc-tile__content[aria-hidden=false]{max-height:50rem}@supports (interpolate-size: allow-keywords){.mc-tile--expandable .mc-tile__content{height:0;max-height:none}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable .mc-tile__content{transition:height .2s cubic-bezier(.17,.67,.83,.67);transition-behavior:allow-discrete}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable .mc-tile__content{transition:none}}.mc-tile--expandable .mc-tile__content[aria-hidden=false]{height:auto}}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button][aria-expanded=true] .mc-tile__action:after{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button][aria-expanded=true] .mc-tile__action:after{transition:none}}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button][aria-expanded=true] .mc-tile__action:after{transform:rotateX(180deg)}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button[aria-expanded=true] svg{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button[aria-expanded=true] svg{transition:none}}.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button[aria-expanded=true] svg{transform:rotateX(180deg)}.mc-tile--expandable .mc-tile__action-button{position:relative;z-index:2}.mc-tile--expandable .mc-tile__action-button svg{fill:currentcolor}.mc-tile--expandable .mc-tile__action-button:not(.mc-button){display:flex;align-items:center;gap:.5rem;border:0;background-color:transparent;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;text-align:left;padding:0;margin:0;cursor:pointer;appearance:none}.mc-tile--expandable .mc-tile__action-button:not(.mc-button):focus-visible{outline:.125rem solid var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline-offset:.125rem;border-radius:var(--border-radius-s, .25rem)}.mc-tile--expandable .mc-tile__action-label{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);line-height:var(--line-height-m, 1.5)}.mc-tile--expandable.mc-tile--trigger-icon,.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__body{cursor:default}.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action{justify-content:center}.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action:after{content:none;display:none}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button svg{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button svg{transition:none}}.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button svg{transform:rotateX(0);fill:currentcolor}.mc-tile--expandable.mc-tile--trigger-button{cursor:default;display:flex;flex-direction:column}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__body{cursor:default;order:1}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__header{display:contents}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action{cursor:pointer;min-width:auto;justify-content:flex-start;padding:.5rem;order:3;box-shadow:0 1px 0 0 var(--tile-color-border-default, #cccccc);border-radius:0}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action:after{display:none}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__content{order:2;border-radius:0}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button{font-weight:var(--font-weight-semi-bold, 600);width:100%;margin:0}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg{transition:background-color .2s cubic-bezier(.17,.67,.83,.67),box-shadow .2s ease}}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg{transition:none}}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg{transform:rotateX(0);fill:currentcolor}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button[aria-expanded=true] svg{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button[aria-expanded=true] svg{transition:none}}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button[aria-expanded=true] svg{transform:rotateX(180deg)}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-label{flex:initial}.mc-tile--selectable{border-radius:var(--border-radius-m, .5rem);background-color:var(--tile-color-background-primary, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile--selectable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:no-preference){.mc-tile--selectable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67),box-shadow .2s ease}}@media(prefers-reduced-motion:reduce){.mc-tile--selectable{transition:none}}.mc-tile--selectable{cursor:pointer;position:relative;display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;overflow:hidden;box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc)}.mc-tile--selectable .mc-tile__body{flex-grow:1;display:flex;flex-direction:column}.mc-tile--selectable .mc-tile__action{background-color:transparent;box-sizing:border-box;flex-shrink:0;display:flex;align-items:flex-start;justify-content:center;border-radius:initial;padding:.75rem}.mc-tile--selectable:has(.mc-tile__content){flex-direction:column;align-items:stretch}.mc-tile--selectable:has(.mc-tile__content) .mc-tile__header{display:flex;flex-direction:row;align-items:stretch;justify-content:space-between}.mc-tile--selectable:has(.mc-tile__content) .mc-tile__header .mc-tile__body{display:flex;flex-direction:column}.mc-tile--selectable:has(.mc-tile__content) .mc-tile__content{border-top:1px solid var(--tile-color-border-default, #cccccc)}.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-left{flex-direction:column}.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-left .mc-tile__header{flex-direction:row-reverse}.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-center{align-items:stretch}.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-center .mc-tile__header{align-items:center}.mc-tile--selectable.mc-tile--input-left{flex-direction:row-reverse}.mc-tile--selectable.mc-tile--input-center{align-items:center}.mc-tile--selectable:hover{box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc)}.mc-tile--selectable.mc-tile--selected{box-shadow:0 0 0 2px var(--color-brand, #78be20),0 0 0 4px var(--color-background-accent, #ebf5de)}.mc-tile--selectable.mc-tile--no-input .mc-tile__action{visibility:hidden;position:absolute}\n"] }]
|
|
4108
4113
|
}], propDecorators: { triggerMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerMode", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
|
|
4109
4114
|
|
|
4110
4115
|
const DRAWER_CONFIG = new InjectionToken('DRAWER_CONFIG');
|
|
@@ -4198,11 +4203,11 @@ class DrawerContainerComponent {
|
|
|
4198
4203
|
}
|
|
4199
4204
|
}
|
|
4200
4205
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4201
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DrawerContainerComponent, isStandalone: true, selector: "moz-drawer-container", host: { listeners: { "keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n [class]=\"classes()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!drawerRef.isOpen()\"\n>\n <div class=\"mc-drawer__dialog\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (drawerRef.back()) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (
|
|
4206
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DrawerContainerComponent, isStandalone: true, selector: "moz-drawer-container", host: { listeners: { "keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n [class]=\"classes()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!drawerRef.isOpen()\"\n>\n <div class=\"mc-drawer__dialog\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (drawerRef.back()) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (activated)=\"onBackClick()\"\n [id]=\"'drawer-back-button'\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ drawerRef.title() }}</h2>\n\n <moz-icon-button\n class=\"mc-drawer__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (activated)=\"drawerRef.close()\"\n [id]=\"'drawer-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n </div>\n\n <div class=\"mc-drawer__body\">\n <div class=\"mc-drawer__content\" tabindex=\"0\">\n @if (drawerRef.contentTitle()) {\n <h2 class=\"mc-drawer__content__title\">\n {{ drawerRef.contentTitle() }}\n </h2>\n }\n\n <ng-template cdkPortalOutlet />\n </div>\n </div>\n\n @if (footerTpl) {\n <div class=\"mc-drawer__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl\" />\n </div>\n }\n </div>\n\n @if (drawerRef.isOpen()) {\n <div class=\"mc-overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\"></div>\n }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:.5rem;justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:1rem}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 5);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:4rem}.mc-drawer__icon{height:1.5rem;margin-right:.75rem;width:1.5rem}.mc-drawer__title{font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--drawer-color-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1}.mc-drawer__title:first-child{padding-left:4rem}.mc-drawer__back,.mc-drawer__close{margin:.5rem}.mc-drawer__body{flex:1 1;overflow:hidden}.mc-drawer__body:last-child{margin-bottom:1.5rem;padding-bottom:1.5rem}.mc-drawer__content{max-height:100%;overflow:hidden auto;padding:.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:1.5rem}}.mc-drawer__content__title{font-size:var(--font-title-m, 1.5rem);margin:0 0 .5rem}.mc-drawer__footer{display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["hostClass"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["hostClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4202
4207
|
}
|
|
4203
4208
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DrawerContainerComponent, decorators: [{
|
|
4204
4209
|
type: Component,
|
|
4205
|
-
args: [{ selector: 'moz-drawer-container', imports: [MozIconButtonComponent, ArrowBack24, Cross24, NgTemplateOutlet, CdkPortalOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n [class]=\"classes()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!drawerRef.isOpen()\"\n>\n <div class=\"mc-drawer__dialog\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (drawerRef.back()) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (
|
|
4210
|
+
args: [{ selector: 'moz-drawer-container', imports: [MozIconButtonComponent, ArrowBack24, Cross24, NgTemplateOutlet, CdkPortalOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n [class]=\"classes()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!drawerRef.isOpen()\"\n>\n <div class=\"mc-drawer__dialog\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (drawerRef.back()) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (activated)=\"onBackClick()\"\n [id]=\"'drawer-back-button'\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ drawerRef.title() }}</h2>\n\n <moz-icon-button\n class=\"mc-drawer__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (activated)=\"drawerRef.close()\"\n [id]=\"'drawer-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n </div>\n\n <div class=\"mc-drawer__body\">\n <div class=\"mc-drawer__content\" tabindex=\"0\">\n @if (drawerRef.contentTitle()) {\n <h2 class=\"mc-drawer__content__title\">\n {{ drawerRef.contentTitle() }}\n </h2>\n }\n\n <ng-template cdkPortalOutlet />\n </div>\n </div>\n\n @if (footerTpl) {\n <div class=\"mc-drawer__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl\" />\n </div>\n }\n </div>\n\n @if (drawerRef.isOpen()) {\n <div class=\"mc-overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\"></div>\n }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:.5rem;justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:1rem}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 5);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:4rem}.mc-drawer__icon{height:1.5rem;margin-right:.75rem;width:1.5rem}.mc-drawer__title{font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--drawer-color-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1}.mc-drawer__title:first-child{padding-left:4rem}.mc-drawer__back,.mc-drawer__close{margin:.5rem}.mc-drawer__body{flex:1 1;overflow:hidden}.mc-drawer__body:last-child{margin-bottom:1.5rem;padding-bottom:1.5rem}.mc-drawer__content{max-height:100%;overflow:hidden auto;padding:.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:1.5rem}}.mc-drawer__content__title{font-size:var(--font-title-m, 1.5rem);margin:0 0 .5rem}.mc-drawer__footer{display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}\n"] }]
|
|
4206
4211
|
}], propDecorators: { portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }], onEscape: [{
|
|
4207
4212
|
type: HostListener,
|
|
4208
4213
|
args: ['keydown.escape']
|
|
@@ -4324,11 +4329,11 @@ class MozDrawerComponent {
|
|
|
4324
4329
|
this.close();
|
|
4325
4330
|
}
|
|
4326
4331
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MozDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4327
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MozDrawerComponent, isStandalone: true, selector: "moz-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, contentTitle: { classPropertyName: "contentTitle", publicName: "contentTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateOpen: "updateOpen", backEvent: "backEvent" }, host: { listeners: { "keydown.escape": "onEscape()" } }, queries: [{ propertyName: "footerTpl", first: true, predicate: ["footer"], isSignal: true }], ngImport: i0, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n [class]=\"classes()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!isOpen()\"\n>\n <div class=\"mc-drawer__dialog\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (back()) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (
|
|
4332
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MozDrawerComponent, isStandalone: true, selector: "moz-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, contentTitle: { classPropertyName: "contentTitle", publicName: "contentTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateOpen: "updateOpen", backEvent: "backEvent" }, host: { listeners: { "keydown.escape": "onEscape()" } }, queries: [{ propertyName: "footerTpl", first: true, predicate: ["footer"], isSignal: true }], ngImport: i0, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n [class]=\"classes()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!isOpen()\"\n>\n <div class=\"mc-drawer__dialog\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (back()) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (activated)=\"backClick()\"\n [id]=\"'drawer-back-button'\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ title() }}</h2>\n\n <moz-icon-button\n class=\"mc-drawer__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (activated)=\"close()\"\n [id]=\"'drawer-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n </div>\n\n <div class=\"mc-drawer__body\">\n <div class=\"mc-drawer__content\" tabindex=\"0\">\n @if (contentTitle()) {\n <h2 class=\"mc-drawer__content__title\">\n {{ contentTitle() }}\n </h2>\n }\n\n <ng-content />\n </div>\n </div>\n\n @if (footerTpl()) {\n <div class=\"mc-drawer__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl()\" />\n </div>\n }\n </div>\n @if(isOpen()){\n <div\n class=\"mc-overlay is-visible\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n (click)=\"onBackdropClick($event)\"\n ></div>\n }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:.5rem;justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:1rem}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 5);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:4rem}.mc-drawer__icon{height:1.5rem;margin-right:.75rem;width:1.5rem}.mc-drawer__title{font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--drawer-color-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1}.mc-drawer__title:first-child{padding-left:4rem}.mc-drawer__back,.mc-drawer__close{margin:.5rem}.mc-drawer__body{flex:1 1;overflow:hidden}.mc-drawer__body:last-child{margin-bottom:1.5rem;padding-bottom:1.5rem}.mc-drawer__content{max-height:100%;overflow:hidden auto;padding:.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:1.5rem}}.mc-drawer__content__title{font-size:var(--font-title-m, 1.5rem);margin:0 0 .5rem}.mc-drawer__footer{display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["hostClass"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["hostClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4328
4333
|
}
|
|
4329
4334
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MozDrawerComponent, decorators: [{
|
|
4330
4335
|
type: Component,
|
|
4331
|
-
args: [{ selector: 'moz-drawer', imports: [MozIconButtonComponent, ArrowBack24, Cross24, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n [class]=\"classes()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!isOpen()\"\n>\n <div class=\"mc-drawer__dialog\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (back()) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (
|
|
4336
|
+
args: [{ selector: 'moz-drawer', imports: [MozIconButtonComponent, ArrowBack24, Cross24, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n [class]=\"classes()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!isOpen()\"\n>\n <div class=\"mc-drawer__dialog\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (back()) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (activated)=\"backClick()\"\n [id]=\"'drawer-back-button'\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ title() }}</h2>\n\n <moz-icon-button\n class=\"mc-drawer__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (activated)=\"close()\"\n [id]=\"'drawer-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n </div>\n\n <div class=\"mc-drawer__body\">\n <div class=\"mc-drawer__content\" tabindex=\"0\">\n @if (contentTitle()) {\n <h2 class=\"mc-drawer__content__title\">\n {{ contentTitle() }}\n </h2>\n }\n\n <ng-content />\n </div>\n </div>\n\n @if (footerTpl()) {\n <div class=\"mc-drawer__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl()\" />\n </div>\n }\n </div>\n @if(isOpen()){\n <div\n class=\"mc-overlay is-visible\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n (click)=\"onBackdropClick($event)\"\n ></div>\n }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:.5rem;justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:1rem}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 5);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:4rem}.mc-drawer__icon{height:1.5rem;margin-right:.75rem;width:1.5rem}.mc-drawer__title{font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--drawer-color-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1}.mc-drawer__title:first-child{padding-left:4rem}.mc-drawer__back,.mc-drawer__close{margin:.5rem}.mc-drawer__body{flex:1 1;overflow:hidden}.mc-drawer__body:last-child{margin-bottom:1.5rem;padding-bottom:1.5rem}.mc-drawer__content{max-height:100%;overflow:hidden auto;padding:.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:1.5rem}}.mc-drawer__content__title{font-size:var(--font-title-m, 1.5rem);margin:0 0 .5rem}.mc-drawer__footer{display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}\n"] }]
|
|
4332
4337
|
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], extended: [{ type: i0.Input, args: [{ isSignal: true, alias: "extended", required: false }] }], back: [{ type: i0.Input, args: [{ isSignal: true, alias: "back", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], contentTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTitle", required: false }] }], updateOpen: [{ type: i0.Output, args: ["updateOpen"] }], backEvent: [{ type: i0.Output, args: ["backEvent"] }], footerTpl: [{ type: i0.ContentChild, args: ['footer', { ...{ descendants: false }, isSignal: true }] }], onEscape: [{
|
|
4333
4338
|
type: HostListener,
|
|
4334
4339
|
args: ['keydown.escape']
|
|
@@ -4363,11 +4368,11 @@ class MozPopoverComponent {
|
|
|
4363
4368
|
this.closeClick.emit();
|
|
4364
4369
|
}
|
|
4365
4370
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MozPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4366
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MozPopoverComponent, isStandalone: true, selector: "moz-popover", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pointer: { classPropertyName: "pointer", publicName: "pointer", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeClick: "closeClick" }, queries: [{ propertyName: "footerTpl", first: true, predicate: ["footer"], isSignal: true }], exportAs: ["mozPopover"], ngImport: i0, template: "<div [class]=\"classMap()\">\n <div class=\"mc-popover__wrapper\">\n <div class=\"mc-popover__content\">\n @if (title() || description()) {\n <div class=\"mc-popover__headings\">\n @if (title()) {\n <p class=\"mc-popover__title\">{{ title() }}</p>\n } @if (description()) {\n <p class=\"mc-popover__description\">{{ description() }}</p>\n }\n </div>\n } @if (closable()) {\n <moz-icon-button\n id=\"popover-close\"\n class=\"mc-popover__close\"\n aria-label=\"Close\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n (
|
|
4371
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MozPopoverComponent, isStandalone: true, selector: "moz-popover", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pointer: { classPropertyName: "pointer", publicName: "pointer", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeClick: "closeClick" }, queries: [{ propertyName: "footerTpl", first: true, predicate: ["footer"], isSignal: true }], exportAs: ["mozPopover"], ngImport: i0, template: "<div [class]=\"classMap()\">\n <div class=\"mc-popover__wrapper\">\n <div class=\"mc-popover__content\">\n @if (title() || description()) {\n <div class=\"mc-popover__headings\">\n @if (title()) {\n <p class=\"mc-popover__title\">{{ title() }}</p>\n } @if (description()) {\n <p class=\"mc-popover__description\">{{ description() }}</p>\n }\n </div>\n } @if (closable()) {\n <moz-icon-button\n id=\"popover-close\"\n class=\"mc-popover__close\"\n aria-label=\"Close\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n (activated)=\"onClose()\"\n >\n <Cross20 icon />\n </moz-icon-button>\n }\n\n <ng-content />\n\n @if (footerTpl()) {\n <div class=\"mc-popover__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl()\" />\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".mc-popover__wrapper{border-radius:var(--border-radius-m, .5rem)}.mc-popover__wrapper:focus-visible{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-popover__wrapper{position:relative;padding:1rem;background-color:var(--popover-color-background-standard, #ffffff);box-sizing:border-box;overflow:visible;border:var(--border-width-s, .0625rem) solid var(--popover-color-border-standard, #cccccc);box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%))}@supports (width: max-content){.mc-popover__wrapper{width:max-content}}.mc-popover__wrapper:before{background-color:var(--popover-color-border-standard, #cccccc);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E\") no-repeat center/contain;content:\"\";height:.625rem;position:absolute;width:.625rem}.mc-popover__wrapper:after{background-color:var(--popover-color-background-standard, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E\") no-repeat center/contain;content:\"\";height:.5rem;position:absolute;width:.5rem}.mc-popover__content{display:flex;flex-direction:column;gap:1rem}.mc-popover__headings{display:flex;flex-direction:column;gap:.5rem}.mc-popover__close{position:absolute;top:4px;right:4px}.mc-popover__title{font-size:var(--font-body-s, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--popover-color-text-standard, #000000);margin:0}.mc-popover__description{font-size:var(--font-body-s, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--popover-color-text-standard, #000000);margin:0}.mc-popover__footer{display:flex;justify-content:end;gap:1rem}.mc-popover--inverse .mc-popover__wrapper{background-color:var(--popover-color-background-inverse, #242938);border-color:var(--popover-color-border-inverse, #636d88)}.mc-popover--inverse .mc-popover__wrapper:before{background-color:var(--popover-color-border-inverse, #636d88);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-popover--inverse .mc-popover__wrapper:after{background-color:var(--popover-color-background-inverse, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-popover--inverse .mc-popover__title,.mc-popover--inverse .mc-popover__description{color:var(--popover-color-text-inverse, #ffffff)}.mc-popover--s .mc-popover__wrapper{width:18rem}.mc-popover--m .mc-popover__wrapper{width:27.75rem}.mc-popover--l .mc-popover__wrapper{width:37.5rem}.mc-popover--top .mc-popover__wrapper{margin:0 0 10px;inset:auto;position-area:top}.mc-popover--top .mc-popover__wrapper:after,.mc-popover--top .mc-popover__wrapper:before{bottom:0;left:50%;transform:translate(-50%,100%) rotate(-90deg)}.mc-popover--top .mc-popover__wrapper:before{bottom:-1px}.mc-popover--right .mc-popover__wrapper{margin:0 0 0 10px;inset:auto;position-area:right}.mc-popover--right .mc-popover__wrapper:after,.mc-popover--right .mc-popover__wrapper:before{top:50%;left:0;transform:translate(-99%,-50%)}.mc-popover--right .mc-popover__wrapper:before{left:-1px}.mc-popover--left .mc-popover__wrapper{margin:0 10px 0 0;inset:auto;position-area:left}.mc-popover--left .mc-popover__wrapper:after,.mc-popover--left .mc-popover__wrapper:before{top:50%;right:0;transform:translate(99%,-50%) rotate(180deg)}.mc-popover--left .mc-popover__wrapper:before{right:-1px}.mc-popover--bottom .mc-popover__wrapper{margin:10px 0 0;inset:auto;position-area:bottom}.mc-popover--bottom .mc-popover__wrapper:after,.mc-popover--bottom .mc-popover__wrapper:before{top:0;left:50%;transform:translate(-50%,-100%) rotate(90deg)}.mc-popover--bottom .mc-popover__wrapper:before{top:-1px}.mc-popover--no-pointer .mc-popover__wrapper:after,.mc-popover--no-pointer .mc-popover__wrapper:before{background:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"], outputs: ["activated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4367
4372
|
}
|
|
4368
4373
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MozPopoverComponent, decorators: [{
|
|
4369
4374
|
type: Component,
|
|
4370
|
-
args: [{ selector: 'moz-popover', imports: [NgTemplateOutlet, Cross20, MozIconButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'mozPopover', template: "<div [class]=\"classMap()\">\n <div class=\"mc-popover__wrapper\">\n <div class=\"mc-popover__content\">\n @if (title() || description()) {\n <div class=\"mc-popover__headings\">\n @if (title()) {\n <p class=\"mc-popover__title\">{{ title() }}</p>\n } @if (description()) {\n <p class=\"mc-popover__description\">{{ description() }}</p>\n }\n </div>\n } @if (closable()) {\n <moz-icon-button\n id=\"popover-close\"\n class=\"mc-popover__close\"\n aria-label=\"Close\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n (
|
|
4375
|
+
args: [{ selector: 'moz-popover', imports: [NgTemplateOutlet, Cross20, MozIconButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'mozPopover', template: "<div [class]=\"classMap()\">\n <div class=\"mc-popover__wrapper\">\n <div class=\"mc-popover__content\">\n @if (title() || description()) {\n <div class=\"mc-popover__headings\">\n @if (title()) {\n <p class=\"mc-popover__title\">{{ title() }}</p>\n } @if (description()) {\n <p class=\"mc-popover__description\">{{ description() }}</p>\n }\n </div>\n } @if (closable()) {\n <moz-icon-button\n id=\"popover-close\"\n class=\"mc-popover__close\"\n aria-label=\"Close\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n (activated)=\"onClose()\"\n >\n <Cross20 icon />\n </moz-icon-button>\n }\n\n <ng-content />\n\n @if (footerTpl()) {\n <div class=\"mc-popover__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl()\" />\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".mc-popover__wrapper{border-radius:var(--border-radius-m, .5rem)}.mc-popover__wrapper:focus-visible{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-popover__wrapper{position:relative;padding:1rem;background-color:var(--popover-color-background-standard, #ffffff);box-sizing:border-box;overflow:visible;border:var(--border-width-s, .0625rem) solid var(--popover-color-border-standard, #cccccc);box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%))}@supports (width: max-content){.mc-popover__wrapper{width:max-content}}.mc-popover__wrapper:before{background-color:var(--popover-color-border-standard, #cccccc);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E\") no-repeat center/contain;content:\"\";height:.625rem;position:absolute;width:.625rem}.mc-popover__wrapper:after{background-color:var(--popover-color-background-standard, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E\") no-repeat center/contain;content:\"\";height:.5rem;position:absolute;width:.5rem}.mc-popover__content{display:flex;flex-direction:column;gap:1rem}.mc-popover__headings{display:flex;flex-direction:column;gap:.5rem}.mc-popover__close{position:absolute;top:4px;right:4px}.mc-popover__title{font-size:var(--font-body-s, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--popover-color-text-standard, #000000);margin:0}.mc-popover__description{font-size:var(--font-body-s, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--popover-color-text-standard, #000000);margin:0}.mc-popover__footer{display:flex;justify-content:end;gap:1rem}.mc-popover--inverse .mc-popover__wrapper{background-color:var(--popover-color-background-inverse, #242938);border-color:var(--popover-color-border-inverse, #636d88)}.mc-popover--inverse .mc-popover__wrapper:before{background-color:var(--popover-color-border-inverse, #636d88);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-popover--inverse .mc-popover__wrapper:after{background-color:var(--popover-color-background-inverse, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-popover--inverse .mc-popover__title,.mc-popover--inverse .mc-popover__description{color:var(--popover-color-text-inverse, #ffffff)}.mc-popover--s .mc-popover__wrapper{width:18rem}.mc-popover--m .mc-popover__wrapper{width:27.75rem}.mc-popover--l .mc-popover__wrapper{width:37.5rem}.mc-popover--top .mc-popover__wrapper{margin:0 0 10px;inset:auto;position-area:top}.mc-popover--top .mc-popover__wrapper:after,.mc-popover--top .mc-popover__wrapper:before{bottom:0;left:50%;transform:translate(-50%,100%) rotate(-90deg)}.mc-popover--top .mc-popover__wrapper:before{bottom:-1px}.mc-popover--right .mc-popover__wrapper{margin:0 0 0 10px;inset:auto;position-area:right}.mc-popover--right .mc-popover__wrapper:after,.mc-popover--right .mc-popover__wrapper:before{top:50%;left:0;transform:translate(-99%,-50%)}.mc-popover--right .mc-popover__wrapper:before{left:-1px}.mc-popover--left .mc-popover__wrapper{margin:0 10px 0 0;inset:auto;position-area:left}.mc-popover--left .mc-popover__wrapper:after,.mc-popover--left .mc-popover__wrapper:before{top:50%;right:0;transform:translate(99%,-50%) rotate(180deg)}.mc-popover--left .mc-popover__wrapper:before{right:-1px}.mc-popover--bottom .mc-popover__wrapper{margin:10px 0 0;inset:auto;position-area:bottom}.mc-popover--bottom .mc-popover__wrapper:after,.mc-popover--bottom .mc-popover__wrapper:before{top:0;left:50%;transform:translate(-50%,-100%) rotate(90deg)}.mc-popover--bottom .mc-popover__wrapper:before{top:-1px}.mc-popover--no-pointer .mc-popover__wrapper:after,.mc-popover--no-pointer .mc-popover__wrapper:before{background:none}\n"] }]
|
|
4371
4376
|
}], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pointer: [{ type: i0.Input, args: [{ isSignal: true, alias: "pointer", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], closeClick: [{ type: i0.Output, args: ["closeClick"] }], footerTpl: [{ type: i0.ContentChild, args: ['footer', { ...{ descendants: false }, isSignal: true }] }] } });
|
|
4372
4377
|
|
|
4373
4378
|
const POPOVER_CONFIG = new InjectionToken('POPOVER_CONFIG');
|
|
@@ -9994,7 +9999,7 @@ class MozGridComponent {
|
|
|
9994
9999
|
[ghost]="true"
|
|
9995
10000
|
size="s"
|
|
9996
10001
|
[ariaLabel]="isFullscreen() ? 'Exit fullscreen' : 'Fullscreen'"
|
|
9997
|
-
(
|
|
10002
|
+
(activated)="toggleFullscreen()"
|
|
9998
10003
|
>
|
|
9999
10004
|
@if (isFullscreen()) {
|
|
10000
10005
|
<FullscreenExit20 icon />
|
|
@@ -10008,7 +10013,7 @@ class MozGridComponent {
|
|
|
10008
10013
|
[ghost]="true"
|
|
10009
10014
|
size="s"
|
|
10010
10015
|
ariaLabel="Export CSV"
|
|
10011
|
-
(
|
|
10016
|
+
(activated)="onExportCsv()"
|
|
10012
10017
|
>
|
|
10013
10018
|
<Download20 icon />
|
|
10014
10019
|
</moz-icon-button>
|
|
@@ -10018,7 +10023,7 @@ class MozGridComponent {
|
|
|
10018
10023
|
size="s"
|
|
10019
10024
|
[ghost]="true"
|
|
10020
10025
|
ariaLabel="Filter"
|
|
10021
|
-
(
|
|
10026
|
+
(activated)="filterPanelOpen.set(!filterPanelOpen())"
|
|
10022
10027
|
>
|
|
10023
10028
|
<Filter20 icon />
|
|
10024
10029
|
</moz-icon-button>
|
|
@@ -10027,7 +10032,7 @@ class MozGridComponent {
|
|
|
10027
10032
|
size="s"
|
|
10028
10033
|
[ghost]="true"
|
|
10029
10034
|
ariaLabel="Settings"
|
|
10030
|
-
(
|
|
10035
|
+
(activated)="onSettingsClick()"
|
|
10031
10036
|
>
|
|
10032
10037
|
<Settings20 icon />
|
|
10033
10038
|
</moz-icon-button>
|
|
@@ -10036,7 +10041,7 @@ class MozGridComponent {
|
|
|
10036
10041
|
size="s"
|
|
10037
10042
|
[ghost]="true"
|
|
10038
10043
|
ariaLabel="Group"
|
|
10039
|
-
(
|
|
10044
|
+
(activated)="onGroupClick()"
|
|
10040
10045
|
>
|
|
10041
10046
|
<ViewGridX420 icon />
|
|
10042
10047
|
</moz-icon-button>
|
|
@@ -10188,7 +10193,7 @@ class MozGridComponent {
|
|
|
10188
10193
|
}
|
|
10189
10194
|
</div>
|
|
10190
10195
|
</div>
|
|
10191
|
-
`, isInline: true, styles: [":host{display:block;height:100%}.moz-grid-wrapper{display:flex;flex-direction:column;font-family:var(--font-family-primary);height:100%;min-height:0}.moz-grid-wrapper--fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;background:var(--color-background-primary)}.moz-grid{display:flex;flex-direction:column;border-radius:var(--border-radius-l);overflow:hidden;background:var(--color-background-primary);flex:1;min-height:0;position:relative;box-shadow:0 0 6px #cdd4d8}.moz-grid:focus{outline:none}.moz-grid--loading{opacity:.6;pointer-events:none}.moz-grid__toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-xs, 4px) var(--spacing-s, 8px);flex-shrink:0;min-height:48px;gap:var(--spacing-s, 8px)}.moz-grid__toolbar-left,.moz-grid__toolbar-right{display:flex;align-items:center;gap:var(--spacing-xs, 4px)}.moz-grid__selection-banner{display:flex;align-items:center;gap:var(--spacing-s, 8px);flex:1;justify-content:center;border-radius:var(--border-radius-s);border:1px solid var(--Border-Primary, #cdd4d8);background:var(--Neutral-Grey-000, #fff)}.moz-grid__selection-text{font-size:var(--font-size-s, 14px);color:var(--color-text-primary);white-space:nowrap}.moz-grid__selection-link{padding:0;border:none;background:transparent;color:var(--color-background-accent-inverse);font-size:var(--font-size-s, 14px);font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:underline}.moz-grid__selection-link:hover{color:var(--color-primary-dark, #1557b0)}.moz-grid__tag-bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xs, 4px);padding:var(--spacing-xxs, 2px) var(--spacing-s, 8px);flex-shrink:0}.moz-grid__tag-bar-label{font-size:var(--font-size-xs, 12px);font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;white-space:nowrap;margin-right:var(--spacing-xs, 4px)}.moz-grid__tag-action-btn{padding:2px 8px;border:none;background:transparent;color:var(--color-background-accent-inverse);font-size:var(--font-size-xs, 12px);font-weight:600;cursor:pointer}.moz-grid__tag-action-btn:hover{text-decoration:underline}.moz-grid__group-tag-btn{display:inline-flex;align-items:center;gap:2px;padding:0;border:none;background:transparent;cursor:pointer;font:inherit;color:inherit;line-height:1}.moz-grid__group-tag-btn ::ng-deep svg{fill:#fff!important;width:16px;height:16px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MozGridHeaderComponent, selector: "moz-grid-header", inputs: ["showCheckbox", "showExpand", "reorderable"], outputs: ["sortClick", "menuAction", "resizeStart", "selectAllToggle", "columnReorder"] }, { kind: "component", type: MozGridBodyComponent, selector: "moz-grid-body", inputs: ["showCheckbox", "showExpand", "detailTemplate"], outputs: ["cellEdit", "cellEditCancel", "rowSelectionToggle", "groupToggle"] }, { kind: "component", type: MozGridFooterComponent, selector: "moz-grid-footer", inputs: ["pageSizeOptions"], outputs: ["pageChange"] }, { kind: "component", type: MozGridSelectionBarComponent, selector: "moz-grid-selection-bar", outputs: ["editClick", "copyClick", "pasteClick", "deleteClick"] }, { kind: "component", type: MozTagComponent, selector: "moz-tag", inputs: ["type", "size", "id", "name", "disabled", "contextualisedNumber", "removableLabel"], outputs: ["removeTag"] }, { kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { kind: "component", type: ViewGridX420, selector: "ViewGridX420", inputs: ["hostClass"] }, { kind: "component", type: Filter20, selector: "Filter20", inputs: ["hostClass"] }, { kind: "component", type: Settings20, selector: "Settings20", inputs: ["hostClass"] }, { kind: "component", type: FullscreenEnter20, selector: "FullscreenEnter20", inputs: ["hostClass"] }, { kind: "component", type: FullscreenExit20, selector: "FullscreenExit20", inputs: ["hostClass"] }, { kind: "component", type: Download20, selector: "Download20", inputs: ["hostClass"] }, { kind: "component", type: ChevronUp20, selector: "ChevronUp20", inputs: ["hostClass"] }, { kind: "component", type: ChevronDown20, selector: "ChevronDown20", inputs: ["hostClass"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10196
|
+
`, isInline: true, styles: [":host{display:block;height:100%}.moz-grid-wrapper{display:flex;flex-direction:column;font-family:var(--font-family-primary);height:100%;min-height:0}.moz-grid-wrapper--fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;background:var(--color-background-primary)}.moz-grid{display:flex;flex-direction:column;border-radius:var(--border-radius-l);overflow:hidden;background:var(--color-background-primary);flex:1;min-height:0;position:relative;box-shadow:0 0 6px #cdd4d8}.moz-grid:focus{outline:none}.moz-grid--loading{opacity:.6;pointer-events:none}.moz-grid__toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-xs, 4px) var(--spacing-s, 8px);flex-shrink:0;min-height:48px;gap:var(--spacing-s, 8px)}.moz-grid__toolbar-left,.moz-grid__toolbar-right{display:flex;align-items:center;gap:var(--spacing-xs, 4px)}.moz-grid__selection-banner{display:flex;align-items:center;gap:var(--spacing-s, 8px);flex:1;justify-content:center;border-radius:var(--border-radius-s);border:1px solid var(--Border-Primary, #cdd4d8);background:var(--Neutral-Grey-000, #fff)}.moz-grid__selection-text{font-size:var(--font-size-s, 14px);color:var(--color-text-primary);white-space:nowrap}.moz-grid__selection-link{padding:0;border:none;background:transparent;color:var(--color-background-accent-inverse);font-size:var(--font-size-s, 14px);font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:underline}.moz-grid__selection-link:hover{color:var(--color-primary-dark, #1557b0)}.moz-grid__tag-bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xs, 4px);padding:var(--spacing-xxs, 2px) var(--spacing-s, 8px);flex-shrink:0}.moz-grid__tag-bar-label{font-size:var(--font-size-xs, 12px);font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;white-space:nowrap;margin-right:var(--spacing-xs, 4px)}.moz-grid__tag-action-btn{padding:2px 8px;border:none;background:transparent;color:var(--color-background-accent-inverse);font-size:var(--font-size-xs, 12px);font-weight:600;cursor:pointer}.moz-grid__tag-action-btn:hover{text-decoration:underline}.moz-grid__group-tag-btn{display:inline-flex;align-items:center;gap:2px;padding:0;border:none;background:transparent;cursor:pointer;font:inherit;color:inherit;line-height:1}.moz-grid__group-tag-btn ::ng-deep svg{fill:#fff!important;width:16px;height:16px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MozGridHeaderComponent, selector: "moz-grid-header", inputs: ["showCheckbox", "showExpand", "reorderable"], outputs: ["sortClick", "menuAction", "resizeStart", "selectAllToggle", "columnReorder"] }, { kind: "component", type: MozGridBodyComponent, selector: "moz-grid-body", inputs: ["showCheckbox", "showExpand", "detailTemplate"], outputs: ["cellEdit", "cellEditCancel", "rowSelectionToggle", "groupToggle"] }, { kind: "component", type: MozGridFooterComponent, selector: "moz-grid-footer", inputs: ["pageSizeOptions"], outputs: ["pageChange"] }, { kind: "component", type: MozGridSelectionBarComponent, selector: "moz-grid-selection-bar", outputs: ["editClick", "copyClick", "pasteClick", "deleteClick"] }, { kind: "component", type: MozTagComponent, selector: "moz-tag", inputs: ["type", "size", "id", "name", "disabled", "contextualisedNumber", "removableLabel"], outputs: ["removeTag"] }, { kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: ViewGridX420, selector: "ViewGridX420", inputs: ["hostClass"] }, { kind: "component", type: Filter20, selector: "Filter20", inputs: ["hostClass"] }, { kind: "component", type: Settings20, selector: "Settings20", inputs: ["hostClass"] }, { kind: "component", type: FullscreenEnter20, selector: "FullscreenEnter20", inputs: ["hostClass"] }, { kind: "component", type: FullscreenExit20, selector: "FullscreenExit20", inputs: ["hostClass"] }, { kind: "component", type: Download20, selector: "Download20", inputs: ["hostClass"] }, { kind: "component", type: ChevronUp20, selector: "ChevronUp20", inputs: ["hostClass"] }, { kind: "component", type: ChevronDown20, selector: "ChevronDown20", inputs: ["hostClass"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10192
10197
|
}
|
|
10193
10198
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MozGridComponent, decorators: [{
|
|
10194
10199
|
type: Component,
|
|
@@ -10238,7 +10243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
10238
10243
|
[ghost]="true"
|
|
10239
10244
|
size="s"
|
|
10240
10245
|
[ariaLabel]="isFullscreen() ? 'Exit fullscreen' : 'Fullscreen'"
|
|
10241
|
-
(
|
|
10246
|
+
(activated)="toggleFullscreen()"
|
|
10242
10247
|
>
|
|
10243
10248
|
@if (isFullscreen()) {
|
|
10244
10249
|
<FullscreenExit20 icon />
|
|
@@ -10252,7 +10257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
10252
10257
|
[ghost]="true"
|
|
10253
10258
|
size="s"
|
|
10254
10259
|
ariaLabel="Export CSV"
|
|
10255
|
-
(
|
|
10260
|
+
(activated)="onExportCsv()"
|
|
10256
10261
|
>
|
|
10257
10262
|
<Download20 icon />
|
|
10258
10263
|
</moz-icon-button>
|
|
@@ -10262,7 +10267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
10262
10267
|
size="s"
|
|
10263
10268
|
[ghost]="true"
|
|
10264
10269
|
ariaLabel="Filter"
|
|
10265
|
-
(
|
|
10270
|
+
(activated)="filterPanelOpen.set(!filterPanelOpen())"
|
|
10266
10271
|
>
|
|
10267
10272
|
<Filter20 icon />
|
|
10268
10273
|
</moz-icon-button>
|
|
@@ -10271,7 +10276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
10271
10276
|
size="s"
|
|
10272
10277
|
[ghost]="true"
|
|
10273
10278
|
ariaLabel="Settings"
|
|
10274
|
-
(
|
|
10279
|
+
(activated)="onSettingsClick()"
|
|
10275
10280
|
>
|
|
10276
10281
|
<Settings20 icon />
|
|
10277
10282
|
</moz-icon-button>
|
|
@@ -10280,7 +10285,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
10280
10285
|
size="s"
|
|
10281
10286
|
[ghost]="true"
|
|
10282
10287
|
ariaLabel="Group"
|
|
10283
|
-
(
|
|
10288
|
+
(activated)="onGroupClick()"
|
|
10284
10289
|
>
|
|
10285
10290
|
<ViewGridX420 icon />
|
|
10286
10291
|
</moz-icon-button>
|