@mozaic-ds/angular 2.0.0-beta.21 → 2.0.0-beta.23
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.
|
@@ -1950,9 +1950,13 @@ class MozTextInput {
|
|
|
1950
1950
|
}
|
|
1951
1951
|
clearValue() {
|
|
1952
1952
|
this._value.set('');
|
|
1953
|
-
this.
|
|
1953
|
+
const input = this.elementRef.nativeElement;
|
|
1954
|
+
this.renderer.setProperty(input, 'value', '');
|
|
1954
1955
|
this.onChange('');
|
|
1955
1956
|
this.onTouched();
|
|
1957
|
+
// Dispatch input event to trigger change detection and validators
|
|
1958
|
+
const event = new Event('input', { bubbles: true });
|
|
1959
|
+
input.dispatchEvent(event);
|
|
1956
1960
|
this.updateClearButtonVisibility();
|
|
1957
1961
|
}
|
|
1958
1962
|
onInput(event) {
|
|
@@ -3768,7 +3772,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
3768
3772
|
args: [{ selector: 'moz-tile-expandable', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, MozButtonComponent, MozIconButtonComponent, ChevronDown24], template: "<div [class]=\"hostClass()\">\n @if (isContainerTrigger()) {\n <button\n class=\"mc-tile__header\"\n type=\"button\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"contentId\"\n (click)=\"toggle()\"\n >\n <div class=\"mc-tile__body\">\n <ng-container [ngTemplateOutlet]=\"bodyTemplate\"></ng-container>\n </div>\n <div class=\"mc-tile__action\"></div>\n </button>\n } @else {\n <div class=\"mc-tile__header\">\n <div class=\"mc-tile__body\">\n <ng-container [ngTemplateOutlet]=\"bodyTemplate\"></ng-container>\n </div>\n <div class=\"mc-tile__action\">\n @if (isButtonTrigger()) {\n <button\n moz-button\n class=\"mc-tile__action-button\"\n [ghost]=\"true\"\n [iconPosition]=\"'right'\"\n (click)=\"toggle(); $event.stopPropagation()\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"contentId\"\n >\n <span class=\"mc-tile__action-label\">See more</span>\n <ChevronDown24 icon />\n </button>\n } @else if (isIconTrigger()) {\n <moz-icon-button\n class=\"mc-tile__action-button\"\n [ghost]=\"true\"\n [ariaLabel]=\"'Toggle content'\"\n (click)=\"toggle(); $event.stopPropagation()\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"contentId\"\n >\n <ChevronDown24 icon />\n </moz-icon-button>\n }\n </div>\n </div>\n }\n\n <div class=\"mc-tile__content\" [id]=\"contentId\" [attr.aria-hidden]=\"!expanded()\">\n <ng-content select=\"[segmented]\" />\n </div>\n\n <ng-template #bodyTemplate>\n <ng-content select=\"[body]\" />\n </ng-template>\n</div>\n", styles: [".mc-tile{border-radius:var(--border-radius-m, .5rem);background-color:var(--tile-color-background-primary, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile{transition:none}}.mc-tile{box-sizing:border-box;display:flex;flex-direction:column;position:relative;overflow:hidden}.mc-tile--secondary{background-color:var(--tile-color-background-secondary, #eff1f6)}@media(prefers-reduced-motion:no-preference){.mc-tile--secondary{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--secondary{transition:none}}.mc-tile--inverse{background-color:var(--tile-color-background-inverse, #242938);color:var(--color-text-primary-inverse, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile--inverse{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--inverse{transition:none}}.mc-tile--inverse svg,.mc-tile--inverse .mc-tile__action:after,.mc-tile--inverse .mc-tile__action-icon{color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff)}.mc-tile--inverse.mc-tile--navigate .mc-tile__action:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--color-text-primary-inverse, %23ffffff)' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E\")}.mc-tile--inverse.mc-tile--open .mc-tile__action:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--color-text-primary-inverse, %23ffffff)' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E\")}.mc-tile--inverse.mc-tile--external-link .mc-tile__action:after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--color-text-primary-inverse, %23ffffff)' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E\")}.mc-tile__body{flex:1}.mc-tile--bordered{box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc)}.mc-tile--action-right{flex-direction:row;align-items:stretch}.mc-tile--action-right .mc-tile__body{border-radius:var(--border-radius-m, .5rem) 0 0 var(--border-radius-m, .5rem)}.mc-tile--action-right .mc-tile__action{border-radius:0 var(--border-radius-m, .5rem) var(--border-radius-m, .5rem) 0;min-width:4rem;justify-content:center}.mc-tile__action{border-radius:0 0 var(--border-radius-m, .5rem) var(--border-radius-m, .5rem);box-sizing:border-box;background-color:transparent;display:flex;align-items:center;justify-content:flex-end;padding:.5rem;gap:.5rem}.mc-tile__action-icon{margin:.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center}.mc-tile--navigate .mc-tile__action:after{content:\"\";margin:.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z'/%3E%3C/svg%3E\")}.mc-tile--open .mc-tile__action:after{content:\"\";margin:.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.79289 6.29289c.39051-.39052 1.02371-.39052 1.41421 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.41421 0-.39052-.3905-.39052-1.0237 0-1.4142L14.0858 12 9.79289 7.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z'/%3E%3C/svg%3E\")}.mc-tile--external-link .mc-tile__action:after{content:\"\";margin:.5rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M13 4c-.5523 0-1 .44772-1 1s.4477 1 1 1h3.5858l-7.29291 7.2929c-.39052.3905-.39052 1.0237 0 1.4142.39053.3905 1.02371.3905 1.41421 0L18 7.41421V11c0 .5523.4477 1 1 1s1-.4477 1-1V5c0-.55228-.4477-1-1-1h-6ZM5 6c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-4.5c0-.5523-.4477-1-1-1s-1 .4477-1 1V18H6V8h3.5c.5523 0 1-.44772 1-1s-.4477-1-1-1H5Z'/%3E%3C/svg%3E\")}.mc-tile__item{display:flex;flex-direction:column}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable){border-radius:var(--border-radius-m, .5rem);background-color:var(--tile-color-background-primary, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable){transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable){transition:none}}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable){cursor:default;pointer-events:none}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--secondary{background-color:var(--tile-color-background-secondary, #eff1f6)}@media(prefers-reduced-motion:no-preference){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--secondary{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--secondary{transition:none}}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse{background-color:var(--tile-color-background-inverse, #242938);color:var(--color-text-primary-inverse, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse{transition:none}}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse svg,.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse .mc-tile__action:after,.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--inverse .mc-tile__action-icon{color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff)}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable).mc-tile--bordered{box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc)}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__content){display:flex;flex-direction:column}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__content) .mc-tile__content{border-top:1px solid var(--tile-color-border-default, #cccccc)}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action){pointer-events:auto;display:flex;flex-direction:column}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action) .mc-tile__header{display:flex;flex-direction:row;align-items:stretch;justify-content:space-between}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action) .mc-tile__body{flex-grow:1;display:flex;flex-direction:column;justify-content:center}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action) .mc-tile__action{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:.75rem;pointer-events:auto;background-color:transparent}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action) .mc-tile__action .mc-tile__action-button{pointer-events:auto}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action) .mc-tile__action .mc-tile__action-button svg{color:inherit;fill:currentcolor}.mc-tile:not(.mc-tile--clickable,.mc-tile--expandable,.mc-tile--selectable):has(.mc-tile__action).mc-tile--inverse .mc-tile__action .mc-tile__action-button svg{color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff)}.mc-tile--clickable{border-radius:var(--border-radius-m, .5rem);background-color:var(--tile-color-background-primary, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile--clickable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}.mc-tile--clickable:hover,.mc-tile--clickable:active{box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable.mc-tile--bordered:hover,.mc-tile--clickable.mc-tile--bordered:active{box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc)}@media(prefers-reduced-motion:no-preference){.mc-tile--clickable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67),box-shadow .2s ease}}@media(prefers-reduced-motion:reduce){.mc-tile--clickable{transition:none}}.mc-tile--clickable{transition:box-shadow .2s ease;cursor:pointer;position:relative}.mc-tile--clickable:before{border-radius:var(--border-radius-s, .25rem);content:\"\";position:absolute;inset:.25rem;background-color:transparent;pointer-events:none;outline:0 solid transparent;outline-offset:-.125rem}.mc-tile--clickable.mc-tile--secondary{background-color:var(--tile-color-background-secondary, #eff1f6)}@media(prefers-reduced-motion:no-preference){.mc-tile--clickable.mc-tile--secondary{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--clickable.mc-tile--secondary{transition:none}}.mc-tile--clickable.mc-tile--secondary:hover,.mc-tile--clickable.mc-tile--secondary:active{box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable.mc-tile--secondary.mc-tile--bordered:hover,.mc-tile--clickable.mc-tile--secondary.mc-tile--bordered:active{box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable.mc-tile--inverse{background-color:var(--tile-color-background-inverse, #242938);color:var(--color-text-primary-inverse, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile--clickable.mc-tile--inverse{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--clickable.mc-tile--inverse{transition:none}}.mc-tile--clickable.mc-tile--inverse:hover,.mc-tile--clickable.mc-tile--inverse:active{box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable.mc-tile--inverse.mc-tile--bordered:hover,.mc-tile--clickable.mc-tile--inverse.mc-tile--bordered:active{box-shadow:0 0 0 3px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable.mc-tile--inverse svg,.mc-tile--clickable.mc-tile--inverse .mc-tile__action:after,.mc-tile--clickable.mc-tile--inverse .mc-tile__action-icon{color:var(--color-text-primary-inverse, #ffffff);fill:var(--color-text-primary-inverse, #ffffff)}.mc-tile--clickable.mc-tile--bordered{box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc)}.mc-tile--clickable:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-tile--clickable:is(button){width:100%;border:0;padding:0;font-family:inherit;font-size:inherit;text-align:left;appearance:none}.mc-tile--clickable:is(a){display:flex;text-decoration:none;color:inherit}.mc-tile--clickable:is(a):visited{color:inherit}.mc-tile--clickable:is(a):not(.mc-tile--action-right){flex-direction:column}.mc-tile--clickable:is(div[role=button]){width:100%;cursor:pointer}.mc-tile--expandable{border-radius:var(--border-radius-m, .5rem);background-color:var(--tile-color-background-primary, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67),box-shadow .2s ease}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable{transition:none}}.mc-tile--expandable{display:block;position:relative;overflow:hidden}@supports (interpolate-size: allow-keywords){.mc-tile--expandable{interpolate-size:allow-keywords}}.mc-tile--expandable.mc-tile--secondary{background-color:var(--tile-color-background-secondary, #eff1f6)}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--secondary{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable.mc-tile--secondary{transition:none}}.mc-tile--expandable.mc-tile--bordered{box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc)}.mc-tile--expandable.mc-tile--borderless{border:none}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button){cursor:default}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button]{cursor:pointer}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button] .mc-tile__action:after{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button] .mc-tile__action:after{transition:none}}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button] .mc-tile__action:after{transform:rotateX(0);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='currentcolor' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");content:\"\";width:1rem;height:1rem;flex-shrink:0;background-repeat:no-repeat;background-position:center;background-size:1rem}.mc-tile--expandable .mc-tile__header{display:flex;align-items:stretch;position:relative;z-index:2}.mc-tile--expandable .mc-tile__header:after{border-radius:var(--border-radius-m, .5rem);content:\"\";position:absolute;inset:.25rem;background-color:transparent;pointer-events:none;z-index:-1}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable .mc-tile__header:after{transition:background-color .2s cubic-bezier(.17,.67,.83,.67),box-shadow .2s ease}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable .mc-tile__header:after{transition:none}}.mc-tile--expandable .mc-tile__header[type=button]{width:100%;border:none;background:none;padding:0;margin:0;font:inherit;text-align:inherit;cursor:pointer;appearance:none}.mc-tile--expandable .mc-tile__header[type=button]:focus-visible{outline:none}.mc-tile--expandable .mc-tile__header[type=button]:focus-visible:after{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button]:hover:after{background-color:var(--tile-color-background-hover, rgba(0, 0, 0, .05))}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button]:active:after{background-color:var(--tile-color-background-hover, rgba(0, 0, 0, .05))}.mc-tile--expandable .mc-tile__body{flex-grow:1;position:relative;z-index:1}.mc-tile--expandable:has(.mc-tile__action) .mc-tile__body{border-radius:var(--border-radius-m, .5rem) 0 0 0}.mc-tile--expandable .mc-tile__action{border-radius:0 var(--border-radius-m, .5rem) var(--border-radius-m, .5rem) 0;box-sizing:border-box;min-width:4rem;flex-shrink:0;background-color:transparent;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}.mc-tile--expandable .mc-tile__content{width:100%;overflow:hidden;max-height:0;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;position:relative;z-index:1}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable .mc-tile__content{transition:max-height .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable .mc-tile__content{transition:none}}.mc-tile--expandable .mc-tile__content[aria-hidden=false]{max-height:50rem}@supports (interpolate-size: allow-keywords){.mc-tile--expandable .mc-tile__content{height:0;max-height:none}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable .mc-tile__content{transition:height .2s cubic-bezier(.17,.67,.83,.67);transition-behavior:allow-discrete}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable .mc-tile__content{transition:none}}.mc-tile--expandable .mc-tile__content[aria-hidden=false]{height:auto}}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button][aria-expanded=true] .mc-tile__action:after{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button][aria-expanded=true] .mc-tile__action:after{transition:none}}.mc-tile--expandable:not(.mc-tile--trigger-icon,.mc-tile--trigger-button) .mc-tile__header[type=button][aria-expanded=true] .mc-tile__action:after{transform:rotateX(180deg)}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button[aria-expanded=true] svg{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button[aria-expanded=true] svg{transition:none}}.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button[aria-expanded=true] svg{transform:rotateX(180deg)}.mc-tile--expandable .mc-tile__action-button{position:relative;z-index:2}.mc-tile--expandable .mc-tile__action-button svg{fill:currentcolor}.mc-tile--expandable .mc-tile__action-button:not(.mc-button){display:flex;align-items:center;gap:.5rem;border:0;background-color:transparent;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;text-align:left;padding:0;margin:0;cursor:pointer;appearance:none}.mc-tile--expandable .mc-tile__action-button:not(.mc-button):focus-visible{outline:.125rem solid var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline-offset:.125rem;border-radius:var(--border-radius-s, .25rem)}.mc-tile--expandable .mc-tile__action-label{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);line-height:var(--line-height-m, 1.5)}.mc-tile--expandable.mc-tile--trigger-icon,.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__body{cursor:default}.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action{justify-content:center}.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action:after{content:none;display:none}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button svg{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button svg{transition:none}}.mc-tile--expandable.mc-tile--trigger-icon .mc-tile__action-button svg{transform:rotateX(0);fill:currentcolor}.mc-tile--expandable.mc-tile--trigger-button{cursor:default;display:flex;flex-direction:column}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__body{cursor:default;order:1}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__header{display:contents}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action{cursor:pointer;min-width:auto;justify-content:flex-start;padding:.5rem;order:3;box-shadow:0 1px 0 0 var(--tile-color-border-default, #cccccc);border-radius:0}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action:after{display:none}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__content{order:2;border-radius:0}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button{font-weight:var(--font-weight-semi-bold, 600);width:100%;margin:0}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg{transition:background-color .2s cubic-bezier(.17,.67,.83,.67),box-shadow .2s ease}}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg{transition:none}}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button svg{transform:rotateX(0);fill:currentcolor}@media(prefers-reduced-motion:no-preference){.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button[aria-expanded=true] svg{transition:transform .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:reduce){.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button[aria-expanded=true] svg{transition:none}}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-button[aria-expanded=true] svg{transform:rotateX(180deg)}.mc-tile--expandable.mc-tile--trigger-button .mc-tile__action-label{flex:initial}.mc-tile--selectable{border-radius:var(--border-radius-m, .5rem);background-color:var(--tile-color-background-primary, #ffffff)}@media(prefers-reduced-motion:no-preference){.mc-tile--selectable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67)}}@media(prefers-reduced-motion:no-preference){.mc-tile--selectable{transition:background-color .2s cubic-bezier(.17,.67,.83,.67),box-shadow .2s ease}}@media(prefers-reduced-motion:reduce){.mc-tile--selectable{transition:none}}.mc-tile--selectable{cursor:pointer;position:relative;display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;overflow:hidden;box-shadow:0 0 0 1px var(--tile-color-border-default, #cccccc)}.mc-tile--selectable .mc-tile__body{flex-grow:1;display:flex;flex-direction:column}.mc-tile--selectable .mc-tile__action{background-color:transparent;box-sizing:border-box;flex-shrink:0;display:flex;align-items:flex-start;justify-content:center;border-radius:initial;padding:.75rem}.mc-tile--selectable:has(.mc-tile__content){flex-direction:column;align-items:stretch}.mc-tile--selectable:has(.mc-tile__content) .mc-tile__header{display:flex;flex-direction:row;align-items:stretch;justify-content:space-between}.mc-tile--selectable:has(.mc-tile__content) .mc-tile__header .mc-tile__body{display:flex;flex-direction:column}.mc-tile--selectable:has(.mc-tile__content) .mc-tile__content{border-top:1px solid var(--tile-color-border-default, #cccccc)}.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-left{flex-direction:column}.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-left .mc-tile__header{flex-direction:row-reverse}.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-center{align-items:stretch}.mc-tile--selectable:has(.mc-tile__content).mc-tile--input-center .mc-tile__header{align-items:center}.mc-tile--selectable.mc-tile--input-left{flex-direction:row-reverse}.mc-tile--selectable.mc-tile--input-center{align-items:center}.mc-tile--selectable:hover{box-shadow:0 0 0 2px var(--tile-color-border-default, #cccccc)}.mc-tile--selectable:has(input:checked){box-shadow:0 0 0 2px var(--color-brand, #78be20),0 0 0 4px var(--color-background-accent, #ebf5de)}\n"] }]
|
|
3769
3773
|
}], propDecorators: { triggerMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerMode", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
|
|
3770
3774
|
|
|
3771
|
-
class
|
|
3775
|
+
class MozDrawerComponent {
|
|
3772
3776
|
open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
|
|
3773
3777
|
position = input('right', ...(ngDevMode ? [{ debugName: "position" }] : []));
|
|
3774
3778
|
extended = input(false, ...(ngDevMode ? [{ debugName: "extended" }] : []));
|
|
@@ -3797,17 +3801,17 @@ class DrawerComponent {
|
|
|
3797
3801
|
this.backEvent.emit();
|
|
3798
3802
|
}
|
|
3799
3803
|
noop() { }
|
|
3800
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type:
|
|
3801
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type:
|
|
3804
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3805
|
+
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 class=\"mc-overlay is-visible\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"modalTitle\"></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 });
|
|
3802
3806
|
}
|
|
3803
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type:
|
|
3807
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozDrawerComponent, decorators: [{
|
|
3804
3808
|
type: Component,
|
|
3805
|
-
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 class=\"mc-overlay is-visible\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"modalTitle\"></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}
|
|
3809
|
+
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 class=\"mc-overlay is-visible\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"modalTitle\"></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"] }]
|
|
3806
3810
|
}], 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 }] }] } });
|
|
3807
3811
|
|
|
3808
3812
|
/**
|
|
3809
3813
|
* Generated bundle index. Do not edit.
|
|
3810
3814
|
*/
|
|
3811
3815
|
|
|
3812
|
-
export { BuiltInMenuComponent,
|
|
3816
|
+
export { BuiltInMenuComponent, MozAccordionComponent, MozAccordionContentComponent, MozAccordionHeaderComponent, MozAccordionPanelComponent, MozActionBottomBarComponent, MozActionListboxComponent, MozAvatarComponent, MozBreadcrumbComponent, MozButtonComponent, MozCalloutComponent, MozCarouselComponent, MozCheckListMenuComponent, MozCheckboxComponent, MozCheckboxGroupComponent, MozCircularProgressBarComponent, MozDatepickerComponent, MozDividerComponent, MozDrawerComponent, MozFieldComponent, MozFieldGroupComponent, MozFileUploaderComponent, MozFileUploaderItemComponent, MozFlagComponent, MozIconButtonComponent, MozKpiComponent, MozLinearProgressBarBufferComponent, MozLinearProgressBarPercentageComponent, MozLinkComponent, MozLoaderComponent, MozLoadingOverlayComponent, MozModalBodyComponent, MozModalComponent, MozModalContainerComponent, MozModalFooterComponent, MozModalHeaderComponent, MozModalRef, MozModalService, MozNumberBadgeComponent, MozOverlayComponent, MozPageHeaderComponent, MozPaginationComponent, MozPasswordInputDirective, MozPhoneNumberComponent, MozPincodeInputComponent, MozQuantitySelectorComponent, MozRadioComponent, MozRadioGroupComponent, MozSegmentedControlComponent, MozSelectComponent, MozSidebarComponent, MozStarRatingComponent, MozStatusBadgeComponent, MozStatusDotComponent, MozStatusMessageComponent, MozStatusNotificationComponent, MozStepperBottomBarComponent, MozStepperCompactComponent, MozStepperInlineComponent, MozStepperStackedComponent, MozTabComponent, MozTabsComponent, MozTagComponent, MozTextInput, MozTextarea, MozTileComponent, MozTileExpandableComponent, MozTileSelectableComponent, MozToasterComponent, MozToggleComponent, MozTooltipComponent, MozTooltipDirective };
|
|
3813
3817
|
//# sourceMappingURL=mozaic-ds-angular.mjs.map
|