@mozaic-ds/angular 2.0.5 → 2.0.6

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 +31 -11
  2. package/fesm2022/mozaic-ds-angular.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/mozaic-ds-angular.d.ts +11 -1
package/fesm2022/mozaic-ds-angular.mjs CHANGED
@@ -665,6 +665,11 @@ class MozModalRef {
665
665
  afterClosed$ = new Subject();
666
666
  afterOpened$ = new Subject();
667
667
  isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
668
+ title = signal('', ...(ngDevMode ? [{ debugName: "title" }] : []));
669
+ size = signal('m', ...(ngDevMode ? [{ debugName: "size" }] : []));
670
+ hasCloseButton = signal(true, ...(ngDevMode ? [{ debugName: "hasCloseButton" }] : []));
671
+ closeOnBackdrop = signal(true, ...(ngDevMode ? [{ debugName: "closeOnBackdrop" }] : []));
672
+ closeOnEscape = signal(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : []));
668
673
  animationDuration = 300;
669
674
  constructor(overlayRef) {
670
675
  this.overlayRef = overlayRef;
@@ -701,7 +706,7 @@ class ModalContainerComponent {
701
706
  classes = computed(() => ({
702
707
  'modal': true,
703
708
  'is-open': this.modalRef.isOpen(),
704
- [`modal--${this.config.size}`]: this.config.size !== 'm',
709
+ [`modal--${this.modalRef.size()}`]: this.modalRef.size() !== 'm',
705
710
  }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
706
711
  ariaModal = computed(() => (this.modalRef.isOpen() ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "ariaModal" }] : []));
707
712
  attachComponent(component) {
@@ -718,21 +723,21 @@ class ModalContainerComponent {
718
723
  }
719
724
  onBackdropClick(event) {
720
725
  event.stopPropagation();
721
- if (this.config.closeOnBackdrop) {
726
+ if (this.modalRef.closeOnBackdrop()) {
722
727
  this.modalRef.close();
723
728
  }
724
729
  }
725
730
  onEscape() {
726
- if (this.config.closeOnEscape && this.modalRef.isOpen()) {
731
+ if (this.modalRef.closeOnEscape() && this.modalRef.isOpen()) {
727
732
  this.modalRef.close();
728
733
  }
729
734
  }
730
735
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
731
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: ModalContainerComponent, isStandalone: true, selector: "moz-modal-container", host: { listeners: { "keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n [class]=\"classes()\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n [attr.aria-hidden]=\"!modalRef.isOpen()\"\n>\n <div class=\"modal__dialog\" role=\"document\" (click)=\"$event.stopPropagation()\">\n <header class=\"modal__header\">\n <h2 class=\"modal__title\" id=\"modalTitle\">{{ config.title }}</h2>\n\n @if (config.hasCloseButton) {\n <moz-icon-button\n class=\"modal__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (click)=\"modalRef.close()\"\n [id]=\"'modal-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n }\n </header>\n\n <main class=\"modal__body\">\n <ng-template cdkPortalOutlet />\n </main>\n\n @if (footerTpl) {\n <footer class=\"modal__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl\" />\n </footer>\n }\n </div>\n\n @if (modalRef.isOpen()) {\n <div class=\"overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\"></div>\n }\n</div>\n", styles: [".mc-modal,.modal{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:var(--modal-z-index, 3);display:flex;justify-content:center;align-items:flex-end;overflow:hidden auto}@media(width>=680px){.mc-modal,.modal{align-items:center}}.mc-modal__dialog,.modal__dialog{background:var(--modal-color-background, #ffffff);display:flex;flex-direction:column;opacity:0;position:relative;transform:translateY(-25%);transition:visibility 0s linear .4s,transform .4s ease,opacity .4s ease;visibility:hidden;width:100%;border-radius:var(--border-radius-l, 1rem) var(--border-radius-l, 1rem) 0 0;z-index:3}@media(width>=680px){.mc-modal__dialog,.modal__dialog{width:38rem;border-radius:var(--border-radius-l, 1rem)}}.mc-modal.is-open .mc-modal__dialog,.is-open.modal .mc-modal__dialog,.mc-modal.is-open .modal__dialog,.is-open.modal .modal__dialog{opacity:1;pointer-events:all;transform:translateY(0);transition:visibility 0s linear 0s,transform .4s ease,opacity .4s ease;visibility:visible}.mc-modal__header,.modal__header{align-items:center;display:flex;gap:.5rem;min-height:3rem;padding:1rem;position:relative}@media(width>=680px){.mc-modal__header,.modal__header{padding:1.5rem 1.5rem 1rem}}.mc-modal__icon,.modal__icon{width:2rem;height:2rem}.mc-modal__title,.modal__title{font-size:var(--font-title-m, 1.5rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--modal-color-title, #000000);margin-bottom:.5rem;margin-top:.5rem;padding-right:3rem}.mc-modal__close,.modal__close{position:absolute;top:.75rem;right:.75rem}.mc-modal__body,.modal__body{font-size:var(--font-size-150, 1rem);color:var(--modal-color-paragraph, #404040);padding:0 1rem;margin-bottom:1rem}@media(width>=680px){.mc-modal__body,.modal__body{padding:0 1.5rem}}.mc-modal__body p,.modal__body p{margin:0;line-height:var(--line-height-s, 1.3)}.mc-modal__footer,.modal__footer{align-items:stretch;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:1rem;padding:.5rem 1rem 1rem}@media(width>=680px){.mc-modal__footer,.modal__footer{flex-direction:row;padding:.5rem 1.5rem 1.5rem}}.mc-modal__link{order:1}@media(width>=680px){.mc-modal__link{margin-right:auto;order:0}}.mc-modal-open{overflow:hidden}.mc-overlay,.overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 2)}.mc-overlay.is-visible,.is-visible.overlay{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 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}.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: ["fill", "hostClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
736
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: ModalContainerComponent, isStandalone: true, selector: "moz-modal-container", host: { listeners: { "keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n [class]=\"classes()\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n [attr.aria-hidden]=\"!modalRef.isOpen()\"\n>\n <div class=\"modal__dialog\" role=\"document\" (click)=\"$event.stopPropagation()\">\n <header class=\"modal__header\">\n <h2 class=\"modal__title\" id=\"modalTitle\">{{ modalRef.title() }}</h2>\n\n @if (modalRef.hasCloseButton()) {\n <moz-icon-button\n class=\"modal__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (click)=\"modalRef.close()\"\n [id]=\"'modal-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n }\n </header>\n\n <main class=\"modal__body\">\n <ng-template cdkPortalOutlet />\n </main>\n\n @if (footerTpl) {\n <footer class=\"modal__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl\" />\n </footer>\n }\n </div>\n\n @if (modalRef.isOpen()) {\n <div class=\"overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\"></div>\n }\n</div>\n", styles: [".mc-modal,.modal{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:var(--modal-z-index, 3);display:flex;justify-content:center;align-items:flex-end;overflow:hidden auto}@media(width>=680px){.mc-modal,.modal{align-items:center}}.mc-modal__dialog,.modal__dialog{background:var(--modal-color-background, #ffffff);display:flex;flex-direction:column;opacity:0;position:relative;transform:translateY(-25%);transition:visibility 0s linear .4s,transform .4s ease,opacity .4s ease;visibility:hidden;width:100%;border-radius:var(--border-radius-l, 1rem) var(--border-radius-l, 1rem) 0 0;z-index:3}@media(width>=680px){.mc-modal__dialog,.modal__dialog{width:38rem;border-radius:var(--border-radius-l, 1rem)}}.mc-modal.is-open .mc-modal__dialog,.is-open.modal .mc-modal__dialog,.mc-modal.is-open .modal__dialog,.is-open.modal .modal__dialog{opacity:1;pointer-events:all;transform:translateY(0);transition:visibility 0s linear 0s,transform .4s ease,opacity .4s ease;visibility:visible}.mc-modal__header,.modal__header{align-items:center;display:flex;gap:.5rem;min-height:3rem;padding:1rem;position:relative}@media(width>=680px){.mc-modal__header,.modal__header{padding:1.5rem 1.5rem 1rem}}.mc-modal__icon,.modal__icon{width:2rem;height:2rem}.mc-modal__title,.modal__title{font-size:var(--font-title-m, 1.5rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--modal-color-title, #000000);margin-bottom:.5rem;margin-top:.5rem;padding-right:3rem}.mc-modal__close,.modal__close{position:absolute;top:.75rem;right:.75rem}.mc-modal__body,.modal__body{font-size:var(--font-size-150, 1rem);color:var(--modal-color-paragraph, #404040);padding:0 1rem;margin-bottom:1rem}@media(width>=680px){.mc-modal__body,.modal__body{padding:0 1.5rem}}.mc-modal__body p,.modal__body p{margin:0;line-height:var(--line-height-s, 1.3)}.mc-modal__footer,.modal__footer{align-items:stretch;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:1rem;padding:.5rem 1rem 1rem}@media(width>=680px){.mc-modal__footer,.modal__footer{flex-direction:row;padding:.5rem 1.5rem 1.5rem}}.mc-modal__link{order:1}@media(width>=680px){.mc-modal__link{margin-right:auto;order:0}}.mc-modal-open{overflow:hidden}.mc-overlay,.overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 2)}.mc-overlay.is-visible,.is-visible.overlay{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 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}.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: ["fill", "hostClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
732
737
  }
733
738
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ModalContainerComponent, decorators: [{
734
739
  type: Component,
735
- args: [{ selector: 'moz-modal-container', imports: [MozIconButtonComponent, Cross24, NgTemplateOutlet, CdkPortalOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class]=\"classes()\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n [attr.aria-hidden]=\"!modalRef.isOpen()\"\n>\n <div class=\"modal__dialog\" role=\"document\" (click)=\"$event.stopPropagation()\">\n <header class=\"modal__header\">\n <h2 class=\"modal__title\" id=\"modalTitle\">{{ config.title }}</h2>\n\n @if (config.hasCloseButton) {\n <moz-icon-button\n class=\"modal__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (click)=\"modalRef.close()\"\n [id]=\"'modal-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n }\n </header>\n\n <main class=\"modal__body\">\n <ng-template cdkPortalOutlet />\n </main>\n\n @if (footerTpl) {\n <footer class=\"modal__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl\" />\n </footer>\n }\n </div>\n\n @if (modalRef.isOpen()) {\n <div class=\"overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\"></div>\n }\n</div>\n", styles: [".mc-modal,.modal{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:var(--modal-z-index, 3);display:flex;justify-content:center;align-items:flex-end;overflow:hidden auto}@media(width>=680px){.mc-modal,.modal{align-items:center}}.mc-modal__dialog,.modal__dialog{background:var(--modal-color-background, #ffffff);display:flex;flex-direction:column;opacity:0;position:relative;transform:translateY(-25%);transition:visibility 0s linear .4s,transform .4s ease,opacity .4s ease;visibility:hidden;width:100%;border-radius:var(--border-radius-l, 1rem) var(--border-radius-l, 1rem) 0 0;z-index:3}@media(width>=680px){.mc-modal__dialog,.modal__dialog{width:38rem;border-radius:var(--border-radius-l, 1rem)}}.mc-modal.is-open .mc-modal__dialog,.is-open.modal .mc-modal__dialog,.mc-modal.is-open .modal__dialog,.is-open.modal .modal__dialog{opacity:1;pointer-events:all;transform:translateY(0);transition:visibility 0s linear 0s,transform .4s ease,opacity .4s ease;visibility:visible}.mc-modal__header,.modal__header{align-items:center;display:flex;gap:.5rem;min-height:3rem;padding:1rem;position:relative}@media(width>=680px){.mc-modal__header,.modal__header{padding:1.5rem 1.5rem 1rem}}.mc-modal__icon,.modal__icon{width:2rem;height:2rem}.mc-modal__title,.modal__title{font-size:var(--font-title-m, 1.5rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--modal-color-title, #000000);margin-bottom:.5rem;margin-top:.5rem;padding-right:3rem}.mc-modal__close,.modal__close{position:absolute;top:.75rem;right:.75rem}.mc-modal__body,.modal__body{font-size:var(--font-size-150, 1rem);color:var(--modal-color-paragraph, #404040);padding:0 1rem;margin-bottom:1rem}@media(width>=680px){.mc-modal__body,.modal__body{padding:0 1.5rem}}.mc-modal__body p,.modal__body p{margin:0;line-height:var(--line-height-s, 1.3)}.mc-modal__footer,.modal__footer{align-items:stretch;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:1rem;padding:.5rem 1rem 1rem}@media(width>=680px){.mc-modal__footer,.modal__footer{flex-direction:row;padding:.5rem 1.5rem 1.5rem}}.mc-modal__link{order:1}@media(width>=680px){.mc-modal__link{margin-right:auto;order:0}}.mc-modal-open{overflow:hidden}.mc-overlay,.overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 2)}.mc-overlay.is-visible,.is-visible.overlay{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 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}.modal__icon:empty{display:none}\n"] }]
740
+ args: [{ selector: 'moz-modal-container', imports: [MozIconButtonComponent, Cross24, NgTemplateOutlet, CdkPortalOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class]=\"classes()\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n [attr.aria-hidden]=\"!modalRef.isOpen()\"\n>\n <div class=\"modal__dialog\" role=\"document\" (click)=\"$event.stopPropagation()\">\n <header class=\"modal__header\">\n <h2 class=\"modal__title\" id=\"modalTitle\">{{ modalRef.title() }}</h2>\n\n @if (modalRef.hasCloseButton()) {\n <moz-icon-button\n class=\"modal__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (click)=\"modalRef.close()\"\n [id]=\"'modal-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n }\n </header>\n\n <main class=\"modal__body\">\n <ng-template cdkPortalOutlet />\n </main>\n\n @if (footerTpl) {\n <footer class=\"modal__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl\" />\n </footer>\n }\n </div>\n\n @if (modalRef.isOpen()) {\n <div class=\"overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\"></div>\n }\n</div>\n", styles: [".mc-modal,.modal{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:var(--modal-z-index, 3);display:flex;justify-content:center;align-items:flex-end;overflow:hidden auto}@media(width>=680px){.mc-modal,.modal{align-items:center}}.mc-modal__dialog,.modal__dialog{background:var(--modal-color-background, #ffffff);display:flex;flex-direction:column;opacity:0;position:relative;transform:translateY(-25%);transition:visibility 0s linear .4s,transform .4s ease,opacity .4s ease;visibility:hidden;width:100%;border-radius:var(--border-radius-l, 1rem) var(--border-radius-l, 1rem) 0 0;z-index:3}@media(width>=680px){.mc-modal__dialog,.modal__dialog{width:38rem;border-radius:var(--border-radius-l, 1rem)}}.mc-modal.is-open .mc-modal__dialog,.is-open.modal .mc-modal__dialog,.mc-modal.is-open .modal__dialog,.is-open.modal .modal__dialog{opacity:1;pointer-events:all;transform:translateY(0);transition:visibility 0s linear 0s,transform .4s ease,opacity .4s ease;visibility:visible}.mc-modal__header,.modal__header{align-items:center;display:flex;gap:.5rem;min-height:3rem;padding:1rem;position:relative}@media(width>=680px){.mc-modal__header,.modal__header{padding:1.5rem 1.5rem 1rem}}.mc-modal__icon,.modal__icon{width:2rem;height:2rem}.mc-modal__title,.modal__title{font-size:var(--font-title-m, 1.5rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--modal-color-title, #000000);margin-bottom:.5rem;margin-top:.5rem;padding-right:3rem}.mc-modal__close,.modal__close{position:absolute;top:.75rem;right:.75rem}.mc-modal__body,.modal__body{font-size:var(--font-size-150, 1rem);color:var(--modal-color-paragraph, #404040);padding:0 1rem;margin-bottom:1rem}@media(width>=680px){.mc-modal__body,.modal__body{padding:0 1.5rem}}.mc-modal__body p,.modal__body p{margin:0;line-height:var(--line-height-s, 1.3)}.mc-modal__footer,.modal__footer{align-items:stretch;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:1rem;padding:.5rem 1rem 1rem}@media(width>=680px){.mc-modal__footer,.modal__footer{flex-direction:row;padding:.5rem 1.5rem 1.5rem}}.mc-modal__link{order:1}@media(width>=680px){.mc-modal__link{margin-right:auto;order:0}}.mc-modal-open{overflow:hidden}.mc-overlay,.overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 2)}.mc-overlay.is-visible,.is-visible.overlay{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 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}.modal__icon:empty{display:none}\n"] }]
736
741
  }], propDecorators: { portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }], onEscape: [{
737
742
  type: HostListener,
738
743
  args: ['keydown.escape']
@@ -749,6 +754,11 @@ class MozModalService {
749
754
  };
750
755
  const overlayRef = this.createOverlay();
751
756
  const modalRef = new MozModalRef(overlayRef);
757
+ modalRef.title.set(mergedConfig.title);
758
+ modalRef.size.set(mergedConfig.size ?? 'm');
759
+ modalRef.hasCloseButton.set(mergedConfig.hasCloseButton ?? true);
760
+ modalRef.closeOnBackdrop.set(mergedConfig.closeOnBackdrop ?? true);
761
+ modalRef.closeOnEscape.set(mergedConfig.closeOnEscape ?? true);
752
762
  const injector = Injector.create({
753
763
  parent: this.injector,
754
764
  providers: [
@@ -3660,11 +3670,11 @@ class MozStepperBottomBarComponent {
3660
3670
  validateButtonId = computed(() => `${this.id()}-validate`, ...(ngDevMode ? [{ debugName: "validateButtonId" }] : []));
3661
3671
  validateButtonIconId = computed(() => `${this.id()}-validate-icon`, ...(ngDevMode ? [{ debugName: "validateButtonIconId" }] : []));
3662
3672
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MozStepperBottomBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3663
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: MozStepperBottomBarComponent, isStandalone: true, selector: "moz-stepper-bottom-bar", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, hasCancel: { classPropertyName: "hasCancel", publicName: "hasCancel", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, previousText: { classPropertyName: "previousText", publicName: "previousText", isSignal: true, isRequired: false, transformFunction: null }, nextText: { classPropertyName: "nextText", publicName: "nextText", isSignal: true, isRequired: false, transformFunction: null }, validateText: { classPropertyName: "validateText", publicName: "validateText", isSignal: true, isRequired: false, transformFunction: null }, disabledNext: { classPropertyName: "disabledNext", publicName: "disabledNext", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancel: "cancel", previous: "previous", next: "next", validate: "validate" }, ngImport: i0, template: "<div class=\"stepper-bottom-bar\">\n <div class=\"divider-horizontal stepper-bottom-bar__divider\"></div>\n <div class=\"stepper-bottom-bar__left\">\n @if (hasCancel()) {\n <button\n type=\"button\"\n class=\"button button--ghost button--s stepper-bottom-bar__button--text\"\n [id]=\"cancelButtonId()\"\n (click)=\"handleCancel()\"\n >\n {{ cancelText() }}\n </button>\n\n <button\n type=\"button\"\n class=\"button button--ghost button--icon stepper-bottom-bar__button--icon\"\n [id]=\"cancelButtonIconId()\"\n [attr.aria-label]=\"cancelText()\"\n (click)=\"handleCancel()\"\n >\n {{ cancelText() }}\n </button>\n }\n </div>\n\n <div class=\"stepper-bottom-bar__right\">\n @if (step() !== 'start') {\n <button\n type=\"button\"\n class=\"button button--outlined button--s stepper-bottom-bar__button--text\"\n [id]=\"previousButtonId()\"\n (click)=\"handlePrevious()\"\n >\n {{ previousText() }}\n </button>\n\n <button\n type=\"button\"\n class=\"button button--outlined button--icon stepper-bottom-bar__button--icon\"\n [id]=\"previousButtonIconId()\"\n [attr.aria-label]=\"previousText()\"\n (click)=\"handlePrevious()\"\n >\n <ArrowBack24 class=\"stepper-bottom-bar__icon\" />\n </button>\n } @if (step() !== 'end') {\n <button\n type=\"button\"\n class=\"button button--accent button--s stepper-bottom-bar__button--text\"\n [id]=\"nextButtonId()\"\n [disabled]=\"disabledNext()\"\n (click)=\"handleNext()\"\n >\n {{ nextText() }}\n </button>\n <button\n type=\"button\"\n class=\"button button--accent button--icon stepper-bottom-bar__button--icon\"\n [id]=\"nextButtonIconId()\"\n [attr.aria-label]=\"nextText()\"\n [disabled]=\"disabledNext()\"\n (click)=\"handleNext()\"\n >\n <ArrowNext24 class=\"stepper-bottom-bar__icon\" />\n </button>\n } @if (step() === 'end') {\n <button\n type=\"button\"\n class=\"button button--accent button--s stepper-bottom-bar__button--text\"\n [id]=\"validateButtonId()\"\n (click)=\"handleValidate()\"\n [disabled]=\"disabledNext()\"\n >\n {{ validateText() }}\n </button>\n <button\n type=\"button\"\n class=\"button button--accent button--icon stepper-bottom-bar__button--icon\"\n [id]=\"validateButtonIconId()\"\n [attr.aria-label]=\"validateText()\"\n [disabled]=\"disabledNext()\"\n (click)=\"handleValidate()\"\n >\n {{ validateText() }}\n </button>\n }\n </div>\n</div>\n", styles: [".mc-stepper-bottom-bar,.stepper-bottom-bar{position:fixed;box-sizing:border-box;bottom:0;left:0;width:100%;height:4rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;background-color:var(--action-bottom-bar-color-background, #ffffff);z-index:var(--stepper-bottom-bar-z-index, 3)}.mc-stepper-bottom-bar__divider,.stepper-bottom-bar__divider{width:100%}.mc-stepper-bottom-bar__icon,.stepper-bottom-bar__icon{width:1.5rem;height:1.5rem}@media screen and (min-width:679px){.mc-stepper-bottom-bar__button--icon.mc-button,.mc-button.stepper-bottom-bar__button--icon,.mc-stepper-bottom-bar__button--icon.button,.stepper-bottom-bar__button--icon.button{display:none}}.mc-stepper-bottom-bar__button--text.mc-button,.mc-button.stepper-bottom-bar__button--text,.mc-stepper-bottom-bar__button--text.button,.stepper-bottom-bar__button--text.button{display:none}@media screen and (min-width:679px){.mc-stepper-bottom-bar__button--text.mc-button,.mc-button.stepper-bottom-bar__button--text,.mc-stepper-bottom-bar__button--text.button,.stepper-bottom-bar__button--text.button{display:block}}.mc-stepper-bottom-bar__left,.stepper-bottom-bar__left{padding-left:1.25rem}@media screen and (min-width:679px){.mc-stepper-bottom-bar__left,.stepper-bottom-bar__left{padding-left:.5rem}}.mc-stepper-bottom-bar__right,.stepper-bottom-bar__right{margin-left:auto;padding:.25rem .5rem .25rem 0;display:flex;gap:.5rem}@media screen and (min-width:679px){.mc-stepper-bottom-bar__right,.stepper-bottom-bar__right{padding:.5rem 1rem .5rem 0}}.mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c)}.mc-button:active,.button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button .mc-button__label,.button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.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,.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,.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,.button--s{padding:0 .625rem;min-height:2rem;min-width:2rem}.mc-button--s .mc-button__label,.button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.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,.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,.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined:active,.button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled,.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,.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,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost:active,.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled,.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,.button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover,.button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902)}.mc-button--accent:active,.button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled,.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard,.mc-button--standard.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.mc-button--standard:hover,.mc-button--standard.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined.mc-button--standard:active,.mc-button--standard.button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled,.mc-button--standard.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--outlined.mc-button--accent,.mc-button--accent.button--outlined,.mc-button--outlined.button--accent,.button--outlined.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,.mc-button--accent.button--outlined:hover,.mc-button--outlined.button--accent:hover,.button--outlined.button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de)}.mc-button--outlined.mc-button--accent:active,.mc-button--accent.button--outlined:active,.mc-button--outlined.button--accent:active,.button--outlined.button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled,.mc-button--accent.button--outlined:disabled,.mc-button--outlined.button--accent:disabled,.button--outlined.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,.mc-button--danger.button--outlined{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,.mc-button--danger.button--outlined:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea)}.mc-button--outlined.mc-button--danger:active,.mc-button--danger.button--outlined:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled,.mc-button--danger.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--outlined.mc-button--inverse,.mc-button--inverse.button--outlined{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,.mc-button--inverse.button--outlined:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--outlined.mc-button--inverse:active,.mc-button--inverse.button--outlined:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled,.mc-button--inverse.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.mc-button--standard,.mc-button--standard.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.mc-button--standard:hover,.mc-button--standard.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.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--ghost.mc-button--accent,.mc-button--accent.button--ghost,.mc-button--ghost.button--accent,.button--ghost.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,.mc-button--accent.button--ghost:hover,.mc-button--ghost.button--accent:hover,.button--ghost.button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1))}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active,.mc-button--ghost.button--accent:active,.button--ghost.button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled,.mc-button--ghost.button--accent:disabled,.button--ghost.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,.mc-button--danger.button--ghost{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,.mc-button--danger.button--ghost:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1))}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.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--ghost.mc-button--inverse,.mc-button--inverse.button--ghost{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,.mc-button--inverse.button--ghost:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.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-divider{position:relative}.mc-divider-horizontal,.divider-horizontal{background:var(--divider-color-primary, #cccccc);height:.0625rem}.mc-divider-horizontal--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-horizontal--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-horizontal--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-horizontal--m{height:.25rem}.mc-divider-horizontal--l{height:.5rem}.mc-divider-vertical{background:var(--divider-color-primary, #cccccc);width:.0625rem}.mc-divider-vertical--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-vertical--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-vertical--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-vertical--m{height:.25rem}.mc-divider-vertical--l{height:.5rem}\n"], dependencies: [{ kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["fill", "hostClass"] }, { kind: "component", type: ArrowNext24, selector: "ArrowNext24", inputs: ["fill", "hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3673
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: MozStepperBottomBarComponent, isStandalone: true, selector: "moz-stepper-bottom-bar", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, hasCancel: { classPropertyName: "hasCancel", publicName: "hasCancel", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, previousText: { classPropertyName: "previousText", publicName: "previousText", isSignal: true, isRequired: false, transformFunction: null }, nextText: { classPropertyName: "nextText", publicName: "nextText", isSignal: true, isRequired: false, transformFunction: null }, validateText: { classPropertyName: "validateText", publicName: "validateText", isSignal: true, isRequired: false, transformFunction: null }, disabledNext: { classPropertyName: "disabledNext", publicName: "disabledNext", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancel: "cancel", previous: "previous", next: "next", validate: "validate" }, ngImport: i0, template: "<div class=\"stepper-bottom-bar\">\n <div class=\"divider-horizontal stepper-bottom-bar__divider\"></div>\n <div class=\"stepper-bottom-bar__left\">\n @if (hasCancel()) {\n <button\n type=\"button\"\n class=\"button button--ghost button--s stepper-bottom-bar__button--text\"\n [id]=\"cancelButtonId()\"\n (click)=\"handleCancel()\"\n >\n {{ cancelText() }}\n </button>\n\n <button\n type=\"button\"\n class=\"button button--ghost button--icon stepper-bottom-bar__button--icon\"\n [id]=\"cancelButtonIconId()\"\n [attr.aria-label]=\"cancelText()\"\n (click)=\"handleCancel()\"\n >\n {{ cancelText() }}\n </button>\n }\n <ng-content [select]=\"'custom-content-left'\"></ng-content>\n </div>\n\n <div class=\"stepper-bottom-bar__right\">\n <ng-content [select]=\"'custom-content-right'\"></ng-content>\n @if (step() !== 'start') {\n <button\n type=\"button\"\n class=\"button button--outlined button--s stepper-bottom-bar__button--text\"\n [id]=\"previousButtonId()\"\n (click)=\"handlePrevious()\"\n >\n {{ previousText() }}\n </button>\n\n <button\n type=\"button\"\n class=\"button button--outlined button--icon stepper-bottom-bar__button--icon\"\n [id]=\"previousButtonIconId()\"\n [attr.aria-label]=\"previousText()\"\n (click)=\"handlePrevious()\"\n >\n <ArrowBack24 class=\"stepper-bottom-bar__icon\" />\n </button>\n } @if (step() !== 'end') {\n <button\n type=\"button\"\n class=\"button button--accent button--s stepper-bottom-bar__button--text\"\n [id]=\"nextButtonId()\"\n [disabled]=\"disabledNext()\"\n (click)=\"handleNext()\"\n >\n {{ nextText() }}\n </button>\n <button\n type=\"button\"\n class=\"button button--accent button--icon stepper-bottom-bar__button--icon\"\n [id]=\"nextButtonIconId()\"\n [attr.aria-label]=\"nextText()\"\n [disabled]=\"disabledNext()\"\n (click)=\"handleNext()\"\n >\n <ArrowNext24 class=\"stepper-bottom-bar__icon\" />\n </button>\n } @if (step() === 'end') {\n <button\n type=\"button\"\n class=\"button button--accent button--s stepper-bottom-bar__button--text\"\n [id]=\"validateButtonId()\"\n (click)=\"handleValidate()\"\n [disabled]=\"disabledNext()\"\n >\n {{ validateText() }}\n </button>\n <button\n type=\"button\"\n class=\"button button--accent button--icon stepper-bottom-bar__button--icon\"\n [id]=\"validateButtonIconId()\"\n [attr.aria-label]=\"validateText()\"\n [disabled]=\"disabledNext()\"\n (click)=\"handleValidate()\"\n >\n {{ validateText() }}\n </button>\n }\n </div>\n</div>\n", styles: [".mc-stepper-bottom-bar,.stepper-bottom-bar{position:fixed;box-sizing:border-box;bottom:0;left:0;width:100%;height:4rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;background-color:var(--action-bottom-bar-color-background, #ffffff);z-index:var(--stepper-bottom-bar-z-index, 3)}.mc-stepper-bottom-bar__divider,.stepper-bottom-bar__divider{width:100%}.mc-stepper-bottom-bar__icon,.stepper-bottom-bar__icon{width:1.5rem;height:1.5rem}@media screen and (min-width:679px){.mc-stepper-bottom-bar__button--icon.mc-button,.mc-button.stepper-bottom-bar__button--icon,.mc-stepper-bottom-bar__button--icon.button,.stepper-bottom-bar__button--icon.button{display:none}}.mc-stepper-bottom-bar__button--text.mc-button,.mc-button.stepper-bottom-bar__button--text,.mc-stepper-bottom-bar__button--text.button,.stepper-bottom-bar__button--text.button{display:none}@media screen and (min-width:679px){.mc-stepper-bottom-bar__button--text.mc-button,.mc-button.stepper-bottom-bar__button--text,.mc-stepper-bottom-bar__button--text.button,.stepper-bottom-bar__button--text.button{display:block}}.mc-stepper-bottom-bar__left,.stepper-bottom-bar__left{padding-left:1.25rem}@media screen and (min-width:679px){.mc-stepper-bottom-bar__left,.stepper-bottom-bar__left{padding-left:.5rem}}.mc-stepper-bottom-bar__right,.stepper-bottom-bar__right{margin-left:auto;padding:.25rem .5rem .25rem 0;display:flex;gap:.5rem}@media screen and (min-width:679px){.mc-stepper-bottom-bar__right,.stepper-bottom-bar__right{padding:.5rem 1rem .5rem 0}}.mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c)}.mc-button:active,.button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button .mc-button__label,.button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.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,.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,.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,.button--s{padding:0 .625rem;min-height:2rem;min-width:2rem}.mc-button--s .mc-button__label,.button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.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,.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,.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined:active,.button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled,.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,.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,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost:active,.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled,.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,.button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover,.button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902)}.mc-button--accent:active,.button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled,.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard,.mc-button--standard.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.mc-button--standard:hover,.mc-button--standard.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined.mc-button--standard:active,.mc-button--standard.button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled,.mc-button--standard.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--outlined.mc-button--accent,.mc-button--accent.button--outlined,.mc-button--outlined.button--accent,.button--outlined.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,.mc-button--accent.button--outlined:hover,.mc-button--outlined.button--accent:hover,.button--outlined.button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de)}.mc-button--outlined.mc-button--accent:active,.mc-button--accent.button--outlined:active,.mc-button--outlined.button--accent:active,.button--outlined.button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled,.mc-button--accent.button--outlined:disabled,.mc-button--outlined.button--accent:disabled,.button--outlined.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,.mc-button--danger.button--outlined{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,.mc-button--danger.button--outlined:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea)}.mc-button--outlined.mc-button--danger:active,.mc-button--danger.button--outlined:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled,.mc-button--danger.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--outlined.mc-button--inverse,.mc-button--inverse.button--outlined{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,.mc-button--inverse.button--outlined:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--outlined.mc-button--inverse:active,.mc-button--inverse.button--outlined:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled,.mc-button--inverse.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.mc-button--standard,.mc-button--standard.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.mc-button--standard:hover,.mc-button--standard.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.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--ghost.mc-button--accent,.mc-button--accent.button--ghost,.mc-button--ghost.button--accent,.button--ghost.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,.mc-button--accent.button--ghost:hover,.mc-button--ghost.button--accent:hover,.button--ghost.button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1))}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active,.mc-button--ghost.button--accent:active,.button--ghost.button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled,.mc-button--ghost.button--accent:disabled,.button--ghost.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,.mc-button--danger.button--ghost{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,.mc-button--danger.button--ghost:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1))}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.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--ghost.mc-button--inverse,.mc-button--inverse.button--ghost{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,.mc-button--inverse.button--ghost:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.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-divider{position:relative}.mc-divider-horizontal,.divider-horizontal{background:var(--divider-color-primary, #cccccc);height:.0625rem}.mc-divider-horizontal--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-horizontal--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-horizontal--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-horizontal--m{height:.25rem}.mc-divider-horizontal--l{height:.5rem}.mc-divider-vertical{background:var(--divider-color-primary, #cccccc);width:.0625rem}.mc-divider-vertical--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-vertical--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-vertical--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-vertical--m{height:.25rem}.mc-divider-vertical--l{height:.5rem}\n"], dependencies: [{ kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["fill", "hostClass"] }, { kind: "component", type: ArrowNext24, selector: "ArrowNext24", inputs: ["fill", "hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3664
3674
  }
3665
3675
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MozStepperBottomBarComponent, decorators: [{
3666
3676
  type: Component,
3667
- args: [{ selector: 'moz-stepper-bottom-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ArrowBack24, ArrowNext24], template: "<div class=\"stepper-bottom-bar\">\n <div class=\"divider-horizontal stepper-bottom-bar__divider\"></div>\n <div class=\"stepper-bottom-bar__left\">\n @if (hasCancel()) {\n <button\n type=\"button\"\n class=\"button button--ghost button--s stepper-bottom-bar__button--text\"\n [id]=\"cancelButtonId()\"\n (click)=\"handleCancel()\"\n >\n {{ cancelText() }}\n </button>\n\n <button\n type=\"button\"\n class=\"button button--ghost button--icon stepper-bottom-bar__button--icon\"\n [id]=\"cancelButtonIconId()\"\n [attr.aria-label]=\"cancelText()\"\n (click)=\"handleCancel()\"\n >\n {{ cancelText() }}\n </button>\n }\n </div>\n\n <div class=\"stepper-bottom-bar__right\">\n @if (step() !== 'start') {\n <button\n type=\"button\"\n class=\"button button--outlined button--s stepper-bottom-bar__button--text\"\n [id]=\"previousButtonId()\"\n (click)=\"handlePrevious()\"\n >\n {{ previousText() }}\n </button>\n\n <button\n type=\"button\"\n class=\"button button--outlined button--icon stepper-bottom-bar__button--icon\"\n [id]=\"previousButtonIconId()\"\n [attr.aria-label]=\"previousText()\"\n (click)=\"handlePrevious()\"\n >\n <ArrowBack24 class=\"stepper-bottom-bar__icon\" />\n </button>\n } @if (step() !== 'end') {\n <button\n type=\"button\"\n class=\"button button--accent button--s stepper-bottom-bar__button--text\"\n [id]=\"nextButtonId()\"\n [disabled]=\"disabledNext()\"\n (click)=\"handleNext()\"\n >\n {{ nextText() }}\n </button>\n <button\n type=\"button\"\n class=\"button button--accent button--icon stepper-bottom-bar__button--icon\"\n [id]=\"nextButtonIconId()\"\n [attr.aria-label]=\"nextText()\"\n [disabled]=\"disabledNext()\"\n (click)=\"handleNext()\"\n >\n <ArrowNext24 class=\"stepper-bottom-bar__icon\" />\n </button>\n } @if (step() === 'end') {\n <button\n type=\"button\"\n class=\"button button--accent button--s stepper-bottom-bar__button--text\"\n [id]=\"validateButtonId()\"\n (click)=\"handleValidate()\"\n [disabled]=\"disabledNext()\"\n >\n {{ validateText() }}\n </button>\n <button\n type=\"button\"\n class=\"button button--accent button--icon stepper-bottom-bar__button--icon\"\n [id]=\"validateButtonIconId()\"\n [attr.aria-label]=\"validateText()\"\n [disabled]=\"disabledNext()\"\n (click)=\"handleValidate()\"\n >\n {{ validateText() }}\n </button>\n }\n </div>\n</div>\n", styles: [".mc-stepper-bottom-bar,.stepper-bottom-bar{position:fixed;box-sizing:border-box;bottom:0;left:0;width:100%;height:4rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;background-color:var(--action-bottom-bar-color-background, #ffffff);z-index:var(--stepper-bottom-bar-z-index, 3)}.mc-stepper-bottom-bar__divider,.stepper-bottom-bar__divider{width:100%}.mc-stepper-bottom-bar__icon,.stepper-bottom-bar__icon{width:1.5rem;height:1.5rem}@media screen and (min-width:679px){.mc-stepper-bottom-bar__button--icon.mc-button,.mc-button.stepper-bottom-bar__button--icon,.mc-stepper-bottom-bar__button--icon.button,.stepper-bottom-bar__button--icon.button{display:none}}.mc-stepper-bottom-bar__button--text.mc-button,.mc-button.stepper-bottom-bar__button--text,.mc-stepper-bottom-bar__button--text.button,.stepper-bottom-bar__button--text.button{display:none}@media screen and (min-width:679px){.mc-stepper-bottom-bar__button--text.mc-button,.mc-button.stepper-bottom-bar__button--text,.mc-stepper-bottom-bar__button--text.button,.stepper-bottom-bar__button--text.button{display:block}}.mc-stepper-bottom-bar__left,.stepper-bottom-bar__left{padding-left:1.25rem}@media screen and (min-width:679px){.mc-stepper-bottom-bar__left,.stepper-bottom-bar__left{padding-left:.5rem}}.mc-stepper-bottom-bar__right,.stepper-bottom-bar__right{margin-left:auto;padding:.25rem .5rem .25rem 0;display:flex;gap:.5rem}@media screen and (min-width:679px){.mc-stepper-bottom-bar__right,.stepper-bottom-bar__right{padding:.5rem 1rem .5rem 0}}.mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c)}.mc-button:active,.button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button .mc-button__label,.button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.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,.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,.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,.button--s{padding:0 .625rem;min-height:2rem;min-width:2rem}.mc-button--s .mc-button__label,.button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.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,.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,.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined:active,.button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled,.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,.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,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost:active,.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled,.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,.button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover,.button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902)}.mc-button--accent:active,.button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled,.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard,.mc-button--standard.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.mc-button--standard:hover,.mc-button--standard.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined.mc-button--standard:active,.mc-button--standard.button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled,.mc-button--standard.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--outlined.mc-button--accent,.mc-button--accent.button--outlined,.mc-button--outlined.button--accent,.button--outlined.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,.mc-button--accent.button--outlined:hover,.mc-button--outlined.button--accent:hover,.button--outlined.button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de)}.mc-button--outlined.mc-button--accent:active,.mc-button--accent.button--outlined:active,.mc-button--outlined.button--accent:active,.button--outlined.button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled,.mc-button--accent.button--outlined:disabled,.mc-button--outlined.button--accent:disabled,.button--outlined.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,.mc-button--danger.button--outlined{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,.mc-button--danger.button--outlined:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea)}.mc-button--outlined.mc-button--danger:active,.mc-button--danger.button--outlined:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled,.mc-button--danger.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--outlined.mc-button--inverse,.mc-button--inverse.button--outlined{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,.mc-button--inverse.button--outlined:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--outlined.mc-button--inverse:active,.mc-button--inverse.button--outlined:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled,.mc-button--inverse.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.mc-button--standard,.mc-button--standard.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.mc-button--standard:hover,.mc-button--standard.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.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--ghost.mc-button--accent,.mc-button--accent.button--ghost,.mc-button--ghost.button--accent,.button--ghost.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,.mc-button--accent.button--ghost:hover,.mc-button--ghost.button--accent:hover,.button--ghost.button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1))}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active,.mc-button--ghost.button--accent:active,.button--ghost.button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled,.mc-button--ghost.button--accent:disabled,.button--ghost.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,.mc-button--danger.button--ghost{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,.mc-button--danger.button--ghost:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1))}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.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--ghost.mc-button--inverse,.mc-button--inverse.button--ghost{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,.mc-button--inverse.button--ghost:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.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-divider{position:relative}.mc-divider-horizontal,.divider-horizontal{background:var(--divider-color-primary, #cccccc);height:.0625rem}.mc-divider-horizontal--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-horizontal--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-horizontal--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-horizontal--m{height:.25rem}.mc-divider-horizontal--l{height:.5rem}.mc-divider-vertical{background:var(--divider-color-primary, #cccccc);width:.0625rem}.mc-divider-vertical--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-vertical--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-vertical--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-vertical--m{height:.25rem}.mc-divider-vertical--l{height:.5rem}\n"] }]
3677
+ args: [{ selector: 'moz-stepper-bottom-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ArrowBack24, ArrowNext24], template: "<div class=\"stepper-bottom-bar\">\n <div class=\"divider-horizontal stepper-bottom-bar__divider\"></div>\n <div class=\"stepper-bottom-bar__left\">\n @if (hasCancel()) {\n <button\n type=\"button\"\n class=\"button button--ghost button--s stepper-bottom-bar__button--text\"\n [id]=\"cancelButtonId()\"\n (click)=\"handleCancel()\"\n >\n {{ cancelText() }}\n </button>\n\n <button\n type=\"button\"\n class=\"button button--ghost button--icon stepper-bottom-bar__button--icon\"\n [id]=\"cancelButtonIconId()\"\n [attr.aria-label]=\"cancelText()\"\n (click)=\"handleCancel()\"\n >\n {{ cancelText() }}\n </button>\n }\n <ng-content [select]=\"'custom-content-left'\"></ng-content>\n </div>\n\n <div class=\"stepper-bottom-bar__right\">\n <ng-content [select]=\"'custom-content-right'\"></ng-content>\n @if (step() !== 'start') {\n <button\n type=\"button\"\n class=\"button button--outlined button--s stepper-bottom-bar__button--text\"\n [id]=\"previousButtonId()\"\n (click)=\"handlePrevious()\"\n >\n {{ previousText() }}\n </button>\n\n <button\n type=\"button\"\n class=\"button button--outlined button--icon stepper-bottom-bar__button--icon\"\n [id]=\"previousButtonIconId()\"\n [attr.aria-label]=\"previousText()\"\n (click)=\"handlePrevious()\"\n >\n <ArrowBack24 class=\"stepper-bottom-bar__icon\" />\n </button>\n } @if (step() !== 'end') {\n <button\n type=\"button\"\n class=\"button button--accent button--s stepper-bottom-bar__button--text\"\n [id]=\"nextButtonId()\"\n [disabled]=\"disabledNext()\"\n (click)=\"handleNext()\"\n >\n {{ nextText() }}\n </button>\n <button\n type=\"button\"\n class=\"button button--accent button--icon stepper-bottom-bar__button--icon\"\n [id]=\"nextButtonIconId()\"\n [attr.aria-label]=\"nextText()\"\n [disabled]=\"disabledNext()\"\n (click)=\"handleNext()\"\n >\n <ArrowNext24 class=\"stepper-bottom-bar__icon\" />\n </button>\n } @if (step() === 'end') {\n <button\n type=\"button\"\n class=\"button button--accent button--s stepper-bottom-bar__button--text\"\n [id]=\"validateButtonId()\"\n (click)=\"handleValidate()\"\n [disabled]=\"disabledNext()\"\n >\n {{ validateText() }}\n </button>\n <button\n type=\"button\"\n class=\"button button--accent button--icon stepper-bottom-bar__button--icon\"\n [id]=\"validateButtonIconId()\"\n [attr.aria-label]=\"validateText()\"\n [disabled]=\"disabledNext()\"\n (click)=\"handleValidate()\"\n >\n {{ validateText() }}\n </button>\n }\n </div>\n</div>\n", styles: [".mc-stepper-bottom-bar,.stepper-bottom-bar{position:fixed;box-sizing:border-box;bottom:0;left:0;width:100%;height:4rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;background-color:var(--action-bottom-bar-color-background, #ffffff);z-index:var(--stepper-bottom-bar-z-index, 3)}.mc-stepper-bottom-bar__divider,.stepper-bottom-bar__divider{width:100%}.mc-stepper-bottom-bar__icon,.stepper-bottom-bar__icon{width:1.5rem;height:1.5rem}@media screen and (min-width:679px){.mc-stepper-bottom-bar__button--icon.mc-button,.mc-button.stepper-bottom-bar__button--icon,.mc-stepper-bottom-bar__button--icon.button,.stepper-bottom-bar__button--icon.button{display:none}}.mc-stepper-bottom-bar__button--text.mc-button,.mc-button.stepper-bottom-bar__button--text,.mc-stepper-bottom-bar__button--text.button,.stepper-bottom-bar__button--text.button{display:none}@media screen and (min-width:679px){.mc-stepper-bottom-bar__button--text.mc-button,.mc-button.stepper-bottom-bar__button--text,.mc-stepper-bottom-bar__button--text.button,.stepper-bottom-bar__button--text.button{display:block}}.mc-stepper-bottom-bar__left,.stepper-bottom-bar__left{padding-left:1.25rem}@media screen and (min-width:679px){.mc-stepper-bottom-bar__left,.stepper-bottom-bar__left{padding-left:.5rem}}.mc-stepper-bottom-bar__right,.stepper-bottom-bar__right{margin-left:auto;padding:.25rem .5rem .25rem 0;display:flex;gap:.5rem}@media screen and (min-width:679px){.mc-stepper-bottom-bar__right,.stepper-bottom-bar__right{padding:.5rem 1rem .5rem 0}}.mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c)}.mc-button:active,.button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button .mc-button__label,.button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.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,.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,.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,.button--s{padding:0 .625rem;min-height:2rem;min-width:2rem}.mc-button--s .mc-button__label,.button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.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,.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,.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined:active,.button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled,.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,.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,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost:active,.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled,.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,.button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover,.button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902)}.mc-button--accent:active,.button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled,.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard,.mc-button--standard.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.mc-button--standard:hover,.mc-button--standard.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined.mc-button--standard:active,.mc-button--standard.button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled,.mc-button--standard.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--outlined.mc-button--accent,.mc-button--accent.button--outlined,.mc-button--outlined.button--accent,.button--outlined.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,.mc-button--accent.button--outlined:hover,.mc-button--outlined.button--accent:hover,.button--outlined.button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de)}.mc-button--outlined.mc-button--accent:active,.mc-button--accent.button--outlined:active,.mc-button--outlined.button--accent:active,.button--outlined.button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled,.mc-button--accent.button--outlined:disabled,.mc-button--outlined.button--accent:disabled,.button--outlined.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,.mc-button--danger.button--outlined{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,.mc-button--danger.button--outlined:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea)}.mc-button--outlined.mc-button--danger:active,.mc-button--danger.button--outlined:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled,.mc-button--danger.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--outlined.mc-button--inverse,.mc-button--inverse.button--outlined{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,.mc-button--inverse.button--outlined:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--outlined.mc-button--inverse:active,.mc-button--inverse.button--outlined:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled,.mc-button--inverse.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.mc-button--standard,.mc-button--standard.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.mc-button--standard:hover,.mc-button--standard.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.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--ghost.mc-button--accent,.mc-button--accent.button--ghost,.mc-button--ghost.button--accent,.button--ghost.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,.mc-button--accent.button--ghost:hover,.mc-button--ghost.button--accent:hover,.button--ghost.button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1))}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active,.mc-button--ghost.button--accent:active,.button--ghost.button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled,.mc-button--ghost.button--accent:disabled,.button--ghost.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,.mc-button--danger.button--ghost{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,.mc-button--danger.button--ghost:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1))}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.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--ghost.mc-button--inverse,.mc-button--inverse.button--ghost{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,.mc-button--inverse.button--ghost:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.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-divider{position:relative}.mc-divider-horizontal,.divider-horizontal{background:var(--divider-color-primary, #cccccc);height:.0625rem}.mc-divider-horizontal--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-horizontal--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-horizontal--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-horizontal--m{height:.25rem}.mc-divider-horizontal--l{height:.5rem}.mc-divider-vertical{background:var(--divider-color-primary, #cccccc);width:.0625rem}.mc-divider-vertical--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-vertical--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-vertical--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-vertical--m{height:.25rem}.mc-divider-vertical--l{height:.5rem}\n"] }]
3668
3678
  }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], hasCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasCancel", required: false }] }], cancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelText", required: false }] }], previousText: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousText", required: false }] }], nextText: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextText", required: false }] }], validateText: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateText", required: false }] }], disabledNext: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledNext", required: false }] }], cancel: [{ type: i0.Output, args: ["cancel"] }], previous: [{ type: i0.Output, args: ["previous"] }], next: [{ type: i0.Output, args: ["next"] }], validate: [{ type: i0.Output, args: ["validate"] }] } });
3669
3679
 
3670
3680
  class MozPageHeaderComponent {
@@ -3920,6 +3930,11 @@ class MozDrawerRef {
3920
3930
  afterOpened$ = new Subject();
3921
3931
  backClicked$ = new Subject();
3922
3932
  isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
3933
+ title = signal('', ...(ngDevMode ? [{ debugName: "title" }] : []));
3934
+ contentTitle = signal('', ...(ngDevMode ? [{ debugName: "contentTitle" }] : []));
3935
+ position = signal('right', ...(ngDevMode ? [{ debugName: "position" }] : []));
3936
+ extended = signal(false, ...(ngDevMode ? [{ debugName: "extended" }] : []));
3937
+ back = signal(false, ...(ngDevMode ? [{ debugName: "back" }] : []));
3923
3938
  animationDuration = 300;
3924
3939
  constructor(overlayRef) {
3925
3940
  this.overlayRef = overlayRef;
@@ -3962,8 +3977,8 @@ class DrawerContainerComponent {
3962
3977
  classes = computed(() => ({
3963
3978
  'mc-drawer': true,
3964
3979
  'is-open': this.drawerRef.isOpen(),
3965
- 'mc-drawer--extend': this.config.extended ?? false,
3966
- [`mc-drawer--${this.config.position}`]: this.config.position !== 'right',
3980
+ 'mc-drawer--extend': this.drawerRef.extended(),
3981
+ [`mc-drawer--${this.drawerRef.position()}`]: this.drawerRef.position() !== 'right',
3967
3982
  }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
3968
3983
  ariaModal = computed(() => (this.drawerRef.isOpen() ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "ariaModal" }] : []));
3969
3984
  attachComponent(component) {
@@ -3992,11 +4007,11 @@ class DrawerContainerComponent {
3992
4007
  }
3993
4008
  }
3994
4009
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3995
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: DrawerContainerComponent, isStandalone: true, selector: "moz-drawer-container", host: { listeners: { "keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n [class]=\"classes()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!drawerRef.isOpen()\"\n>\n <div class=\"mc-drawer__dialog\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (config.back) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (click)=\"onBackClick()\"\n [id]=\"'drawer-back-button'\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ config.title }}</h2>\n\n <moz-icon-button\n class=\"mc-drawer__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (click)=\"drawerRef.close()\"\n [id]=\"'drawer-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n </div>\n\n <div class=\"mc-drawer__body\">\n <div class=\"mc-drawer__content\" tabindex=\"0\">\n @if (config.contentTitle) {\n <h2 class=\"mc-drawer__content__title\">\n {{ config.contentTitle }}\n </h2>\n }\n\n <ng-template cdkPortalOutlet />\n </div>\n </div>\n\n @if (footerTpl) {\n <div class=\"mc-drawer__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl\" />\n </div>\n }\n </div>\n\n @if (drawerRef.isOpen()) {\n <div class=\"mc-overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\"></div>\n }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:.5rem;justify-content:flex-end}@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: ["fill", "hostClass"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["fill", "hostClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4010
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: DrawerContainerComponent, isStandalone: true, selector: "moz-drawer-container", host: { listeners: { "keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n [class]=\"classes()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!drawerRef.isOpen()\"\n>\n <div class=\"mc-drawer__dialog\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (drawerRef.back()) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (click)=\"onBackClick()\"\n [id]=\"'drawer-back-button'\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ drawerRef.title() }}</h2>\n\n <moz-icon-button\n class=\"mc-drawer__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (click)=\"drawerRef.close()\"\n [id]=\"'drawer-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n </div>\n\n <div class=\"mc-drawer__body\">\n <div class=\"mc-drawer__content\" tabindex=\"0\">\n @if (drawerRef.contentTitle()) {\n <h2 class=\"mc-drawer__content__title\">\n {{ drawerRef.contentTitle() }}\n </h2>\n }\n\n <ng-template cdkPortalOutlet />\n </div>\n </div>\n\n @if (footerTpl) {\n <div class=\"mc-drawer__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl\" />\n </div>\n }\n </div>\n\n @if (drawerRef.isOpen()) {\n <div class=\"mc-overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\"></div>\n }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:.5rem;justify-content:flex-end}@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: ["fill", "hostClass"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["fill", "hostClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3996
4011
  }
3997
4012
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DrawerContainerComponent, decorators: [{
3998
4013
  type: Component,
3999
- args: [{ selector: 'moz-drawer-container', imports: [MozIconButtonComponent, ArrowBack24, Cross24, NgTemplateOutlet, CdkPortalOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n [class]=\"classes()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!drawerRef.isOpen()\"\n>\n <div class=\"mc-drawer__dialog\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (config.back) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (click)=\"onBackClick()\"\n [id]=\"'drawer-back-button'\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ config.title }}</h2>\n\n <moz-icon-button\n class=\"mc-drawer__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (click)=\"drawerRef.close()\"\n [id]=\"'drawer-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n </div>\n\n <div class=\"mc-drawer__body\">\n <div class=\"mc-drawer__content\" tabindex=\"0\">\n @if (config.contentTitle) {\n <h2 class=\"mc-drawer__content__title\">\n {{ config.contentTitle }}\n </h2>\n }\n\n <ng-template cdkPortalOutlet />\n </div>\n </div>\n\n @if (footerTpl) {\n <div class=\"mc-drawer__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl\" />\n </div>\n }\n </div>\n\n @if (drawerRef.isOpen()) {\n <div class=\"mc-overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\"></div>\n }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:.5rem;justify-content:flex-end}@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"] }]
4014
+ args: [{ selector: 'moz-drawer-container', imports: [MozIconButtonComponent, ArrowBack24, Cross24, NgTemplateOutlet, CdkPortalOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n [class]=\"classes()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!drawerRef.isOpen()\"\n>\n <div class=\"mc-drawer__dialog\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (drawerRef.back()) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (click)=\"onBackClick()\"\n [id]=\"'drawer-back-button'\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ drawerRef.title() }}</h2>\n\n <moz-icon-button\n class=\"mc-drawer__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (click)=\"drawerRef.close()\"\n [id]=\"'drawer-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n </div>\n\n <div class=\"mc-drawer__body\">\n <div class=\"mc-drawer__content\" tabindex=\"0\">\n @if (drawerRef.contentTitle()) {\n <h2 class=\"mc-drawer__content__title\">\n {{ drawerRef.contentTitle() }}\n </h2>\n }\n\n <ng-template cdkPortalOutlet />\n </div>\n </div>\n\n @if (footerTpl) {\n <div class=\"mc-drawer__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl\" />\n </div>\n }\n </div>\n\n @if (drawerRef.isOpen()) {\n <div class=\"mc-overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\"></div>\n }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:.5rem;justify-content:flex-end}@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"] }]
4000
4015
  }], propDecorators: { portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }], onEscape: [{
4001
4016
  type: HostListener,
4002
4017
  args: ['keydown.escape']
@@ -4012,6 +4027,11 @@ class MozDrawerService {
4012
4027
  };
4013
4028
  const overlayRef = this.createOverlay();
4014
4029
  const drawerRef = new MozDrawerRef(overlayRef);
4030
+ drawerRef.title.set(mergedConfig.title);
4031
+ drawerRef.contentTitle.set(mergedConfig.contentTitle ?? '');
4032
+ drawerRef.position.set(mergedConfig.position ?? 'right');
4033
+ drawerRef.extended.set(mergedConfig.extended ?? false);
4034
+ drawerRef.back.set(mergedConfig.back ?? false);
4015
4035
  const injector = Injector.create({
4016
4036
  parent: this.injector,
4017
4037
  providers: [