@mozaic-ds/angular 2.2.0 → 2.2.1
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.
|
@@ -4791,18 +4791,6 @@ class DrawerContainerComponent {
|
|
|
4791
4791
|
...(ngDevMode ? [{ debugName: "portalOutlet" }] : /* istanbul ignore next */ []));
|
|
4792
4792
|
footerTpl = null;
|
|
4793
4793
|
componentRef = null;
|
|
4794
|
-
classes = computed(() => ({
|
|
4795
|
-
'mc-drawer': true,
|
|
4796
|
-
'is-open': this.drawerRef.isOpen(),
|
|
4797
|
-
'mc-drawer--extend': this.drawerRef.extended(),
|
|
4798
|
-
[`mc-drawer--${this.drawerRef.position()}`]: this.drawerRef.position() !== 'right',
|
|
4799
|
-
}), /* @ts-ignore */
|
|
4800
|
-
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
4801
|
-
dialogClasses = computed(() => {
|
|
4802
|
-
const extra = this.drawerRef.panelClass();
|
|
4803
|
-
return extra ? `mc-drawer__dialog ${extra}` : 'mc-drawer__dialog';
|
|
4804
|
-
}, /* @ts-ignore */
|
|
4805
|
-
...(ngDevMode ? [{ debugName: "dialogClasses" }] : /* istanbul ignore next */ []));
|
|
4806
4794
|
ariaModal = computed(() => (this.drawerRef.isOpen() ? 'true' : 'false'), /* @ts-ignore */
|
|
4807
4795
|
...(ngDevMode ? [{ debugName: "ariaModal" }] : /* istanbul ignore next */ []));
|
|
4808
4796
|
attachComponent(component) {
|
|
@@ -4831,11 +4819,11 @@ class DrawerContainerComponent {
|
|
|
4831
4819
|
}
|
|
4832
4820
|
}
|
|
4833
4821
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4834
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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]=\"
|
|
4822
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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=\"mc-drawer\"\n [class.is-open]=\"drawerRef.isOpen()\"\n [class.mc-drawer--extend]=\"drawerRef.extended()\"\n [class.mc-drawer--left]=\"drawerRef.position() === 'left'\"\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\" [class]=\"drawerRef.panelClass()\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (drawerRef.back()) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (activated)=\"onBackClick()\"\n [id]=\"'drawer-back-button'\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ drawerRef.title() }}</h2>\n\n <moz-icon-button\n class=\"mc-drawer__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (activated)=\"drawerRef.close()\"\n [id]=\"'drawer-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n </div>\n\n <div class=\"mc-drawer__body\">\n <div class=\"mc-drawer__content\" tabindex=\"0\">\n @if (drawerRef.contentTitle()) {\n <h2 class=\"mc-drawer__content__title\">\n {{ drawerRef.contentTitle() }}\n </h2>\n }\n\n <ng-template cdkPortalOutlet />\n </div>\n </div>\n\n @if (footerTpl) {\n <div class=\"mc-drawer__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl\" />\n </div>\n }\n </div>\n\n @if (drawerRef.isOpen()) {\n <div class=\"mc-overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\"></div>\n }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:.5rem;justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@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, 5);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:scroll}.mc-drawer__body:last-child{margin-bottom:1.5rem;padding-bottom:1.5rem}.mc-drawer__content{height:100%;overflow:hidden auto;padding:.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:.5rem 1.5rem 0}}.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, 4)}.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, 4)}.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"], outputs: ["activated"] }, { kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["hostClass"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["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 });
|
|
4835
4823
|
}
|
|
4836
4824
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DrawerContainerComponent, decorators: [{
|
|
4837
4825
|
type: Component,
|
|
4838
|
-
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]=\"
|
|
4826
|
+
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=\"mc-drawer\"\n [class.is-open]=\"drawerRef.isOpen()\"\n [class.mc-drawer--extend]=\"drawerRef.extended()\"\n [class.mc-drawer--left]=\"drawerRef.position() === 'left'\"\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\" [class]=\"drawerRef.panelClass()\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (drawerRef.back()) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (activated)=\"onBackClick()\"\n [id]=\"'drawer-back-button'\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ drawerRef.title() }}</h2>\n\n <moz-icon-button\n class=\"mc-drawer__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (activated)=\"drawerRef.close()\"\n [id]=\"'drawer-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n </div>\n\n <div class=\"mc-drawer__body\">\n <div class=\"mc-drawer__content\" tabindex=\"0\">\n @if (drawerRef.contentTitle()) {\n <h2 class=\"mc-drawer__content__title\">\n {{ drawerRef.contentTitle() }}\n </h2>\n }\n\n <ng-template cdkPortalOutlet />\n </div>\n </div>\n\n @if (footerTpl) {\n <div class=\"mc-drawer__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl\" />\n </div>\n }\n </div>\n\n @if (drawerRef.isOpen()) {\n <div class=\"mc-overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\"></div>\n }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:.5rem;justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@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, 5);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:scroll}.mc-drawer__body:last-child{margin-bottom:1.5rem;padding-bottom:1.5rem}.mc-drawer__content{height:100%;overflow:hidden auto;padding:.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:.5rem 1.5rem 0}}.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, 4)}.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, 4)}.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"] }]
|
|
4839
4827
|
}], propDecorators: { portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }], onEscape: [{
|
|
4840
4828
|
type: HostListener,
|
|
4841
4829
|
args: ['keydown.escape']
|
|
@@ -4868,17 +4856,23 @@ class MozDrawerService {
|
|
|
4868
4856
|
const containerPortal = new ComponentPortal(DrawerContainerComponent, null, injector);
|
|
4869
4857
|
const containerRef = overlayRef.attach(containerPortal);
|
|
4870
4858
|
const containerInstance = containerRef.instance;
|
|
4871
|
-
// Render the closed state synchronously
|
|
4872
|
-
//
|
|
4873
|
-
// CSS slide-in transition a painted starting point.
|
|
4874
|
-
//
|
|
4875
|
-
// Required under zoneless change detection (`provideZonelessChangeDetection`):
|
|
4876
|
-
// without it, the container's first change-detection pass can be flushed in
|
|
4877
|
-
// the same frame as `isOpen` flipping to `true`, so the dialog is painted
|
|
4878
|
-
// already-open and the `.is-open` transition never runs (the drawer "pops"
|
|
4879
|
-
// in instantly). Under zone.js this is just a harmless extra CD.
|
|
4859
|
+
// Render the closed state synchronously so the CSS slide-in transition has a
|
|
4860
|
+
// committed starting point (`transform: translate3d(100%, 0, 0)`).
|
|
4880
4861
|
containerRef.changeDetectorRef.detectChanges();
|
|
4881
|
-
|
|
4862
|
+
const host = containerRef.location.nativeElement;
|
|
4863
|
+
const dialog = host.querySelector('.mc-drawer__dialog');
|
|
4864
|
+
// CDK inserts the container's DOM *before* Angular applies its class bindings
|
|
4865
|
+
// (`is-open`, `mc-drawer--left`, `panelClass`, ...) and forces a style/layout
|
|
4866
|
+
// read while attaching (scroll-block strategy). The browser therefore sees a
|
|
4867
|
+
// real style change on an already-styled element and starts a spurious
|
|
4868
|
+
// transition (e.g. `transform: none` -> `translate3d(100%, 0, 0)`), which is
|
|
4869
|
+
// still in flight when `.is-open` lands two frames later. The open animation
|
|
4870
|
+
// then only interpolates the few pixels left, so the drawer "pops" in.
|
|
4871
|
+
// Cancelling these entry transitions snaps the dialog to its real closed
|
|
4872
|
+
// state before the open animation is triggered.
|
|
4873
|
+
dialog?.getAnimations().forEach((animation) => animation.cancel());
|
|
4874
|
+
// Force a reflow so the closed state is committed before `.is-open` is added.
|
|
4875
|
+
void host.offsetWidth;
|
|
4882
4876
|
// Wait for view init, then attach the user component inside the container
|
|
4883
4877
|
requestAnimationFrame(() => {
|
|
4884
4878
|
// Override the portal outlet's injector so the child component
|