@mozaic-ds/angular 2.0.0-beta.36 → 2.0.0-beta.37
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.
|
@@ -627,10 +627,11 @@ class MozModalComponent {
|
|
|
627
627
|
closeOnBackdrop = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdrop" }] : []));
|
|
628
628
|
isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
629
629
|
footerTpl = contentChild('modalFooter', ...(ngDevMode ? [{ debugName: "footerTpl" }] : []));
|
|
630
|
-
|
|
630
|
+
classes = computed(() => ({
|
|
631
|
+
'modal': true,
|
|
631
632
|
'is-open': this.isOpen(),
|
|
632
|
-
[`
|
|
633
|
-
}), ...(ngDevMode ? [{ debugName: "
|
|
633
|
+
[`modal--${this.size()}`]: this.size() !== 'm',
|
|
634
|
+
}), ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
634
635
|
open() {
|
|
635
636
|
this.isOpen.set(true);
|
|
636
637
|
}
|
|
@@ -643,11 +644,11 @@ class MozModalComponent {
|
|
|
643
644
|
}
|
|
644
645
|
}
|
|
645
646
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MozModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
646
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MozModalComponent, isStandalone: true, selector: "moz-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hasCloseButton: { classPropertyName: "hasCloseButton", publicName: "hasCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, queries: [{ propertyName: "footerTpl", first: true, predicate: ["modalFooter"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class
|
|
647
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MozModalComponent, isStandalone: true, selector: "moz-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hasCloseButton: { classPropertyName: "hasCloseButton", publicName: "hasCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, queries: [{ propertyName: "footerTpl", first: true, predicate: ["modalFooter"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n [class]=\"classes()\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n [attr.aria-modal]=\"isOpen() ? 'true' : 'false'\"\n>\n <div class=\"modal__dialog\" role=\"document\" (click)=\"$event.stopPropagation()\">\n <header class=\"modal__header\">\n <h2 class=\"modal__title\" id=\"modalTitle\">{{ title() }}</h2>\n\n @if (hasCloseButton()) {\n <moz-icon-button\n class=\"modal__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (click)=\"close()\"\n [id]=\"'modal-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n }\n </header>\n\n <main class=\"modal__body\">\n <ng-content />\n </main>\n\n @if (footerTpl()) {\n <footer class=\"modal__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl()!\" />\n </footer>\n }\n </div>\n\n @if (isOpen()) {\n <div class=\"overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick()\"></div>\n }\n</div>\n", styles: [".mc-modal,.modal{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:var(--modal-z-index, 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
647
648
|
}
|
|
648
649
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MozModalComponent, decorators: [{
|
|
649
650
|
type: Component,
|
|
650
|
-
args: [{ selector: 'moz-modal', imports: [MozIconButtonComponent, Cross24, NgClass, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class
|
|
651
|
+
args: [{ selector: 'moz-modal', imports: [MozIconButtonComponent, Cross24, NgClass, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class]=\"classes()\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n [attr.aria-modal]=\"isOpen() ? 'true' : 'false'\"\n>\n <div class=\"modal__dialog\" role=\"document\" (click)=\"$event.stopPropagation()\">\n <header class=\"modal__header\">\n <h2 class=\"modal__title\" id=\"modalTitle\">{{ title() }}</h2>\n\n @if (hasCloseButton()) {\n <moz-icon-button\n class=\"modal__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (click)=\"close()\"\n [id]=\"'modal-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n }\n </header>\n\n <main class=\"modal__body\">\n <ng-content />\n </main>\n\n @if (footerTpl()) {\n <footer class=\"modal__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl()!\" />\n </footer>\n }\n </div>\n\n @if (isOpen()) {\n <div class=\"overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick()\"></div>\n }\n</div>\n", styles: [".mc-modal,.modal{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:var(--modal-z-index, 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"] }]
|
|
651
652
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hasCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasCloseButton", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], footerTpl: [{ type: i0.ContentChild, args: ['modalFooter', { isSignal: true }] }] } });
|
|
652
653
|
|
|
653
654
|
const MODAL_CONFIG = new InjectionToken('MODAL_CONFIG');
|
|
@@ -697,10 +698,11 @@ class ModalContainerComponent {
|
|
|
697
698
|
portalOutlet = viewChild(CdkPortalOutlet, ...(ngDevMode ? [{ debugName: "portalOutlet" }] : []));
|
|
698
699
|
footerTpl = null;
|
|
699
700
|
componentRef = null;
|
|
700
|
-
|
|
701
|
+
classes = computed(() => ({
|
|
702
|
+
'modal': true,
|
|
701
703
|
'is-open': this.modalRef.isOpen(),
|
|
702
|
-
[`
|
|
703
|
-
}), ...(ngDevMode ? [{ debugName: "
|
|
704
|
+
[`modal--${this.config.size}`]: this.config.size !== 'm',
|
|
705
|
+
}), ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
704
706
|
ariaModal = computed(() => (this.modalRef.isOpen() ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "ariaModal" }] : []));
|
|
705
707
|
attachComponent(component) {
|
|
706
708
|
const portal = new ComponentPortal(component);
|
|
@@ -726,95 +728,11 @@ class ModalContainerComponent {
|
|
|
726
728
|
}
|
|
727
729
|
}
|
|
728
730
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
729
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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:
|
|
730
|
-
<div
|
|
731
|
-
class="mc-modal"
|
|
732
|
-
[ngClass]="classMap()"
|
|
733
|
-
tabindex="-1"
|
|
734
|
-
role="dialog"
|
|
735
|
-
aria-labelledby="modalTitle"
|
|
736
|
-
[attr.aria-modal]="ariaModal()"
|
|
737
|
-
[attr.aria-hidden]="!modalRef.isOpen()"
|
|
738
|
-
>
|
|
739
|
-
<div class="mc-modal__dialog" role="document" (click)="$event.stopPropagation()">
|
|
740
|
-
<header class="mc-modal__header">
|
|
741
|
-
<h2 class="mc-modal__title" id="modalTitle">{{ config.title }}</h2>
|
|
742
|
-
|
|
743
|
-
@if (config.hasCloseButton) {
|
|
744
|
-
<moz-icon-button
|
|
745
|
-
class="mc-modal__close"
|
|
746
|
-
aria-label="Close"
|
|
747
|
-
[ghost]="true"
|
|
748
|
-
(click)="modalRef.close()"
|
|
749
|
-
[id]="'modal-close-button'"
|
|
750
|
-
>
|
|
751
|
-
<Cross24 icon />
|
|
752
|
-
</moz-icon-button>
|
|
753
|
-
}
|
|
754
|
-
</header>
|
|
755
|
-
|
|
756
|
-
<main class="mc-modal__body">
|
|
757
|
-
<ng-template cdkPortalOutlet />
|
|
758
|
-
</main>
|
|
759
|
-
|
|
760
|
-
@if (footerTpl) {
|
|
761
|
-
<footer class="mc-modal__footer">
|
|
762
|
-
<ng-container *ngTemplateOutlet="footerTpl" />
|
|
763
|
-
</footer>
|
|
764
|
-
}
|
|
765
|
-
</div>
|
|
766
|
-
|
|
767
|
-
@if (modalRef.isOpen()) {
|
|
768
|
-
<div class="mc-overlay is-visible" tabindex="-1" (click)="onBackdropClick($event)"></div>
|
|
769
|
-
}
|
|
770
|
-
</div>
|
|
771
|
-
`, isInline: true, 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{align-items:center;display:flex;gap:.5rem;min-height:3rem;padding:1rem;position:relative}@media(width>=680px){.mc-modal__header{padding:1.5rem 1.5rem 1rem}}.mc-modal__icon,.modal__icon{width:2rem;height:2rem}.mc-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{position:absolute;top:.75rem;right:.75rem}.mc-modal__body{font-size:var(--font-size-150, 1rem);color:var(--modal-color-paragraph, #404040);padding:0 1rem;margin-bottom:1rem}@media(width>=680px){.mc-modal__body{padding:0 1.5rem}}.mc-modal__body p{margin:0;line-height:var(--line-height-s, 1.3)}.mc-modal__footer{align-items:stretch;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:1rem;padding:.5rem 1rem 1rem}@media(width>=680px){.mc-modal__footer{flex-direction:row;padding:.5rem 1.5rem 1.5rem}}.mc-modal__link{order:1}@media(width>=680px){.mc-modal__link{margin-right:auto;order:0}}.mc-modal-open{overflow:hidden}.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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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 });
|
|
731
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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 });
|
|
772
732
|
}
|
|
773
733
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ModalContainerComponent, decorators: [{
|
|
774
734
|
type: Component,
|
|
775
|
-
args: [{ selector: 'moz-modal-container', imports: [MozIconButtonComponent, Cross24,
|
|
776
|
-
<div
|
|
777
|
-
class="mc-modal"
|
|
778
|
-
[ngClass]="classMap()"
|
|
779
|
-
tabindex="-1"
|
|
780
|
-
role="dialog"
|
|
781
|
-
aria-labelledby="modalTitle"
|
|
782
|
-
[attr.aria-modal]="ariaModal()"
|
|
783
|
-
[attr.aria-hidden]="!modalRef.isOpen()"
|
|
784
|
-
>
|
|
785
|
-
<div class="mc-modal__dialog" role="document" (click)="$event.stopPropagation()">
|
|
786
|
-
<header class="mc-modal__header">
|
|
787
|
-
<h2 class="mc-modal__title" id="modalTitle">{{ config.title }}</h2>
|
|
788
|
-
|
|
789
|
-
@if (config.hasCloseButton) {
|
|
790
|
-
<moz-icon-button
|
|
791
|
-
class="mc-modal__close"
|
|
792
|
-
aria-label="Close"
|
|
793
|
-
[ghost]="true"
|
|
794
|
-
(click)="modalRef.close()"
|
|
795
|
-
[id]="'modal-close-button'"
|
|
796
|
-
>
|
|
797
|
-
<Cross24 icon />
|
|
798
|
-
</moz-icon-button>
|
|
799
|
-
}
|
|
800
|
-
</header>
|
|
801
|
-
|
|
802
|
-
<main class="mc-modal__body">
|
|
803
|
-
<ng-template cdkPortalOutlet />
|
|
804
|
-
</main>
|
|
805
|
-
|
|
806
|
-
@if (footerTpl) {
|
|
807
|
-
<footer class="mc-modal__footer">
|
|
808
|
-
<ng-container *ngTemplateOutlet="footerTpl" />
|
|
809
|
-
</footer>
|
|
810
|
-
}
|
|
811
|
-
</div>
|
|
812
|
-
|
|
813
|
-
@if (modalRef.isOpen()) {
|
|
814
|
-
<div class="mc-overlay is-visible" tabindex="-1" (click)="onBackdropClick($event)"></div>
|
|
815
|
-
}
|
|
816
|
-
</div>
|
|
817
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, 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{align-items:center;display:flex;gap:.5rem;min-height:3rem;padding:1rem;position:relative}@media(width>=680px){.mc-modal__header{padding:1.5rem 1.5rem 1rem}}.mc-modal__icon,.modal__icon{width:2rem;height:2rem}.mc-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{position:absolute;top:.75rem;right:.75rem}.mc-modal__body{font-size:var(--font-size-150, 1rem);color:var(--modal-color-paragraph, #404040);padding:0 1rem;margin-bottom:1rem}@media(width>=680px){.mc-modal__body{padding:0 1.5rem}}.mc-modal__body p{margin:0;line-height:var(--line-height-s, 1.3)}.mc-modal__footer{align-items:stretch;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:1rem;padding:.5rem 1rem 1rem}@media(width>=680px){.mc-modal__footer{flex-direction:row;padding:.5rem 1.5rem 1.5rem}}.mc-modal__link{order:1}@media(width>=680px){.mc-modal__link{margin-right:auto;order:0}}.mc-modal-open{overflow:hidden}.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"] }]
|
|
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"] }]
|
|
818
736
|
}], propDecorators: { portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }], onEscape: [{
|
|
819
737
|
type: HostListener,
|
|
820
738
|
args: ['keydown.escape']
|
|
@@ -4028,11 +3946,12 @@ class DrawerContainerComponent {
|
|
|
4028
3946
|
portalOutlet = viewChild(CdkPortalOutlet, ...(ngDevMode ? [{ debugName: "portalOutlet" }] : []));
|
|
4029
3947
|
footerTpl = null;
|
|
4030
3948
|
componentRef = null;
|
|
4031
|
-
|
|
3949
|
+
classes = computed(() => ({
|
|
3950
|
+
'mc-drawer': true,
|
|
4032
3951
|
'is-open': this.drawerRef.isOpen(),
|
|
4033
3952
|
'mc-drawer--extend': this.config.extended ?? false,
|
|
4034
3953
|
[`mc-drawer--${this.config.position}`]: this.config.position !== 'right',
|
|
4035
|
-
}), ...(ngDevMode ? [{ debugName: "
|
|
3954
|
+
}), ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
4036
3955
|
ariaModal = computed(() => (this.drawerRef.isOpen() ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "ariaModal" }] : []));
|
|
4037
3956
|
attachComponent(component) {
|
|
4038
3957
|
const portal = new ComponentPortal(component);
|
|
@@ -4060,142 +3979,11 @@ class DrawerContainerComponent {
|
|
|
4060
3979
|
}
|
|
4061
3980
|
}
|
|
4062
3981
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4063
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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:
|
|
4064
|
-
<section
|
|
4065
|
-
(click)="$event.stopPropagation()"
|
|
4066
|
-
(keydown)="noop()"
|
|
4067
|
-
class="mc-drawer"
|
|
4068
|
-
[ngClass]="classMap()"
|
|
4069
|
-
role="dialog"
|
|
4070
|
-
aria-labelledby="drawerTitle"
|
|
4071
|
-
[attr.aria-modal]="ariaModal()"
|
|
4072
|
-
tabindex="-1"
|
|
4073
|
-
[attr.aria-hidden]="!drawerRef.isOpen()"
|
|
4074
|
-
>
|
|
4075
|
-
<div class="mc-drawer__dialog" role="document">
|
|
4076
|
-
<div class="mc-drawer__header">
|
|
4077
|
-
@if (config.back) {
|
|
4078
|
-
<moz-icon-button
|
|
4079
|
-
class="mc-drawer__back"
|
|
4080
|
-
aria-label="Back"
|
|
4081
|
-
[ghost]="true"
|
|
4082
|
-
(click)="onBackClick()"
|
|
4083
|
-
[id]="'drawer-back-button'"
|
|
4084
|
-
>
|
|
4085
|
-
<ArrowBack24 icon />
|
|
4086
|
-
</moz-icon-button>
|
|
4087
|
-
}
|
|
4088
|
-
|
|
4089
|
-
<h2 class="mc-drawer__title" id="drawerTitle">{{ config.title }}</h2>
|
|
4090
|
-
|
|
4091
|
-
<moz-icon-button
|
|
4092
|
-
class="mc-drawer__close"
|
|
4093
|
-
aria-label="Close"
|
|
4094
|
-
[ghost]="true"
|
|
4095
|
-
(click)="drawerRef.close()"
|
|
4096
|
-
[id]="'drawer-close-button'"
|
|
4097
|
-
>
|
|
4098
|
-
<Cross24 icon />
|
|
4099
|
-
</moz-icon-button>
|
|
4100
|
-
</div>
|
|
4101
|
-
|
|
4102
|
-
<div class="mc-drawer__body">
|
|
4103
|
-
<div class="mc-drawer__content" tabindex="0">
|
|
4104
|
-
@if (config.contentTitle) {
|
|
4105
|
-
<h2 class="mc-drawer__content__title">
|
|
4106
|
-
{{ config.contentTitle }}
|
|
4107
|
-
</h2>
|
|
4108
|
-
}
|
|
4109
|
-
|
|
4110
|
-
<ng-template cdkPortalOutlet />
|
|
4111
|
-
</div>
|
|
4112
|
-
</div>
|
|
4113
|
-
|
|
4114
|
-
@if (footerTpl) {
|
|
4115
|
-
<div class="mc-drawer__footer">
|
|
4116
|
-
<ng-container *ngTemplateOutlet="footerTpl" />
|
|
4117
|
-
</div>
|
|
4118
|
-
}
|
|
4119
|
-
</div>
|
|
4120
|
-
|
|
4121
|
-
@if (drawerRef.isOpen()) {
|
|
4122
|
-
<div class="mc-overlay is-visible" tabindex="-1" (click)="onBackdropClick($event)"></div>
|
|
4123
|
-
}
|
|
4124
|
-
</section>
|
|
4125
|
-
`, isInline: true, styles: ["@use \"@mozaic-ds/tokens/theming\" as tokens-theming;@use \"@mozaic-ds/styles/components/drawer\";@use \"@mozaic-ds/styles/components/overlay\";.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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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 });
|
|
3982
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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 });
|
|
4126
3983
|
}
|
|
4127
3984
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DrawerContainerComponent, decorators: [{
|
|
4128
3985
|
type: Component,
|
|
4129
|
-
args: [{ selector: 'moz-drawer-container', imports: [
|
|
4130
|
-
MozIconButtonComponent,
|
|
4131
|
-
ArrowBack24,
|
|
4132
|
-
Cross24,
|
|
4133
|
-
NgClass,
|
|
4134
|
-
NgTemplateOutlet,
|
|
4135
|
-
CdkPortalOutlet,
|
|
4136
|
-
], template: `
|
|
4137
|
-
<section
|
|
4138
|
-
(click)="$event.stopPropagation()"
|
|
4139
|
-
(keydown)="noop()"
|
|
4140
|
-
class="mc-drawer"
|
|
4141
|
-
[ngClass]="classMap()"
|
|
4142
|
-
role="dialog"
|
|
4143
|
-
aria-labelledby="drawerTitle"
|
|
4144
|
-
[attr.aria-modal]="ariaModal()"
|
|
4145
|
-
tabindex="-1"
|
|
4146
|
-
[attr.aria-hidden]="!drawerRef.isOpen()"
|
|
4147
|
-
>
|
|
4148
|
-
<div class="mc-drawer__dialog" role="document">
|
|
4149
|
-
<div class="mc-drawer__header">
|
|
4150
|
-
@if (config.back) {
|
|
4151
|
-
<moz-icon-button
|
|
4152
|
-
class="mc-drawer__back"
|
|
4153
|
-
aria-label="Back"
|
|
4154
|
-
[ghost]="true"
|
|
4155
|
-
(click)="onBackClick()"
|
|
4156
|
-
[id]="'drawer-back-button'"
|
|
4157
|
-
>
|
|
4158
|
-
<ArrowBack24 icon />
|
|
4159
|
-
</moz-icon-button>
|
|
4160
|
-
}
|
|
4161
|
-
|
|
4162
|
-
<h2 class="mc-drawer__title" id="drawerTitle">{{ config.title }}</h2>
|
|
4163
|
-
|
|
4164
|
-
<moz-icon-button
|
|
4165
|
-
class="mc-drawer__close"
|
|
4166
|
-
aria-label="Close"
|
|
4167
|
-
[ghost]="true"
|
|
4168
|
-
(click)="drawerRef.close()"
|
|
4169
|
-
[id]="'drawer-close-button'"
|
|
4170
|
-
>
|
|
4171
|
-
<Cross24 icon />
|
|
4172
|
-
</moz-icon-button>
|
|
4173
|
-
</div>
|
|
4174
|
-
|
|
4175
|
-
<div class="mc-drawer__body">
|
|
4176
|
-
<div class="mc-drawer__content" tabindex="0">
|
|
4177
|
-
@if (config.contentTitle) {
|
|
4178
|
-
<h2 class="mc-drawer__content__title">
|
|
4179
|
-
{{ config.contentTitle }}
|
|
4180
|
-
</h2>
|
|
4181
|
-
}
|
|
4182
|
-
|
|
4183
|
-
<ng-template cdkPortalOutlet />
|
|
4184
|
-
</div>
|
|
4185
|
-
</div>
|
|
4186
|
-
|
|
4187
|
-
@if (footerTpl) {
|
|
4188
|
-
<div class="mc-drawer__footer">
|
|
4189
|
-
<ng-container *ngTemplateOutlet="footerTpl" />
|
|
4190
|
-
</div>
|
|
4191
|
-
}
|
|
4192
|
-
</div>
|
|
4193
|
-
|
|
4194
|
-
@if (drawerRef.isOpen()) {
|
|
4195
|
-
<div class="mc-overlay is-visible" tabindex="-1" (click)="onBackdropClick($event)"></div>
|
|
4196
|
-
}
|
|
4197
|
-
</section>
|
|
4198
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@use \"@mozaic-ds/tokens/theming\" as tokens-theming;@use \"@mozaic-ds/styles/components/drawer\";@use \"@mozaic-ds/styles/components/overlay\";.mc-drawer{z-index:1000}\n"] }]
|
|
3986
|
+
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"] }]
|
|
4199
3987
|
}], propDecorators: { portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }], onEscape: [{
|
|
4200
3988
|
type: HostListener,
|
|
4201
3989
|
args: ['keydown.escape']
|
|
@@ -4283,11 +4071,12 @@ class MozDrawerComponent {
|
|
|
4283
4071
|
backEvent = output();
|
|
4284
4072
|
footerTpl = contentChild('footer', { ...(ngDevMode ? { debugName: "footerTpl" } : {}), descendants: false });
|
|
4285
4073
|
isOpen = signal(this.open(), ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
4286
|
-
|
|
4074
|
+
classes = computed(() => ({
|
|
4075
|
+
'mc-drawer': true,
|
|
4287
4076
|
'is-open': this.isOpen(),
|
|
4288
4077
|
'mc-drawer--extend': this.extended(),
|
|
4289
4078
|
[`mc-drawer--${this.position()}`]: this.position() !== 'right',
|
|
4290
|
-
}), ...(ngDevMode ? [{ debugName: "
|
|
4079
|
+
}), ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
4291
4080
|
ariaModal = computed(() => (this.isOpen() ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "ariaModal" }] : []));
|
|
4292
4081
|
constructor() {
|
|
4293
4082
|
effect(() => {
|
|
@@ -4311,11 +4100,11 @@ class MozDrawerComponent {
|
|
|
4311
4100
|
this.close();
|
|
4312
4101
|
}
|
|
4313
4102
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MozDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4314
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MozDrawerComponent, isStandalone: true, selector: "moz-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, contentTitle: { classPropertyName: "contentTitle", publicName: "contentTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateOpen: "updateOpen", backEvent: "backEvent" }, host: { listeners: { "keydown.escape": "onEscape()" } }, queries: [{ propertyName: "footerTpl", first: true, predicate: ["footer"], isSignal: true }], ngImport: i0, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n class
|
|
4103
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MozDrawerComponent, isStandalone: true, selector: "moz-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, contentTitle: { classPropertyName: "contentTitle", publicName: "contentTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateOpen: "updateOpen", backEvent: "backEvent" }, host: { listeners: { "keydown.escape": "onEscape()" } }, queries: [{ propertyName: "footerTpl", first: true, predicate: ["footer"], isSignal: true }], ngImport: i0, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n [class]=\"classes()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!isOpen()\"\n>\n <div class=\"mc-drawer__dialog\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (back()) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (click)=\"backClick()\"\n [id]=\"'drawer-back-button'\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ title() }}</h2>\n\n <moz-icon-button\n class=\"mc-drawer__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (click)=\"close()\"\n [id]=\"'drawer-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n </div>\n\n <div class=\"mc-drawer__body\">\n <div class=\"mc-drawer__content\" tabindex=\"0\">\n @if (contentTitle()) {\n <h2 class=\"mc-drawer__content__title\">\n {{ contentTitle() }}\n </h2>\n }\n\n <ng-content />\n </div>\n </div>\n\n @if (footerTpl()) {\n <div class=\"mc-drawer__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl()\" />\n </div>\n }\n </div>\n @if(isOpen()){\n <div\n class=\"mc-overlay is-visible\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n (click)=\"onBackdropClick($event)\"\n ></div>\n }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:.5rem;justify-content:flex-end}@media(width>=680px){.mc-drawer{padding:1rem}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 3);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:4rem}.mc-drawer__icon{height:1.5rem;margin-right:.75rem;width:1.5rem}.mc-drawer__title{font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--drawer-color-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1}.mc-drawer__title:first-child{padding-left:4rem}.mc-drawer__back,.mc-drawer__close{margin:.5rem}.mc-drawer__body{flex:1 1;overflow:hidden}.mc-drawer__body:last-child{margin-bottom:1.5rem;padding-bottom:1.5rem}.mc-drawer__content{max-height:100%;overflow:hidden auto;padding:.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:1.5rem}}.mc-drawer__content__title{font-size:var(--font-title-m, 1.5rem);margin:0 0 .5rem}.mc-drawer__footer{display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 2)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 2)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["fill", "hostClass"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["fill", "hostClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4315
4104
|
}
|
|
4316
4105
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MozDrawerComponent, decorators: [{
|
|
4317
4106
|
type: Component,
|
|
4318
|
-
args: [{ selector: 'moz-drawer', imports: [MozIconButtonComponent, ArrowBack24, Cross24,
|
|
4107
|
+
args: [{ selector: 'moz-drawer', imports: [MozIconButtonComponent, ArrowBack24, Cross24, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n [class]=\"classes()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!isOpen()\"\n>\n <div class=\"mc-drawer__dialog\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (back()) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (click)=\"backClick()\"\n [id]=\"'drawer-back-button'\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ title() }}</h2>\n\n <moz-icon-button\n class=\"mc-drawer__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (click)=\"close()\"\n [id]=\"'drawer-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n </div>\n\n <div class=\"mc-drawer__body\">\n <div class=\"mc-drawer__content\" tabindex=\"0\">\n @if (contentTitle()) {\n <h2 class=\"mc-drawer__content__title\">\n {{ contentTitle() }}\n </h2>\n }\n\n <ng-content />\n </div>\n </div>\n\n @if (footerTpl()) {\n <div class=\"mc-drawer__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl()\" />\n </div>\n }\n </div>\n @if(isOpen()){\n <div\n class=\"mc-overlay is-visible\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n (click)=\"onBackdropClick($event)\"\n ></div>\n }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:.5rem;justify-content:flex-end}@media(width>=680px){.mc-drawer{padding:1rem}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 3);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:4rem}.mc-drawer__icon{height:1.5rem;margin-right:.75rem;width:1.5rem}.mc-drawer__title{font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--drawer-color-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1}.mc-drawer__title:first-child{padding-left:4rem}.mc-drawer__back,.mc-drawer__close{margin:.5rem}.mc-drawer__body{flex:1 1;overflow:hidden}.mc-drawer__body:last-child{margin-bottom:1.5rem;padding-bottom:1.5rem}.mc-drawer__content{max-height:100%;overflow:hidden auto;padding:.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:1.5rem}}.mc-drawer__content__title{font-size:var(--font-title-m, 1.5rem);margin:0 0 .5rem}.mc-drawer__footer{display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 2)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 2)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}\n"] }]
|
|
4319
4108
|
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], extended: [{ type: i0.Input, args: [{ isSignal: true, alias: "extended", required: false }] }], back: [{ type: i0.Input, args: [{ isSignal: true, alias: "back", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], contentTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTitle", required: false }] }], updateOpen: [{ type: i0.Output, args: ["updateOpen"] }], backEvent: [{ type: i0.Output, args: ["backEvent"] }], footerTpl: [{ type: i0.ContentChild, args: ['footer', { ...{ descendants: false }, isSignal: true }] }], onEscape: [{
|
|
4320
4109
|
type: HostListener,
|
|
4321
4110
|
args: ['keydown.escape']
|