@mozaic-ds/angular 2.0.0-beta.6 → 2.0.0-beta.7
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.
|
@@ -912,11 +912,11 @@ class MozModalComponent {
|
|
|
912
912
|
ariaModal = computed(() => (this.isOpen() ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "ariaModal" }] : []));
|
|
913
913
|
noop() { }
|
|
914
914
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
915
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: MozModalComponent, isStandalone: true, selector: "moz-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateOpen: "updateOpen", closeRequest: "closeRequest" }, ngImport: i0, template: "<moz-overlay\n [isVisible]=\"open()\"\n dialogLabel=\"modalTitle\"\n (backdropClick)=\"close()\"\n (backdropKeydown)=\"close()\"\n>\n <section\n class=\"mc-modal\"\n [ngClass]=\"classMap()\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!open()\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n >\n <div class=\"mc-modal__dialog\" role=\"document\">\n <ng-content />\n </div>\n </section>\n</moz-overlay>\n", styles: [".mc-modal{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:var(--modal-z-index, 3);display:flex;justify-content:center;align-items:flex-end;overflow:hidden auto}@media(width>=680px){.mc-modal{align-items:center}}.mc-modal__dialog{background:var(--modal-color-background, #ffffff);display:flex;flex-direction:column;opacity:0;position:relative;transform:translateY(-25%);transition:visibility 0s linear .4s,transform .4s ease,opacity .4s ease;visibility:hidden;width:100%;border-radius:var(--border-radius-l, 1rem) var(--border-radius-l, 1rem) 0 0;z-index:3}@media(width>=680px){.mc-modal__dialog{width:38rem;border-radius:var(--border-radius-l, 1rem)}}.mc-modal.is-open .mc-modal__dialog{opacity:1;pointer-events:all;transform:translateY(0);transition:visibility 0s linear 0s,transform .4s ease,opacity .4s ease;visibility:visible}.mc-modal__header{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{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}\n"], dependencies: [{ kind: "component", type: MozOverlayComponent, selector: "moz-overlay", inputs: ["isVisible", "dialogLabel"], outputs: ["backdropClick", "backdropKeydown"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
915
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: MozModalComponent, isStandalone: true, selector: "moz-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateOpen: "updateOpen", closeRequest: "closeRequest" }, ngImport: i0, template: "<moz-overlay\n [isVisible]=\"open()\"\n dialogLabel=\"modalTitle\"\n (backdropClick)=\"close()\"\n (backdropKeydown)=\"close()\"\n>\n <section\n class=\"mc-modal\"\n [ngClass]=\"classMap()\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!open()\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n >\n <div class=\"mc-modal__dialog\" role=\"document\">\n <ng-content />\n </div>\n </section>\n</moz-overlay>\n", styles: [".mc-modal{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:var(--modal-z-index, 3);display:flex;justify-content:center;align-items:flex-end;overflow:hidden auto}@media(width>=680px){.mc-modal{align-items:center}}.mc-modal__dialog{background:var(--modal-color-background, #ffffff);display:flex;flex-direction:column;opacity:0;position:relative;transform:translateY(-25%);transition:visibility 0s linear .4s,transform .4s ease,opacity .4s ease;visibility:hidden;width:100%;border-radius:var(--border-radius-l, 1rem) var(--border-radius-l, 1rem) 0 0;z-index:3}@media(width>=680px){.mc-modal__dialog{width:38rem;border-radius:var(--border-radius-l, 1rem)}}.mc-modal.is-open .mc-modal__dialog{opacity:1;pointer-events:all;transform:translateY(0);transition:visibility 0s linear 0s,transform .4s ease,opacity .4s ease;visibility:visible}.mc-modal__header{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{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}\n"], dependencies: [{ kind: "component", type: MozOverlayComponent, selector: "moz-overlay", inputs: ["isVisible", "dialogLabel"], outputs: ["backdropClick", "backdropKeydown"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
916
916
|
}
|
|
917
917
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozModalComponent, decorators: [{
|
|
918
918
|
type: Component,
|
|
919
|
-
args: [{ selector: 'moz-modal', imports: [MozOverlayComponent, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<moz-overlay\n [isVisible]=\"open()\"\n dialogLabel=\"modalTitle\"\n (backdropClick)=\"close()\"\n (backdropKeydown)=\"close()\"\n>\n <section\n class=\"mc-modal\"\n [ngClass]=\"classMap()\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!open()\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n >\n <div class=\"mc-modal__dialog\" role=\"document\">\n <ng-content />\n </div>\n </section>\n</moz-overlay>\n", styles: [".mc-modal{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:var(--modal-z-index, 3);display:flex;justify-content:center;align-items:flex-end;overflow:hidden auto}@media(width>=680px){.mc-modal{align-items:center}}.mc-modal__dialog{background:var(--modal-color-background, #ffffff);display:flex;flex-direction:column;opacity:0;position:relative;transform:translateY(-25%);transition:visibility 0s linear .4s,transform .4s ease,opacity .4s ease;visibility:hidden;width:100%;border-radius:var(--border-radius-l, 1rem) var(--border-radius-l, 1rem) 0 0;z-index:3}@media(width>=680px){.mc-modal__dialog{width:38rem;border-radius:var(--border-radius-l, 1rem)}}.mc-modal.is-open .mc-modal__dialog{opacity:1;pointer-events:all;transform:translateY(0);transition:visibility 0s linear 0s,transform .4s ease,opacity .4s ease;visibility:visible}.mc-modal__header{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{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}\n"] }]
|
|
919
|
+
args: [{ selector: 'moz-modal', imports: [MozOverlayComponent, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, template: "<moz-overlay\n [isVisible]=\"open()\"\n dialogLabel=\"modalTitle\"\n (backdropClick)=\"close()\"\n (backdropKeydown)=\"close()\"\n>\n <section\n class=\"mc-modal\"\n [ngClass]=\"classMap()\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!open()\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n >\n <div class=\"mc-modal__dialog\" role=\"document\">\n <ng-content />\n </div>\n </section>\n</moz-overlay>\n", styles: [".mc-modal{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:var(--modal-z-index, 3);display:flex;justify-content:center;align-items:flex-end;overflow:hidden auto}@media(width>=680px){.mc-modal{align-items:center}}.mc-modal__dialog{background:var(--modal-color-background, #ffffff);display:flex;flex-direction:column;opacity:0;position:relative;transform:translateY(-25%);transition:visibility 0s linear .4s,transform .4s ease,opacity .4s ease;visibility:hidden;width:100%;border-radius:var(--border-radius-l, 1rem) var(--border-radius-l, 1rem) 0 0;z-index:3}@media(width>=680px){.mc-modal__dialog{width:38rem;border-radius:var(--border-radius-l, 1rem)}}.mc-modal.is-open .mc-modal__dialog{opacity:1;pointer-events:all;transform:translateY(0);transition:visibility 0s linear 0s,transform .4s ease,opacity .4s ease;visibility:visible}.mc-modal__header{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{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}\n"] }]
|
|
920
920
|
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], updateOpen: [{ type: i0.Output, args: ["updateOpen"] }], closeRequest: [{ type: i0.Output, args: ["closeRequest"] }] } });
|
|
921
921
|
|
|
922
922
|
class MozModalHeaderComponent {
|