@mozaic-ds/angular 2.0.0-beta.30 → 2.0.0-beta.31

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.
Files changed (4) hide show
  1. package/fesm2022/mozaic-ds-angular.mjs +26 -24
  2. package/fesm2022/mozaic-ds-angular.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/mozaic-ds-angular.d.ts +5 -2
package/fesm2022/mozaic-ds-angular.mjs CHANGED
@@ -279,6 +279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
279
279
  }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: true }] }], requirementText: [{ type: i0.Input, args: [{ isSignal: true, alias: "requirementText", required: false }] }], helpText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpText", required: false }] }], isValid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isValid", required: false }] }], isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }] } });
280
280
 
281
281
  class MozIconButtonComponent {
282
+ id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
282
283
  appearance = input('standard', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
283
284
  size = input('m', ...(ngDevMode ? [{ debugName: "size" }] : []));
284
285
  disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
@@ -297,12 +298,12 @@ class MozIconButtonComponent {
297
298
  };
298
299
  }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
299
300
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
300
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: MozIconButtonComponent, isStandalone: true, selector: "moz-icon-button", inputs: { 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>\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}.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;border-radius:var(--button-border-radius-s, .25rem);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}.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}.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}.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 .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 });
301
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", 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>\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}.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;border-radius:var(--button-border-radius-s, .25rem);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}.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}.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}.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 .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 });
301
302
  }
302
303
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozIconButtonComponent, decorators: [{
303
304
  type: Component,
304
305
  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>\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}.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;border-radius:var(--button-border-radius-s, .25rem);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}.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}.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}.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 .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"] }]
305
- }], propDecorators: { 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 }] }] } });
306
+ }], 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 }] }] } });
306
307
 
307
308
  class MozLinearProgressBarBufferComponent {
308
309
  valuePercent = input(0, ...(ngDevMode ? [{ debugName: "valuePercent" }] : []));
@@ -393,7 +394,7 @@ class MozFileUploaderItemComponent {
393
394
  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
394
395
  }
395
396
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozFileUploaderItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
396
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 (click)=\"onDelete()\" [size]=\"'s'\" [ghost]=\"true\">\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;width:18rem}.mc-file-uploader__files-list{display:flex;flex-direction:column;gap:1rem}.mc-file-uploader__hidden-input{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);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{width:25rem}.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: ["color", "hostClass"] }, { kind: "component", type: CrossCircleFilled20, selector: "CrossCircleFilled20", inputs: ["color", "hostClass"] }, { kind: "component", type: Refresh32, selector: "Refresh32", inputs: ["color", "hostClass"] }, { kind: "component", type: MozDividerComponent, selector: "moz-divider", inputs: ["orientation", "appearance", "size"] }, { kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { kind: "component", type: Refresh20, selector: "Refresh20", inputs: ["color", "hostClass"] }, { kind: "component", type: Uploading32, selector: "Uploading32", inputs: ["color", "hostClass"] }, { kind: "component", type: Eye20, selector: "Eye20", inputs: ["color", "hostClass"] }, { kind: "component", type: WarningCircle32, selector: "WarningCircle32", inputs: ["color", "hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
397
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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;width:18rem}.mc-file-uploader__files-list{display:flex;flex-direction:column;gap:1rem}.mc-file-uploader__hidden-input{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);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{width:25rem}.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: ["color", "hostClass"] }, { kind: "component", type: CrossCircleFilled20, selector: "CrossCircleFilled20", inputs: ["color", "hostClass"] }, { kind: "component", type: Refresh32, selector: "Refresh32", inputs: ["color", "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: ["color", "hostClass"] }, { kind: "component", type: Uploading32, selector: "Uploading32", inputs: ["color", "hostClass"] }, { kind: "component", type: Eye20, selector: "Eye20", inputs: ["color", "hostClass"] }, { kind: "component", type: WarningCircle32, selector: "WarningCircle32", inputs: ["color", "hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
397
398
  }
398
399
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozFileUploaderItemComponent, decorators: [{
399
400
  type: Component,
@@ -409,7 +410,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
409
410
  Uploading32,
410
411
  Eye20,
411
412
  WarningCircle32,
412
- ], 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 (click)=\"onDelete()\" [size]=\"'s'\" [ghost]=\"true\">\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;width:18rem}.mc-file-uploader__files-list{display:flex;flex-direction:column;gap:1rem}.mc-file-uploader__hidden-input{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);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{width:25rem}.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"] }]
413
+ ], 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;width:18rem}.mc-file-uploader__files-list{display:flex;flex-direction:column;gap:1rem}.mc-file-uploader__hidden-input{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);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{width:25rem}.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"] }]
413
414
  }], 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"] }] } });
414
415
 
