@mozaic-ds/angular 2.0.0-beta.26 → 2.0.0-beta.28
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.
|
@@ -1592,11 +1592,11 @@ class MozStatusNotificationComponent {
|
|
|
1592
1592
|
this.closed.emit();
|
|
1593
1593
|
}
|
|
1594
1594
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozStatusNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1595
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozStatusNotificationComponent, isStandalone: true, selector: "moz-status-notification", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, queries: [{ propertyName: "descriptionTpl", first: true, predicate: ["description"], isSignal: true }, { propertyName: "footerTpl", first: true, predicate: ["footer"], isSignal: true }], ngImport: i0, template: "<section role=\"status\" [class]=\"classes()\">\n <div class=\"mc-status-notification__icon\">\n <ng-container [ngComponentOutlet]=\"iconComponent()\" />\n </div>\n\n <div class=\"mc-status-notification__content\">\n <span class=\"mc-status-notification__title\">{{ title() }}</span>\n @if (descriptionTpl()) {\n <div class=\"mc-status-notification__message\">\n <ng-container [ngTemplateOutlet]=\"descriptionTpl()\" />\n </div>\n } @if (footerTpl()) {\n <div class=\"mc-status-notification__footer\">\n <ng-container [ngTemplateOutlet]=\"footerTpl()\" />\n </div>\n }\n </div>\n\n @if (closable()) {\n <moz-icon-button\n size=\"s\"\n class=\"mc-status-notification-closable__close\"\n [ghost]=\"true\"\n type=\"button\"\n [appearance]=\"'standard'\"\n (click)=\"onCloseClick()\"\n ariaLabel=\"Close notification\"\n >\n <Cross20 icon />\n </moz-icon-button>\n }\n</section>\n", styles: [".mc-status-notification{border-radius:var(--border-radius-m, .5rem);background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-info, #3facd7);display:flex;flex-flow:row wrap;align-items:flex-start;position:relative;box-sizing:border-box;color:var(--status-notification-color-text, #000000)}.mc-status-notification__icon{width:2rem;height:2rem;margin:.75rem;fill:var(--status-notification-color-icon-info, #0b96cc)}.mc-status-notification__content{flex:1 1 0;padding:.75rem 1rem .75rem 0}.mc-status-notification__title,.mc-status-notification__message{line-height:var(--line-height-s, 1.3);margin-block:0}.mc-status-notification__title{font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-150, 1rem);margin-block-end:.25rem}.mc-status-notification__message{font-size:var(--font-size-100, .875rem)}.mc-status-notification__footer{align-items:flex-start;display:flex;flex-flow:row wrap;gap:.5rem;margin-top:.75rem;margin-bottom:.5rem}.mc-status-notification--information{background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-info, #3facd7)}.mc-status-notification--information .mc-status-notification__icon{fill:var(--status-notification-color-icon-info, #0b96cc)}.mc-status-notification--success{background:var(--status-notification-color-background-success, #ebf5de);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-success, #78be20)}.mc-status-notification--success .mc-status-notification__icon{fill:var(--status-notification-color-icon-success, #3f9e10)}.mc-status-notification--warning{background:var(--status-notification-color-background-warning, #fdf1e8);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-warning, #ef934a)}.mc-status-notification--warning .mc-status-notification__icon{fill:var(--status-notification-color-icon-warning, #ea7315)}.mc-status-notification--error{background:var(--status-notification-color-background-error, #fdeaea);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-error, #ef5f5c)}.mc-status-notification--error .mc-status-notification__icon{fill:var(--status-notification-color-icon-error, #ea302d)}.mc-status-notification-closable__close{margin:.25rem}\n"], dependencies: [{ kind: "component", type: Cross20, selector: "Cross20", inputs: ["color", "hostClass"] }, { kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1595
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozStatusNotificationComponent, isStandalone: true, selector: "moz-status-notification", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, queries: [{ propertyName: "descriptionTpl", first: true, predicate: ["description"], isSignal: true }, { propertyName: "footerTpl", first: true, predicate: ["footer"], isSignal: true }], ngImport: i0, template: "<section role=\"status\" [class]=\"classes()\">\n <div class=\"mc-status-notification__icon\">\n <ng-container [ngComponentOutlet]=\"iconComponent()\" />\n </div>\n\n <div class=\"mc-status-notification__content\">\n @if(title()){\n <span class=\"mc-status-notification__title\">{{ title() }}</span>\n } @if (descriptionTpl()) {\n <div class=\"mc-status-notification__message\">\n <ng-container [ngTemplateOutlet]=\"descriptionTpl()\" />\n </div>\n } @if (footerTpl()) {\n <div class=\"mc-status-notification__footer\">\n <ng-container [ngTemplateOutlet]=\"footerTpl()\" />\n </div>\n }\n </div>\n\n @if (closable()) {\n <moz-icon-button\n size=\"s\"\n class=\"mc-status-notification-closable__close\"\n [ghost]=\"true\"\n type=\"button\"\n [appearance]=\"'standard'\"\n (click)=\"onCloseClick()\"\n ariaLabel=\"Close notification\"\n >\n <Cross20 icon />\n </moz-icon-button>\n }\n</section>\n", styles: [".mc-status-notification{border-radius:var(--border-radius-m, .5rem);background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-info, #3facd7);display:flex;flex-flow:row wrap;align-items:flex-start;position:relative;box-sizing:border-box;color:var(--status-notification-color-text, #000000)}.mc-status-notification__icon{width:2rem;height:2rem;margin:.75rem;fill:var(--status-notification-color-icon-info, #0b96cc)}.mc-status-notification__content{flex:1 1 0;padding:.75rem 1rem .75rem 0}.mc-status-notification__title,.mc-status-notification__message{line-height:var(--line-height-s, 1.3);margin-block:0}.mc-status-notification__title{font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-150, 1rem);margin-block-end:.25rem}.mc-status-notification__message{font-size:var(--font-size-100, .875rem)}.mc-status-notification__footer{align-items:flex-start;display:flex;flex-flow:row wrap;gap:.5rem;margin-top:.75rem;margin-bottom:.5rem}.mc-status-notification--information{background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-info, #3facd7)}.mc-status-notification--information .mc-status-notification__icon{fill:var(--status-notification-color-icon-info, #0b96cc)}.mc-status-notification--success{background:var(--status-notification-color-background-success, #ebf5de);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-success, #78be20)}.mc-status-notification--success .mc-status-notification__icon{fill:var(--status-notification-color-icon-success, #3f9e10)}.mc-status-notification--warning{background:var(--status-notification-color-background-warning, #fdf1e8);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-warning, #ef934a)}.mc-status-notification--warning .mc-status-notification__icon{fill:var(--status-notification-color-icon-warning, #ea7315)}.mc-status-notification--error{background:var(--status-notification-color-background-error, #fdeaea);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-error, #ef5f5c)}.mc-status-notification--error .mc-status-notification__icon{fill:var(--status-notification-color-icon-error, #ea302d)}.mc-status-notification-closable__close{margin:.25rem}\n"], dependencies: [{ kind: "component", type: Cross20, selector: "Cross20", inputs: ["color", "hostClass"] }, { kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1596
1596
|
}
|
|
1597
1597
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozStatusNotificationComponent, decorators: [{
|
|
1598
1598
|
type: Component,
|
|
1599
|
-
args: [{ selector: 'moz-status-notification', changeDetection: ChangeDetectionStrategy.OnPush, imports: [Cross20, MozIconButtonComponent, NgComponentOutlet, NgTemplateOutlet], template: "<section role=\"status\" [class]=\"classes()\">\n <div class=\"mc-status-notification__icon\">\n <ng-container [ngComponentOutlet]=\"iconComponent()\" />\n </div>\n\n <div class=\"mc-status-notification__content\">\n <span class=\"mc-status-notification__title\">{{ title() }}</span>\n @if (descriptionTpl()) {\n <div class=\"mc-status-notification__message\">\n <ng-container [ngTemplateOutlet]=\"descriptionTpl()\" />\n </div>\n } @if (footerTpl()) {\n <div class=\"mc-status-notification__footer\">\n <ng-container [ngTemplateOutlet]=\"footerTpl()\" />\n </div>\n }\n </div>\n\n @if (closable()) {\n <moz-icon-button\n size=\"s\"\n class=\"mc-status-notification-closable__close\"\n [ghost]=\"true\"\n type=\"button\"\n [appearance]=\"'standard'\"\n (click)=\"onCloseClick()\"\n ariaLabel=\"Close notification\"\n >\n <Cross20 icon />\n </moz-icon-button>\n }\n</section>\n", styles: [".mc-status-notification{border-radius:var(--border-radius-m, .5rem);background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-info, #3facd7);display:flex;flex-flow:row wrap;align-items:flex-start;position:relative;box-sizing:border-box;color:var(--status-notification-color-text, #000000)}.mc-status-notification__icon{width:2rem;height:2rem;margin:.75rem;fill:var(--status-notification-color-icon-info, #0b96cc)}.mc-status-notification__content{flex:1 1 0;padding:.75rem 1rem .75rem 0}.mc-status-notification__title,.mc-status-notification__message{line-height:var(--line-height-s, 1.3);margin-block:0}.mc-status-notification__title{font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-150, 1rem);margin-block-end:.25rem}.mc-status-notification__message{font-size:var(--font-size-100, .875rem)}.mc-status-notification__footer{align-items:flex-start;display:flex;flex-flow:row wrap;gap:.5rem;margin-top:.75rem;margin-bottom:.5rem}.mc-status-notification--information{background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-info, #3facd7)}.mc-status-notification--information .mc-status-notification__icon{fill:var(--status-notification-color-icon-info, #0b96cc)}.mc-status-notification--success{background:var(--status-notification-color-background-success, #ebf5de);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-success, #78be20)}.mc-status-notification--success .mc-status-notification__icon{fill:var(--status-notification-color-icon-success, #3f9e10)}.mc-status-notification--warning{background:var(--status-notification-color-background-warning, #fdf1e8);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-warning, #ef934a)}.mc-status-notification--warning .mc-status-notification__icon{fill:var(--status-notification-color-icon-warning, #ea7315)}.mc-status-notification--error{background:var(--status-notification-color-background-error, #fdeaea);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-error, #ef5f5c)}.mc-status-notification--error .mc-status-notification__icon{fill:var(--status-notification-color-icon-error, #ea302d)}.mc-status-notification-closable__close{margin:.25rem}\n"] }]
|
|
1599
|
+
args: [{ selector: 'moz-status-notification', changeDetection: ChangeDetectionStrategy.OnPush, imports: [Cross20, MozIconButtonComponent, NgComponentOutlet, NgTemplateOutlet], template: "<section role=\"status\" [class]=\"classes()\">\n <div class=\"mc-status-notification__icon\">\n <ng-container [ngComponentOutlet]=\"iconComponent()\" />\n </div>\n\n <div class=\"mc-status-notification__content\">\n @if(title()){\n <span class=\"mc-status-notification__title\">{{ title() }}</span>\n } @if (descriptionTpl()) {\n <div class=\"mc-status-notification__message\">\n <ng-container [ngTemplateOutlet]=\"descriptionTpl()\" />\n </div>\n } @if (footerTpl()) {\n <div class=\"mc-status-notification__footer\">\n <ng-container [ngTemplateOutlet]=\"footerTpl()\" />\n </div>\n }\n </div>\n\n @if (closable()) {\n <moz-icon-button\n size=\"s\"\n class=\"mc-status-notification-closable__close\"\n [ghost]=\"true\"\n type=\"button\"\n [appearance]=\"'standard'\"\n (click)=\"onCloseClick()\"\n ariaLabel=\"Close notification\"\n >\n <Cross20 icon />\n </moz-icon-button>\n }\n</section>\n", styles: [".mc-status-notification{border-radius:var(--border-radius-m, .5rem);background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-info, #3facd7);display:flex;flex-flow:row wrap;align-items:flex-start;position:relative;box-sizing:border-box;color:var(--status-notification-color-text, #000000)}.mc-status-notification__icon{width:2rem;height:2rem;margin:.75rem;fill:var(--status-notification-color-icon-info, #0b96cc)}.mc-status-notification__content{flex:1 1 0;padding:.75rem 1rem .75rem 0}.mc-status-notification__title,.mc-status-notification__message{line-height:var(--line-height-s, 1.3);margin-block:0}.mc-status-notification__title{font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-150, 1rem);margin-block-end:.25rem}.mc-status-notification__message{font-size:var(--font-size-100, .875rem)}.mc-status-notification__footer{align-items:flex-start;display:flex;flex-flow:row wrap;gap:.5rem;margin-top:.75rem;margin-bottom:.5rem}.mc-status-notification--information{background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-info, #3facd7)}.mc-status-notification--information .mc-status-notification__icon{fill:var(--status-notification-color-icon-info, #0b96cc)}.mc-status-notification--success{background:var(--status-notification-color-background-success, #ebf5de);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-success, #78be20)}.mc-status-notification--success .mc-status-notification__icon{fill:var(--status-notification-color-icon-success, #3f9e10)}.mc-status-notification--warning{background:var(--status-notification-color-background-warning, #fdf1e8);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-warning, #ef934a)}.mc-status-notification--warning .mc-status-notification__icon{fill:var(--status-notification-color-icon-warning, #ea7315)}.mc-status-notification--error{background:var(--status-notification-color-background-error, #fdeaea);box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--status-notification-color-border-error, #ef5f5c)}.mc-status-notification--error .mc-status-notification__icon{fill:var(--status-notification-color-icon-error, #ea302d)}.mc-status-notification-closable__close{margin:.25rem}\n"] }]
|
|
1600
1600
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], descriptionTpl: [{ type: i0.ContentChild, args: ['description', { ...{ descendants: false }, isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: ['footer', { ...{ descendants: false }, isSignal: true }] }] } });
|
|
1601
1601
|
|
|
1602
1602
|
class MozTabComponent {
|
|
@@ -3805,13 +3805,25 @@ class MozDrawerComponent {
|
|
|
3805
3805
|
this.backEvent.emit();
|
|
3806
3806
|
}
|
|
3807
3807
|
noop() { }
|
|
3808
|
+
onEscape() {
|
|
3809
|
+
if (this.isOpen()) {
|
|
3810
|
+
this.close();
|
|
3811
|
+
}
|
|
3812
|
+
}
|
|
3813
|
+
onBackdropClick(event) {
|
|
3814
|
+
event.stopPropagation();
|
|
3815
|
+
this.close();
|
|
3816
|
+
}
|
|
3808
3817
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3809
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozDrawerComponent, isStandalone: true, selector: "moz-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, contentTitle: { classPropertyName: "contentTitle", publicName: "contentTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateOpen: "updateOpen", backEvent: "backEvent" }, queries: [{ propertyName: "footerTpl", first: true, predicate: ["footer"], isSignal: true }], ngImport: i0, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n class=\"mc-drawer\"\n [ngClass]=\"classMap()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!isOpen()\"\n>\n <div class=\"mc-drawer__dialog\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (back()) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (click)=\"backClick()\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ title() }}</h2>\n\n <moz-icon-button class=\"mc-drawer__close\" aria-label=\"Close\" [ghost]=\"true\" (click)=\"close()\">\n <Cross24 icon />\n </moz-icon-button>\n </div>\n\n <div class=\"mc-drawer__body\">\n <div class=\"mc-drawer__content\" tabindex=\"0\">\n @if (contentTitle()) {\n <h2 class=\"mc-drawer__content__title\">\n {{ contentTitle() }}\n </h2>\n }\n\n <ng-content />\n </div>\n </div>\n\n @if (footerTpl()) {\n <div class=\"mc-drawer__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl()\" />\n </div>\n }\n </div>\n @if(isOpen()){\n <div
|
|
3818
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozDrawerComponent, isStandalone: true, selector: "moz-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, contentTitle: { classPropertyName: "contentTitle", publicName: "contentTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateOpen: "updateOpen", backEvent: "backEvent" }, host: { listeners: { "keydown.escape": "onEscape()" } }, queries: [{ propertyName: "footerTpl", first: true, predicate: ["footer"], isSignal: true }], ngImport: i0, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n class=\"mc-drawer\"\n [ngClass]=\"classMap()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!isOpen()\"\n>\n <div class=\"mc-drawer__dialog\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (back()) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (click)=\"backClick()\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ title() }}</h2>\n\n <moz-icon-button class=\"mc-drawer__close\" aria-label=\"Close\" [ghost]=\"true\" (click)=\"close()\">\n <Cross24 icon />\n </moz-icon-button>\n </div>\n\n <div class=\"mc-drawer__body\">\n <div class=\"mc-drawer__content\" tabindex=\"0\">\n @if (contentTitle()) {\n <h2 class=\"mc-drawer__content__title\">\n {{ contentTitle() }}\n </h2>\n }\n\n <ng-content />\n </div>\n </div>\n\n @if (footerTpl()) {\n <div class=\"mc-drawer__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl()\" />\n </div>\n }\n </div>\n @if(isOpen()){\n <div\n class=\"mc-overlay is-visible\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n (click)=\"onBackdropClick($event)\"\n ></div>\n }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:.5rem;justify-content:flex-end}@media(width>=680px){.mc-drawer{padding:1rem}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 3);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:4rem}.mc-drawer__icon{height:1.5rem;margin-right:.75rem;width:1.5rem}.mc-drawer__title{font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--drawer-color-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1}.mc-drawer__title:first-child{padding-left:4rem}.mc-drawer__back,.mc-drawer__close{margin:.5rem}.mc-drawer__body{flex:1 1;overflow:hidden}.mc-drawer__body:last-child{margin-bottom:1.5rem;padding-bottom:1.5rem}.mc-drawer__content{max-height:100%;overflow:hidden auto;padding:.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:1.5rem}}.mc-drawer__content__title{font-size:var(--font-title-m, 1.5rem);margin:0 0 .5rem}.mc-drawer__footer{display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 2)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 2)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["color", "hostClass"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["color", "hostClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3810
3819
|
}
|
|
3811
3820
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozDrawerComponent, decorators: [{
|
|
3812
3821
|
type: Component,
|
|
3813
|
-
args: [{ selector: 'moz-drawer', imports: [MozIconButtonComponent, ArrowBack24, Cross24, NgClass, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n class=\"mc-drawer\"\n [ngClass]=\"classMap()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!isOpen()\"\n>\n <div class=\"mc-drawer__dialog\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (back()) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (click)=\"backClick()\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ title() }}</h2>\n\n <moz-icon-button class=\"mc-drawer__close\" aria-label=\"Close\" [ghost]=\"true\" (click)=\"close()\">\n <Cross24 icon />\n </moz-icon-button>\n </div>\n\n <div class=\"mc-drawer__body\">\n <div class=\"mc-drawer__content\" tabindex=\"0\">\n @if (contentTitle()) {\n <h2 class=\"mc-drawer__content__title\">\n {{ contentTitle() }}\n </h2>\n }\n\n <ng-content />\n </div>\n </div>\n\n @if (footerTpl()) {\n <div class=\"mc-drawer__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl()\" />\n </div>\n }\n </div>\n @if(isOpen()){\n <div
|
|
3814
|
-
}], 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 }] }]
|
|
3822
|
+
args: [{ selector: 'moz-drawer', imports: [MozIconButtonComponent, ArrowBack24, Cross24, NgClass, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n class=\"mc-drawer\"\n [ngClass]=\"classMap()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!isOpen()\"\n>\n <div class=\"mc-drawer__dialog\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (back()) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (click)=\"backClick()\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ title() }}</h2>\n\n <moz-icon-button class=\"mc-drawer__close\" aria-label=\"Close\" [ghost]=\"true\" (click)=\"close()\">\n <Cross24 icon />\n </moz-icon-button>\n </div>\n\n <div class=\"mc-drawer__body\">\n <div class=\"mc-drawer__content\" tabindex=\"0\">\n @if (contentTitle()) {\n <h2 class=\"mc-drawer__content__title\">\n {{ contentTitle() }}\n </h2>\n }\n\n <ng-content />\n </div>\n </div>\n\n @if (footerTpl()) {\n <div class=\"mc-drawer__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl()\" />\n </div>\n }\n </div>\n @if(isOpen()){\n <div\n class=\"mc-overlay is-visible\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n (click)=\"onBackdropClick($event)\"\n ></div>\n }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:.5rem;justify-content:flex-end}@media(width>=680px){.mc-drawer{padding:1rem}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 3);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:4rem}.mc-drawer__icon{height:1.5rem;margin-right:.75rem;width:1.5rem}.mc-drawer__title{font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--drawer-color-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1}.mc-drawer__title:first-child{padding-left:4rem}.mc-drawer__back,.mc-drawer__close{margin:.5rem}.mc-drawer__body{flex:1 1;overflow:hidden}.mc-drawer__body:last-child{margin-bottom:1.5rem;padding-bottom:1.5rem}.mc-drawer__content{max-height:100%;overflow:hidden auto;padding:.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:1.5rem}}.mc-drawer__content__title{font-size:var(--font-title-m, 1.5rem);margin:0 0 .5rem}.mc-drawer__footer{display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 2)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 2)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}\n"] }]
|
|
3823
|
+
}], 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: [{
|
|
3824
|
+
type: HostListener,
|
|
3825
|
+
args: ['keydown.escape']
|
|
3826
|
+
}] } });
|
|
3815
3827
|
|
|
3816
3828
|
/**
|
|
3817
3829
|
* Generated bundle index. Do not edit.
|