@mozaic-ds/angular 2.4.1 → 2.5.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.
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { input, computed, ChangeDetectionStrategy, Component, contentChild, ViewEncapsulation, signal, forwardRef, output, ContentChild, viewChild, inject, model, InjectionToken, HostListener, Injector, Injectable, TemplateRef, afterNextRender, Directive, linkedSignal, EnvironmentInjector, createComponent, ChangeDetectorRef, NgZone, viewChildren, effect, ContentChildren, ApplicationRef, Renderer2, ElementRef, Input, booleanAttribute, contentChildren, afterRenderEffect, untracked } from '@angular/core';
|
|
3
3
|
import { RouterLink, RouterLinkActive, RouterLinkWithHref } from '@angular/router';
|
|
4
|
+
import { ChevronRight20, WarningCircle32, Uploading32, CheckCircle32, CrossCircleFilled20, Refresh32, Refresh20, Eye20, Upload24, Cross24, ChevronLeft24, ChevronRight24, ChevronLeft20, CrossCircleFilled24, More24, Less24, InfoCircleFilled24, ErrorFilled24, WarningTriangleFilled24, CheckCircleFilled24, Cross20, CrossCircle24, ImageAlt32, ChevronDown24, CheckCircleFilled32, WarningCircleFilled32, CrossCircleFilled32, InfoCircleFilled32, SidebarExpand24, ChevronDown20, ArrowBottomRight24, ArrowTopRight24, StarHalf32, StarFilled32, Star32, StarHalf24, StarFilled24, Star24, StarHalf20, StarFilled20, Star20, Check20, Check24, ArrowBack24, ArrowNext24, HelpCircle20, Menu24, Notification20, Search20, PauseCircle24, PlayCircle24, Search24, CheckCircle24, SortDown20, SortTop20, SortTopDown20, ChevronUp20 } from '@mozaic-ds/icons-angular';
|
|
4
5
|
import { NgTemplateOutlet, NgClass, NgComponentOutlet, DOCUMENT } from '@angular/common';
|
|
5
6
|
import * as i1 from '@angular/forms';
|
|
6
7
|
import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
7
|
-
import { WarningCircle32, Uploading32, CheckCircle32, CrossCircleFilled20, Refresh32, Refresh20, Eye20, Upload24, Cross24, ChevronLeft24, ChevronRight24, ChevronLeft20, ChevronRight20, CrossCircleFilled24, More24, Less24, InfoCircleFilled24, ErrorFilled24, WarningTriangleFilled24, CheckCircleFilled24, Cross20, CrossCircle24, ImageAlt32, ChevronDown24, CheckCircleFilled32, WarningCircleFilled32, CrossCircleFilled32, InfoCircleFilled32, SidebarExpand24, ChevronDown20, ArrowBottomRight24, ArrowTopRight24, StarHalf32, StarFilled32, Star32, StarHalf24, StarFilled24, Star24, StarHalf20, StarFilled20, Star20, Check20, Check24, ArrowBack24, ArrowNext24, HelpCircle20, Menu24, Notification20, Search20, PauseCircle24, PlayCircle24, Search24, CheckCircle24, SortDown20, SortTop20, SortTopDown20, ChevronUp20 } from '@mozaic-ds/icons-angular';
|
|
8
8
|
import { Overlay, OverlayConfig, OverlayPositionBuilder, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
|
|
9
9
|
import { CdkPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
|
|
10
10
|
import { Subject, map, of, take, tap } from 'rxjs';
|
|
@@ -26,20 +26,18 @@ class MozBreadcrumbComponent {
|
|
|
26
26
|
};
|
|
27
27
|
}, /* @ts-ignore */
|
|
28
28
|
...(ngDevMode ? [{ debugName: "classObject" }] : /* istanbul ignore next */ []));
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
return `link breadcrumb__current${linkClass}`;
|
|
36
|
-
}
|
|
29
|
+
appearanceClass = computed(() => this.appearance() !== 'standard' ? ` link--${this.appearance()}` : '', /* @ts-ignore */
|
|
30
|
+
...(ngDevMode ? [{ debugName: "appearanceClass" }] : /* istanbul ignore next */ []));
|
|
31
|
+
linkClass = computed(() => `link link--inline${this.appearanceClass()}`, /* @ts-ignore */
|
|
32
|
+
...(ngDevMode ? [{ debugName: "linkClass" }] : /* istanbul ignore next */ []));
|
|
33
|
+
currentLinkClass = computed(() => `link breadcrumb__current${this.appearanceClass()}`, /* @ts-ignore */
|
|
34
|
+
...(ngDevMode ? [{ debugName: "currentLinkClass" }] : /* istanbul ignore next */ []));
|
|
37
35
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: MozBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
38
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: MozBreadcrumbComponent, isStandalone: true, selector: "moz-breadcrumb", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<nav [class]=\"classObject()\" aria-label=\"Breadcrumb\">\n <ol class=\"breadcrumb__container\">\n @for (link of links(); track $index; let isLast = $last) {\n <li class=\"breadcrumb__item\">\n @if (
|
|
36
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: MozBreadcrumbComponent, isStandalone: true, selector: "moz-breadcrumb", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<nav [class]=\"classObject()\" aria-label=\"Breadcrumb\">\n <ol class=\"breadcrumb__container\">\n @for (link of links(); track $index; let isFirst = $first, isLast = $last) {\n <li class=\"breadcrumb__item\">\n @if (link.router) {\n <a\n [routerLink]=\"link.href\"\n [class]=\"isLast ? currentLinkClass() : linkClass()\"\n [attr.aria-current]=\"isLast ? 'page' : null\"\n >\n @if (!isFirst) {\n <ChevronRight20 class=\"link__icon\" />\n }\n <span class=\"link__label\">{{ link.label }}</span>\n </a>\n } @else {\n <a\n [href]=\"link.href\"\n [class]=\"isLast ? currentLinkClass() : linkClass()\"\n [attr.aria-current]=\"isLast ? 'page' : null\"\n >\n @if (!isFirst) {\n <ChevronRight20 class=\"link__icon\" />\n }\n <span class=\"link__label\">{{ link.label }}</span>\n </a>\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [".mc-breadcrumb,.breadcrumb{color:var(--breadcrumb-color-text-standard, #000000)}.mc-breadcrumb__container,.breadcrumb__container{list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;flex-wrap:wrap;gap:var(--spacing-050, .25rem)}.mc-breadcrumb__item,.breadcrumb__item{background-position:left center;background-repeat:no-repeat}@media screen and (width<=679px){.mc-breadcrumb__item:nth-last-child(2) .mc-link__icon,.breadcrumb__item:nth-last-child(2) .mc-link__icon,.mc-breadcrumb__item:nth-last-child(2) .link__icon,.breadcrumb__item:nth-last-child(2) .link__icon{transform:rotate(180deg)}.mc-breadcrumb__item:not(:nth-last-child(2)),.breadcrumb__item:not(:nth-last-child(2)){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;text-align:left;opacity:0}}.mc-breadcrumb__current,.breadcrumb__current,.mc-breadcrumb__current.mc-link{cursor:default;text-decoration:none}.mc-breadcrumb__current,.breadcrumb__current,.mc-breadcrumb__current:active,.mc-breadcrumb__current:focus,.mc-breadcrumb__current:hover,.mc-breadcrumb__current:visited,.mc-breadcrumb__current.mc-link,.mc-breadcrumb__current.mc-link:active,.mc-breadcrumb__current.mc-link:focus,.mc-breadcrumb__current.mc-link:hover,.mc-breadcrumb__current.mc-link:visited{color:currentcolor}.mc-breadcrumb--inverse,.breadcrumb--inverse{color:var(--breadcrumb-color-text-inverse, #ffffff)}.mc-link,.link{transition:box-shadow .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-050, .25rem);min-height:var(--spacing-300, 1.5rem);text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:var(--link-size-font-s, .875rem)}.mc-link__label,.link__label{text-decoration-thickness:7.5%;text-underline-offset:28.5%;line-height:1.3}.mc-link__icon,.link__icon{display:block;height:var(--spacing-250, 1.25rem);width:var(--spacing-250, 1.25rem);flex-shrink:0;fill:currentcolor}.mc-link:hover:not(.mc-link--stand-alone,.mc-link--inline,.link--inline) .mc-link__label,.link:hover:not(.mc-link--stand-alone,.mc-link--inline,.link--inline) .mc-link__label,.mc-link:hover:not(.mc-link--stand-alone,.mc-link--inline,.link--inline) .link__label,.link:hover:not(.mc-link--stand-alone,.mc-link--inline,.link--inline) .link__label{text-decoration:underline}.mc-link:focus,.link:focus{box-shadow:none;outline:none}.mc-link:focus-visible,.link:focus-visible{box-shadow:0 0 0 var(--focus-dimension-outline-mid, .125rem) var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 var(--focus-dimension-outline-outer, .25rem) var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:var(--focus-dimension-gap, .125rem) solid transparent;outline-offset:var(--focus-dimension-gap, .125rem)}.mc-link--m{min-height:var(--spacing-400, 2rem);font-size:var(--link-size-font-m, 1rem)}.mc-link--m .mc-link__label,.mc-link--m .link__label{text-decoration-thickness:6.5%;text-underline-offset:31%}.mc-link--secondary{color:var(--link-color-text-secondary, #666666)}.mc-link--accent{color:var(--link-color-text-accent, #117f03)}.mc-link--inverse,.link--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--link-color-text-inverse, #ffffff)}.mc-link--stand-alone{min-height:var(--spacing-400, 2rem);font-weight:var(--font-weight-semi-bold, 600)}.mc-link--stand-alone .mc-link__label,.mc-link--stand-alone .link__label{text-decoration-line:underline}.mc-link--stand-alone:hover .mc-link__label,.mc-link--stand-alone:hover .link__label{text-decoration:none}.mc-link--inline,.link--inline{font-weight:inherit;text-decoration:underline}.mc-link--inline .mc-link__label,.link--inline .mc-link__label,.mc-link--inline .link__label,.link--inline .link__label{line-height:1}.mc-link--inline:hover,.link--inline:hover{text-decoration:none}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: ChevronRight20, selector: "ChevronRight20", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
39
37
|
}
|
|
40
38
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: MozBreadcrumbComponent, decorators: [{
|
|
41
39
|
type: Component,
|
|
42
|
-
args: [{ selector: 'moz-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink], template: "<nav [class]=\"classObject()\" aria-label=\"Breadcrumb\">\n <ol class=\"breadcrumb__container\">\n @for (link of links(); track $index; let isLast = $last) {\n <li class=\"breadcrumb__item\">\n @if (
|
|
40
|
+
args: [{ selector: 'moz-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, ChevronRight20], template: "<nav [class]=\"classObject()\" aria-label=\"Breadcrumb\">\n <ol class=\"breadcrumb__container\">\n @for (link of links(); track $index; let isFirst = $first, isLast = $last) {\n <li class=\"breadcrumb__item\">\n @if (link.router) {\n <a\n [routerLink]=\"link.href\"\n [class]=\"isLast ? currentLinkClass() : linkClass()\"\n [attr.aria-current]=\"isLast ? 'page' : null\"\n >\n @if (!isFirst) {\n <ChevronRight20 class=\"link__icon\" />\n }\n <span class=\"link__label\">{{ link.label }}</span>\n </a>\n } @else {\n <a\n [href]=\"link.href\"\n [class]=\"isLast ? currentLinkClass() : linkClass()\"\n [attr.aria-current]=\"isLast ? 'page' : null\"\n >\n @if (!isFirst) {\n <ChevronRight20 class=\"link__icon\" />\n }\n <span class=\"link__label\">{{ link.label }}</span>\n </a>\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [".mc-breadcrumb,.breadcrumb{color:var(--breadcrumb-color-text-standard, #000000)}.mc-breadcrumb__container,.breadcrumb__container{list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;flex-wrap:wrap;gap:var(--spacing-050, .25rem)}.mc-breadcrumb__item,.breadcrumb__item{background-position:left center;background-repeat:no-repeat}@media screen and (width<=679px){.mc-breadcrumb__item:nth-last-child(2) .mc-link__icon,.breadcrumb__item:nth-last-child(2) .mc-link__icon,.mc-breadcrumb__item:nth-last-child(2) .link__icon,.breadcrumb__item:nth-last-child(2) .link__icon{transform:rotate(180deg)}.mc-breadcrumb__item:not(:nth-last-child(2)),.breadcrumb__item:not(:nth-last-child(2)){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;text-align:left;opacity:0}}.mc-breadcrumb__current,.breadcrumb__current,.mc-breadcrumb__current.mc-link{cursor:default;text-decoration:none}.mc-breadcrumb__current,.breadcrumb__current,.mc-breadcrumb__current:active,.mc-breadcrumb__current:focus,.mc-breadcrumb__current:hover,.mc-breadcrumb__current:visited,.mc-breadcrumb__current.mc-link,.mc-breadcrumb__current.mc-link:active,.mc-breadcrumb__current.mc-link:focus,.mc-breadcrumb__current.mc-link:hover,.mc-breadcrumb__current.mc-link:visited{color:currentcolor}.mc-breadcrumb--inverse,.breadcrumb--inverse{color:var(--breadcrumb-color-text-inverse, #ffffff)}.mc-link,.link{transition:box-shadow .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-050, .25rem);min-height:var(--spacing-300, 1.5rem);text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:var(--link-size-font-s, .875rem)}.mc-link__label,.link__label{text-decoration-thickness:7.5%;text-underline-offset:28.5%;line-height:1.3}.mc-link__icon,.link__icon{display:block;height:var(--spacing-250, 1.25rem);width:var(--spacing-250, 1.25rem);flex-shrink:0;fill:currentcolor}.mc-link:hover:not(.mc-link--stand-alone,.mc-link--inline,.link--inline) .mc-link__label,.link:hover:not(.mc-link--stand-alone,.mc-link--inline,.link--inline) .mc-link__label,.mc-link:hover:not(.mc-link--stand-alone,.mc-link--inline,.link--inline) .link__label,.link:hover:not(.mc-link--stand-alone,.mc-link--inline,.link--inline) .link__label{text-decoration:underline}.mc-link:focus,.link:focus{box-shadow:none;outline:none}.mc-link:focus-visible,.link:focus-visible{box-shadow:0 0 0 var(--focus-dimension-outline-mid, .125rem) var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 var(--focus-dimension-outline-outer, .25rem) var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:var(--focus-dimension-gap, .125rem) solid transparent;outline-offset:var(--focus-dimension-gap, .125rem)}.mc-link--m{min-height:var(--spacing-400, 2rem);font-size:var(--link-size-font-m, 1rem)}.mc-link--m .mc-link__label,.mc-link--m .link__label{text-decoration-thickness:6.5%;text-underline-offset:31%}.mc-link--secondary{color:var(--link-color-text-secondary, #666666)}.mc-link--accent{color:var(--link-color-text-accent, #117f03)}.mc-link--inverse,.link--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--link-color-text-inverse, #ffffff)}.mc-link--stand-alone{min-height:var(--spacing-400, 2rem);font-weight:var(--font-weight-semi-bold, 600)}.mc-link--stand-alone .mc-link__label,.mc-link--stand-alone .link__label{text-decoration-line:underline}.mc-link--stand-alone:hover .mc-link__label,.mc-link--stand-alone:hover .link__label{text-decoration:none}.mc-link--inline,.link--inline{font-weight:inherit;text-decoration:underline}.mc-link--inline .mc-link__label,.link--inline .mc-link__label,.mc-link--inline .link__label,.link--inline .link__label{line-height:1}.mc-link--inline:hover,.link--inline:hover{text-decoration:none}\n"] }]
|
|
43
41
|
}], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }] } });
|
|
44
42
|
|
|
45
43
|
class MozButtonComponent {
|
|
@@ -4819,11 +4817,11 @@ class DrawerContainerComponent {
|
|
|
4819
4817
|
}
|
|
4820
4818
|
}
|
|
4821
4819
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4822
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.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=\"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:var(--spacing-100, .5rem);justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:var(--spacing-200, 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:var(--spacing-800, 4rem)}.mc-drawer__icon{height:var(--spacing-300, 1.5rem);margin-right:var(--spacing-150, .75rem);width:var(--spacing-300, 1.5rem)}.mc-drawer__title{font:var(--font-body-accent-s, 600 .875rem/1.3 LeroyMerlin),sans-serif;color:var(--drawer-color-text-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;outline:none}.mc-drawer__title:first-child{padding-left:var(--spacing-800, 4rem)}.mc-drawer__back,.mc-drawer__close{margin:var(--spacing-100, .5rem)}.mc-drawer__body{flex:1 1;overflow:scroll}.mc-drawer__body:last-child{margin-bottom:var(--spacing-300, 1.5rem);padding-bottom:var(--spacing-300, 1.5rem)}.mc-drawer__content{height:100%;overflow:hidden auto;padding:var(--spacing-100, .5rem) var(--spacing-200, 1rem) 0;color:var(--drawer-color-text-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:var(--spacing-100, .5rem) var(--spacing-300, 1.5rem) 0}}.mc-drawer__content__title{font:var(--font-title-m, 600 1.5rem/1.3 LeroyMerlin),sans-serif;margin:0 0 var(--spacing-100, .5rem)}.mc-drawer__footer{display:flex;flex-direction:column;gap:var(--spacing-200, 1rem);padding:var(--spacing-200, 1rem) var(--spacing-300, 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 });
|
|
4820
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.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=\"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:var(--spacing-100, .5rem);justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:var(--spacing-200, 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:var(--spacing-800, 4rem)}.mc-drawer__icon{height:var(--spacing-300, 1.5rem);margin-right:var(--spacing-150, .75rem);width:var(--spacing-300, 1.5rem)}.mc-drawer__title{font:var(--font-body-accent-s, 600 .875rem/1.3 LeroyMerlin),sans-serif;color:var(--drawer-color-text-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;outline:none}.mc-drawer__title:first-child{padding-left:var(--spacing-800, 4rem)}.mc-drawer__back,.mc-drawer__close{margin:var(--spacing-100, .5rem)}.mc-drawer__body{flex:1 1;overflow:scroll}.mc-drawer__body:last-child{margin-bottom:var(--spacing-300, 1.5rem);padding-bottom:var(--spacing-300, 1.5rem)}.mc-drawer__content{height:100%;overflow:hidden auto;padding:var(--spacing-100, .5rem) var(--spacing-200, 1rem) 0;color:var(--drawer-color-text-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:var(--spacing-100, .5rem) var(--spacing-300, 1.5rem) 0}}.mc-drawer__content__title{font:var(--font-title-m, 600 1.5rem/1.3 LeroyMerlin),sans-serif;margin:0 0 var(--spacing-100, .5rem)}.mc-drawer__footer{display:flex;flex-direction:column;gap:var(--spacing-200, 1rem);padding:var(--spacing-200, 1rem) var(--spacing-300, 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}.mc-drawer__body{overflow:auto}\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 });
|
|
4823
4821
|
}
|
|
4824
4822
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: DrawerContainerComponent, decorators: [{
|
|
4825
4823
|
type: Component,
|
|
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:var(--spacing-100, .5rem);justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:var(--spacing-200, 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:var(--spacing-800, 4rem)}.mc-drawer__icon{height:var(--spacing-300, 1.5rem);margin-right:var(--spacing-150, .75rem);width:var(--spacing-300, 1.5rem)}.mc-drawer__title{font:var(--font-body-accent-s, 600 .875rem/1.3 LeroyMerlin),sans-serif;color:var(--drawer-color-text-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;outline:none}.mc-drawer__title:first-child{padding-left:var(--spacing-800, 4rem)}.mc-drawer__back,.mc-drawer__close{margin:var(--spacing-100, .5rem)}.mc-drawer__body{flex:1 1;overflow:scroll}.mc-drawer__body:last-child{margin-bottom:var(--spacing-300, 1.5rem);padding-bottom:var(--spacing-300, 1.5rem)}.mc-drawer__content{height:100%;overflow:hidden auto;padding:var(--spacing-100, .5rem) var(--spacing-200, 1rem) 0;color:var(--drawer-color-text-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:var(--spacing-100, .5rem) var(--spacing-300, 1.5rem) 0}}.mc-drawer__content__title{font:var(--font-title-m, 600 1.5rem/1.3 LeroyMerlin),sans-serif;margin:0 0 var(--spacing-100, .5rem)}.mc-drawer__footer{display:flex;flex-direction:column;gap:var(--spacing-200, 1rem);padding:var(--spacing-200, 1rem) var(--spacing-300, 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"] }]
|
|
4824
|
+
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:var(--spacing-100, .5rem);justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:var(--spacing-200, 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:var(--spacing-800, 4rem)}.mc-drawer__icon{height:var(--spacing-300, 1.5rem);margin-right:var(--spacing-150, .75rem);width:var(--spacing-300, 1.5rem)}.mc-drawer__title{font:var(--font-body-accent-s, 600 .875rem/1.3 LeroyMerlin),sans-serif;color:var(--drawer-color-text-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;outline:none}.mc-drawer__title:first-child{padding-left:var(--spacing-800, 4rem)}.mc-drawer__back,.mc-drawer__close{margin:var(--spacing-100, .5rem)}.mc-drawer__body{flex:1 1;overflow:scroll}.mc-drawer__body:last-child{margin-bottom:var(--spacing-300, 1.5rem);padding-bottom:var(--spacing-300, 1.5rem)}.mc-drawer__content{height:100%;overflow:hidden auto;padding:var(--spacing-100, .5rem) var(--spacing-200, 1rem) 0;color:var(--drawer-color-text-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:var(--spacing-100, .5rem) var(--spacing-300, 1.5rem) 0}}.mc-drawer__content__title{font:var(--font-title-m, 600 1.5rem/1.3 LeroyMerlin),sans-serif;margin:0 0 var(--spacing-100, .5rem)}.mc-drawer__footer{display:flex;flex-direction:column;gap:var(--spacing-200, 1rem);padding:var(--spacing-200, 1rem) var(--spacing-300, 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}.mc-drawer__body{overflow:auto}\n"] }]
|
|
4827
4825
|
}], propDecorators: { portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }], onEscape: [{
|
|
4828
4826
|
type: HostListener,
|
|
4829
4827
|
args: ['keydown.escape']
|
|
@@ -4979,11 +4977,11 @@ class MozDrawerComponent {
|
|
|
4979
4977
|
this.close();
|
|
4980
4978
|
}
|
|
4981
4979
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: MozDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4982
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.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 }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", 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]=\"dialogClasses()\" 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 (activated)=\"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 (activated)=\"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:var(--spacing-100, .5rem);justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:var(--spacing-200, 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:var(--spacing-800, 4rem)}.mc-drawer__icon{height:var(--spacing-300, 1.5rem);margin-right:var(--spacing-150, .75rem);width:var(--spacing-300, 1.5rem)}.mc-drawer__title{font:var(--font-body-accent-s, 600 .875rem/1.3 LeroyMerlin),sans-serif;color:var(--drawer-color-text-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;outline:none}.mc-drawer__title:first-child{padding-left:var(--spacing-800, 4rem)}.mc-drawer__back,.mc-drawer__close{margin:var(--spacing-100, .5rem)}.mc-drawer__body{flex:1 1;overflow:scroll}.mc-drawer__body:last-child{margin-bottom:var(--spacing-300, 1.5rem);padding-bottom:var(--spacing-300, 1.5rem)}.mc-drawer__content{height:100%;overflow:hidden auto;padding:var(--spacing-100, .5rem) var(--spacing-200, 1rem) 0;color:var(--drawer-color-text-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:var(--spacing-100, .5rem) var(--spacing-300, 1.5rem) 0}}.mc-drawer__content__title{font:var(--font-title-m, 600 1.5rem/1.3 LeroyMerlin),sans-serif;margin:0 0 var(--spacing-100, .5rem)}.mc-drawer__footer{display:flex;flex-direction:column;gap:var(--spacing-200, 1rem);padding:var(--spacing-200, 1rem) var(--spacing-300, 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4980
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.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 }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", 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]=\"dialogClasses()\" 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 (activated)=\"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 (activated)=\"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:var(--spacing-100, .5rem);justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:var(--spacing-200, 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:var(--spacing-800, 4rem)}.mc-drawer__icon{height:var(--spacing-300, 1.5rem);margin-right:var(--spacing-150, .75rem);width:var(--spacing-300, 1.5rem)}.mc-drawer__title{font:var(--font-body-accent-s, 600 .875rem/1.3 LeroyMerlin),sans-serif;color:var(--drawer-color-text-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;outline:none}.mc-drawer__title:first-child{padding-left:var(--spacing-800, 4rem)}.mc-drawer__back,.mc-drawer__close{margin:var(--spacing-100, .5rem)}.mc-drawer__body{flex:1 1;overflow:scroll}.mc-drawer__body:last-child{margin-bottom:var(--spacing-300, 1.5rem);padding-bottom:var(--spacing-300, 1.5rem)}.mc-drawer__content{height:100%;overflow:hidden auto;padding:var(--spacing-100, .5rem) var(--spacing-200, 1rem) 0;color:var(--drawer-color-text-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:var(--spacing-100, .5rem) var(--spacing-300, 1.5rem) 0}}.mc-drawer__content__title{font:var(--font-title-m, 600 1.5rem/1.3 LeroyMerlin),sans-serif;margin:0 0 var(--spacing-100, .5rem)}.mc-drawer__footer{display:flex;flex-direction:column;gap:var(--spacing-200, 1rem);padding:var(--spacing-200, 1rem) var(--spacing-300, 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}.mc-drawer__body{overflow:auto}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4983
4981
|
}
|
|
4984
4982
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: MozDrawerComponent, decorators: [{
|
|
4985
4983
|
type: Component,
|
|
4986
|
-
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]=\"dialogClasses()\" 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 (activated)=\"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 (activated)=\"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:var(--spacing-100, .5rem);justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:var(--spacing-200, 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:var(--spacing-800, 4rem)}.mc-drawer__icon{height:var(--spacing-300, 1.5rem);margin-right:var(--spacing-150, .75rem);width:var(--spacing-300, 1.5rem)}.mc-drawer__title{font:var(--font-body-accent-s, 600 .875rem/1.3 LeroyMerlin),sans-serif;color:var(--drawer-color-text-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;outline:none}.mc-drawer__title:first-child{padding-left:var(--spacing-800, 4rem)}.mc-drawer__back,.mc-drawer__close{margin:var(--spacing-100, .5rem)}.mc-drawer__body{flex:1 1;overflow:scroll}.mc-drawer__body:last-child{margin-bottom:var(--spacing-300, 1.5rem);padding-bottom:var(--spacing-300, 1.5rem)}.mc-drawer__content{height:100%;overflow:hidden auto;padding:var(--spacing-100, .5rem) var(--spacing-200, 1rem) 0;color:var(--drawer-color-text-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:var(--spacing-100, .5rem) var(--spacing-300, 1.5rem) 0}}.mc-drawer__content__title{font:var(--font-title-m, 600 1.5rem/1.3 LeroyMerlin),sans-serif;margin:0 0 var(--spacing-100, .5rem)}.mc-drawer__footer{display:flex;flex-direction:column;gap:var(--spacing-200, 1rem);padding:var(--spacing-200, 1rem) var(--spacing-300, 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"] }]
|
|
4984
|
+
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]=\"dialogClasses()\" 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 (activated)=\"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 (activated)=\"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:var(--spacing-100, .5rem);justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:var(--spacing-200, 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:var(--spacing-800, 4rem)}.mc-drawer__icon{height:var(--spacing-300, 1.5rem);margin-right:var(--spacing-150, .75rem);width:var(--spacing-300, 1.5rem)}.mc-drawer__title{font:var(--font-body-accent-s, 600 .875rem/1.3 LeroyMerlin),sans-serif;color:var(--drawer-color-text-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;outline:none}.mc-drawer__title:first-child{padding-left:var(--spacing-800, 4rem)}.mc-drawer__back,.mc-drawer__close{margin:var(--spacing-100, .5rem)}.mc-drawer__body{flex:1 1;overflow:scroll}.mc-drawer__body:last-child{margin-bottom:var(--spacing-300, 1.5rem);padding-bottom:var(--spacing-300, 1.5rem)}.mc-drawer__content{height:100%;overflow:hidden auto;padding:var(--spacing-100, .5rem) var(--spacing-200, 1rem) 0;color:var(--drawer-color-text-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:var(--spacing-100, .5rem) var(--spacing-300, 1.5rem) 0}}.mc-drawer__content__title{font:var(--font-title-m, 600 1.5rem/1.3 LeroyMerlin),sans-serif;margin:0 0 var(--spacing-100, .5rem)}.mc-drawer__footer{display:flex;flex-direction:column;gap:var(--spacing-200, 1rem);padding:var(--spacing-200, 1rem) var(--spacing-300, 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}.mc-drawer__body{overflow:auto}\n"] }]
|
|
4987
4985
|
}], 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 }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", 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: [{
|
|
4988
4986
|
type: HostListener,
|
|
4989
4987
|
args: ['keydown.escape']
|