415
416
  class MozFileUploaderComponent {
@@ -652,11 +653,11 @@ class MozModalHeaderComponent {
652
653
  closable = input(true, ...(ngDevMode ? [{ debugName: "closable" }] : []));
653
654
  closeClick = output();
654
655
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
655
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozModalHeaderComponent, isStandalone: true, selector: "moz-modal-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleId: { classPropertyName: "titleId", publicName: "titleId", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeClick: "closeClick" }, ngImport: i0, template: "<header class=\"modal__header\">\n <span class=\"modal__icon\">\n <ng-content select=\"[icon]\" />\n </span>\n\n <h2 class=\"modal__title\" [id]=\"titleId()\">\n {{ title() }}\n </h2>\n\n @if (closable()) {\n <moz-icon-button\n class=\"modal__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (click)=\"closeClick.emit()\"\n >\n <Cross24 icon aria-hidden=\"true\" />\n </moz-icon-button>\n }\n</header>\n", styles: [".mc-modal{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:var(--modal-z-index, 3);display:flex;justify-content:center;align-items:flex-end;overflow:hidden auto}@media(width>=680px){.mc-modal{align-items:center}}.mc-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:3}@media(width>=680px){.mc-modal__dialog{width:38rem;border-radius:var(--border-radius-l, 1rem)}}.mc-modal.is-open .mc-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}.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{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{padding:0 1.5rem}}.mc-modal__body p{margin:0;line-height:var(--line-height-s, 1.3)}.mc-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{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}.modal__icon:empty{display:none}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["color", "hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
656
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozModalHeaderComponent, isStandalone: true, selector: "moz-modal-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleId: { classPropertyName: "titleId", publicName: "titleId", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeClick: "closeClick" }, ngImport: i0, template: "<header class=\"modal__header\">\n <span class=\"modal__icon\">\n <ng-content select=\"[icon]\" />\n </span>\n\n <h2 class=\"modal__title\" [id]=\"titleId()\">\n {{ title() }}\n </h2>\n\n @if (closable()) {\n <moz-icon-button\n class=\"modal__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (click)=\"closeClick.emit()\"\n [id]=\"'modal-close-button'\"\n >\n <Cross24 icon aria-hidden=\"true\" />\n </moz-icon-button>\n }\n</header>\n", styles: [".mc-modal{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:var(--modal-z-index, 3);display:flex;justify-content:center;align-items:flex-end;overflow:hidden auto}@media(width>=680px){.mc-modal{align-items:center}}.mc-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:3}@media(width>=680px){.mc-modal__dialog{width:38rem;border-radius:var(--border-radius-l, 1rem)}}.mc-modal.is-open .mc-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}.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{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{padding:0 1.5rem}}.mc-modal__body p{margin:0;line-height:var(--line-height-s, 1.3)}.mc-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{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}.modal__icon:empty{display:none}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["color", "hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
656
657
  }
657
658
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozModalHeaderComponent, decorators: [{
658
659
  type: Component,
659
- args: [{ selector: 'moz-modal-header', imports: [MozIconButtonComponent, Cross24], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"modal__header\">\n <span class=\"modal__icon\">\n <ng-content select=\"[icon]\" />\n </span>\n\n <h2 class=\"modal__title\" [id]=\"titleId()\">\n {{ title() }}\n </h2>\n\n @if (closable()) {\n <moz-icon-button\n class=\"modal__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (click)=\"closeClick.emit()\"\n >\n <Cross24 icon aria-hidden=\"true\" />\n </moz-icon-button>\n }\n</header>\n", styles: [".mc-modal{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:var(--modal-z-index, 3);display:flex;justify-content:center;align-items:flex-end;overflow:hidden auto}@media(width>=680px){.mc-modal{align-items:center}}.mc-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:3}@media(width>=680px){.mc-modal__dialog{width:38rem;border-radius:var(--border-radius-l, 1rem)}}.mc-modal.is-open .mc-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}.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{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{padding:0 1.5rem}}.mc-modal__body p{margin:0;line-height:var(--line-height-s, 1.3)}.mc-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{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}.modal__icon:empty{display:none}\n"] }]
660
+ args: [{ selector: 'moz-modal-header', imports: [MozIconButtonComponent, Cross24], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"modal__header\">\n <span class=\"modal__icon\">\n <ng-content select=\"[icon]\" />\n </span>\n\n <h2 class=\"modal__title\" [id]=\"titleId()\">\n {{ title() }}\n </h2>\n\n @if (closable()) {\n <moz-icon-button\n class=\"modal__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (click)=\"closeClick.emit()\"\n [id]=\"'modal-close-button'\"\n >\n <Cross24 icon aria-hidden=\"true\" />\n </moz-icon-button>\n }\n</header>\n", styles: [".mc-modal{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:var(--modal-z-index, 3);display:flex;justify-content:center;align-items:flex-end;overflow:hidden auto}@media(width>=680px){.mc-modal{align-items:center}}.mc-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:3}@media(width>=680px){.mc-modal__dialog{width:38rem;border-radius:var(--border-radius-l, 1rem)}}.mc-modal.is-open .mc-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}.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{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{padding:0 1.5rem}}.mc-modal__body p{margin:0;line-height:var(--line-height-s, 1.3)}.mc-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{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}.modal__icon:empty{display:none}\n"] }]
660
661
  }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleId", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closeClick: [{ type: i0.Output, args: ["closeClick"] }] } });
661
662
 
662
663
  class MozModalBodyComponent {
@@ -1042,7 +1043,7 @@ class MozPaginationComponent {
1042
1043
  this.updateValue.emit(+value);
1043
1044
  }
1044
1045
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1045
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozPaginationComponent, isStandalone: true, selector: "moz-pagination", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateValue: "updateValue" }, ngImport: i0, template: "<nav class=\"pagination\" role=\"navigation\">\n @if (!compact()) {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Previous page\"\n [disabled]=\"isFirstPage()\"\n (click)=\"previous()\"\n >\n <ChevronLeft24 icon />\n </button>\n } @else {\n <moz-icon-button aria-label=\"Previous page\" [disabled]=\"isFirstPage()\" (click)=\"previous()\">\n <ChevronLeft24 icon />\n </moz-icon-button>\n } @if (!compact()) {\n <div class=\"pagination__field\">\n <moz-select\n class=\"pagination__select\"\n [id]=\"id()\"\n [name]=\"id()\"\n [options]=\"options()\"\n [ngModel]=\"_currentValue()\"\n (ngModelChange)=\"onSelectChange($event)\"\n [ariaLabel]=\"selectLabel()\"\n />\n </div>\n } @else {\n <span class=\"pagination__label\" aria-current=\"page\">\n {{ currentPageText() }}\n </span>\n } @if (!compact()) {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Next page\"\n [disabled]=\"isLastPage()\"\n (click)=\"next()\"\n >\n <ChevronRight24 icon />\n </button>\n } @else {\n <moz-icon-button aria-label=\"Next page\" [disabled]=\"isLastPage()\" (click)=\"next()\">\n <ChevronRight24 icon />\n </moz-icon-button>\n }\n</nav>\n", styles: [".mc-pagination,.pagination{align-items:center;display:flex;justify-content:center;gap:.5rem}.mc-pagination__label,.pagination__label{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "component", type: ChevronLeft24, selector: "ChevronLeft24", inputs: ["color", "hostClass"] }, { kind: "component", type: ChevronRight24, selector: "ChevronRight24", inputs: ["color", "hostClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1046
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozPaginationComponent, isStandalone: true, selector: "moz-pagination", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateValue: "updateValue" }, ngImport: i0, template: "<nav class=\"pagination\" role=\"navigation\">\n @if (!compact()) {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Previous page\"\n [disabled]=\"isFirstPage()\"\n (click)=\"previous()\"\n >\n <ChevronLeft24 icon />\n </button>\n } @else {\n <moz-icon-button\n aria-label=\"Previous page\"\n [disabled]=\"isFirstPage()\"\n (click)=\"previous()\"\n [id]=\"'pagination-previous-button'\"\n >\n <ChevronLeft24 icon />\n </moz-icon-button>\n } @if (!compact()) {\n <div class=\"pagination__field\">\n <moz-select\n class=\"pagination__select\"\n [id]=\"id()\"\n [name]=\"id()\"\n [options]=\"options()\"\n [ngModel]=\"_currentValue()\"\n (ngModelChange)=\"onSelectChange($event)\"\n [ariaLabel]=\"selectLabel()\"\n />\n </div>\n } @else {\n <span class=\"pagination__label\" aria-current=\"page\">\n {{ currentPageText() }}\n </span>\n } @if (!compact()) {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Next page\"\n [disabled]=\"isLastPage()\"\n (click)=\"next()\"\n >\n <ChevronRight24 icon />\n </button>\n } @else {\n <moz-icon-button\n aria-label=\"Next page\"\n [disabled]=\"isLastPage()\"\n (click)=\"next()\"\n [id]=\"'pagination-next-button'\"\n >\n <ChevronRight24 icon />\n </moz-icon-button>\n }\n</nav>\n", styles: [".mc-pagination,.pagination{align-items:center;display:flex;justify-content:center;gap:.5rem}.mc-pagination__label,.pagination__label{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "component", type: ChevronLeft24, selector: "ChevronLeft24", inputs: ["color", "hostClass"] }, { kind: "component", type: ChevronRight24, selector: "ChevronRight24", inputs: ["color", "hostClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1046
1047
  }
1047
1048
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozPaginationComponent, decorators: [{
1048
1049
  type: Component,
@@ -1053,7 +1054,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
1053
1054
  ChevronLeft24,
1054
1055
  ChevronRight24,
1055
1056
  FormsModule,
1056
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"pagination\" role=\"navigation\">\n @if (!compact()) {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Previous page\"\n [disabled]=\"isFirstPage()\"\n (click)=\"previous()\"\n >\n <ChevronLeft24 icon />\n </button>\n } @else {\n <moz-icon-button aria-label=\"Previous page\" [disabled]=\"isFirstPage()\" (click)=\"previous()\">\n <ChevronLeft24 icon />\n </moz-icon-button>\n } @if (!compact()) {\n <div class=\"pagination__field\">\n <moz-select\n class=\"pagination__select\"\n [id]=\"id()\"\n [name]=\"id()\"\n [options]=\"options()\"\n [ngModel]=\"_currentValue()\"\n (ngModelChange)=\"onSelectChange($event)\"\n [ariaLabel]=\"selectLabel()\"\n />\n </div>\n } @else {\n <span class=\"pagination__label\" aria-current=\"page\">\n {{ currentPageText() }}\n </span>\n } @if (!compact()) {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Next page\"\n [disabled]=\"isLastPage()\"\n (click)=\"next()\"\n >\n <ChevronRight24 icon />\n </button>\n } @else {\n <moz-icon-button aria-label=\"Next page\" [disabled]=\"isLastPage()\" (click)=\"next()\">\n <ChevronRight24 icon />\n </moz-icon-button>\n }\n</nav>\n", styles: [".mc-pagination,.pagination{align-items:center;display:flex;justify-content:center;gap:.5rem}.mc-pagination__label,.pagination__label{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}\n"] }]
1057
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"pagination\" role=\"navigation\">\n @if (!compact()) {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Previous page\"\n [disabled]=\"isFirstPage()\"\n (click)=\"previous()\"\n >\n <ChevronLeft24 icon />\n </button>\n } @else {\n <moz-icon-button\n aria-label=\"Previous page\"\n [disabled]=\"isFirstPage()\"\n (click)=\"previous()\"\n [id]=\"'pagination-previous-button'\"\n >\n <ChevronLeft24 icon />\n </moz-icon-button>\n } @if (!compact()) {\n <div class=\"pagination__field\">\n <moz-select\n class=\"pagination__select\"\n [id]=\"id()\"\n [name]=\"id()\"\n [options]=\"options()\"\n [ngModel]=\"_currentValue()\"\n (ngModelChange)=\"onSelectChange($event)\"\n [ariaLabel]=\"selectLabel()\"\n />\n </div>\n } @else {\n <span class=\"pagination__label\" aria-current=\"page\">\n {{ currentPageText() }}\n </span>\n } @if (!compact()) {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Next page\"\n [disabled]=\"isLastPage()\"\n (click)=\"next()\"\n >\n <ChevronRight24 icon />\n </button>\n } @else {\n <moz-icon-button\n aria-label=\"Next page\"\n [disabled]=\"isLastPage()\"\n (click)=\"next()\"\n [id]=\"'pagination-next-button'\"\n >\n <ChevronRight24 icon />\n </moz-icon-button>\n }\n</nav>\n", styles: [".mc-pagination,.pagination{align-items:center;display:flex;justify-content:center;gap:.5rem}.mc-pagination__label,.pagination__label{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}\n"] }]
1057
1058
  }], 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 }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], updateValue: [{ type: i0.Output, args: ["updateValue"] }] } });
1058
1059
 
1059
1060
  /**
@@ -1592,20 +1593,21 @@ class MozStatusNotificationComponent {
1592
1593
  this.closed.emit();
1593
1594
  }
1594
1595
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozStatusNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1595
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozStatusNotificationComponent, isStandalone: true, selector: "moz-status-notification", inputs: { 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()\">\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 (click)=\"onCloseClick()\"\n ariaLabel=\"Close notification\"\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)}.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)}.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)}.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)}.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)}.mc-status-notification-closable__close{margin:.25rem}\n"], dependencies: [{ kind: "component", type: Cross20, selector: "Cross20", inputs: ["color", "hostClass"] }, { kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { 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 });
1596
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozStatusNotificationComponent, isStandalone: true, selector: "moz-status-notification", inputs: { 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()\">\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 (click)=\"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)}.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)}.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)}.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)}.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)}.mc-status-notification-closable__close{margin:.25rem}\n"], dependencies: [{ kind: "component", type: Cross20, selector: "Cross20", inputs: ["color", "hostClass"] }, { kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { 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 });
1596
1597
  }
1597
1598
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozStatusNotificationComponent, decorators: [{
1598
1599
  type: Component,
1599
- args: [{ selector: 'moz-status-notification', changeDetection: ChangeDetectionStrategy.OnPush, imports: [Cross20, MozIconButtonComponent, NgComponentOutlet, NgTemplateOutlet], template: "<section role=\"status\" [class]=\"classes()\">\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 (click)=\"onCloseClick()\"\n ariaLabel=\"Close notification\"\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)}.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)}.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)}.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)}.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)}.mc-status-notification-closable__close{margin:.25rem}\n"] }]
1600
+ args: [{ selector: 'moz-status-notification', changeDetection: ChangeDetectionStrategy.OnPush, imports: [Cross20, MozIconButtonComponent, NgComponentOutlet, NgTemplateOutlet], template: "<section role=\"status\" [class]=\"classes()\">\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 (click)=\"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)}.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)}.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)}.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)}.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)}.mc-status-notification-closable__close{margin:.25rem}\n"] }]
1600
1601
  }], propDecorators: { 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 }] }] } });
1601
1602
 
1602
1603
  class MozTabComponent {
1604
+ id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
1603
1605
  label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
1604
1606
  icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
1605
1607
  disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
1606
1608
  routerLink = input(...(ngDevMode ? [undefined, { debugName: "routerLink" }] : []));
1607
1609
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1608
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: MozTabComponent, isStandalone: true, selector: "moz-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1610
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: MozTabComponent, isStandalone: true, selector: "moz-tab", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1609
1611
  }
1610
1612
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozTabComponent, decorators: [{
1611
1613
  type: Component,
@@ -1614,7 +1616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
1614
1616
  template: `<ng-content></ng-content>`,
1615
1617
  changeDetection: ChangeDetectionStrategy.OnPush,
1616
1618
  }]
1617
- }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }] } });
1619
+ }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }] } });
1618
1620
 
1619
1621
  class MozTabsComponent {
1620
1622
  tabs;
@@ -1684,11 +1686,11 @@ class MozTabsComponent {
1684
1686
  }
1685
1687
  }
1686
1688
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1687
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozTabsComponent, isStandalone: true, selector: "moz-tabs", inputs: { description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, centered: { classPropertyName: "centered", publicName: "centered", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, tabsInput: { classPropertyName: "tabsInput", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectedIndexChange: "selectedIndexChange" }, queries: [{ propertyName: "tabs", predicate: MozTabComponent }], ngImport: i0, template: "<nav [class]=\"classes()\" aria-label=\"Tabs\">\n <ul class=\"tabs__list\" role=\"tablist\" [attr.aria-label]=\"description()\">\n @if (hasVirtualTabs()) { @for (tab of virtualTabs(); let index = $index; track index) {\n <li class=\"tabs__item\" role=\"presentation\">\n @if (tab.routerLink) {\n <button\n type=\"button\"\n role=\"tab\"\n [class]=\"getVirtualTabClasses(index)()\"\n [routerLink]=\"tab.routerLink\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n </button>\n } @else {\n <button\n type=\"button\"\n role=\"tab\"\n [class]=\"getVirtualTabClasses(index)()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickVirtualTab(index, tab)\"\n >\n @if (tab.icon) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n </button>\n }\n </li>\n } } @else { @for (tab of tabsArray(); let index = $index; track index) {\n <li class=\"tabs__item\" role=\"presentation\">\n @if (tab.routerLink()) {\n <button\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabClasses(index)()\"\n [routerLink]=\"tab.routerLink()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon()) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label() }}</span>\n </div>\n </button>\n } @else {\n <button\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabClasses(index)()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon()) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label() }}</span>\n </div>\n </button>\n }\n </li>\n } }\n </ul>\n\n @if (divider()) {\n <moz-divider></moz-divider>\n }\n</nav>\n", styles: [".mc-tabs,.tabs{background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem}.mc-tabs__list,.tabs__list{list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:.5rem;padding:var(--tabs-list-padding, .5rem .25rem)}.mc-tabs__tab,.tabs__tab{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);align-items:center;background:none;border:none;border-radius:var(--border-radius-s, .25rem);color:var(--tabs-color-text-default, #404040);cursor:pointer;display:flex;gap:.25rem;height:2.5rem;justify-content:center;outline:none;padding-left:.75rem;padding-right:.75rem;position:relative;text-decoration:none}.mc-tabs__tab:hover,.tabs__tab:hover{background-color:var(--tabs-color-background-hover, rgba(0, 0, 0, .05))}.mc-tabs__tab:focus-visible,.tabs__tab: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-tabs__tab--selected,.tabs__tab--selected{color:var(--tabs-color-text-selected, #006902);background-color:var(--tabs-color-background-selected, #ebf5de)}.mc-tabs__tab--selected:hover,.tabs__tab--selected:hover{background-color:var(--tabs-color-background-selected-hover, #c5e39e)}.mc-tabs__tab--disabled,.tabs__tab--disabled{color:var(--tabs-color-text-disabled, #b3b3b3);cursor:not-allowed}.mc-tabs__tab--disabled:hover,.tabs__tab--disabled:hover{background:none}.mc-tabs__label,.tabs__label{pointer-events:none}.mc-tabs__icon,.tabs__icon{fill:currentcolor;height:1.5rem;width:1.5rem}.mc-tabs--centered .mc-tabs__list,.tabs--centered .mc-tabs__list,.mc-tabs--centered .tabs__list,.tabs--centered .tabs__list{justify-content:center}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MozDividerComponent, selector: "moz-divider", inputs: ["orientation", "appearance", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1689
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozTabsComponent, isStandalone: true, selector: "moz-tabs", inputs: { description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, centered: { classPropertyName: "centered", publicName: "centered", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, tabsInput: { classPropertyName: "tabsInput", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectedIndexChange: "selectedIndexChange" }, queries: [{ propertyName: "tabs", predicate: MozTabComponent }], ngImport: i0, template: "<nav [class]=\"classes()\" aria-label=\"Tabs\">\n <ul class=\"tabs__list\" role=\"tablist\" [attr.aria-label]=\"description()\">\n @if (hasVirtualTabs()) { @for (tab of virtualTabs(); let index = $index; track index) {\n <li class=\"tabs__item\" role=\"presentation\">\n @if (tab.routerLink) {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tab.id\"\n [class]=\"getVirtualTabClasses(index)()\"\n [routerLink]=\"tab.routerLink\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n </button>\n } @else {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tab.id\"\n [class]=\"getVirtualTabClasses(index)()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickVirtualTab(index, tab)\"\n >\n @if (tab.icon) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n </button>\n }\n </li>\n } } @else { @for (tab of tabsArray(); let index = $index; track index) {\n <li class=\"tabs__item\" role=\"presentation\">\n @if (tab.routerLink()) {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tab.id()\"\n [class]=\"getTabClasses(index)()\"\n [routerLink]=\"tab.routerLink()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon()) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label() }}</span>\n </div>\n </button>\n } @else {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tab.id()\"\n [class]=\"getTabClasses(index)()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon()) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label() }}</span>\n </div>\n </button>\n }\n </li>\n } }\n </ul>\n\n @if (divider()) {\n <moz-divider></moz-divider>\n }\n</nav>\n", styles: [".mc-tabs,.tabs{background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem}.mc-tabs__list,.tabs__list{list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:.5rem;padding:var(--tabs-list-padding, .5rem .25rem)}.mc-tabs__tab,.tabs__tab{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);align-items:center;background:none;border:none;border-radius:var(--border-radius-s, .25rem);color:var(--tabs-color-text-default, #404040);cursor:pointer;display:flex;gap:.25rem;height:2.5rem;justify-content:center;outline:none;padding-left:.75rem;padding-right:.75rem;position:relative;text-decoration:none}.mc-tabs__tab:hover,.tabs__tab:hover{background-color:var(--tabs-color-background-hover, rgba(0, 0, 0, .05))}.mc-tabs__tab:focus-visible,.tabs__tab: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-tabs__tab--selected,.tabs__tab--selected{color:var(--tabs-color-text-selected, #006902);background-color:var(--tabs-color-background-selected, #ebf5de)}.mc-tabs__tab--selected:hover,.tabs__tab--selected:hover{background-color:var(--tabs-color-background-selected-hover, #c5e39e)}.mc-tabs__tab--disabled,.tabs__tab--disabled{color:var(--tabs-color-text-disabled, #b3b3b3);cursor:not-allowed}.mc-tabs__tab--disabled:hover,.tabs__tab--disabled:hover{background:none}.mc-tabs__label,.tabs__label{pointer-events:none}.mc-tabs__icon,.tabs__icon{fill:currentcolor;height:1.5rem;width:1.5rem}.mc-tabs--centered .mc-tabs__list,.tabs--centered .mc-tabs__list,.mc-tabs--centered .tabs__list,.tabs--centered .tabs__list{justify-content:center}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MozDividerComponent, selector: "moz-divider", inputs: ["orientation", "appearance", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1688
1690
  }
1689
1691
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozTabsComponent, decorators: [{
1690
1692
  type: Component,
1691
- args: [{ selector: 'moz-tabs', imports: [NgComponentOutlet, RouterLink, MozDividerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [class]=\"classes()\" aria-label=\"Tabs\">\n <ul class=\"tabs__list\" role=\"tablist\" [attr.aria-label]=\"description()\">\n @if (hasVirtualTabs()) { @for (tab of virtualTabs(); let index = $index; track index) {\n <li class=\"tabs__item\" role=\"presentation\">\n @if (tab.routerLink) {\n <button\n type=\"button\"\n role=\"tab\"\n [class]=\"getVirtualTabClasses(index)()\"\n [routerLink]=\"tab.routerLink\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n </button>\n } @else {\n <button\n type=\"button\"\n role=\"tab\"\n [class]=\"getVirtualTabClasses(index)()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickVirtualTab(index, tab)\"\n >\n @if (tab.icon) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n </button>\n }\n </li>\n } } @else { @for (tab of tabsArray(); let index = $index; track index) {\n <li class=\"tabs__item\" role=\"presentation\">\n @if (tab.routerLink()) {\n <button\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabClasses(index)()\"\n [routerLink]=\"tab.routerLink()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon()) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label() }}</span>\n </div>\n </button>\n } @else {\n <button\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabClasses(index)()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon()) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label() }}</span>\n </div>\n </button>\n }\n </li>\n } }\n </ul>\n\n @if (divider()) {\n <moz-divider></moz-divider>\n }\n</nav>\n", styles: [".mc-tabs,.tabs{background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem}.mc-tabs__list,.tabs__list{list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:.5rem;padding:var(--tabs-list-padding, .5rem .25rem)}.mc-tabs__tab,.tabs__tab{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);align-items:center;background:none;border:none;border-radius:var(--border-radius-s, .25rem);color:var(--tabs-color-text-default, #404040);cursor:pointer;display:flex;gap:.25rem;height:2.5rem;justify-content:center;outline:none;padding-left:.75rem;padding-right:.75rem;position:relative;text-decoration:none}.mc-tabs__tab:hover,.tabs__tab:hover{background-color:var(--tabs-color-background-hover, rgba(0, 0, 0, .05))}.mc-tabs__tab:focus-visible,.tabs__tab: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-tabs__tab--selected,.tabs__tab--selected{color:var(--tabs-color-text-selected, #006902);background-color:var(--tabs-color-background-selected, #ebf5de)}.mc-tabs__tab--selected:hover,.tabs__tab--selected:hover{background-color:var(--tabs-color-background-selected-hover, #c5e39e)}.mc-tabs__tab--disabled,.tabs__tab--disabled{color:var(--tabs-color-text-disabled, #b3b3b3);cursor:not-allowed}.mc-tabs__tab--disabled:hover,.tabs__tab--disabled:hover{background:none}.mc-tabs__label,.tabs__label{pointer-events:none}.mc-tabs__icon,.tabs__icon{fill:currentcolor;height:1.5rem;width:1.5rem}.mc-tabs--centered .mc-tabs__list,.tabs--centered .mc-tabs__list,.mc-tabs--centered .tabs__list,.tabs--centered .tabs__list{justify-content:center}\n"] }]
1693
+ args: [{ selector: 'moz-tabs', imports: [NgComponentOutlet, RouterLink, MozDividerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [class]=\"classes()\" aria-label=\"Tabs\">\n <ul class=\"tabs__list\" role=\"tablist\" [attr.aria-label]=\"description()\">\n @if (hasVirtualTabs()) { @for (tab of virtualTabs(); let index = $index; track index) {\n <li class=\"tabs__item\" role=\"presentation\">\n @if (tab.routerLink) {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tab.id\"\n [class]=\"getVirtualTabClasses(index)()\"\n [routerLink]=\"tab.routerLink\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n </button>\n } @else {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tab.id\"\n [class]=\"getVirtualTabClasses(index)()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickVirtualTab(index, tab)\"\n >\n @if (tab.icon) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n </button>\n }\n </li>\n } } @else { @for (tab of tabsArray(); let index = $index; track index) {\n <li class=\"tabs__item\" role=\"presentation\">\n @if (tab.routerLink()) {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tab.id()\"\n [class]=\"getTabClasses(index)()\"\n [routerLink]=\"tab.routerLink()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon()) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label() }}</span>\n </div>\n </button>\n } @else {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tab.id()\"\n [class]=\"getTabClasses(index)()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon()) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label() }}</span>\n </div>\n </button>\n }\n </li>\n } }\n </ul>\n\n @if (divider()) {\n <moz-divider></moz-divider>\n }\n</nav>\n", styles: [".mc-tabs,.tabs{background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem}.mc-tabs__list,.tabs__list{list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:.5rem;padding:var(--tabs-list-padding, .5rem .25rem)}.mc-tabs__tab,.tabs__tab{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);align-items:center;background:none;border:none;border-radius:var(--border-radius-s, .25rem);color:var(--tabs-color-text-default, #404040);cursor:pointer;display:flex;gap:.25rem;height:2.5rem;justify-content:center;outline:none;padding-left:.75rem;padding-right:.75rem;position:relative;text-decoration:none}.mc-tabs__tab:hover,.tabs__tab:hover{background-color:var(--tabs-color-background-hover, rgba(0, 0, 0, .05))}.mc-tabs__tab:focus-visible,.tabs__tab: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-tabs__tab--selected,.tabs__tab--selected{color:var(--tabs-color-text-selected, #006902);background-color:var(--tabs-color-background-selected, #ebf5de)}.mc-tabs__tab--selected:hover,.tabs__tab--selected:hover{background-color:var(--tabs-color-background-selected-hover, #c5e39e)}.mc-tabs__tab--disabled,.tabs__tab--disabled{color:var(--tabs-color-text-disabled, #b3b3b3);cursor:not-allowed}.mc-tabs__tab--disabled:hover,.tabs__tab--disabled:hover{background:none}.mc-tabs__label,.tabs__label{pointer-events:none}.mc-tabs__icon,.tabs__icon{fill:currentcolor;height:1.5rem;width:1.5rem}.mc-tabs--centered .mc-tabs__list,.tabs--centered .mc-tabs__list,.mc-tabs--centered .tabs__list,.tabs--centered .tabs__list{justify-content:center}\n"] }]
1692
1694
  }], ctorParameters: () => [], propDecorators: { tabs: [{
1693
1695
  type: ContentChildren,
1694
1696
  args: [MozTabComponent]
@@ -2749,7 +2751,7 @@ class MozToasterComponent {
2749
2751
  }
2750
2752
  }
2751
2753
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2752
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 (click)=\"onCloseClick()\"\n [appearance]=\"'inverse'\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n >\n <Cross20 icon />\n </moz-icon-button>\n } @if (progress() && timeout() && timeout()! > 0) {\n <moz-linear-progress-bar-buffer\n class=\"mc-toaster__indicator\"\n [valuePercent]=\"progressValue()\"\n size=\"m\"\n >\n </moz-linear-progress-bar-buffer>\n }\n</section>\n", styles: [".mc-toaster{border-radius:var(--border-radius-m, .5rem);background:var(--toaster-color-background-info, #002a41);display:flex;flex-flow:row wrap;align-items:flex-start;min-height:3.5rem;min-width:18rem;position:absolute;top:1.5rem;right:1.5rem;margin-left:1.5rem;box-sizing:border-box;color:var(--toaster-color-text, #ffffff);z-index:var(--toaster-z-index, 4);opacity:0;visibility:hidden;transform:translate(25%);transition:visibility 0s linear .4s,transform .4s ease-in-out,opacity .4s ease-in-out}.mc-toaster.is-open{opacity:1;visibility:visible;transform:translate(0)}.mc-toaster__icon{width:2rem;height:2rem;margin:.75rem;fill:var(--toaster-color-icon-info, #3facd7)}.mc-toaster__content{flex:1 1 0;flex-direction:column;align-self:stretch;display:flex;align-items:flex-start;gap:1rem;padding:.75rem 1rem .75rem 0}@media(width>=680px){.mc-toaster__content{flex-direction:row;align-items:center}}.mc-toaster__message{flex:1 1 0;margin:0;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3)}.mc-toaster--information{background:var(--toaster-color-background-info, #002a41)}.mc-toaster--information .mc-toaster__icon{fill:var(--toaster-color-icon-info, #3facd7)}.mc-toaster--information .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7)}.mc-toaster--success{background:var(--toaster-color-background-success, #023618)}.mc-toaster--success .mc-toaster__icon{fill:var(--toaster-color-icon-success, #78be20)}.mc-toaster--success .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-success, #78be20)}.mc-toaster--warning{background:var(--toaster-color-background-warning, #360e00)}.mc-toaster--warning .mc-toaster__icon{fill:var(--toaster-color-icon-warning, #ef934a)}.mc-toaster--warning .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-warning, #ef934a)}.mc-toaster--error{background:var(--toaster-color-background-error, #2d0000)}.mc-toaster--error .mc-toaster__icon{fill:var(--toaster-color-icon-error, #ef5f5c)}.mc-toaster--error .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-error, #ef5f5c)}.mc-toaster--bottom{top:inherit;bottom:1.5rem;right:1.5rem}.mc-toaster--top-center{top:1.5rem;right:50%;transform:translate(50%)!important}.mc-toaster--bottom-center{top:inherit;bottom:1.5rem;right:50%;transform:translate(50%)!important}.mc-toaster__indicator{width:100%;margin:.5rem;--progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7);--progressbar-color-background: var(--color-background-primary, #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: ["color", "hostClass"] }, { kind: "component", type: WarningCircleFilled32, selector: "WarningCircleFilled32", inputs: ["color", "hostClass"] }, { kind: "component", type: CrossCircleFilled32, selector: "CrossCircleFilled32", inputs: ["color", "hostClass"] }, { kind: "component", type: InfoCircleFilled32, selector: "InfoCircleFilled32", inputs: ["color", "hostClass"] }, { kind: "component", type: Cross20, selector: "Cross20", inputs: ["color", "hostClass"] }, { kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2754
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 (click)=\"onCloseClick()\"\n [appearance]=\"'inverse'\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n [id]=\"'toaster-close-button'\"\n >\n <Cross20 icon />\n </moz-icon-button>\n } @if (progress() && timeout() && timeout()! > 0) {\n <moz-linear-progress-bar-buffer\n class=\"mc-toaster__indicator\"\n [valuePercent]=\"progressValue()\"\n size=\"m\"\n >\n </moz-linear-progress-bar-buffer>\n }\n</section>\n", styles: [".mc-toaster{border-radius:var(--border-radius-m, .5rem);background:var(--toaster-color-background-info, #002a41);display:flex;flex-flow:row wrap;align-items:flex-start;min-height:3.5rem;min-width:18rem;position:absolute;top:1.5rem;right:1.5rem;margin-left:1.5rem;box-sizing:border-box;color:var(--toaster-color-text, #ffffff);z-index:var(--toaster-z-index, 4);opacity:0;visibility:hidden;transform:translate(25%);transition:visibility 0s linear .4s,transform .4s ease-in-out,opacity .4s ease-in-out}.mc-toaster.is-open{opacity:1;visibility:visible;transform:translate(0)}.mc-toaster__icon{width:2rem;height:2rem;margin:.75rem;fill:var(--toaster-color-icon-info, #3facd7)}.mc-toaster__content{flex:1 1 0;flex-direction:column;align-self:stretch;display:flex;align-items:flex-start;gap:1rem;padding:.75rem 1rem .75rem 0}@media(width>=680px){.mc-toaster__content{flex-direction:row;align-items:center}}.mc-toaster__message{flex:1 1 0;margin:0;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3)}.mc-toaster--information{background:var(--toaster-color-background-info, #002a41)}.mc-toaster--information .mc-toaster__icon{fill:var(--toaster-color-icon-info, #3facd7)}.mc-toaster--information .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7)}.mc-toaster--success{background:var(--toaster-color-background-success, #023618)}.mc-toaster--success .mc-toaster__icon{fill:var(--toaster-color-icon-success, #78be20)}.mc-toaster--success .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-success, #78be20)}.mc-toaster--warning{background:var(--toaster-color-background-warning, #360e00)}.mc-toaster--warning .mc-toaster__icon{fill:var(--toaster-color-icon-warning, #ef934a)}.mc-toaster--warning .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-warning, #ef934a)}.mc-toaster--error{background:var(--toaster-color-background-error, #2d0000)}.mc-toaster--error .mc-toaster__icon{fill:var(--toaster-color-icon-error, #ef5f5c)}.mc-toaster--error .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-error, #ef5f5c)}.mc-toaster--bottom{top:inherit;bottom:1.5rem;right:1.5rem}.mc-toaster--top-center{top:1.5rem;right:50%;transform:translate(50%)!important}.mc-toaster--bottom-center{top:inherit;bottom:1.5rem;right:50%;transform:translate(50%)!important}.mc-toaster__indicator{width:100%;margin:.5rem;--progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7);--progressbar-color-background: var(--color-background-primary, #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: ["color", "hostClass"] }, { kind: "component", type: WarningCircleFilled32, selector: "WarningCircleFilled32", inputs: ["color", "hostClass"] }, { kind: "component", type: CrossCircleFilled32, selector: "CrossCircleFilled32", inputs: ["color", "hostClass"] }, { kind: "component", type: InfoCircleFilled32, selector: "InfoCircleFilled32", inputs: ["color", "hostClass"] }, { kind: "component", type: Cross20, selector: "Cross20", inputs: ["color", "hostClass"] }, { kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2753
2755
  }
2754
2756
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozToasterComponent, decorators: [{
2755
2757
  type: Component,
@@ -2761,7 +2763,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
2761
2763
  InfoCircleFilled32,
2762
2764
  Cross20,
2763
2765
  MozIconButtonComponent,
2764
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mc-toaster\" [class]=\"classes()\" [attr.role]=\"role()\">\n <div class=\"mc-toaster__icon\">\n @switch (status()) { @case ('success') {\n <CheckCircleFilled32 />\n } @case ('warning') {\n <WarningCircleFilled32 />\n } @case ('error') {\n <CrossCircleFilled32 />\n } @case ('info') {\n <InfoCircleFilled32 />\n } }\n </div>\n\n <div class=\"mc-toaster__content\">\n <p class=\"mc-toaster__message\">{{ description() }}</p>\n\n @if (hasAction) {\n <div class=\"mc-toaster__action\">\n <ng-content select=\"[action]\"></ng-content>\n </div>\n }\n </div>\n\n @if (closable()) {\n <moz-icon-button\n type=\"button\"\n [attr.aria-label]=\"closeAriaLabel()\"\n (click)=\"onCloseClick()\"\n [appearance]=\"'inverse'\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n >\n <Cross20 icon />\n </moz-icon-button>\n } @if (progress() && timeout() && timeout()! > 0) {\n <moz-linear-progress-bar-buffer\n class=\"mc-toaster__indicator\"\n [valuePercent]=\"progressValue()\"\n size=\"m\"\n >\n </moz-linear-progress-bar-buffer>\n }\n</section>\n", styles: [".mc-toaster{border-radius:var(--border-radius-m, .5rem);background:var(--toaster-color-background-info, #002a41);display:flex;flex-flow:row wrap;align-items:flex-start;min-height:3.5rem;min-width:18rem;position:absolute;top:1.5rem;right:1.5rem;margin-left:1.5rem;box-sizing:border-box;color:var(--toaster-color-text, #ffffff);z-index:var(--toaster-z-index, 4);opacity:0;visibility:hidden;transform:translate(25%);transition:visibility 0s linear .4s,transform .4s ease-in-out,opacity .4s ease-in-out}.mc-toaster.is-open{opacity:1;visibility:visible;transform:translate(0)}.mc-toaster__icon{width:2rem;height:2rem;margin:.75rem;fill:var(--toaster-color-icon-info, #3facd7)}.mc-toaster__content{flex:1 1 0;flex-direction:column;align-self:stretch;display:flex;align-items:flex-start;gap:1rem;padding:.75rem 1rem .75rem 0}@media(width>=680px){.mc-toaster__content{flex-direction:row;align-items:center}}.mc-toaster__message{flex:1 1 0;margin:0;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3)}.mc-toaster--information{background:var(--toaster-color-background-info, #002a41)}.mc-toaster--information .mc-toaster__icon{fill:var(--toaster-color-icon-info, #3facd7)}.mc-toaster--information .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7)}.mc-toaster--success{background:var(--toaster-color-background-success, #023618)}.mc-toaster--success .mc-toaster__icon{fill:var(--toaster-color-icon-success, #78be20)}.mc-toaster--success .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-success, #78be20)}.mc-toaster--warning{background:var(--toaster-color-background-warning, #360e00)}.mc-toaster--warning .mc-toaster__icon{fill:var(--toaster-color-icon-warning, #ef934a)}.mc-toaster--warning .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-warning, #ef934a)}.mc-toaster--error{background:var(--toaster-color-background-error, #2d0000)}.mc-toaster--error .mc-toaster__icon{fill:var(--toaster-color-icon-error, #ef5f5c)}.mc-toaster--error .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-error, #ef5f5c)}.mc-toaster--bottom{top:inherit;bottom:1.5rem;right:1.5rem}.mc-toaster--top-center{top:1.5rem;right:50%;transform:translate(50%)!important}.mc-toaster--bottom-center{top:inherit;bottom:1.5rem;right:50%;transform:translate(50%)!important}.mc-toaster__indicator{width:100%;margin:.5rem;--progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7);--progressbar-color-background: var(--color-background-primary, #ffffff)}.mc-toaster__close{margin:.25rem}\n"] }]
2766
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mc-toaster\" [class]=\"classes()\" [attr.role]=\"role()\">\n <div class=\"mc-toaster__icon\">\n @switch (status()) { @case ('success') {\n <CheckCircleFilled32 />\n } @case ('warning') {\n <WarningCircleFilled32 />\n } @case ('error') {\n <CrossCircleFilled32 />\n } @case ('info') {\n <InfoCircleFilled32 />\n } }\n </div>\n\n <div class=\"mc-toaster__content\">\n <p class=\"mc-toaster__message\">{{ description() }}</p>\n\n @if (hasAction) {\n <div class=\"mc-toaster__action\">\n <ng-content select=\"[action]\"></ng-content>\n </div>\n }\n </div>\n\n @if (closable()) {\n <moz-icon-button\n type=\"button\"\n [attr.aria-label]=\"closeAriaLabel()\"\n (click)=\"onCloseClick()\"\n [appearance]=\"'inverse'\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n [id]=\"'toaster-close-button'\"\n >\n <Cross20 icon />\n </moz-icon-button>\n } @if (progress() && timeout() && timeout()! > 0) {\n <moz-linear-progress-bar-buffer\n class=\"mc-toaster__indicator\"\n [valuePercent]=\"progressValue()\"\n size=\"m\"\n >\n </moz-linear-progress-bar-buffer>\n }\n</section>\n", styles: [".mc-toaster{border-radius:var(--border-radius-m, .5rem);background:var(--toaster-color-background-info, #002a41);display:flex;flex-flow:row wrap;align-items:flex-start;min-height:3.5rem;min-width:18rem;position:absolute;top:1.5rem;right:1.5rem;margin-left:1.5rem;box-sizing:border-box;color:var(--toaster-color-text, #ffffff);z-index:var(--toaster-z-index, 4);opacity:0;visibility:hidden;transform:translate(25%);transition:visibility 0s linear .4s,transform .4s ease-in-out,opacity .4s ease-in-out}.mc-toaster.is-open{opacity:1;visibility:visible;transform:translate(0)}.mc-toaster__icon{width:2rem;height:2rem;margin:.75rem;fill:var(--toaster-color-icon-info, #3facd7)}.mc-toaster__content{flex:1 1 0;flex-direction:column;align-self:stretch;display:flex;align-items:flex-start;gap:1rem;padding:.75rem 1rem .75rem 0}@media(width>=680px){.mc-toaster__content{flex-direction:row;align-items:center}}.mc-toaster__message{flex:1 1 0;margin:0;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3)}.mc-toaster--information{background:var(--toaster-color-background-info, #002a41)}.mc-toaster--information .mc-toaster__icon{fill:var(--toaster-color-icon-info, #3facd7)}.mc-toaster--information .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7)}.mc-toaster--success{background:var(--toaster-color-background-success, #023618)}.mc-toaster--success .mc-toaster__icon{fill:var(--toaster-color-icon-success, #78be20)}.mc-toaster--success .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-success, #78be20)}.mc-toaster--warning{background:var(--toaster-color-background-warning, #360e00)}.mc-toaster--warning .mc-toaster__icon{fill:var(--toaster-color-icon-warning, #ef934a)}.mc-toaster--warning .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-warning, #ef934a)}.mc-toaster--error{background:var(--toaster-color-background-error, #2d0000)}.mc-toaster--error .mc-toaster__icon{fill:var(--toaster-color-icon-error, #ef5f5c)}.mc-toaster--error .mc-toaster__indicator{--progressbar-color-indicator: var(--toaster-color-icon-error, #ef5f5c)}.mc-toaster--bottom{top:inherit;bottom:1.5rem;right:1.5rem}.mc-toaster--top-center{top:1.5rem;right:50%;transform:translate(50%)!important}.mc-toaster--bottom-center{top:inherit;bottom:1.5rem;right:50%;transform:translate(50%)!important}.mc-toaster__indicator{width:100%;margin:.5rem;--progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7);--progressbar-color-background: var(--color-background-primary, #ffffff)}.mc-toaster__close{margin:.25rem}\n"] }]
2765
2767
  }], 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 }] }] } });
2766
2768
 
2767
2769
  class MozSidebarComponent {
@@ -3079,11 +3081,11 @@ class MozCarouselComponent {
3079
3081
  root.scrollBy({ left: root.clientWidth, behavior: 'smooth' });
3080
3082
  }
3081
3083
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3082
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", 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 (click)=\"goPrevious()\"\n [disabled]=\"!canPrev()\"\n [ariaLabel]=\"previousButtonAriaLabel()\"\n [size]=\"'s'\"\n [outlined]=\"true\"\n >\n <ChevronLeft20 icon aria-hidden=\"true\" />\n </moz-icon-button>\n\n <moz-icon-button\n (click)=\"goNext()\"\n [disabled]=\"!canNext()\"\n [ariaLabel]=\"nextButtonAriaLabel()\"\n [size]=\"'s'\"\n [outlined]=\"true\"\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}.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: ["color", "hostClass"] }, { kind: "component", type: ChevronRight20, selector: "ChevronRight20", inputs: ["color", "hostClass"] }, { kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3084
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", 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 (click)=\"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 (click)=\"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}.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: ["color", "hostClass"] }, { kind: "component", type: ChevronRight20, selector: "ChevronRight20", inputs: ["color", "hostClass"] }, { kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3083
3085
  }
3084
3086
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozCarouselComponent, decorators: [{
3085
3087
  type: Component,
3086
- 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 (click)=\"goPrevious()\"\n [disabled]=\"!canPrev()\"\n [ariaLabel]=\"previousButtonAriaLabel()\"\n [size]=\"'s'\"\n [outlined]=\"true\"\n >\n <ChevronLeft20 icon aria-hidden=\"true\" />\n </moz-icon-button>\n\n <moz-icon-button\n (click)=\"goNext()\"\n [disabled]=\"!canNext()\"\n [ariaLabel]=\"nextButtonAriaLabel()\"\n [size]=\"'s'\"\n [outlined]=\"true\"\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}.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"] }]
3088
+ 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 (click)=\"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 (click)=\"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}.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"] }]
3087
3089
  }], 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 }] }] } });
3088
3090
 
3089
3091
  class MozStatusMessageComponent {
@@ -3631,7 +3633,7 @@ class MozPageHeaderComponent {
3631
3633
  this.activeTabChange.emit(index);
3632
3634
  }
3633
3635
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3634
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 [ghost]=\"true\" ariaLabel=\"Back button\" (click)=\"onBack()\">\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 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 [ghost]=\"true\" ariaLabel=\"Search button\" (click)=\"onSearch()\">\n <Search24 icon />\n </moz-icon-button>\n } @if (helpButton()) {\n <moz-icon-button [ghost]=\"true\" ariaLabel=\"Help button\" (click)=\"onHelp()\">\n <HelpCircle24 icon />\n </moz-icon-button>\n } @if (notificationButton()) {\n <moz-icon-button\n [ghost]=\"true\"\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: ["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: ["color", "hostClass"] }, { kind: "component", type: HelpCircle24, selector: "HelpCircle24", inputs: ["color", "hostClass"] }, { kind: "component", type: Menu24, selector: "Menu24", inputs: ["color", "hostClass"] }, { kind: "component", type: Notification24, selector: "Notification24", inputs: ["color", "hostClass"] }, { kind: "component", type: Search24, selector: "Search24", inputs: ["color", "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 });
3636
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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: ["color", "hostClass"] }, { kind: "component", type: HelpCircle24, selector: "HelpCircle24", inputs: ["color", "hostClass"] }, { kind: "component", type: Menu24, selector: "Menu24", inputs: ["color", "hostClass"] }, { kind: "component", type: Notification24, selector: "Notification24", inputs: ["color", "hostClass"] }, { kind: "component", type: Search24, selector: "Search24", inputs: ["color", "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 });
3635
3637
  }
3636
3638
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozPageHeaderComponent, decorators: [{
3637
3639
  type: Component,
@@ -3652,7 +3654,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
3652
3654
  MozSelectComponent,
3653
3655
  FormsModule,
3654
3656
  MozTabsComponent,
3655
- ], 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 [ghost]=\"true\" ariaLabel=\"Back button\" (click)=\"onBack()\">\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 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 [ghost]=\"true\" ariaLabel=\"Search button\" (click)=\"onSearch()\">\n <Search24 icon />\n </moz-icon-button>\n } @if (helpButton()) {\n <moz-icon-button [ghost]=\"true\" ariaLabel=\"Help button\" (click)=\"onHelp()\">\n <HelpCircle24 icon />\n </moz-icon-button>\n } @if (notificationButton()) {\n <moz-icon-button\n [ghost]=\"true\"\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"] }]
3657
+ ], 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"] }]
3656
3658
  }], 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"] }] } });
3657
3659
 
3658
3660
  class MozTileComponent {
@@ -3778,11 +3780,11 @@ class MozTileExpandableComponent {
3778
3780
  return cls.join(' ');
3779
3781
  }, ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
3780
3782
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozTileExpandableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3781
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 >\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-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--color-text-primary-inverse, %23ffffff)' 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\")}.mc-tile--inverse.mc-tile--open .mc-tile__action:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--color-text-primary-inverse, %23ffffff)' 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\")}.mc-tile--inverse.mc-tile--external-link .mc-tile__action:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--color-text-primary-inverse, %23ffffff)' 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\")}.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-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='currentColor' 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\")}.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-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='currentColor' 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\")}.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-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='currentColor' 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\")}.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-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='currentcolor' 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\");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:has(input:checked){box-shadow:0 0 0 2px var(--color-brand, #78be20),0 0 0 4px var(--color-background-accent, #ebf5de)}\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: ["appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { kind: "component", type: ChevronDown24, selector: "ChevronDown24", inputs: ["color", "hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3783
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--color-text-primary-inverse, %23ffffff)' 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\")}.mc-tile--inverse.mc-tile--open .mc-tile__action:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--color-text-primary-inverse, %23ffffff)' 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\")}.mc-tile--inverse.mc-tile--external-link .mc-tile__action:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--color-text-primary-inverse, %23ffffff)' 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\")}.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-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='currentColor' 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\")}.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-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='currentColor' 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\")}.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-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='currentColor' 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\")}.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-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='currentcolor' 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\");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:has(input:checked){box-shadow:0 0 0 2px var(--color-brand, #78be20),0 0 0 4px var(--color-background-accent, #ebf5de)}\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: ["color", "hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3782
3784
  }
3783
3785
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozTileExpandableComponent, decorators: [{
3784
3786
  type: Component,
3785
- 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 >\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-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--color-text-primary-inverse, %23ffffff)' 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\")}.mc-tile--inverse.mc-tile--open .mc-tile__action:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--color-text-primary-inverse, %23ffffff)' 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\")}.mc-tile--inverse.mc-tile--external-link .mc-tile__action:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--color-text-primary-inverse, %23ffffff)' 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\")}.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-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='currentColor' 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\")}.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-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='currentColor' 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\")}.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-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='currentColor' 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\")}.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-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='currentcolor' 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\");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:has(input:checked){box-shadow:0 0 0 2px var(--color-brand, #78be20),0 0 0 4px var(--color-background-accent, #ebf5de)}\n"] }]
3787
+ 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-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--color-text-primary-inverse, %23ffffff)' 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\")}.mc-tile--inverse.mc-tile--open .mc-tile__action:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--color-text-primary-inverse, %23ffffff)' 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\")}.mc-tile--inverse.mc-tile--external-link .mc-tile__action:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--color-text-primary-inverse, %23ffffff)' 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\")}.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-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='currentColor' 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\")}.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-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='currentColor' 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\")}.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-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='currentColor' 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\")}.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-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='currentcolor' 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\");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:has(input:checked){box-shadow:0 0 0 2px var(--color-brand, #78be20),0 0 0 4px var(--color-background-accent, #ebf5de)}\n"] }]
3786
3788
  }], propDecorators: { triggerMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerMode", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
3787
3789
 
3788
3790
  class MozDrawerComponent {
@@ -3824,11 +3826,11 @@ class MozDrawerComponent {
3824
3826
  this.close();
3825
3827
  }
3826
3828
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3827
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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=\"mc-drawer\"\n [ngClass]=\"classMap()\"\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 (click)=\"backClick()\"\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 class=\"mc-drawer__close\" aria-label=\"Close\" [ghost]=\"true\" (click)=\"close()\">\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}@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, 3);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, 2)}.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, 2)}.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: ["appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["color", "hostClass"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["color", "hostClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3829
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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=\"mc-drawer\"\n [ngClass]=\"classMap()\"\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 (click)=\"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 (click)=\"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}@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, 3);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, 2)}.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, 2)}.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"] }, { kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["color", "hostClass"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["color", "hostClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3828
3830
  }
3829
3831
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozDrawerComponent, decorators: [{
3830
3832
  type: Component,
3831
- args: [{ selector: 'moz-drawer', imports: [MozIconButtonComponent, ArrowBack24, Cross24, NgClass, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n class=\"mc-drawer\"\n [ngClass]=\"classMap()\"\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 (click)=\"backClick()\"\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 class=\"mc-drawer__close\" aria-label=\"Close\" [ghost]=\"true\" (click)=\"close()\">\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}@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, 3);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, 2)}.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, 2)}.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"] }]
3833
+ args: [{ selector: 'moz-drawer', imports: [MozIconButtonComponent, ArrowBack24, Cross24, NgClass, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n class=\"mc-drawer\"\n [ngClass]=\"classMap()\"\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 (click)=\"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 (click)=\"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}@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, 3);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, 2)}.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, 2)}.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"] }]
3832
3834
  }], 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: [{
3833
3835
  type: HostListener,
3834
3836
  args: ['keydown.escape']