@mozaic-ds/angular 2.2.2 → 2.3.0
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.
|
@@ -35,11 +35,11 @@ class MozBreadcrumbComponent {
|
|
|
35
35
|
return `link breadcrumb__current${linkClass}`;
|
|
36
36
|
}
|
|
37
37
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
38
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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 (isLast) { @if (link.router) {\n <a [routerLink]=\"link.href\" [class]=\"getCurrentLinkClass()\" aria-current=\"page\">\n <span class=\"link__label\">{{ link.label }}</span>\n </a>\n } @else {\n <a [href]=\"link.href\" [class]=\"getCurrentLinkClass()\" aria-current=\"page\">\n <span class=\"link__label\">{{ link.label }}</span>\n </a>\n } } @else { @if (link.router) {\n <a [routerLink]=\"link.href\" [class]=\"getLinkClass()\">\n <span class=\"link__label\">{{ link.label }}</span>\n </a>\n } @else {\n <a [href]=\"link.href\" [class]=\"getLinkClass()\">\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:.25rem}.mc-breadcrumb__item,.breadcrumb__item{background-position:left center;background-repeat:no-repeat}@media screen and (max-width:679px){.mc-breadcrumb__item:nth-last-child(2) .mc-link__icon,.breadcrumb__item:nth-last-child(2) .mc-link__icon{transform:rotate(180deg)}.mc-breadcrumb__item:not(:nth-last-child(2)),.breadcrumb__item:not(:nth-last-child(2)){
|
|
38
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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 (isLast) { @if (link.router) {\n <a [routerLink]=\"link.href\" [class]=\"getCurrentLinkClass()\" aria-current=\"page\">\n <span class=\"link__label\">{{ link.label }}</span>\n </a>\n } @else {\n <a [href]=\"link.href\" [class]=\"getCurrentLinkClass()\" aria-current=\"page\">\n <span class=\"link__label\">{{ link.label }}</span>\n </a>\n } } @else { @if (link.router) {\n <a [routerLink]=\"link.href\" [class]=\"getLinkClass()\">\n <span class=\"link__label\">{{ link.label }}</span>\n </a>\n } @else {\n <a [href]=\"link.href\" [class]=\"getLinkClass()\">\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:.25rem}.mc-breadcrumb__item,.breadcrumb__item{background-position:left center;background-repeat:no-repeat}@media screen and (max-width:679px){.mc-breadcrumb__item:nth-last-child(2) .mc-link__icon,.breadcrumb__item:nth-last-child(2) .mc-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:.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:.875rem}.mc-link__label,.link__label{text-decoration-thickness:7.5%;text-underline-offset:28.5%;line-height:1.3}.mc-link__icon{display:block;height:1.25rem;width: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 .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-link--m{min-height:2rem;font-size: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:2rem;font-weight:var(--link-font-weight, 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
39
39
|
}
|
|
40
40
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozBreadcrumbComponent, decorators: [{
|
|
41
41
|
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 (isLast) { @if (link.router) {\n <a [routerLink]=\"link.href\" [class]=\"getCurrentLinkClass()\" aria-current=\"page\">\n <span class=\"link__label\">{{ link.label }}</span>\n </a>\n } @else {\n <a [href]=\"link.href\" [class]=\"getCurrentLinkClass()\" aria-current=\"page\">\n <span class=\"link__label\">{{ link.label }}</span>\n </a>\n } } @else { @if (link.router) {\n <a [routerLink]=\"link.href\" [class]=\"getLinkClass()\">\n <span class=\"link__label\">{{ link.label }}</span>\n </a>\n } @else {\n <a [href]=\"link.href\" [class]=\"getLinkClass()\">\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:.25rem}.mc-breadcrumb__item,.breadcrumb__item{background-position:left center;background-repeat:no-repeat}@media screen and (max-width:679px){.mc-breadcrumb__item:nth-last-child(2) .mc-link__icon,.breadcrumb__item:nth-last-child(2) .mc-link__icon{transform:rotate(180deg)}.mc-breadcrumb__item:not(:nth-last-child(2)),.breadcrumb__item:not(:nth-last-child(2)){
|
|
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 (isLast) { @if (link.router) {\n <a [routerLink]=\"link.href\" [class]=\"getCurrentLinkClass()\" aria-current=\"page\">\n <span class=\"link__label\">{{ link.label }}</span>\n </a>\n } @else {\n <a [href]=\"link.href\" [class]=\"getCurrentLinkClass()\" aria-current=\"page\">\n <span class=\"link__label\">{{ link.label }}</span>\n </a>\n } } @else { @if (link.router) {\n <a [routerLink]=\"link.href\" [class]=\"getLinkClass()\">\n <span class=\"link__label\">{{ link.label }}</span>\n </a>\n } @else {\n <a [href]=\"link.href\" [class]=\"getLinkClass()\">\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:.25rem}.mc-breadcrumb__item,.breadcrumb__item{background-position:left center;background-repeat:no-repeat}@media screen and (max-width:679px){.mc-breadcrumb__item:nth-last-child(2) .mc-link__icon,.breadcrumb__item:nth-last-child(2) .mc-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:.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:.875rem}.mc-link__label,.link__label{text-decoration-thickness:7.5%;text-underline-offset:28.5%;line-height:1.3}.mc-link__icon{display:block;height:1.25rem;width: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 .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-link--m{min-height:2rem;font-size: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:2rem;font-weight:var(--link-font-weight, 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
43
|
}], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }] } });
|
|
44
44
|
|
|
45
45
|
class MozButtonComponent {
|
|
@@ -84,7 +84,7 @@ class MozButtonComponent {
|
|
|
84
84
|
}, /* @ts-ignore */
|
|
85
85
|
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
86
86
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
87
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozButtonComponent, isStandalone: true, selector: "button[moz-button]", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ghost: { classPropertyName: "ghost", publicName: "ghost", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.disabled": "disabled() ? \"\" : null", "attr.type": "type()" } }, queries: [{ propertyName: "iconTpl", first: true, predicate: ["icon"], isSignal: true }], ngImport: i0, template: "@if (isLoading()) {\n<div class=\"loader loader--s button__loader\">\n <span class=\"loader__spinner\">\n <svg\n class=\"loader__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n aria-hidden=\"true\"\n >\n <circle class=\"loader__path\" cx=\"50%\" cy=\"50%\" r=\"6\"></circle>\n </svg>\n </span>\n</div>\n} @if ((iconPosition() === 'left' || iconPosition() === 'only') && !isLoading()) {\n<ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n} @if (iconPosition() !== 'only') {\n<span class=\"button__label\">\n <ng-content></ng-content>\n</span>\n} @if (iconPosition() === 'right' && !isLoading()) {\n<ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n}\n<ng-template #iconTemplate>\n <ng-content select=\"[icon]\"></ng-content>\n</ng-template>\n", styles: [".mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active,.button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label,.button .mc-button__label,.mc-button .button__label,.button .button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label,.button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus,.button:focus{box-shadow:none;outline:none}.mc-button:focus-visible,.button: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-button--s,.button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label,.button--s .mc-button__label,.mc-button--s .button__label,.button--s .button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m,.button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label,.button--m .mc-button__label,.mc-button--m .button__label,.button--m .button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon,.button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child,.button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l,.button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label,.button--l .mc-button__label,.mc-button--l .button__label,.button--l .button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon,.button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child,.button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only,.button--icon-only{padding:.25rem}.mc-button--outlined,.button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover,.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active,.button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled,.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active,.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent,.button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover,.button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active,.button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled,.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger,.button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover,.button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active,.button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled,.button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse,.button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover,.button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active,.button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled,.button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading,.button--loading{pointer-events:none}.mc-button--loading .mc-button__loader,.button--loading .mc-button__loader,.mc-button--loading .button__loader,.button--loading .button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.button--loading .mc-button__label,.mc-button--loading .button__label,.button--loading .button__label,.mc-button--loading .mc-button__icon,.button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard,.mc-button--standard.button--outlined,.mc-button--outlined.button--standard,.button--outlined.button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover,.mc-button--standard.button--outlined:hover,.mc-button--outlined.button--standard:hover,.button--outlined.button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active,.mc-button--standard.button--outlined:active,.mc-button--outlined.button--standard:active,.button--outlined.button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled,.mc-button--standard.button--outlined:disabled,.mc-button--outlined.button--standard:disabled,.button--outlined.button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent,.mc-button--accent.button--outlined,.mc-button--outlined.button--accent,.button--outlined.button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover,.mc-button--accent.button--outlined:hover,.mc-button--outlined.button--accent:hover,.button--outlined.button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active,.mc-button--accent.button--outlined:active,.mc-button--outlined.button--accent:active,.button--outlined.button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled,.mc-button--accent.button--outlined:disabled,.mc-button--outlined.button--accent:disabled,.button--outlined.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger,.mc-button--danger.button--outlined,.mc-button--outlined.button--danger,.button--outlined.button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover,.mc-button--danger.button--outlined:hover,.mc-button--outlined.button--danger:hover,.button--outlined.button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active,.mc-button--danger.button--outlined:active,.mc-button--outlined.button--danger:active,.button--outlined.button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled,.mc-button--danger.button--outlined:disabled,.mc-button--outlined.button--danger:disabled,.button--outlined.button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse,.mc-button--inverse.button--outlined,.mc-button--outlined.button--inverse,.button--outlined.button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover,.mc-button--inverse.button--outlined:hover,.mc-button--outlined.button--inverse:hover,.button--outlined.button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active,.mc-button--inverse.button--outlined:active,.mc-button--outlined.button--inverse:active,.button--outlined.button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled,.mc-button--inverse.button--outlined:disabled,.mc-button--outlined.button--inverse:disabled,.button--outlined.button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost,.mc-button--ghost.button--standard,.button--ghost.button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover,.mc-button--ghost.button--standard:hover,.button--ghost.button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active,.mc-button--ghost.button--standard:active,.button--ghost.button--standard:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled,.mc-button--ghost.button--standard:disabled,.button--ghost.button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost,.mc-button--ghost.button--accent,.button--ghost.button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover,.mc-button--ghost.button--accent:hover,.button--ghost.button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active,.mc-button--ghost.button--accent:active,.button--ghost.button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled,.mc-button--ghost.button--accent:disabled,.button--ghost.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost,.mc-button--ghost.button--danger,.button--ghost.button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover,.mc-button--ghost.button--danger:hover,.button--ghost.button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active,.mc-button--ghost.button--danger:active,.button--ghost.button--danger:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled,.mc-button--ghost.button--danger:disabled,.button--ghost.button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost,.mc-button--ghost.button--inverse,.button--ghost.button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover,.mc-button--ghost.button--inverse:hover,.button--ghost.button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active,.mc-button--ghost.button--inverse:active,.button--ghost.button--inverse:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled,.mc-button--ghost.button--inverse:disabled,.button--ghost.button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-loader .mc-loader__spinner,.loader .mc-loader__spinner,.mc-loader .loader__spinner,.loader .loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path,.loader .mc-loader__path,.mc-loader .loader__path,.loader .loader__path{stroke-width:4}.mc-loader,.loader{color:var(--loader-color-standard, #464e63)}.mc-loader .mc-loader__path,.loader .mc-loader__path,.mc-loader .loader__path,.loader .loader__path{stroke:currentcolor}.mc-loader,.loader{align-items:center;display:inline-flex;flex-direction:column}.mc-loader__spinner:not(:only-child),.loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon,.loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path,.loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:var(--font-size-150, 1rem);color:currentcolor}.mc-loader:not(.mc-loader--text-visible) .mc-loader__text,.loader:not(.mc-loader--text-visible) .mc-loader__text{height:0;width:0;overflow:hidden;position:absolute;top:-1000px;left:-1000px;text-align:left;opacity:0}.mc-loader--xs .mc-loader__spinner,.mc-loader--xs .loader__spinner{height:1.25rem;width:1.25rem}.mc-loader--xs .mc-loader__path,.mc-loader--xs .loader__path{stroke-width:2}.mc-loader--s .mc-loader__spinner,.loader--s .mc-loader__spinner,.mc-loader--s .loader__spinner,.loader--s .loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path,.loader--s .mc-loader__path,.mc-loader--s .loader__path,.loader--s .loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner,.mc-loader--l .loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path,.mc-loader--l .loader__path{stroke-width:8}.mc-loader--accent{color:var(--loader-color-accent, #117f03)}.mc-loader--accent .mc-loader__path,.mc-loader--accent .loader__path{stroke:currentcolor}.mc-loader--inverse{color:var(--loader-color-inverse, #ffffff)}.mc-loader--inverse .mc-loader__path,.mc-loader--inverse .loader__path{stroke:currentcolor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
87
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozButtonComponent, isStandalone: true, selector: "button[moz-button]", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ghost: { classPropertyName: "ghost", publicName: "ghost", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.disabled": "disabled() ? \"\" : null", "attr.type": "type()" } }, queries: [{ propertyName: "iconTpl", first: true, predicate: ["icon"], isSignal: true }], ngImport: i0, template: "@if (isLoading()) {\n<div class=\"loader loader--s button__loader\">\n <span class=\"loader__spinner\">\n <svg\n class=\"loader__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n aria-hidden=\"true\"\n >\n <circle class=\"loader__path\" cx=\"50%\" cy=\"50%\" r=\"6\"></circle>\n </svg>\n </span>\n</div>\n} @if ((iconPosition() === 'left' || iconPosition() === 'only') && !isLoading()) {\n<ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n} @if (iconPosition() !== 'only') {\n<span class=\"button__label\">\n <ng-content></ng-content>\n</span>\n} @if (iconPosition() === 'right' && !isLoading()) {\n<ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n}\n<ng-template #iconTemplate>\n <ng-content select=\"[icon]\"></ng-content>\n</ng-template>\n", styles: [".mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active,.button:active{transform:scale(.95)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label,.button .mc-button__label,.mc-button .button__label,.button .button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:background-color ease .2s,border-color ease .2s,color ease .2s,transform ease-out .15s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label,.button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus,.button:focus{box-shadow:none;outline:none}.mc-button:focus-visible,.button: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-button--s,.button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label,.button--s .mc-button__label,.mc-button--s .button__label,.button--s .button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m,.button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label,.button--m .mc-button__label,.mc-button--m .button__label,.button--m .button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon,.button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child,.button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l,.button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label,.button--l .mc-button__label,.mc-button--l .button__label,.button--l .button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon,.button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child,.button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only,.button--icon-only{padding:.25rem}.mc-button--outlined,.button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover,.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active,.button--outlined:active{transform:scale(.95)}.mc-button--outlined:disabled,.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active,.button--ghost:active{transform:scale(.95)}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent,.button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover,.button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active,.button--accent:active{transform:scale(.95)}.mc-button--accent:disabled,.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger,.button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover,.button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active,.button--danger:active{transform:scale(.95)}.mc-button--danger:disabled,.button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse,.button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover,.button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active,.button--inverse:active{transform:scale(.95)}.mc-button--inverse:disabled,.button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading,.button--loading{pointer-events:none}.mc-button--loading .mc-button__loader,.button--loading .mc-button__loader,.mc-button--loading .button__loader,.button--loading .button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.button--loading .mc-button__label,.mc-button--loading .button__label,.button--loading .button__label,.mc-button--loading .mc-button__icon,.button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard,.mc-button--standard.button--outlined,.mc-button--outlined.button--standard,.button--outlined.button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover,.mc-button--standard.button--outlined:hover,.mc-button--outlined.button--standard:hover,.button--outlined.button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active,.mc-button--standard.button--outlined:active,.mc-button--outlined.button--standard:active,.button--outlined.button--standard:active{transform:scale(.95)}.mc-button--outlined.mc-button--standard:disabled,.mc-button--standard.button--outlined:disabled,.mc-button--outlined.button--standard:disabled,.button--outlined.button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent,.mc-button--accent.button--outlined,.mc-button--outlined.button--accent,.button--outlined.button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover,.mc-button--accent.button--outlined:hover,.mc-button--outlined.button--accent:hover,.button--outlined.button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active,.mc-button--accent.button--outlined:active,.mc-button--outlined.button--accent:active,.button--outlined.button--accent:active{transform:scale(.95)}.mc-button--outlined.mc-button--accent:disabled,.mc-button--accent.button--outlined:disabled,.mc-button--outlined.button--accent:disabled,.button--outlined.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger,.mc-button--danger.button--outlined,.mc-button--outlined.button--danger,.button--outlined.button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover,.mc-button--danger.button--outlined:hover,.mc-button--outlined.button--danger:hover,.button--outlined.button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active,.mc-button--danger.button--outlined:active,.mc-button--outlined.button--danger:active,.button--outlined.button--danger:active{transform:scale(.95)}.mc-button--outlined.mc-button--danger:disabled,.mc-button--danger.button--outlined:disabled,.mc-button--outlined.button--danger:disabled,.button--outlined.button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse,.mc-button--inverse.button--outlined,.mc-button--outlined.button--inverse,.button--outlined.button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover,.mc-button--inverse.button--outlined:hover,.mc-button--outlined.button--inverse:hover,.button--outlined.button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active,.mc-button--inverse.button--outlined:active,.mc-button--outlined.button--inverse:active,.button--outlined.button--inverse:active{transform:scale(.95)}.mc-button--outlined.mc-button--inverse:disabled,.mc-button--inverse.button--outlined:disabled,.mc-button--outlined.button--inverse:disabled,.button--outlined.button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost,.mc-button--ghost.button--standard,.button--ghost.button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover,.mc-button--ghost.button--standard:hover,.button--ghost.button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active,.mc-button--ghost.button--standard:active,.button--ghost.button--standard:active{transform:scale(.95)}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled,.mc-button--ghost.button--standard:disabled,.button--ghost.button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost,.mc-button--ghost.button--accent,.button--ghost.button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover,.mc-button--ghost.button--accent:hover,.button--ghost.button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active,.mc-button--ghost.button--accent:active,.button--ghost.button--accent:active{transform:scale(.95)}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled,.mc-button--ghost.button--accent:disabled,.button--ghost.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost,.mc-button--ghost.button--danger,.button--ghost.button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover,.mc-button--ghost.button--danger:hover,.button--ghost.button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active,.mc-button--ghost.button--danger:active,.button--ghost.button--danger:active{transform:scale(.95)}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled,.mc-button--ghost.button--danger:disabled,.button--ghost.button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost,.mc-button--ghost.button--inverse,.button--ghost.button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover,.mc-button--ghost.button--inverse:hover,.button--ghost.button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active,.mc-button--ghost.button--inverse:active,.button--ghost.button--inverse:active{transform:scale(.95)}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled,.mc-button--ghost.button--inverse:disabled,.button--ghost.button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-loader .mc-loader__spinner,.loader .mc-loader__spinner,.mc-loader .loader__spinner,.loader .loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path,.loader .mc-loader__path,.mc-loader .loader__path,.loader .loader__path{stroke-width:4}.mc-loader,.loader{color:var(--loader-color-standard, #464e63)}.mc-loader .mc-loader__path,.loader .mc-loader__path,.mc-loader .loader__path,.loader .loader__path{stroke:currentcolor}.mc-loader,.loader{align-items:center;display:inline-flex;flex-direction:column}.mc-loader__spinner:not(:only-child),.loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon,.loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path,.loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:var(--font-size-150, 1rem);color:currentcolor}.mc-loader:not(.mc-loader--text-visible) .mc-loader__text,.loader:not(.mc-loader--text-visible) .mc-loader__text{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-loader--xs .mc-loader__spinner,.mc-loader--xs .loader__spinner{height:1.25rem;width:1.25rem}.mc-loader--xs .mc-loader__path,.mc-loader--xs .loader__path{stroke-width:2}.mc-loader--s .mc-loader__spinner,.loader--s .mc-loader__spinner,.mc-loader--s .loader__spinner,.loader--s .loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path,.loader--s .mc-loader__path,.mc-loader--s .loader__path,.loader--s .loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner,.mc-loader--l .loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path,.mc-loader--l .loader__path{stroke-width:8}.mc-loader--accent{color:var(--loader-color-accent, #117f03)}.mc-loader--accent .mc-loader__path,.mc-loader--accent .loader__path{stroke:currentcolor}.mc-loader--inverse{color:var(--loader-color-inverse, #ffffff)}.mc-loader--inverse .mc-loader__path,.mc-loader--inverse .loader__path{stroke:currentcolor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
88
88
|
}
|
|
89
89
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozButtonComponent, decorators: [{
|
|
90
90
|
type: Component,
|
|
@@ -92,7 +92,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
92
92
|
'[class]': 'classes()',
|
|
93
93
|
'[attr.disabled]': 'disabled() ? "" : null',
|
|
94
94
|
'[attr.type]': 'type()',
|
|
95
|
-
}, encapsulation: ViewEncapsulation.None, template: "@if (isLoading()) {\n<div class=\"loader loader--s button__loader\">\n <span class=\"loader__spinner\">\n <svg\n class=\"loader__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n aria-hidden=\"true\"\n >\n <circle class=\"loader__path\" cx=\"50%\" cy=\"50%\" r=\"6\"></circle>\n </svg>\n </span>\n</div>\n} @if ((iconPosition() === 'left' || iconPosition() === 'only') && !isLoading()) {\n<ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n} @if (iconPosition() !== 'only') {\n<span class=\"button__label\">\n <ng-content></ng-content>\n</span>\n} @if (iconPosition() === 'right' && !isLoading()) {\n<ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n}\n<ng-template #iconTemplate>\n <ng-content select=\"[icon]\"></ng-content>\n</ng-template>\n", styles: [".mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active,.button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label,.button .mc-button__label,.mc-button .button__label,.button .button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label,.button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus,.button:focus{box-shadow:none;outline:none}.mc-button:focus-visible,.button: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-button--s,.button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label,.button--s .mc-button__label,.mc-button--s .button__label,.button--s .button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m,.button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label,.button--m .mc-button__label,.mc-button--m .button__label,.button--m .button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon,.button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child,.button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l,.button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label,.button--l .mc-button__label,.mc-button--l .button__label,.button--l .button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon,.button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child,.button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only,.button--icon-only{padding:.25rem}.mc-button--outlined,.button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover,.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active,.button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled,.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active,.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent,.button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover,.button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active,.button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled,.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger,.button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover,.button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active,.button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled,.button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse,.button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover,.button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active,.button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled,.button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading,.button--loading{pointer-events:none}.mc-button--loading .mc-button__loader,.button--loading .mc-button__loader,.mc-button--loading .button__loader,.button--loading .button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.button--loading .mc-button__label,.mc-button--loading .button__label,.button--loading .button__label,.mc-button--loading .mc-button__icon,.button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard,.mc-button--standard.button--outlined,.mc-button--outlined.button--standard,.button--outlined.button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover,.mc-button--standard.button--outlined:hover,.mc-button--outlined.button--standard:hover,.button--outlined.button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active,.mc-button--standard.button--outlined:active,.mc-button--outlined.button--standard:active,.button--outlined.button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled,.mc-button--standard.button--outlined:disabled,.mc-button--outlined.button--standard:disabled,.button--outlined.button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent,.mc-button--accent.button--outlined,.mc-button--outlined.button--accent,.button--outlined.button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover,.mc-button--accent.button--outlined:hover,.mc-button--outlined.button--accent:hover,.button--outlined.button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active,.mc-button--accent.button--outlined:active,.mc-button--outlined.button--accent:active,.button--outlined.button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled,.mc-button--accent.button--outlined:disabled,.mc-button--outlined.button--accent:disabled,.button--outlined.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger,.mc-button--danger.button--outlined,.mc-button--outlined.button--danger,.button--outlined.button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover,.mc-button--danger.button--outlined:hover,.mc-button--outlined.button--danger:hover,.button--outlined.button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active,.mc-button--danger.button--outlined:active,.mc-button--outlined.button--danger:active,.button--outlined.button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled,.mc-button--danger.button--outlined:disabled,.mc-button--outlined.button--danger:disabled,.button--outlined.button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse,.mc-button--inverse.button--outlined,.mc-button--outlined.button--inverse,.button--outlined.button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover,.mc-button--inverse.button--outlined:hover,.mc-button--outlined.button--inverse:hover,.button--outlined.button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active,.mc-button--inverse.button--outlined:active,.mc-button--outlined.button--inverse:active,.button--outlined.button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled,.mc-button--inverse.button--outlined:disabled,.mc-button--outlined.button--inverse:disabled,.button--outlined.button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost,.mc-button--ghost.button--standard,.button--ghost.button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover,.mc-button--ghost.button--standard:hover,.button--ghost.button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active,.mc-button--ghost.button--standard:active,.button--ghost.button--standard:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled,.mc-button--ghost.button--standard:disabled,.button--ghost.button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost,.mc-button--ghost.button--accent,.button--ghost.button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover,.mc-button--ghost.button--accent:hover,.button--ghost.button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active,.mc-button--ghost.button--accent:active,.button--ghost.button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled,.mc-button--ghost.button--accent:disabled,.button--ghost.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost,.mc-button--ghost.button--danger,.button--ghost.button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover,.mc-button--ghost.button--danger:hover,.button--ghost.button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active,.mc-button--ghost.button--danger:active,.button--ghost.button--danger:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled,.mc-button--ghost.button--danger:disabled,.button--ghost.button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost,.mc-button--ghost.button--inverse,.button--ghost.button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover,.mc-button--ghost.button--inverse:hover,.button--ghost.button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active,.mc-button--ghost.button--inverse:active,.button--ghost.button--inverse:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled,.mc-button--ghost.button--inverse:disabled,.button--ghost.button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-loader .mc-loader__spinner,.loader .mc-loader__spinner,.mc-loader .loader__spinner,.loader .loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path,.loader .mc-loader__path,.mc-loader .loader__path,.loader .loader__path{stroke-width:4}.mc-loader,.loader{color:var(--loader-color-standard, #464e63)}.mc-loader .mc-loader__path,.loader .mc-loader__path,.mc-loader .loader__path,.loader .loader__path{stroke:currentcolor}.mc-loader,.loader{align-items:center;display:inline-flex;flex-direction:column}.mc-loader__spinner:not(:only-child),.loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon,.loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path,.loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:var(--font-size-150, 1rem);color:currentcolor}.mc-loader:not(.mc-loader--text-visible) .mc-loader__text,.loader:not(.mc-loader--text-visible) .mc-loader__text{height:0;width:0;overflow:hidden;position:absolute;top:-1000px;left:-1000px;text-align:left;opacity:0}.mc-loader--xs .mc-loader__spinner,.mc-loader--xs .loader__spinner{height:1.25rem;width:1.25rem}.mc-loader--xs .mc-loader__path,.mc-loader--xs .loader__path{stroke-width:2}.mc-loader--s .mc-loader__spinner,.loader--s .mc-loader__spinner,.mc-loader--s .loader__spinner,.loader--s .loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path,.loader--s .mc-loader__path,.mc-loader--s .loader__path,.loader--s .loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner,.mc-loader--l .loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path,.mc-loader--l .loader__path{stroke-width:8}.mc-loader--accent{color:var(--loader-color-accent, #117f03)}.mc-loader--accent .mc-loader__path,.mc-loader--accent .loader__path{stroke:currentcolor}.mc-loader--inverse{color:var(--loader-color-inverse, #ffffff)}.mc-loader--inverse .mc-loader__path,.mc-loader--inverse .loader__path{stroke:currentcolor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}\n"] }]
|
|
95
|
+
}, encapsulation: ViewEncapsulation.None, template: "@if (isLoading()) {\n<div class=\"loader loader--s button__loader\">\n <span class=\"loader__spinner\">\n <svg\n class=\"loader__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n aria-hidden=\"true\"\n >\n <circle class=\"loader__path\" cx=\"50%\" cy=\"50%\" r=\"6\"></circle>\n </svg>\n </span>\n</div>\n} @if ((iconPosition() === 'left' || iconPosition() === 'only') && !isLoading()) {\n<ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n} @if (iconPosition() !== 'only') {\n<span class=\"button__label\">\n <ng-content></ng-content>\n</span>\n} @if (iconPosition() === 'right' && !isLoading()) {\n<ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n}\n<ng-template #iconTemplate>\n <ng-content select=\"[icon]\"></ng-content>\n</ng-template>\n", styles: [".mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active,.button:active{transform:scale(.95)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label,.button .mc-button__label,.mc-button .button__label,.button .button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:background-color ease .2s,border-color ease .2s,color ease .2s,transform ease-out .15s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label,.button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus,.button:focus{box-shadow:none;outline:none}.mc-button:focus-visible,.button: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-button--s,.button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label,.button--s .mc-button__label,.mc-button--s .button__label,.button--s .button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m,.button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label,.button--m .mc-button__label,.mc-button--m .button__label,.button--m .button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon,.button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child,.button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l,.button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label,.button--l .mc-button__label,.mc-button--l .button__label,.button--l .button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon,.button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child,.button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only,.button--icon-only{padding:.25rem}.mc-button--outlined,.button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover,.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active,.button--outlined:active{transform:scale(.95)}.mc-button--outlined:disabled,.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active,.button--ghost:active{transform:scale(.95)}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent,.button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover,.button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active,.button--accent:active{transform:scale(.95)}.mc-button--accent:disabled,.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger,.button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover,.button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active,.button--danger:active{transform:scale(.95)}.mc-button--danger:disabled,.button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse,.button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover,.button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active,.button--inverse:active{transform:scale(.95)}.mc-button--inverse:disabled,.button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading,.button--loading{pointer-events:none}.mc-button--loading .mc-button__loader,.button--loading .mc-button__loader,.mc-button--loading .button__loader,.button--loading .button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.button--loading .mc-button__label,.mc-button--loading .button__label,.button--loading .button__label,.mc-button--loading .mc-button__icon,.button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard,.mc-button--standard.button--outlined,.mc-button--outlined.button--standard,.button--outlined.button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover,.mc-button--standard.button--outlined:hover,.mc-button--outlined.button--standard:hover,.button--outlined.button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active,.mc-button--standard.button--outlined:active,.mc-button--outlined.button--standard:active,.button--outlined.button--standard:active{transform:scale(.95)}.mc-button--outlined.mc-button--standard:disabled,.mc-button--standard.button--outlined:disabled,.mc-button--outlined.button--standard:disabled,.button--outlined.button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent,.mc-button--accent.button--outlined,.mc-button--outlined.button--accent,.button--outlined.button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover,.mc-button--accent.button--outlined:hover,.mc-button--outlined.button--accent:hover,.button--outlined.button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active,.mc-button--accent.button--outlined:active,.mc-button--outlined.button--accent:active,.button--outlined.button--accent:active{transform:scale(.95)}.mc-button--outlined.mc-button--accent:disabled,.mc-button--accent.button--outlined:disabled,.mc-button--outlined.button--accent:disabled,.button--outlined.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger,.mc-button--danger.button--outlined,.mc-button--outlined.button--danger,.button--outlined.button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover,.mc-button--danger.button--outlined:hover,.mc-button--outlined.button--danger:hover,.button--outlined.button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active,.mc-button--danger.button--outlined:active,.mc-button--outlined.button--danger:active,.button--outlined.button--danger:active{transform:scale(.95)}.mc-button--outlined.mc-button--danger:disabled,.mc-button--danger.button--outlined:disabled,.mc-button--outlined.button--danger:disabled,.button--outlined.button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse,.mc-button--inverse.button--outlined,.mc-button--outlined.button--inverse,.button--outlined.button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover,.mc-button--inverse.button--outlined:hover,.mc-button--outlined.button--inverse:hover,.button--outlined.button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active,.mc-button--inverse.button--outlined:active,.mc-button--outlined.button--inverse:active,.button--outlined.button--inverse:active{transform:scale(.95)}.mc-button--outlined.mc-button--inverse:disabled,.mc-button--inverse.button--outlined:disabled,.mc-button--outlined.button--inverse:disabled,.button--outlined.button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost,.mc-button--ghost.button--standard,.button--ghost.button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover,.mc-button--ghost.button--standard:hover,.button--ghost.button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active,.mc-button--ghost.button--standard:active,.button--ghost.button--standard:active{transform:scale(.95)}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled,.mc-button--ghost.button--standard:disabled,.button--ghost.button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost,.mc-button--ghost.button--accent,.button--ghost.button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover,.mc-button--ghost.button--accent:hover,.button--ghost.button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active,.mc-button--ghost.button--accent:active,.button--ghost.button--accent:active{transform:scale(.95)}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled,.mc-button--ghost.button--accent:disabled,.button--ghost.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost,.mc-button--ghost.button--danger,.button--ghost.button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover,.mc-button--ghost.button--danger:hover,.button--ghost.button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active,.mc-button--ghost.button--danger:active,.button--ghost.button--danger:active{transform:scale(.95)}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled,.mc-button--ghost.button--danger:disabled,.button--ghost.button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost,.mc-button--ghost.button--inverse,.button--ghost.button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover,.mc-button--ghost.button--inverse:hover,.button--ghost.button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active,.mc-button--ghost.button--inverse:active,.button--ghost.button--inverse:active{transform:scale(.95)}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled,.mc-button--ghost.button--inverse:disabled,.button--ghost.button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-loader .mc-loader__spinner,.loader .mc-loader__spinner,.mc-loader .loader__spinner,.loader .loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path,.loader .mc-loader__path,.mc-loader .loader__path,.loader .loader__path{stroke-width:4}.mc-loader,.loader{color:var(--loader-color-standard, #464e63)}.mc-loader .mc-loader__path,.loader .mc-loader__path,.mc-loader .loader__path,.loader .loader__path{stroke:currentcolor}.mc-loader,.loader{align-items:center;display:inline-flex;flex-direction:column}.mc-loader__spinner:not(:only-child),.loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon,.loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path,.loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:var(--font-size-150, 1rem);color:currentcolor}.mc-loader:not(.mc-loader--text-visible) .mc-loader__text,.loader:not(.mc-loader--text-visible) .mc-loader__text{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-loader--xs .mc-loader__spinner,.mc-loader--xs .loader__spinner{height:1.25rem;width:1.25rem}.mc-loader--xs .mc-loader__path,.mc-loader--xs .loader__path{stroke-width:2}.mc-loader--s .mc-loader__spinner,.loader--s .mc-loader__spinner,.mc-loader--s .loader__spinner,.loader--s .loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path,.loader--s .mc-loader__path,.mc-loader--s .loader__path,.loader--s .loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner,.mc-loader--l .loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path,.mc-loader--l .loader__path{stroke-width:8}.mc-loader--accent{color:var(--loader-color-accent, #117f03)}.mc-loader--accent .mc-loader__path,.mc-loader--accent .loader__path{stroke:currentcolor}.mc-loader--inverse{color:var(--loader-color-inverse, #ffffff)}.mc-loader--inverse .mc-loader__path,.mc-loader--inverse .loader__path{stroke:currentcolor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}\n"] }]
|
|
96
96
|
}], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ghost: [{ type: i0.Input, args: [{ isSignal: true, alias: "ghost", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], iconTpl: [{ type: i0.ContentChild, args: ['icon', { ...{ descendants: false }, isSignal: true }] }] } });
|
|
97
97
|
|
|
98
98
|
class MozCheckboxComponent {
|
|
@@ -149,7 +149,7 @@ class MozCheckboxComponent {
|
|
|
149
149
|
useExisting: forwardRef(() => MozCheckboxComponent),
|
|
150
150
|
multi: true,
|
|
151
151
|
},
|
|
152
|
-
], ngImport: i0, template: "<div [class]=\"classes()\">\n <input\n class=\"checkbox__input\"\n type=\"checkbox\"\n [id]=\"id()\"\n [name]=\"name()\"\n [checked]=\"_value()\"\n [class]=\"classObject()\"\n [attr.aria-invalid]=\"isInvalid()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"disabled()\"\n (change)=\"onInputChange($event)\"\n [attr.aria-label]=\"label()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-checked]=\"_value()\"\n />\n @if (label()) {\n <label class=\"checkbox__label\" [for]=\"id()\"> {{ label() }} </label>\n }\n</div>\n", styles: [".mc-checkbox,.checkbox{align-items:center;display:flex;gap:.5rem;padding:.375rem}.mc-checkbox--indented,.checkbox--indented{margin-left:1.75rem}.mc-checkbox__label,.checkbox__label{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer}.mc-checkbox__input,.checkbox__input{appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, .125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;height:1.25rem;width:1.25rem;position:relative}.mc-checkbox__input:after,.checkbox__input:after{content:\"\";position:absolute;inset:0;background-color:var(--forms-color-icon-inverse, #ffffff);opacity:0;transform:scale(.6);transition
|
|
152
|
+
], ngImport: i0, template: "<div [class]=\"classes()\">\n <input\n class=\"checkbox__input\"\n type=\"checkbox\"\n [id]=\"id()\"\n [name]=\"name()\"\n [checked]=\"_value()\"\n [class]=\"classObject()\"\n [attr.aria-invalid]=\"isInvalid()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"disabled()\"\n (change)=\"onInputChange($event)\"\n [attr.aria-label]=\"label()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-checked]=\"_value()\"\n />\n @if (label()) {\n <label class=\"checkbox__label\" [for]=\"id()\"> {{ label() }} </label>\n }\n</div>\n", styles: [".mc-checkbox,.checkbox{align-items:center;display:flex;gap:.5rem;padding:.375rem}.mc-checkbox--indented,.checkbox--indented{margin-left:1.75rem}.mc-checkbox__label,.checkbox__label{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer}.mc-checkbox__input,.checkbox__input{appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, .125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;height:1.25rem;width:1.25rem;position:relative}.mc-checkbox__input:after,.checkbox__input:after{content:\"\";position:absolute;inset:0;background-color:var(--forms-color-icon-inverse, #ffffff);opacity:0;transform:scale(.6);transition:opacity .15s ease,transform .15s ease;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:hover,.checkbox__input:hover{border-color:var(--forms-color-border-hover, #4d4d4d)}.mc-checkbox__input:focus-visible,.checkbox__input: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-checkbox__input:checked:after,.checkbox__input:checked:after{opacity:1;transform:scale(1)}.mc-checkbox__input:indeterminate:after,.checkbox__input:indeterminate:after{opacity:1;transform:scale(1);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate{background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate,.mc-checkbox__input:disabled,.checkbox__input:disabled{border-color:transparent}.mc-checkbox__input:disabled,.checkbox__input:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed}.mc-checkbox__input:disabled:checked:after,.checkbox__input:disabled:checked:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled:indeterminate:after,.checkbox__input:disabled:indeterminate:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled+.mc-checkbox__label,.checkbox__input:disabled+.mc-checkbox__label,.mc-checkbox__input:disabled+.checkbox__label,.checkbox__input:disabled+.checkbox__label{color:var(--forms-color-text-disabled, #737373);cursor:not-allowed}.mc-checkbox__input:not(:disabled):checked:hover,.checkbox__input:not(:disabled):checked:hover,.mc-checkbox__input:not(:disabled):indeterminate:hover,.checkbox__input:not(:disabled):indeterminate:hover{background-color:var(--forms-color-background-checked-hover, #006902)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate),.is-invalid.checkbox__input:not(:checked,:indeterminate){border-color:var(--forms-color-border-invalid, #ea302d)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate):hover,.is-invalid.checkbox__input:not(:checked,:indeterminate):hover{border-color:var(--forms-color-border-invalid-hover, #c61112)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
153
153
|
}
|
|
154
154
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozCheckboxComponent, decorators: [{
|
|
155
155
|
type: Component,
|
|
@@ -159,7 +159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
159
159
|
useExisting: forwardRef(() => MozCheckboxComponent),
|
|
160
160
|
multi: true,
|
|
161
161
|
},
|
|
162
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"classes()\">\n <input\n class=\"checkbox__input\"\n type=\"checkbox\"\n [id]=\"id()\"\n [name]=\"name()\"\n [checked]=\"_value()\"\n [class]=\"classObject()\"\n [attr.aria-invalid]=\"isInvalid()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"disabled()\"\n (change)=\"onInputChange($event)\"\n [attr.aria-label]=\"label()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-checked]=\"_value()\"\n />\n @if (label()) {\n <label class=\"checkbox__label\" [for]=\"id()\"> {{ label() }} </label>\n }\n</div>\n", styles: [".mc-checkbox,.checkbox{align-items:center;display:flex;gap:.5rem;padding:.375rem}.mc-checkbox--indented,.checkbox--indented{margin-left:1.75rem}.mc-checkbox__label,.checkbox__label{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer}.mc-checkbox__input,.checkbox__input{appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, .125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;height:1.25rem;width:1.25rem;position:relative}.mc-checkbox__input:after,.checkbox__input:after{content:\"\";position:absolute;inset:0;background-color:var(--forms-color-icon-inverse, #ffffff);opacity:0;transform:scale(.6);transition
|
|
162
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"classes()\">\n <input\n class=\"checkbox__input\"\n type=\"checkbox\"\n [id]=\"id()\"\n [name]=\"name()\"\n [checked]=\"_value()\"\n [class]=\"classObject()\"\n [attr.aria-invalid]=\"isInvalid()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"disabled()\"\n (change)=\"onInputChange($event)\"\n [attr.aria-label]=\"label()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-checked]=\"_value()\"\n />\n @if (label()) {\n <label class=\"checkbox__label\" [for]=\"id()\"> {{ label() }} </label>\n }\n</div>\n", styles: [".mc-checkbox,.checkbox{align-items:center;display:flex;gap:.5rem;padding:.375rem}.mc-checkbox--indented,.checkbox--indented{margin-left:1.75rem}.mc-checkbox__label,.checkbox__label{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer}.mc-checkbox__input,.checkbox__input{appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, .125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;height:1.25rem;width:1.25rem;position:relative}.mc-checkbox__input:after,.checkbox__input:after{content:\"\";position:absolute;inset:0;background-color:var(--forms-color-icon-inverse, #ffffff);opacity:0;transform:scale(.6);transition:opacity .15s ease,transform .15s ease;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:hover,.checkbox__input:hover{border-color:var(--forms-color-border-hover, #4d4d4d)}.mc-checkbox__input:focus-visible,.checkbox__input: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-checkbox__input:checked:after,.checkbox__input:checked:after{opacity:1;transform:scale(1)}.mc-checkbox__input:indeterminate:after,.checkbox__input:indeterminate:after{opacity:1;transform:scale(1);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate{background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate,.mc-checkbox__input:disabled,.checkbox__input:disabled{border-color:transparent}.mc-checkbox__input:disabled,.checkbox__input:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed}.mc-checkbox__input:disabled:checked:after,.checkbox__input:disabled:checked:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled:indeterminate:after,.checkbox__input:disabled:indeterminate:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled+.mc-checkbox__label,.checkbox__input:disabled+.mc-checkbox__label,.mc-checkbox__input:disabled+.checkbox__label,.checkbox__input:disabled+.checkbox__label{color:var(--forms-color-text-disabled, #737373);cursor:not-allowed}.mc-checkbox__input:not(:disabled):checked:hover,.checkbox__input:not(:disabled):checked:hover,.mc-checkbox__input:not(:disabled):indeterminate:hover,.checkbox__input:not(:disabled):indeterminate:hover{background-color:var(--forms-color-background-checked-hover, #006902)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate),.is-invalid.checkbox__input:not(:checked,:indeterminate){border-color:var(--forms-color-border-invalid, #ea302d)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate):hover,.is-invalid.checkbox__input:not(:checked,:indeterminate):hover{border-color:var(--forms-color-border-invalid-hover, #c61112)}\n"] }]
|
|
163
163
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indented: [{ type: i0.Input, args: [{ isSignal: true, alias: "indented", required: false }] }] } });
|
|
164
164
|
|
|
165
165
|
class MozCheckboxGroupComponent {
|
|
@@ -227,7 +227,7 @@ class MozCheckboxGroupComponent {
|
|
|
227
227
|
useExisting: forwardRef(() => MozCheckboxGroupComponent),
|
|
228
228
|
multi: true,
|
|
229
229
|
},
|
|
230
|
-
], ngImport: i0, template: "<fieldset class=\"field field--group\">\n <legend class=\"field__legend\">\n {{ legend() }}\n @if (necessityIndicator()) {\n <span class=\"field__requirement\">{{ necessityIndicator() }}</span>\n }\n </legend>\n @if (helpText()) {\n <span [id]=\"helpId()\" class=\"field__help\">{{ helpText() }}</span>\n }\n\n <div [class]=\"containerClass()\">\n @for (option of options(); track $index) {\n <div class=\"field__item checkbox\">\n <input\n type=\"checkbox\"\n [class]=\"getCheckboxInputClass(option)\"\n [id]=\"option.id\"\n [name]=\"name()\"\n [checked]=\"isChecked(option.value)\"\n [disabled]=\"option.disabled ?? false\"\n (change)=\"toggleSelection($event, option.value)\"\n />\n <label [for]=\"option.id\" class=\"checkbox__label\">{{ option.label }}</label>\n </div>\n }\n </div>\n</fieldset>\n", styles: [".mc-field__label,.mc-field__legend,.field__legend{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000)}.mc-field__legend,.field__legend{padding-inline:0}.mc-field__requirement,.field__requirement,.mc-field__help,.field__help{font-size:var(--font-size-50, .75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help,.field__help{display:block;margin-top:.125rem}.mc-field__content,.field__content{margin-top:.5rem}.mc-field__content:where(.mc-field__content--inline,.field__content--inline),.field__content:where(.mc-field__content--inline,.field__content--inline){display:flex;flex-flow:row wrap;gap:.25rem 1rem}.mc-field__validation-message{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:.25rem;margin-top:.25rem}.mc-field__validation-message.is-valid:before,.mc-field__validation-message.is-invalid:before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid:before{background-color:var(--field-color-validation-valid, #117f03);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-invalid{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before{background-color:var(--field-color-validation-invalid, #c61112);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-loading{color:var(--field-color-validation-loading, #666666)}.mc-field--group,.field--group{border-width:0;margin-inline:0;padding:0}.mc-field--group .mc-field__content:not(.mc-field__content--inline):not(.field__content--inline),.field--group .mc-field__content:not(.mc-field__content--inline):not(.field__content--inline),.mc-field--group .field__content:not(.mc-field__content--inline):not(.field__content--inline),.field--group .field__content:not(.mc-field__content--inline):not(.field__content--inline){display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-checkbox,.checkbox{align-items:center;display:flex;gap:.5rem;padding:.375rem}.mc-checkbox--indented{margin-left:1.75rem}.mc-checkbox__label,.checkbox__label{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer}.mc-checkbox__input,.checkbox__input{appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, .125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;height:1.25rem;width:1.25rem;position:relative}.mc-checkbox__input:after,.checkbox__input:after{content:\"\";position:absolute;inset:0;background-color:var(--forms-color-icon-inverse, #ffffff);opacity:0;transform:scale(.6);transition:.15s ease}.mc-checkbox__input:hover,.checkbox__input:hover{border-color:var(--forms-color-border-hover, #4d4d4d)}.mc-checkbox__input:focus-visible,.checkbox__input: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-checkbox__input:checked:after,.checkbox__input:checked:after{opacity:1;transform:scale(1);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:indeterminate:after,.checkbox__input:indeterminate:after{opacity:1;transform:scale(1);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate{background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate,.mc-checkbox__input:disabled,.checkbox__input:disabled{border-color:transparent}.mc-checkbox__input:disabled,.checkbox__input:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed}.mc-checkbox__input:disabled:checked:after,.checkbox__input:disabled:checked:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled:indeterminate:after,.checkbox__input:disabled:indeterminate:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled+.mc-checkbox__label,.checkbox__input:disabled+.mc-checkbox__label,.mc-checkbox__input:disabled+.checkbox__label,.checkbox__input:disabled+.checkbox__label{color:var(--forms-color-text-disabled, #737373);cursor:not-allowed}.mc-checkbox__input:not(:disabled):checked:hover,.checkbox__input:not(:disabled):checked:hover,.mc-checkbox__input:not(:disabled):indeterminate:hover,.checkbox__input:not(:disabled):indeterminate:hover{background-color:var(--forms-color-background-checked-hover, #006902)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate),.is-invalid.checkbox__input:not(:checked,:indeterminate){border-color:var(--forms-color-border-invalid, #ea302d)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate):hover,.is-invalid.checkbox__input:not(:checked,:indeterminate):hover{border-color:var(--forms-color-border-invalid-hover, #c61112)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
230
|
+
], ngImport: i0, template: "<fieldset class=\"field field--group\">\n <legend class=\"field__legend\">\n {{ legend() }}\n @if (necessityIndicator()) {\n <span class=\"field__requirement\">{{ necessityIndicator() }}</span>\n }\n </legend>\n @if (helpText()) {\n <span [id]=\"helpId()\" class=\"field__help\">{{ helpText() }}</span>\n }\n\n <div [class]=\"containerClass()\">\n @for (option of options(); track $index) {\n <div class=\"field__item checkbox\">\n <input\n type=\"checkbox\"\n [class]=\"getCheckboxInputClass(option)\"\n [id]=\"option.id\"\n [name]=\"name()\"\n [checked]=\"isChecked(option.value)\"\n [disabled]=\"option.disabled ?? false\"\n (change)=\"toggleSelection($event, option.value)\"\n />\n <label [for]=\"option.id\" class=\"checkbox__label\">{{ option.label }}</label>\n </div>\n }\n </div>\n</fieldset>\n", styles: [".mc-field__label,.mc-field__legend,.field__legend{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000)}.mc-field__legend,.field__legend{padding-inline:0}.mc-field__requirement,.field__requirement,.mc-field__help,.field__help{font-size:var(--font-size-50, .75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help,.field__help{display:block;margin-top:.125rem}.mc-field__content,.field__content{margin-top:.5rem}.mc-field__content:where(.mc-field__content--inline,.field__content--inline),.field__content:where(.mc-field__content--inline,.field__content--inline){display:flex;flex-flow:row wrap;gap:.25rem 1rem}.mc-field__validation-message{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:.25rem;margin-top:.25rem}.mc-field__validation-message.is-valid:before,.mc-field__validation-message.is-invalid:before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid:before{background-color:var(--field-color-validation-valid, #117f03);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-invalid{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before{background-color:var(--field-color-validation-invalid, #c61112);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-loading{color:var(--field-color-validation-loading, #666666)}.mc-field--group,.field--group{border-width:0;margin-inline:0;padding:0}.mc-field--group .mc-field__content:not(.mc-field__content--inline):not(.field__content--inline),.field--group .mc-field__content:not(.mc-field__content--inline):not(.field__content--inline),.mc-field--group .field__content:not(.mc-field__content--inline):not(.field__content--inline),.field--group .field__content:not(.mc-field__content--inline):not(.field__content--inline){display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-checkbox,.checkbox{align-items:center;display:flex;gap:.5rem;padding:.375rem}.mc-checkbox--indented{margin-left:1.75rem}.mc-checkbox__label,.checkbox__label{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer}.mc-checkbox__input,.checkbox__input{appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, .125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;height:1.25rem;width:1.25rem;position:relative}.mc-checkbox__input:after,.checkbox__input:after{content:\"\";position:absolute;inset:0;background-color:var(--forms-color-icon-inverse, #ffffff);opacity:0;transform:scale(.6);transition:opacity .15s ease,transform .15s ease;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:hover,.checkbox__input:hover{border-color:var(--forms-color-border-hover, #4d4d4d)}.mc-checkbox__input:focus-visible,.checkbox__input: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-checkbox__input:checked:after,.checkbox__input:checked:after{opacity:1;transform:scale(1)}.mc-checkbox__input:indeterminate:after,.checkbox__input:indeterminate:after{opacity:1;transform:scale(1);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate{background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate,.mc-checkbox__input:disabled,.checkbox__input:disabled{border-color:transparent}.mc-checkbox__input:disabled,.checkbox__input:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed}.mc-checkbox__input:disabled:checked:after,.checkbox__input:disabled:checked:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled:indeterminate:after,.checkbox__input:disabled:indeterminate:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled+.mc-checkbox__label,.checkbox__input:disabled+.mc-checkbox__label,.mc-checkbox__input:disabled+.checkbox__label,.checkbox__input:disabled+.checkbox__label{color:var(--forms-color-text-disabled, #737373);cursor:not-allowed}.mc-checkbox__input:not(:disabled):checked:hover,.checkbox__input:not(:disabled):checked:hover,.mc-checkbox__input:not(:disabled):indeterminate:hover,.checkbox__input:not(:disabled):indeterminate:hover{background-color:var(--forms-color-background-checked-hover, #006902)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate),.is-invalid.checkbox__input:not(:checked,:indeterminate){border-color:var(--forms-color-border-invalid, #ea302d)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate):hover,.is-invalid.checkbox__input:not(:checked,:indeterminate):hover{border-color:var(--forms-color-border-invalid-hover, #c61112)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
231
231
|
}
|
|
232
232
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozCheckboxGroupComponent, decorators: [{
|
|
233
233
|
type: Component,
|
|
@@ -237,7 +237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
237
237
|
useExisting: forwardRef(() => MozCheckboxGroupComponent),
|
|
238
238
|
multi: true,
|
|
239
239
|
},
|
|
240
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fieldset class=\"field field--group\">\n <legend class=\"field__legend\">\n {{ legend() }}\n @if (necessityIndicator()) {\n <span class=\"field__requirement\">{{ necessityIndicator() }}</span>\n }\n </legend>\n @if (helpText()) {\n <span [id]=\"helpId()\" class=\"field__help\">{{ helpText() }}</span>\n }\n\n <div [class]=\"containerClass()\">\n @for (option of options(); track $index) {\n <div class=\"field__item checkbox\">\n <input\n type=\"checkbox\"\n [class]=\"getCheckboxInputClass(option)\"\n [id]=\"option.id\"\n [name]=\"name()\"\n [checked]=\"isChecked(option.value)\"\n [disabled]=\"option.disabled ?? false\"\n (change)=\"toggleSelection($event, option.value)\"\n />\n <label [for]=\"option.id\" class=\"checkbox__label\">{{ option.label }}</label>\n </div>\n }\n </div>\n</fieldset>\n", styles: [".mc-field__label,.mc-field__legend,.field__legend{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000)}.mc-field__legend,.field__legend{padding-inline:0}.mc-field__requirement,.field__requirement,.mc-field__help,.field__help{font-size:var(--font-size-50, .75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help,.field__help{display:block;margin-top:.125rem}.mc-field__content,.field__content{margin-top:.5rem}.mc-field__content:where(.mc-field__content--inline,.field__content--inline),.field__content:where(.mc-field__content--inline,.field__content--inline){display:flex;flex-flow:row wrap;gap:.25rem 1rem}.mc-field__validation-message{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:.25rem;margin-top:.25rem}.mc-field__validation-message.is-valid:before,.mc-field__validation-message.is-invalid:before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid:before{background-color:var(--field-color-validation-valid, #117f03);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-invalid{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before{background-color:var(--field-color-validation-invalid, #c61112);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-loading{color:var(--field-color-validation-loading, #666666)}.mc-field--group,.field--group{border-width:0;margin-inline:0;padding:0}.mc-field--group .mc-field__content:not(.mc-field__content--inline):not(.field__content--inline),.field--group .mc-field__content:not(.mc-field__content--inline):not(.field__content--inline),.mc-field--group .field__content:not(.mc-field__content--inline):not(.field__content--inline),.field--group .field__content:not(.mc-field__content--inline):not(.field__content--inline){display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-checkbox,.checkbox{align-items:center;display:flex;gap:.5rem;padding:.375rem}.mc-checkbox--indented{margin-left:1.75rem}.mc-checkbox__label,.checkbox__label{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer}.mc-checkbox__input,.checkbox__input{appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, .125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;height:1.25rem;width:1.25rem;position:relative}.mc-checkbox__input:after,.checkbox__input:after{content:\"\";position:absolute;inset:0;background-color:var(--forms-color-icon-inverse, #ffffff);opacity:0;transform:scale(.6);transition:.15s ease}.mc-checkbox__input:hover,.checkbox__input:hover{border-color:var(--forms-color-border-hover, #4d4d4d)}.mc-checkbox__input:focus-visible,.checkbox__input: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-checkbox__input:checked:after,.checkbox__input:checked:after{opacity:1;transform:scale(1);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:indeterminate:after,.checkbox__input:indeterminate:after{opacity:1;transform:scale(1);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate{background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate,.mc-checkbox__input:disabled,.checkbox__input:disabled{border-color:transparent}.mc-checkbox__input:disabled,.checkbox__input:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed}.mc-checkbox__input:disabled:checked:after,.checkbox__input:disabled:checked:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled:indeterminate:after,.checkbox__input:disabled:indeterminate:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled+.mc-checkbox__label,.checkbox__input:disabled+.mc-checkbox__label,.mc-checkbox__input:disabled+.checkbox__label,.checkbox__input:disabled+.checkbox__label{color:var(--forms-color-text-disabled, #737373);cursor:not-allowed}.mc-checkbox__input:not(:disabled):checked:hover,.checkbox__input:not(:disabled):checked:hover,.mc-checkbox__input:not(:disabled):indeterminate:hover,.checkbox__input:not(:disabled):indeterminate:hover{background-color:var(--forms-color-background-checked-hover, #006902)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate),.is-invalid.checkbox__input:not(:checked,:indeterminate){border-color:var(--forms-color-border-invalid, #ea302d)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate):hover,.is-invalid.checkbox__input:not(:checked,:indeterminate):hover{border-color:var(--forms-color-border-invalid-hover, #c61112)}\n"] }]
|
|
240
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fieldset class=\"field field--group\">\n <legend class=\"field__legend\">\n {{ legend() }}\n @if (necessityIndicator()) {\n <span class=\"field__requirement\">{{ necessityIndicator() }}</span>\n }\n </legend>\n @if (helpText()) {\n <span [id]=\"helpId()\" class=\"field__help\">{{ helpText() }}</span>\n }\n\n <div [class]=\"containerClass()\">\n @for (option of options(); track $index) {\n <div class=\"field__item checkbox\">\n <input\n type=\"checkbox\"\n [class]=\"getCheckboxInputClass(option)\"\n [id]=\"option.id\"\n [name]=\"name()\"\n [checked]=\"isChecked(option.value)\"\n [disabled]=\"option.disabled ?? false\"\n (change)=\"toggleSelection($event, option.value)\"\n />\n <label [for]=\"option.id\" class=\"checkbox__label\">{{ option.label }}</label>\n </div>\n }\n </div>\n</fieldset>\n", styles: [".mc-field__label,.mc-field__legend,.field__legend{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000)}.mc-field__legend,.field__legend{padding-inline:0}.mc-field__requirement,.field__requirement,.mc-field__help,.field__help{font-size:var(--font-size-50, .75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help,.field__help{display:block;margin-top:.125rem}.mc-field__content,.field__content{margin-top:.5rem}.mc-field__content:where(.mc-field__content--inline,.field__content--inline),.field__content:where(.mc-field__content--inline,.field__content--inline){display:flex;flex-flow:row wrap;gap:.25rem 1rem}.mc-field__validation-message{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:.25rem;margin-top:.25rem}.mc-field__validation-message.is-valid:before,.mc-field__validation-message.is-invalid:before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid:before{background-color:var(--field-color-validation-valid, #117f03);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-invalid{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before{background-color:var(--field-color-validation-invalid, #c61112);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-loading{color:var(--field-color-validation-loading, #666666)}.mc-field--group,.field--group{border-width:0;margin-inline:0;padding:0}.mc-field--group .mc-field__content:not(.mc-field__content--inline):not(.field__content--inline),.field--group .mc-field__content:not(.mc-field__content--inline):not(.field__content--inline),.mc-field--group .field__content:not(.mc-field__content--inline):not(.field__content--inline),.field--group .field__content:not(.mc-field__content--inline):not(.field__content--inline){display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-checkbox,.checkbox{align-items:center;display:flex;gap:.5rem;padding:.375rem}.mc-checkbox--indented{margin-left:1.75rem}.mc-checkbox__label,.checkbox__label{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer}.mc-checkbox__input,.checkbox__input{appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, .125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;height:1.25rem;width:1.25rem;position:relative}.mc-checkbox__input:after,.checkbox__input:after{content:\"\";position:absolute;inset:0;background-color:var(--forms-color-icon-inverse, #ffffff);opacity:0;transform:scale(.6);transition:opacity .15s ease,transform .15s ease;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:hover,.checkbox__input:hover{border-color:var(--forms-color-border-hover, #4d4d4d)}.mc-checkbox__input:focus-visible,.checkbox__input: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-checkbox__input:checked:after,.checkbox__input:checked:after{opacity:1;transform:scale(1)}.mc-checkbox__input:indeterminate:after,.checkbox__input:indeterminate:after{opacity:1;transform:scale(1);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate{background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate,.mc-checkbox__input:disabled,.checkbox__input:disabled{border-color:transparent}.mc-checkbox__input:disabled,.checkbox__input:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed}.mc-checkbox__input:disabled:checked:after,.checkbox__input:disabled:checked:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled:indeterminate:after,.checkbox__input:disabled:indeterminate:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled+.mc-checkbox__label,.checkbox__input:disabled+.mc-checkbox__label,.mc-checkbox__input:disabled+.checkbox__label,.checkbox__input:disabled+.checkbox__label{color:var(--forms-color-text-disabled, #737373);cursor:not-allowed}.mc-checkbox__input:not(:disabled):checked:hover,.checkbox__input:not(:disabled):checked:hover,.mc-checkbox__input:not(:disabled):indeterminate:hover,.checkbox__input:not(:disabled):indeterminate:hover{background-color:var(--forms-color-background-checked-hover, #006902)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate),.is-invalid.checkbox__input:not(:checked,:indeterminate){border-color:var(--forms-color-border-invalid, #ea302d)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate):hover,.is-invalid.checkbox__input:not(:checked,:indeterminate):hover{border-color:var(--forms-color-border-invalid-hover, #c61112)}\n"] }]
|
|
241
241
|
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], necessityIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "necessityIndicator", required: false }] }], helpText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpText", required: false }] }], helpId: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpId", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }] } });
|
|
242
242
|
|
|
243
243
|
/**
|
|
@@ -367,11 +367,11 @@ class MozIconButtonComponent {
|
|
|
367
367
|
this.activated.emit(event);
|
|
368
368
|
}
|
|
369
369
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
370
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: MozIconButtonComponent, isStandalone: true, selector: "moz-icon-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ghost: { classPropertyName: "ghost", publicName: "ghost", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, ngImport: i0, template: "<button\n (click)=\"onActivated($event)\"\n [disabled]=\"disabled()\"\n [attr.type]=\"type()\"\n [class]=\"classes()\"\n [attr.aria-label]=\"ariaLabel()\"\n [id]=\"id()\"\n>\n <span class=\"mc-button__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n</button>\n", styles: [".mc-button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus{box-shadow:none;outline:none}.mc-button: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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
370
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: MozIconButtonComponent, isStandalone: true, selector: "moz-icon-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ghost: { classPropertyName: "ghost", publicName: "ghost", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, ngImport: i0, template: "<button\n (click)=\"onActivated($event)\"\n [disabled]=\"disabled()\"\n [attr.type]=\"type()\"\n [class]=\"classes()\"\n [attr.aria-label]=\"ariaLabel()\"\n [id]=\"id()\"\n>\n <span class=\"mc-button__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n</button>\n", styles: [".mc-button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active{transform:scale(.95)}.mc-button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:background-color ease .2s,border-color ease .2s,color ease .2s,transform ease-out .15s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus{box-shadow:none;outline:none}.mc-button: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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active{transform:scale(.95)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active{transform:scale(.95)}.mc-button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{transform:scale(.95)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{transform:scale(.95)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{transform:scale(.95)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active{transform:scale(.95)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active{transform:scale(.95)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active{transform:scale(.95)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active{transform:scale(.95)}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active{transform:scale(.95)}.mc-button--ghost.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active{transform:scale(.95)}.mc-button--ghost.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active{transform:scale(.95)}.mc-button--ghost.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active{transform:scale(.95)}.mc-button--ghost.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
371
371
|
}
|
|
372
372
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozIconButtonComponent, decorators: [{
|
|
373
373
|
type: Component,
|
|
374
|
-
args: [{ selector: 'moz-icon-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n (click)=\"onActivated($event)\"\n [disabled]=\"disabled()\"\n [attr.type]=\"type()\"\n [class]=\"classes()\"\n [attr.aria-label]=\"ariaLabel()\"\n [id]=\"id()\"\n>\n <span class=\"mc-button__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n</button>\n", styles: [".mc-button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus{box-shadow:none;outline:none}.mc-button: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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"] }]
|
|
374
|
+
args: [{ selector: 'moz-icon-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n (click)=\"onActivated($event)\"\n [disabled]=\"disabled()\"\n [attr.type]=\"type()\"\n [class]=\"classes()\"\n [attr.aria-label]=\"ariaLabel()\"\n [id]=\"id()\"\n>\n <span class=\"mc-button__icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n</button>\n", styles: [".mc-button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active{transform:scale(.95)}.mc-button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:background-color ease .2s,border-color ease .2s,color ease .2s,transform ease-out .15s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus{box-shadow:none;outline:none}.mc-button: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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active{transform:scale(.95)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active{transform:scale(.95)}.mc-button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{transform:scale(.95)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{transform:scale(.95)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{transform:scale(.95)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active{transform:scale(.95)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active{transform:scale(.95)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active{transform:scale(.95)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active{transform:scale(.95)}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active{transform:scale(.95)}.mc-button--ghost.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active{transform:scale(.95)}.mc-button--ghost.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active{transform:scale(.95)}.mc-button--ghost.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active{transform:scale(.95)}.mc-button--ghost.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"] }]
|
|
375
375
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ghost: [{ type: i0.Input, args: [{ isSignal: true, alias: "ghost", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
|
|
376
376
|
|
|
377
377
|
class MozLinearProgressBarBufferComponent {
|
|
@@ -486,7 +486,7 @@ class MozFileUploaderItemComponent {
|
|
|
486
486
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
|
|
487
487
|
}
|
|
488
488
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozFileUploaderItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
489
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozFileUploaderItemComponent, isStandalone: true, selector: "moz-file-uploader-item", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, uploading: { classPropertyName: "uploading", publicName: "uploading", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hasPreview: { classPropertyName: "hasPreview", publicName: "hasPreview", isSignal: true, isRequired: false, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, fileInformation: { classPropertyName: "fileInformation", publicName: "fileInformation", isSignal: true, isRequired: false, transformFunction: null }, retryButtonLabel: { classPropertyName: "retryButtonLabel", publicName: "retryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, deleteButtonLabel: { classPropertyName: "deleteButtonLabel", publicName: "deleteButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, previewButtonLabel: { classPropertyName: "previewButtonLabel", publicName: "previewButtonLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { delete: "delete", retry: "retry", preview: "preview" }, ngImport: i0, template: "<div class=\"mc-file-uploader-item\" [class]=\"modifierClass()\">\n <div class=\"mc-file-uploader-item__container mc-file-uploader-item__container--{{ format() }}\">\n <div\n class=\"mc-file-uploader-item__meta-row\"\n [class.mc-file-uploader-item__meta-row--with-info]=\"true\"\n >\n @if (isUploading() && !invalid()) {\n <Uploading32 class=\"mc-file-uploader-item__status-icon\" />\n } @else if(invalid()) {\n <WarningCircle32 class=\"mc-file-uploader-item__status-icon\" />\n } @else {\n <CheckCircle32 class=\"mc-file-uploader-item__status-icon\" />\n }\n <div class=\"mc-file-uploader-item__info-content\">\n <span class=\"mc-file-uploader-item__label\">{{ fileName() }}</span>\n <span class=\"mc-file-uploader-item__details\">{{ fileInfo() }}</span>\n </div>\n </div>\n\n @if (showInlineActions()) {\n <div class=\"mc-file-uploader-item__inline-actions\">\n @if (invalid()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onRetry()\"\n >\n <Refresh32 icon />\n <span class=\"mc-button__label\">{{ retryButtonLabel() }}</span>\n </button>\n } @if (!invalid() && hasPreview()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onPreview()\"\n >\n <span class=\"mc-button__label\">{{ previewButtonLabel() }}</span>\n </button>\n }\n </div>\n <div class=\"mc-file-uploader-item__delete-button-container\">\n <moz-icon-button\n [id]=\"'file-uploader-item-delete-button'\"\n (activated)=\"onDelete()\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n >\n <CrossCircleFilled20 icon />\n </moz-icon-button>\n </div>\n } @if (showStackedActions()) {\n <moz-divider orientation=\"horizontal\"></moz-divider>\n <div class=\"mc-file-uploader-item__actions-container\">\n @if (!invalid() && hasPreview()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onPreview()\"\n [iconPosition]=\"'left'\"\n >\n <Eye20 icon />\n <span class=\"mc-button__label\">{{ previewButtonLabel() }}</span>\n </button>\n } @if (invalid()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onRetry()\"\n [iconPosition]=\"'left'\"\n >\n <Refresh20 icon />\n <span class=\"mc-button__label\">{{ retryButtonLabel() }}</span>\n </button>\n }\n\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onDelete()\"\n [iconPosition]=\"'left'\"\n >\n <CrossCircleFilled20 icon />\n <span class=\"mc-button__label\">{{ deleteButtonLabel() }}</span>\n </button>\n </div>\n } @if (isUploading() && !invalid()) {\n <moz-linear-progress-bar-buffer size=\"l\" [valuePercent]=\"75\" />\n }\n </div>\n\n @if (errorMessage() && invalid()) {\n <span class=\"mc-file-uploader-item__error-message\">{{ errorMessage() }}</span>\n }\n</div>\n", styles: [".mc-file-uploader{display:flex;flex-direction:column;gap:1rem;box-sizing:border-box}.mc-file-uploader__files-list{display:flex;flex-direction:column;gap:1rem}.mc-file-uploader__hidden-input{height:0;width:0;overflow:hidden;position:absolute;top:-1000px;left:-1000px;text-align:left;opacity:0}.mc-file-uploader__input{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);border-radius:var(--border-radius-m, .5rem);color:var(--file-uploader-color-drag-and-drop-text-default, #242938)}.mc-file-uploader__input .mc-file-uploader__button{width:100%}.mc-file-uploader__input--disabled .mc-file-uploader__button.mc-button.mc-button--outlined{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-file-uploader__input-title{height:1.125rem;font-size:var(--font-size-150, 1rem)}.mc-file-uploader__input-subtitle{height:1.125rem;font-size:var(--font-size-100, .875rem)}.mc-file-uploader--draggable .mc-file-uploader__input{padding:2rem;outline:.125rem dashed var(--file-uploader-color-drag-and-drop-border-default, #464e63);display:flex}.mc-file-uploader--draggable .mc-file-uploader__input--disabled{outline-color:var(--file-uploader-color-drag-and-drop-border-disabled, #b3b3b3);color:var(--file-uploader-color-drag-and-drop-text-disabled, #b3b3b3);cursor:not-allowed}.mc-file-uploader--draggable .mc-file-uploader__input--dragged{outline-width:.25rem}.mc-file-uploader-item{display:flex;flex-direction:column;gap:.25rem}.mc-file-uploader-item__container{border:1px solid var(--file-uploader-color-file-item-border-default, #cccccc);border-radius:var(--border-radius-m, .5rem);padding:.75rem}.mc-file-uploader-item__meta-row{display:flex;align-items:center;flex-grow:1}.mc-file-uploader-item__meta-row--with-info{align-items:start}.mc-file-uploader-item__status-icon{fill:var(--file-uploader-color-file-item-icon-valid, #3f9e10)}.mc-file-uploader-item__info-content{display:flex;flex-direction:column;flex-grow:1;padding-left:.5rem;padding-right:1rem}.mc-file-uploader-item__label{color:var(--file-uploader-color-file-item-text-file-name, #000000);font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600)}.mc-file-uploader-item__details{color:var(--file-uploader-color-file-item-text-information, #666666);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400)}.mc-file-uploader-item__error-message{color:var(--field-color-validation-invalid, #c61112);font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400)}.mc-file-uploader-item__container--inline{display:flex;align-items:center}.mc-file-uploader-item__container--stacked{display:flex;flex-direction:column;gap:.75rem}.mc-file-uploader-item__delete-button-container{padding-left:.25rem;margin-left:.25rem;border-left:1px solid var(--divider-color-primary, #cccccc)}.mc-file-uploader-item__actions-container{padding:0 2rem;display:flex;align-items:center;gap:.25rem;justify-content:center}.mc-file-uploader-item__action{padding:0 .75rem;flex-grow:1}.mc-file-uploader-item--error .mc-file-uploader-item__container{border-width:var(--border-width-m, .125rem);border-color:var(--file-uploader-color-file-item-border-invalid, #ea302d)}.mc-file-uploader-item--error .mc-file-uploader-item__status-icon{fill:var(--file-uploader-color-file-item-icon-invalid, #ea302d)}.mc-file-uploader-item--loading .mc-file-uploader-item__container{gap:1rem;flex-direction:column;align-items:normal}.mc-file-uploader-item--loading .mc-file-uploader-item__status-icon{fill:var(--color-standalone-disabled, #b3b3b3)}.mc-file-uploader-item--loading .mc-file-uploader-item__label,.mc-file-uploader-item--loading .mc-file-uploader-item__details{color:var(--color-standalone-disabled, #b3b3b3)}\n"], dependencies: [{ kind: "component", type: MozLinearProgressBarBufferComponent, selector: "moz-linear-progress-bar-buffer", inputs: ["valuePercent", "size", "ariaLabel"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "component", type: CheckCircle32, selector: "CheckCircle32", inputs: ["hostClass"] }, { kind: "component", type: CrossCircleFilled20, selector: "CrossCircleFilled20", inputs: ["hostClass"] }, { kind: "component", type: Refresh32, selector: "Refresh32", inputs: ["hostClass"] }, { kind: "component", type: MozDividerComponent, selector: "moz-divider", inputs: ["orientation", "appearance", "size"] }, { kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: Refresh20, selector: "Refresh20", inputs: ["hostClass"] }, { kind: "component", type: Uploading32, selector: "Uploading32", inputs: ["hostClass"] }, { kind: "component", type: Eye20, selector: "Eye20", inputs: ["hostClass"] }, { kind: "component", type: WarningCircle32, selector: "WarningCircle32", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
489
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozFileUploaderItemComponent, isStandalone: true, selector: "moz-file-uploader-item", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, uploading: { classPropertyName: "uploading", publicName: "uploading", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hasPreview: { classPropertyName: "hasPreview", publicName: "hasPreview", isSignal: true, isRequired: false, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, fileInformation: { classPropertyName: "fileInformation", publicName: "fileInformation", isSignal: true, isRequired: false, transformFunction: null }, retryButtonLabel: { classPropertyName: "retryButtonLabel", publicName: "retryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, deleteButtonLabel: { classPropertyName: "deleteButtonLabel", publicName: "deleteButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, previewButtonLabel: { classPropertyName: "previewButtonLabel", publicName: "previewButtonLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { delete: "delete", retry: "retry", preview: "preview" }, ngImport: i0, template: "<div class=\"mc-file-uploader-item\" [class]=\"modifierClass()\">\n <div class=\"mc-file-uploader-item__container mc-file-uploader-item__container--{{ format() }}\">\n <div\n class=\"mc-file-uploader-item__meta-row\"\n [class.mc-file-uploader-item__meta-row--with-info]=\"true\"\n >\n @if (isUploading() && !invalid()) {\n <Uploading32 class=\"mc-file-uploader-item__status-icon\" />\n } @else if(invalid()) {\n <WarningCircle32 class=\"mc-file-uploader-item__status-icon\" />\n } @else {\n <CheckCircle32 class=\"mc-file-uploader-item__status-icon\" />\n }\n <div class=\"mc-file-uploader-item__info-content\">\n <span class=\"mc-file-uploader-item__label\">{{ fileName() }}</span>\n <span class=\"mc-file-uploader-item__details\">{{ fileInfo() }}</span>\n </div>\n </div>\n\n @if (showInlineActions()) {\n <div class=\"mc-file-uploader-item__inline-actions\">\n @if (invalid()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onRetry()\"\n >\n <Refresh32 icon />\n <span class=\"mc-button__label\">{{ retryButtonLabel() }}</span>\n </button>\n } @if (!invalid() && hasPreview()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onPreview()\"\n >\n <span class=\"mc-button__label\">{{ previewButtonLabel() }}</span>\n </button>\n }\n </div>\n <div class=\"mc-file-uploader-item__delete-button-container\">\n <moz-icon-button\n [id]=\"'file-uploader-item-delete-button'\"\n (activated)=\"onDelete()\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n >\n <CrossCircleFilled20 icon />\n </moz-icon-button>\n </div>\n } @if (showStackedActions()) {\n <moz-divider orientation=\"horizontal\"></moz-divider>\n <div class=\"mc-file-uploader-item__actions-container\">\n @if (!invalid() && hasPreview()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onPreview()\"\n [iconPosition]=\"'left'\"\n >\n <Eye20 icon />\n <span class=\"mc-button__label\">{{ previewButtonLabel() }}</span>\n </button>\n } @if (invalid()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onRetry()\"\n [iconPosition]=\"'left'\"\n >\n <Refresh20 icon />\n <span class=\"mc-button__label\">{{ retryButtonLabel() }}</span>\n </button>\n }\n\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onDelete()\"\n [iconPosition]=\"'left'\"\n >\n <CrossCircleFilled20 icon />\n <span class=\"mc-button__label\">{{ deleteButtonLabel() }}</span>\n </button>\n </div>\n } @if (isUploading() && !invalid()) {\n <moz-linear-progress-bar-buffer size=\"l\" [valuePercent]=\"75\" />\n }\n </div>\n\n @if (errorMessage() && invalid()) {\n <span class=\"mc-file-uploader-item__error-message\">{{ errorMessage() }}</span>\n }\n</div>\n", styles: [".mc-file-uploader{display:flex;flex-direction:column;gap:1rem;box-sizing:border-box}.mc-file-uploader__files-list{display:flex;flex-direction:column;gap:1rem}.mc-file-uploader__hidden-input{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-file-uploader__input{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);border-radius:var(--border-radius-m, .5rem);color:var(--file-uploader-color-drag-and-drop-text-default, #242938)}.mc-file-uploader__input .mc-file-uploader__button{width:100%}.mc-file-uploader__input--disabled .mc-file-uploader__button.mc-button.mc-button--outlined{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-file-uploader__input-title{height:1.125rem;font-size:var(--font-size-150, 1rem)}.mc-file-uploader__input-subtitle{height:1.125rem;font-size:var(--font-size-100, .875rem)}.mc-file-uploader--draggable .mc-file-uploader__input{padding:2rem;outline:.125rem dashed var(--file-uploader-color-drag-and-drop-border-default, #464e63);display:flex}.mc-file-uploader--draggable .mc-file-uploader__input--disabled{outline-color:var(--file-uploader-color-drag-and-drop-border-disabled, #b3b3b3);color:var(--file-uploader-color-drag-and-drop-text-disabled, #b3b3b3);cursor:not-allowed}.mc-file-uploader--draggable .mc-file-uploader__input--dragged{outline-width:.25rem}.mc-file-uploader-item{display:flex;flex-direction:column;gap:.25rem}.mc-file-uploader-item__container{border:1px solid var(--file-uploader-color-file-item-border-default, #cccccc);border-radius:var(--border-radius-m, .5rem);padding:.75rem}.mc-file-uploader-item__meta-row{display:flex;align-items:center;flex-grow:1}.mc-file-uploader-item__meta-row--with-info{align-items:start}.mc-file-uploader-item__status-icon{fill:var(--file-uploader-color-file-item-icon-valid, #3f9e10)}.mc-file-uploader-item__info-content{display:flex;flex-direction:column;flex-grow:1;padding-left:.5rem;padding-right:1rem}.mc-file-uploader-item__label{color:var(--file-uploader-color-file-item-text-file-name, #000000);font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600)}.mc-file-uploader-item__details{color:var(--file-uploader-color-file-item-text-information, #666666);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400)}.mc-file-uploader-item__error-message{color:var(--field-color-validation-invalid, #c61112);font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400)}.mc-file-uploader-item__container--inline{display:flex;align-items:center}.mc-file-uploader-item__container--stacked{display:flex;flex-direction:column;gap:.75rem}.mc-file-uploader-item__delete-button-container{padding-left:.25rem;margin-left:.25rem;border-left:1px solid var(--divider-color-primary, #cccccc)}.mc-file-uploader-item__actions-container{padding:0 2rem;display:flex;align-items:center;gap:.25rem;justify-content:center}.mc-file-uploader-item__action{padding:0 .75rem;flex-grow:1}.mc-file-uploader-item--error .mc-file-uploader-item__container{border-width:var(--border-width-m, .125rem);border-color:var(--file-uploader-color-file-item-border-invalid, #ea302d)}.mc-file-uploader-item--error .mc-file-uploader-item__status-icon{fill:var(--file-uploader-color-file-item-icon-invalid, #ea302d)}.mc-file-uploader-item--loading .mc-file-uploader-item__container{gap:1rem;flex-direction:column;align-items:normal}.mc-file-uploader-item--loading .mc-file-uploader-item__status-icon{fill:var(--color-standalone-disabled, #b3b3b3)}.mc-file-uploader-item--loading .mc-file-uploader-item__label,.mc-file-uploader-item--loading .mc-file-uploader-item__details{color:var(--color-standalone-disabled, #b3b3b3)}\n"], dependencies: [{ kind: "component", type: MozLinearProgressBarBufferComponent, selector: "moz-linear-progress-bar-buffer", inputs: ["valuePercent", "size", "ariaLabel"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "component", type: CheckCircle32, selector: "CheckCircle32", inputs: ["hostClass"] }, { kind: "component", type: CrossCircleFilled20, selector: "CrossCircleFilled20", inputs: ["hostClass"] }, { kind: "component", type: Refresh32, selector: "Refresh32", inputs: ["hostClass"] }, { kind: "component", type: MozDividerComponent, selector: "moz-divider", inputs: ["orientation", "appearance", "size"] }, { kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: Refresh20, selector: "Refresh20", inputs: ["hostClass"] }, { kind: "component", type: Uploading32, selector: "Uploading32", inputs: ["hostClass"] }, { kind: "component", type: Eye20, selector: "Eye20", inputs: ["hostClass"] }, { kind: "component", type: WarningCircle32, selector: "WarningCircle32", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
490
490
|
}
|
|
491
491
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozFileUploaderItemComponent, decorators: [{
|
|
492
492
|
type: Component,
|
|
@@ -502,7 +502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
502
502
|
Uploading32,
|
|
503
503
|
Eye20,
|
|
504
504
|
WarningCircle32,
|
|
505
|
-
], template: "<div class=\"mc-file-uploader-item\" [class]=\"modifierClass()\">\n <div class=\"mc-file-uploader-item__container mc-file-uploader-item__container--{{ format() }}\">\n <div\n class=\"mc-file-uploader-item__meta-row\"\n [class.mc-file-uploader-item__meta-row--with-info]=\"true\"\n >\n @if (isUploading() && !invalid()) {\n <Uploading32 class=\"mc-file-uploader-item__status-icon\" />\n } @else if(invalid()) {\n <WarningCircle32 class=\"mc-file-uploader-item__status-icon\" />\n } @else {\n <CheckCircle32 class=\"mc-file-uploader-item__status-icon\" />\n }\n <div class=\"mc-file-uploader-item__info-content\">\n <span class=\"mc-file-uploader-item__label\">{{ fileName() }}</span>\n <span class=\"mc-file-uploader-item__details\">{{ fileInfo() }}</span>\n </div>\n </div>\n\n @if (showInlineActions()) {\n <div class=\"mc-file-uploader-item__inline-actions\">\n @if (invalid()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onRetry()\"\n >\n <Refresh32 icon />\n <span class=\"mc-button__label\">{{ retryButtonLabel() }}</span>\n </button>\n } @if (!invalid() && hasPreview()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onPreview()\"\n >\n <span class=\"mc-button__label\">{{ previewButtonLabel() }}</span>\n </button>\n }\n </div>\n <div class=\"mc-file-uploader-item__delete-button-container\">\n <moz-icon-button\n [id]=\"'file-uploader-item-delete-button'\"\n (activated)=\"onDelete()\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n >\n <CrossCircleFilled20 icon />\n </moz-icon-button>\n </div>\n } @if (showStackedActions()) {\n <moz-divider orientation=\"horizontal\"></moz-divider>\n <div class=\"mc-file-uploader-item__actions-container\">\n @if (!invalid() && hasPreview()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onPreview()\"\n [iconPosition]=\"'left'\"\n >\n <Eye20 icon />\n <span class=\"mc-button__label\">{{ previewButtonLabel() }}</span>\n </button>\n } @if (invalid()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onRetry()\"\n [iconPosition]=\"'left'\"\n >\n <Refresh20 icon />\n <span class=\"mc-button__label\">{{ retryButtonLabel() }}</span>\n </button>\n }\n\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onDelete()\"\n [iconPosition]=\"'left'\"\n >\n <CrossCircleFilled20 icon />\n <span class=\"mc-button__label\">{{ deleteButtonLabel() }}</span>\n </button>\n </div>\n } @if (isUploading() && !invalid()) {\n <moz-linear-progress-bar-buffer size=\"l\" [valuePercent]=\"75\" />\n }\n </div>\n\n @if (errorMessage() && invalid()) {\n <span class=\"mc-file-uploader-item__error-message\">{{ errorMessage() }}</span>\n }\n</div>\n", styles: [".mc-file-uploader{display:flex;flex-direction:column;gap:1rem;box-sizing:border-box}.mc-file-uploader__files-list{display:flex;flex-direction:column;gap:1rem}.mc-file-uploader__hidden-input{
|
|
505
|
+
], template: "<div class=\"mc-file-uploader-item\" [class]=\"modifierClass()\">\n <div class=\"mc-file-uploader-item__container mc-file-uploader-item__container--{{ format() }}\">\n <div\n class=\"mc-file-uploader-item__meta-row\"\n [class.mc-file-uploader-item__meta-row--with-info]=\"true\"\n >\n @if (isUploading() && !invalid()) {\n <Uploading32 class=\"mc-file-uploader-item__status-icon\" />\n } @else if(invalid()) {\n <WarningCircle32 class=\"mc-file-uploader-item__status-icon\" />\n } @else {\n <CheckCircle32 class=\"mc-file-uploader-item__status-icon\" />\n }\n <div class=\"mc-file-uploader-item__info-content\">\n <span class=\"mc-file-uploader-item__label\">{{ fileName() }}</span>\n <span class=\"mc-file-uploader-item__details\">{{ fileInfo() }}</span>\n </div>\n </div>\n\n @if (showInlineActions()) {\n <div class=\"mc-file-uploader-item__inline-actions\">\n @if (invalid()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onRetry()\"\n >\n <Refresh32 icon />\n <span class=\"mc-button__label\">{{ retryButtonLabel() }}</span>\n </button>\n } @if (!invalid() && hasPreview()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onPreview()\"\n >\n <span class=\"mc-button__label\">{{ previewButtonLabel() }}</span>\n </button>\n }\n </div>\n <div class=\"mc-file-uploader-item__delete-button-container\">\n <moz-icon-button\n [id]=\"'file-uploader-item-delete-button'\"\n (activated)=\"onDelete()\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n >\n <CrossCircleFilled20 icon />\n </moz-icon-button>\n </div>\n } @if (showStackedActions()) {\n <moz-divider orientation=\"horizontal\"></moz-divider>\n <div class=\"mc-file-uploader-item__actions-container\">\n @if (!invalid() && hasPreview()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onPreview()\"\n [iconPosition]=\"'left'\"\n >\n <Eye20 icon />\n <span class=\"mc-button__label\">{{ previewButtonLabel() }}</span>\n </button>\n } @if (invalid()) {\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onRetry()\"\n [iconPosition]=\"'left'\"\n >\n <Refresh20 icon />\n <span class=\"mc-button__label\">{{ retryButtonLabel() }}</span>\n </button>\n }\n\n <button\n moz-button\n [ghost]=\"true\"\n size=\"s\"\n class=\"mc-file-uploader-item__action\"\n (click)=\"onDelete()\"\n [iconPosition]=\"'left'\"\n >\n <CrossCircleFilled20 icon />\n <span class=\"mc-button__label\">{{ deleteButtonLabel() }}</span>\n </button>\n </div>\n } @if (isUploading() && !invalid()) {\n <moz-linear-progress-bar-buffer size=\"l\" [valuePercent]=\"75\" />\n }\n </div>\n\n @if (errorMessage() && invalid()) {\n <span class=\"mc-file-uploader-item__error-message\">{{ errorMessage() }}</span>\n }\n</div>\n", styles: [".mc-file-uploader{display:flex;flex-direction:column;gap:1rem;box-sizing:border-box}.mc-file-uploader__files-list{display:flex;flex-direction:column;gap:1rem}.mc-file-uploader__hidden-input{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-file-uploader__input{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);border-radius:var(--border-radius-m, .5rem);color:var(--file-uploader-color-drag-and-drop-text-default, #242938)}.mc-file-uploader__input .mc-file-uploader__button{width:100%}.mc-file-uploader__input--disabled .mc-file-uploader__button.mc-button.mc-button--outlined{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-file-uploader__input-title{height:1.125rem;font-size:var(--font-size-150, 1rem)}.mc-file-uploader__input-subtitle{height:1.125rem;font-size:var(--font-size-100, .875rem)}.mc-file-uploader--draggable .mc-file-uploader__input{padding:2rem;outline:.125rem dashed var(--file-uploader-color-drag-and-drop-border-default, #464e63);display:flex}.mc-file-uploader--draggable .mc-file-uploader__input--disabled{outline-color:var(--file-uploader-color-drag-and-drop-border-disabled, #b3b3b3);color:var(--file-uploader-color-drag-and-drop-text-disabled, #b3b3b3);cursor:not-allowed}.mc-file-uploader--draggable .mc-file-uploader__input--dragged{outline-width:.25rem}.mc-file-uploader-item{display:flex;flex-direction:column;gap:.25rem}.mc-file-uploader-item__container{border:1px solid var(--file-uploader-color-file-item-border-default, #cccccc);border-radius:var(--border-radius-m, .5rem);padding:.75rem}.mc-file-uploader-item__meta-row{display:flex;align-items:center;flex-grow:1}.mc-file-uploader-item__meta-row--with-info{align-items:start}.mc-file-uploader-item__status-icon{fill:var(--file-uploader-color-file-item-icon-valid, #3f9e10)}.mc-file-uploader-item__info-content{display:flex;flex-direction:column;flex-grow:1;padding-left:.5rem;padding-right:1rem}.mc-file-uploader-item__label{color:var(--file-uploader-color-file-item-text-file-name, #000000);font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600)}.mc-file-uploader-item__details{color:var(--file-uploader-color-file-item-text-information, #666666);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400)}.mc-file-uploader-item__error-message{color:var(--field-color-validation-invalid, #c61112);font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400)}.mc-file-uploader-item__container--inline{display:flex;align-items:center}.mc-file-uploader-item__container--stacked{display:flex;flex-direction:column;gap:.75rem}.mc-file-uploader-item__delete-button-container{padding-left:.25rem;margin-left:.25rem;border-left:1px solid var(--divider-color-primary, #cccccc)}.mc-file-uploader-item__actions-container{padding:0 2rem;display:flex;align-items:center;gap:.25rem;justify-content:center}.mc-file-uploader-item__action{padding:0 .75rem;flex-grow:1}.mc-file-uploader-item--error .mc-file-uploader-item__container{border-width:var(--border-width-m, .125rem);border-color:var(--file-uploader-color-file-item-border-invalid, #ea302d)}.mc-file-uploader-item--error .mc-file-uploader-item__status-icon{fill:var(--file-uploader-color-file-item-icon-invalid, #ea302d)}.mc-file-uploader-item--loading .mc-file-uploader-item__container{gap:1rem;flex-direction:column;align-items:normal}.mc-file-uploader-item--loading .mc-file-uploader-item__status-icon{fill:var(--color-standalone-disabled, #b3b3b3)}.mc-file-uploader-item--loading .mc-file-uploader-item__label,.mc-file-uploader-item--loading .mc-file-uploader-item__details{color:var(--color-standalone-disabled, #b3b3b3)}\n"] }]
|
|
506
506
|
}], propDecorators: { format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], uploading: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploading", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], hasPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPreview", required: false }] }], file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }], fileInformation: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileInformation", required: false }] }], retryButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "retryButtonLabel", required: false }] }], deleteButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteButtonLabel", required: false }] }], previewButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewButtonLabel", required: false }] }], delete: [{ type: i0.Output, args: ["delete"] }], retry: [{ type: i0.Output, args: ["retry"] }], preview: [{ type: i0.Output, args: ["preview"] }] } });
|
|
507
507
|
|
|
508
508
|
class MozFileUploaderComponent {
|
|
@@ -712,7 +712,7 @@ class MozFileUploaderComponent {
|
|
|
712
712
|
useExisting: forwardRef(() => MozFileUploaderComponent),
|
|
713
713
|
multi: true,
|
|
714
714
|
},
|
|
715
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"file-uploader\" [class]=\"classes()\">\n <div class=\"file-uploader__container\">\n <div class=\"field\">\n <label class=\"field__label\" [attr.for]=\"id()\">\n {{ label() }}\n @if (necessityIndicator()) {\n <span class=\"field__requirement\">\n {{ necessityIndicator() }}\n </span>\n }\n </label>\n @if (helpText()) {\n <span [id]=\"helpId()\" class=\"field__help\">\n {{ helpText() }}\n </span>\n }\n <div class=\"field__content\">\n <input\n #fileInput\n [id]=\"id()\"\n aria-label=\"file input\"\n type=\"file\"\n class=\"file-uploader__hidden-input\"\n [disabled]=\"isDisabledState()\"\n (change)=\"onFileSelect($event)\"\n [multiple]=\"multipleFiles()\"\n [accept]=\"accept()\"\n />\n\n <div\n class=\"file-uploader__input\"\n [class]=\"inputClasses()\"\n (click)=\"openFileDialog()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n @if (hasDragDrop()) {\n <span class=\"file-uploader__input-title\">{{ title() }}</span>\n <span class=\"file-uploader__input-subtitle\">{{ subtitle() }}</span>\n }\n\n <div class=\"button button--outlined file-uploader__button\">\n <Upload24 />\n <span class=\"button__label\">{{ uploadButtonLabel() }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n @if (showFilesList() && files().length > 0) {\n <div class=\"file-uploader__files-list\">\n @for (file of files(); track file; let i = $index) {\n <moz-file-uploader-item\n [format]=\"format()\"\n [invalid]=\"invalid()\"\n [uploading]=\"uploading()\"\n [errorMessage]=\"errorMessage()\"\n [hasPreview]=\"hasPreview()\"\n [file]=\"file\"\n [fileInformation]=\"fileInformation()\"\n [retryButtonLabel]=\"retryButtonLabel()\"\n [deleteButtonLabel]=\"deleteButtonLabel()\"\n [previewButtonLabel]=\"previewButtonLabel()\"\n (delete)=\"onDeleteFile($event)\"\n (retry)=\"onRetryFile($event)\"\n (preview)=\"onPreviewFile($event)\"\n />\n }\n </div>\n }\n</div>\n", styles: [".mc-file-uploader,.file-uploader{display:flex;flex-direction:column;gap:1rem;box-sizing:border-box}.mc-file-uploader__files-list,.file-uploader__files-list{display:flex;flex-direction:column;gap:1rem}.mc-file-uploader__hidden-input,.file-uploader__hidden-input{height:0;width:0;overflow:hidden;position:absolute;top:-1000px;left:-1000px;text-align:left;opacity:0}.mc-file-uploader__input,.file-uploader__input{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);border-radius:var(--border-radius-m, .5rem);color:var(--file-uploader-color-drag-and-drop-text-default, #242938)}.mc-file-uploader__input .mc-file-uploader__button,.file-uploader__input .mc-file-uploader__button,.mc-file-uploader__input .file-uploader__button,.file-uploader__input .file-uploader__button{width:100%}.mc-file-uploader__input--disabled .mc-file-uploader__button.mc-button.mc-button--outlined,.file-uploader__input--disabled .mc-file-uploader__button.mc-button.mc-button--outlined,.mc-file-uploader__input--disabled .mc-button.mc-button--outlined.file-uploader__button,.file-uploader__input--disabled .mc-button.mc-button--outlined.file-uploader__button,.mc-file-uploader__input--disabled .mc-file-uploader__button.mc-button--outlined.button,.file-uploader__input--disabled .mc-file-uploader__button.mc-button--outlined.button,.mc-file-uploader__input--disabled .mc-button--outlined.file-uploader__button.button,.file-uploader__input--disabled .mc-button--outlined.file-uploader__button.button,.mc-file-uploader__input--disabled .mc-file-uploader__button.mc-button.button--outlined,.file-uploader__input--disabled .mc-file-uploader__button.mc-button.button--outlined,.mc-file-uploader__input--disabled .mc-button.file-uploader__button.button--outlined,.file-uploader__input--disabled .mc-button.file-uploader__button.button--outlined,.mc-file-uploader__input--disabled .mc-file-uploader__button.button.button--outlined,.file-uploader__input--disabled .mc-file-uploader__button.button.button--outlined,.mc-file-uploader__input--disabled .file-uploader__button.button.button--outlined,.file-uploader__input--disabled .file-uploader__button.button.button--outlined{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-file-uploader__input-title,.file-uploader__input-title{height:1.125rem;font-size:var(--font-size-150, 1rem)}.mc-file-uploader__input-subtitle,.file-uploader__input-subtitle{height:1.125rem;font-size:var(--font-size-100, .875rem)}.mc-file-uploader--draggable .mc-file-uploader__input,.file-uploader--draggable .mc-file-uploader__input,.mc-file-uploader--draggable .file-uploader__input,.file-uploader--draggable .file-uploader__input{padding:2rem;outline:.125rem dashed var(--file-uploader-color-drag-and-drop-border-default, #464e63);display:flex}.mc-file-uploader--draggable .mc-file-uploader__input--disabled,.file-uploader--draggable .mc-file-uploader__input--disabled,.mc-file-uploader--draggable .file-uploader__input--disabled,.file-uploader--draggable .file-uploader__input--disabled{outline-color:var(--file-uploader-color-drag-and-drop-border-disabled, #b3b3b3);color:var(--file-uploader-color-drag-and-drop-text-disabled, #b3b3b3);cursor:not-allowed}.mc-file-uploader--draggable .mc-file-uploader__input--dragged,.file-uploader--draggable .mc-file-uploader__input--dragged,.mc-file-uploader--draggable .file-uploader__input--dragged,.file-uploader--draggable .file-uploader__input--dragged{outline-width:.25rem}.mc-file-uploader-item{display:flex;flex-direction:column;gap:.25rem}.mc-file-uploader-item__container{border:1px solid var(--file-uploader-color-file-item-border-default, #cccccc);border-radius:var(--border-radius-m, .5rem);padding:.75rem}.mc-file-uploader-item__meta-row{display:flex;align-items:center;flex-grow:1}.mc-file-uploader-item__meta-row--with-info{align-items:start}.mc-file-uploader-item__status-icon{fill:var(--file-uploader-color-file-item-icon-valid, #3f9e10)}.mc-file-uploader-item__info-content{display:flex;flex-direction:column;flex-grow:1;padding-left:.5rem;padding-right:1rem}.mc-file-uploader-item__label{color:var(--file-uploader-color-file-item-text-file-name, #000000);font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600)}.mc-file-uploader-item__details{color:var(--file-uploader-color-file-item-text-information, #666666);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400)}.mc-file-uploader-item__error-message{color:var(--field-color-validation-invalid, #c61112);font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400)}.mc-file-uploader-item__container--inline{display:flex;align-items:center}.mc-file-uploader-item__container--stacked{display:flex;flex-direction:column;gap:.75rem}.mc-file-uploader-item__delete-button-container{padding-left:.25rem;margin-left:.25rem;border-left:1px solid var(--divider-color-primary, #cccccc)}.mc-file-uploader-item__actions-container{padding:0 2rem;display:flex;align-items:center;gap:.25rem;justify-content:center}.mc-file-uploader-item__action{padding:0 .75rem;flex-grow:1}.mc-file-uploader-item--error .mc-file-uploader-item__container{border-width:var(--border-width-m, .125rem);border-color:var(--file-uploader-color-file-item-border-invalid, #ea302d)}.mc-file-uploader-item--error .mc-file-uploader-item__status-icon{fill:var(--file-uploader-color-file-item-icon-invalid, #ea302d)}.mc-file-uploader-item--loading .mc-file-uploader-item__container{gap:1rem;flex-direction:column;align-items:normal}.mc-file-uploader-item--loading .mc-file-uploader-item__status-icon{fill:var(--color-standalone-disabled, #b3b3b3)}.mc-file-uploader-item--loading .mc-file-uploader-item__label,.mc-file-uploader-item--loading .mc-file-uploader-item__details{color:var(--color-standalone-disabled, #b3b3b3)}.mc-field__label,.field__label,.mc-field__legend{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000)}.mc-field__legend{padding-inline:0}.mc-field__requirement,.field__requirement,.mc-field__help,.field__help{font-size:var(--font-size-50, .75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help,.field__help{display:block;margin-top:.125rem}.mc-field__content,.field__content{margin-top:.5rem}.mc-field__content:where(.mc-field__content--inline),.field__content:where(.mc-field__content--inline){display:flex;flex-flow:row wrap;gap:.25rem 1rem}.mc-field__validation-message{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:.25rem;margin-top:.25rem}.mc-field__validation-message.is-valid:before,.mc-field__validation-message.is-invalid:before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid:before{background-color:var(--field-color-validation-valid, #117f03);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-invalid{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before{background-color:var(--field-color-validation-invalid, #c61112);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-loading{color:var(--field-color-validation-loading, #666666)}.mc-field--group{border-width:0;margin-inline:0;padding:0}.mc-field--group .mc-field__content:not(.mc-field__content--inline),.mc-field--group .field__content:not(.mc-field__content--inline){display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active,.button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label,.button .mc-button__label,.mc-button .button__label,.button .button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label,.button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus,.button:focus{box-shadow:none;outline:none}.mc-button:focus-visible,.button: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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label,.mc-button--s .button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label,.mc-button--m .button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label,.mc-button--l .button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined,.button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover,.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active,.button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled,.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard,.mc-button--standard.button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover,.mc-button--standard.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active,.mc-button--standard.button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled,.mc-button--standard.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent,.mc-button--accent.button--outlined{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover,.mc-button--accent.button--outlined:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active,.mc-button--accent.button--outlined:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled,.mc-button--accent.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger,.mc-button--danger.button--outlined{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover,.mc-button--danger.button--outlined:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active,.mc-button--danger.button--outlined:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled,.mc-button--danger.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse,.mc-button--inverse.button--outlined{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover,.mc-button--inverse.button--outlined:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active,.mc-button--inverse.button--outlined:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled,.mc-button--inverse.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: MozFileUploaderItemComponent, selector: "moz-file-uploader-item", inputs: ["format", "invalid", "uploading", "errorMessage", "hasPreview", "file", "fileInformation", "retryButtonLabel", "deleteButtonLabel", "previewButtonLabel"], outputs: ["delete", "retry", "preview"] }, { kind: "component", type: Upload24, selector: "Upload24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
715
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"file-uploader\" [class]=\"classes()\">\n <div class=\"file-uploader__container\">\n <div class=\"field\">\n <label class=\"field__label\" [attr.for]=\"id()\">\n {{ label() }}\n @if (necessityIndicator()) {\n <span class=\"field__requirement\">\n {{ necessityIndicator() }}\n </span>\n }\n </label>\n @if (helpText()) {\n <span [id]=\"helpId()\" class=\"field__help\">\n {{ helpText() }}\n </span>\n }\n <div class=\"field__content\">\n <input\n #fileInput\n [id]=\"id()\"\n aria-label=\"file input\"\n type=\"file\"\n class=\"file-uploader__hidden-input\"\n [disabled]=\"isDisabledState()\"\n (change)=\"onFileSelect($event)\"\n [multiple]=\"multipleFiles()\"\n [accept]=\"accept()\"\n />\n\n <div\n class=\"file-uploader__input\"\n [class]=\"inputClasses()\"\n (click)=\"openFileDialog()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n @if (hasDragDrop()) {\n <span class=\"file-uploader__input-title\">{{ title() }}</span>\n <span class=\"file-uploader__input-subtitle\">{{ subtitle() }}</span>\n }\n\n <div class=\"button button--outlined file-uploader__button\">\n <Upload24 />\n <span class=\"button__label\">{{ uploadButtonLabel() }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n @if (showFilesList() && files().length > 0) {\n <div class=\"file-uploader__files-list\">\n @for (file of files(); track file; let i = $index) {\n <moz-file-uploader-item\n [format]=\"format()\"\n [invalid]=\"invalid()\"\n [uploading]=\"uploading()\"\n [errorMessage]=\"errorMessage()\"\n [hasPreview]=\"hasPreview()\"\n [file]=\"file\"\n [fileInformation]=\"fileInformation()\"\n [retryButtonLabel]=\"retryButtonLabel()\"\n [deleteButtonLabel]=\"deleteButtonLabel()\"\n [previewButtonLabel]=\"previewButtonLabel()\"\n (delete)=\"onDeleteFile($event)\"\n (retry)=\"onRetryFile($event)\"\n (preview)=\"onPreviewFile($event)\"\n />\n }\n </div>\n }\n</div>\n", styles: [".mc-file-uploader,.file-uploader{display:flex;flex-direction:column;gap:1rem;box-sizing:border-box}.mc-file-uploader__files-list,.file-uploader__files-list{display:flex;flex-direction:column;gap:1rem}.mc-file-uploader__hidden-input,.file-uploader__hidden-input{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-file-uploader__input,.file-uploader__input{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);border-radius:var(--border-radius-m, .5rem);color:var(--file-uploader-color-drag-and-drop-text-default, #242938)}.mc-file-uploader__input .mc-file-uploader__button,.file-uploader__input .mc-file-uploader__button,.mc-file-uploader__input .file-uploader__button,.file-uploader__input .file-uploader__button{width:100%}.mc-file-uploader__input--disabled .mc-file-uploader__button.mc-button.mc-button--outlined,.file-uploader__input--disabled .mc-file-uploader__button.mc-button.mc-button--outlined,.mc-file-uploader__input--disabled .mc-button.mc-button--outlined.file-uploader__button,.file-uploader__input--disabled .mc-button.mc-button--outlined.file-uploader__button,.mc-file-uploader__input--disabled .mc-file-uploader__button.mc-button--outlined.button,.file-uploader__input--disabled .mc-file-uploader__button.mc-button--outlined.button,.mc-file-uploader__input--disabled .mc-button--outlined.file-uploader__button.button,.file-uploader__input--disabled .mc-button--outlined.file-uploader__button.button,.mc-file-uploader__input--disabled .mc-file-uploader__button.mc-button.button--outlined,.file-uploader__input--disabled .mc-file-uploader__button.mc-button.button--outlined,.mc-file-uploader__input--disabled .mc-button.file-uploader__button.button--outlined,.file-uploader__input--disabled .mc-button.file-uploader__button.button--outlined,.mc-file-uploader__input--disabled .mc-file-uploader__button.button.button--outlined,.file-uploader__input--disabled .mc-file-uploader__button.button.button--outlined,.mc-file-uploader__input--disabled .file-uploader__button.button.button--outlined,.file-uploader__input--disabled .file-uploader__button.button.button--outlined{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-file-uploader__input-title,.file-uploader__input-title{height:1.125rem;font-size:var(--font-size-150, 1rem)}.mc-file-uploader__input-subtitle,.file-uploader__input-subtitle{height:1.125rem;font-size:var(--font-size-100, .875rem)}.mc-file-uploader--draggable .mc-file-uploader__input,.file-uploader--draggable .mc-file-uploader__input,.mc-file-uploader--draggable .file-uploader__input,.file-uploader--draggable .file-uploader__input{padding:2rem;outline:.125rem dashed var(--file-uploader-color-drag-and-drop-border-default, #464e63);display:flex}.mc-file-uploader--draggable .mc-file-uploader__input--disabled,.file-uploader--draggable .mc-file-uploader__input--disabled,.mc-file-uploader--draggable .file-uploader__input--disabled,.file-uploader--draggable .file-uploader__input--disabled{outline-color:var(--file-uploader-color-drag-and-drop-border-disabled, #b3b3b3);color:var(--file-uploader-color-drag-and-drop-text-disabled, #b3b3b3);cursor:not-allowed}.mc-file-uploader--draggable .mc-file-uploader__input--dragged,.file-uploader--draggable .mc-file-uploader__input--dragged,.mc-file-uploader--draggable .file-uploader__input--dragged,.file-uploader--draggable .file-uploader__input--dragged{outline-width:.25rem}.mc-file-uploader-item{display:flex;flex-direction:column;gap:.25rem}.mc-file-uploader-item__container{border:1px solid var(--file-uploader-color-file-item-border-default, #cccccc);border-radius:var(--border-radius-m, .5rem);padding:.75rem}.mc-file-uploader-item__meta-row{display:flex;align-items:center;flex-grow:1}.mc-file-uploader-item__meta-row--with-info{align-items:start}.mc-file-uploader-item__status-icon{fill:var(--file-uploader-color-file-item-icon-valid, #3f9e10)}.mc-file-uploader-item__info-content{display:flex;flex-direction:column;flex-grow:1;padding-left:.5rem;padding-right:1rem}.mc-file-uploader-item__label{color:var(--file-uploader-color-file-item-text-file-name, #000000);font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600)}.mc-file-uploader-item__details{color:var(--file-uploader-color-file-item-text-information, #666666);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400)}.mc-file-uploader-item__error-message{color:var(--field-color-validation-invalid, #c61112);font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400)}.mc-file-uploader-item__container--inline{display:flex;align-items:center}.mc-file-uploader-item__container--stacked{display:flex;flex-direction:column;gap:.75rem}.mc-file-uploader-item__delete-button-container{padding-left:.25rem;margin-left:.25rem;border-left:1px solid var(--divider-color-primary, #cccccc)}.mc-file-uploader-item__actions-container{padding:0 2rem;display:flex;align-items:center;gap:.25rem;justify-content:center}.mc-file-uploader-item__action{padding:0 .75rem;flex-grow:1}.mc-file-uploader-item--error .mc-file-uploader-item__container{border-width:var(--border-width-m, .125rem);border-color:var(--file-uploader-color-file-item-border-invalid, #ea302d)}.mc-file-uploader-item--error .mc-file-uploader-item__status-icon{fill:var(--file-uploader-color-file-item-icon-invalid, #ea302d)}.mc-file-uploader-item--loading .mc-file-uploader-item__container{gap:1rem;flex-direction:column;align-items:normal}.mc-file-uploader-item--loading .mc-file-uploader-item__status-icon{fill:var(--color-standalone-disabled, #b3b3b3)}.mc-file-uploader-item--loading .mc-file-uploader-item__label,.mc-file-uploader-item--loading .mc-file-uploader-item__details{color:var(--color-standalone-disabled, #b3b3b3)}.mc-field__label,.field__label,.mc-field__legend{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000)}.mc-field__legend{padding-inline:0}.mc-field__requirement,.field__requirement,.mc-field__help,.field__help{font-size:var(--font-size-50, .75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help,.field__help{display:block;margin-top:.125rem}.mc-field__content,.field__content{margin-top:.5rem}.mc-field__content:where(.mc-field__content--inline),.field__content:where(.mc-field__content--inline){display:flex;flex-flow:row wrap;gap:.25rem 1rem}.mc-field__validation-message{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:.25rem;margin-top:.25rem}.mc-field__validation-message.is-valid:before,.mc-field__validation-message.is-invalid:before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid:before{background-color:var(--field-color-validation-valid, #117f03);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-invalid{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before{background-color:var(--field-color-validation-invalid, #c61112);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-loading{color:var(--field-color-validation-loading, #666666)}.mc-field--group{border-width:0;margin-inline:0;padding:0}.mc-field--group .mc-field__content:not(.mc-field__content--inline),.mc-field--group .field__content:not(.mc-field__content--inline){display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active,.button:active{transform:scale(.95)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label,.button .mc-button__label,.mc-button .button__label,.button .button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:background-color ease .2s,border-color ease .2s,color ease .2s,transform ease-out .15s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label,.button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus,.button:focus{box-shadow:none;outline:none}.mc-button:focus-visible,.button: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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label,.mc-button--s .button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label,.mc-button--m .button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label,.mc-button--l .button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined,.button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover,.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active,.button--outlined:active{transform:scale(.95)}.mc-button--outlined:disabled,.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active{transform:scale(.95)}.mc-button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{transform:scale(.95)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{transform:scale(.95)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{transform:scale(.95)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard,.mc-button--standard.button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover,.mc-button--standard.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active,.mc-button--standard.button--outlined:active{transform:scale(.95)}.mc-button--outlined.mc-button--standard:disabled,.mc-button--standard.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent,.mc-button--accent.button--outlined{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover,.mc-button--accent.button--outlined:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active,.mc-button--accent.button--outlined:active{transform:scale(.95)}.mc-button--outlined.mc-button--accent:disabled,.mc-button--accent.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger,.mc-button--danger.button--outlined{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover,.mc-button--danger.button--outlined:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active,.mc-button--danger.button--outlined:active{transform:scale(.95)}.mc-button--outlined.mc-button--danger:disabled,.mc-button--danger.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse,.mc-button--inverse.button--outlined{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover,.mc-button--inverse.button--outlined:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active,.mc-button--inverse.button--outlined:active{transform:scale(.95)}.mc-button--outlined.mc-button--inverse:disabled,.mc-button--inverse.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active{transform:scale(.95)}.mc-button--ghost.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active{transform:scale(.95)}.mc-button--ghost.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active{transform:scale(.95)}.mc-button--ghost.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active{transform:scale(.95)}.mc-button--ghost.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: MozFileUploaderItemComponent, selector: "moz-file-uploader-item", inputs: ["format", "invalid", "uploading", "errorMessage", "hasPreview", "file", "fileInformation", "retryButtonLabel", "deleteButtonLabel", "previewButtonLabel"], outputs: ["delete", "retry", "preview"] }, { kind: "component", type: Upload24, selector: "Upload24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
716
716
|
}
|
|
717
717
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozFileUploaderComponent, decorators: [{
|
|
718
718
|
type: Component,
|
|
@@ -722,7 +722,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
722
722
|
useExisting: forwardRef(() => MozFileUploaderComponent),
|
|
723
723
|
multi: true,
|
|
724
724
|
},
|
|
725
|
-
], template: "<div class=\"file-uploader\" [class]=\"classes()\">\n <div class=\"file-uploader__container\">\n <div class=\"field\">\n <label class=\"field__label\" [attr.for]=\"id()\">\n {{ label() }}\n @if (necessityIndicator()) {\n <span class=\"field__requirement\">\n {{ necessityIndicator() }}\n </span>\n }\n </label>\n @if (helpText()) {\n <span [id]=\"helpId()\" class=\"field__help\">\n {{ helpText() }}\n </span>\n }\n <div class=\"field__content\">\n <input\n #fileInput\n [id]=\"id()\"\n aria-label=\"file input\"\n type=\"file\"\n class=\"file-uploader__hidden-input\"\n [disabled]=\"isDisabledState()\"\n (change)=\"onFileSelect($event)\"\n [multiple]=\"multipleFiles()\"\n [accept]=\"accept()\"\n />\n\n <div\n class=\"file-uploader__input\"\n [class]=\"inputClasses()\"\n (click)=\"openFileDialog()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n @if (hasDragDrop()) {\n <span class=\"file-uploader__input-title\">{{ title() }}</span>\n <span class=\"file-uploader__input-subtitle\">{{ subtitle() }}</span>\n }\n\n <div class=\"button button--outlined file-uploader__button\">\n <Upload24 />\n <span class=\"button__label\">{{ uploadButtonLabel() }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n @if (showFilesList() && files().length > 0) {\n <div class=\"file-uploader__files-list\">\n @for (file of files(); track file; let i = $index) {\n <moz-file-uploader-item\n [format]=\"format()\"\n [invalid]=\"invalid()\"\n [uploading]=\"uploading()\"\n [errorMessage]=\"errorMessage()\"\n [hasPreview]=\"hasPreview()\"\n [file]=\"file\"\n [fileInformation]=\"fileInformation()\"\n [retryButtonLabel]=\"retryButtonLabel()\"\n [deleteButtonLabel]=\"deleteButtonLabel()\"\n [previewButtonLabel]=\"previewButtonLabel()\"\n (delete)=\"onDeleteFile($event)\"\n (retry)=\"onRetryFile($event)\"\n (preview)=\"onPreviewFile($event)\"\n />\n }\n </div>\n }\n</div>\n", styles: [".mc-file-uploader,.file-uploader{display:flex;flex-direction:column;gap:1rem;box-sizing:border-box}.mc-file-uploader__files-list,.file-uploader__files-list{display:flex;flex-direction:column;gap:1rem}.mc-file-uploader__hidden-input,.file-uploader__hidden-input{height:0;width:0;overflow:hidden;position:absolute;top:-1000px;left:-1000px;text-align:left;opacity:0}.mc-file-uploader__input,.file-uploader__input{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);border-radius:var(--border-radius-m, .5rem);color:var(--file-uploader-color-drag-and-drop-text-default, #242938)}.mc-file-uploader__input .mc-file-uploader__button,.file-uploader__input .mc-file-uploader__button,.mc-file-uploader__input .file-uploader__button,.file-uploader__input .file-uploader__button{width:100%}.mc-file-uploader__input--disabled .mc-file-uploader__button.mc-button.mc-button--outlined,.file-uploader__input--disabled .mc-file-uploader__button.mc-button.mc-button--outlined,.mc-file-uploader__input--disabled .mc-button.mc-button--outlined.file-uploader__button,.file-uploader__input--disabled .mc-button.mc-button--outlined.file-uploader__button,.mc-file-uploader__input--disabled .mc-file-uploader__button.mc-button--outlined.button,.file-uploader__input--disabled .mc-file-uploader__button.mc-button--outlined.button,.mc-file-uploader__input--disabled .mc-button--outlined.file-uploader__button.button,.file-uploader__input--disabled .mc-button--outlined.file-uploader__button.button,.mc-file-uploader__input--disabled .mc-file-uploader__button.mc-button.button--outlined,.file-uploader__input--disabled .mc-file-uploader__button.mc-button.button--outlined,.mc-file-uploader__input--disabled .mc-button.file-uploader__button.button--outlined,.file-uploader__input--disabled .mc-button.file-uploader__button.button--outlined,.mc-file-uploader__input--disabled .mc-file-uploader__button.button.button--outlined,.file-uploader__input--disabled .mc-file-uploader__button.button.button--outlined,.mc-file-uploader__input--disabled .file-uploader__button.button.button--outlined,.file-uploader__input--disabled .file-uploader__button.button.button--outlined{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-file-uploader__input-title,.file-uploader__input-title{height:1.125rem;font-size:var(--font-size-150, 1rem)}.mc-file-uploader__input-subtitle,.file-uploader__input-subtitle{height:1.125rem;font-size:var(--font-size-100, .875rem)}.mc-file-uploader--draggable .mc-file-uploader__input,.file-uploader--draggable .mc-file-uploader__input,.mc-file-uploader--draggable .file-uploader__input,.file-uploader--draggable .file-uploader__input{padding:2rem;outline:.125rem dashed var(--file-uploader-color-drag-and-drop-border-default, #464e63);display:flex}.mc-file-uploader--draggable .mc-file-uploader__input--disabled,.file-uploader--draggable .mc-file-uploader__input--disabled,.mc-file-uploader--draggable .file-uploader__input--disabled,.file-uploader--draggable .file-uploader__input--disabled{outline-color:var(--file-uploader-color-drag-and-drop-border-disabled, #b3b3b3);color:var(--file-uploader-color-drag-and-drop-text-disabled, #b3b3b3);cursor:not-allowed}.mc-file-uploader--draggable .mc-file-uploader__input--dragged,.file-uploader--draggable .mc-file-uploader__input--dragged,.mc-file-uploader--draggable .file-uploader__input--dragged,.file-uploader--draggable .file-uploader__input--dragged{outline-width:.25rem}.mc-file-uploader-item{display:flex;flex-direction:column;gap:.25rem}.mc-file-uploader-item__container{border:1px solid var(--file-uploader-color-file-item-border-default, #cccccc);border-radius:var(--border-radius-m, .5rem);padding:.75rem}.mc-file-uploader-item__meta-row{display:flex;align-items:center;flex-grow:1}.mc-file-uploader-item__meta-row--with-info{align-items:start}.mc-file-uploader-item__status-icon{fill:var(--file-uploader-color-file-item-icon-valid, #3f9e10)}.mc-file-uploader-item__info-content{display:flex;flex-direction:column;flex-grow:1;padding-left:.5rem;padding-right:1rem}.mc-file-uploader-item__label{color:var(--file-uploader-color-file-item-text-file-name, #000000);font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600)}.mc-file-uploader-item__details{color:var(--file-uploader-color-file-item-text-information, #666666);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400)}.mc-file-uploader-item__error-message{color:var(--field-color-validation-invalid, #c61112);font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400)}.mc-file-uploader-item__container--inline{display:flex;align-items:center}.mc-file-uploader-item__container--stacked{display:flex;flex-direction:column;gap:.75rem}.mc-file-uploader-item__delete-button-container{padding-left:.25rem;margin-left:.25rem;border-left:1px solid var(--divider-color-primary, #cccccc)}.mc-file-uploader-item__actions-container{padding:0 2rem;display:flex;align-items:center;gap:.25rem;justify-content:center}.mc-file-uploader-item__action{padding:0 .75rem;flex-grow:1}.mc-file-uploader-item--error .mc-file-uploader-item__container{border-width:var(--border-width-m, .125rem);border-color:var(--file-uploader-color-file-item-border-invalid, #ea302d)}.mc-file-uploader-item--error .mc-file-uploader-item__status-icon{fill:var(--file-uploader-color-file-item-icon-invalid, #ea302d)}.mc-file-uploader-item--loading .mc-file-uploader-item__container{gap:1rem;flex-direction:column;align-items:normal}.mc-file-uploader-item--loading .mc-file-uploader-item__status-icon{fill:var(--color-standalone-disabled, #b3b3b3)}.mc-file-uploader-item--loading .mc-file-uploader-item__label,.mc-file-uploader-item--loading .mc-file-uploader-item__details{color:var(--color-standalone-disabled, #b3b3b3)}.mc-field__label,.field__label,.mc-field__legend{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000)}.mc-field__legend{padding-inline:0}.mc-field__requirement,.field__requirement,.mc-field__help,.field__help{font-size:var(--font-size-50, .75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help,.field__help{display:block;margin-top:.125rem}.mc-field__content,.field__content{margin-top:.5rem}.mc-field__content:where(.mc-field__content--inline),.field__content:where(.mc-field__content--inline){display:flex;flex-flow:row wrap;gap:.25rem 1rem}.mc-field__validation-message{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:.25rem;margin-top:.25rem}.mc-field__validation-message.is-valid:before,.mc-field__validation-message.is-invalid:before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid:before{background-color:var(--field-color-validation-valid, #117f03);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-invalid{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before{background-color:var(--field-color-validation-invalid, #c61112);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-loading{color:var(--field-color-validation-loading, #666666)}.mc-field--group{border-width:0;margin-inline:0;padding:0}.mc-field--group .mc-field__content:not(.mc-field__content--inline),.mc-field--group .field__content:not(.mc-field__content--inline){display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active,.button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label,.button .mc-button__label,.mc-button .button__label,.button .button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label,.button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus,.button:focus{box-shadow:none;outline:none}.mc-button:focus-visible,.button: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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label,.mc-button--s .button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label,.mc-button--m .button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label,.mc-button--l .button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined,.button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover,.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active,.button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled,.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard,.mc-button--standard.button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover,.mc-button--standard.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active,.mc-button--standard.button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled,.mc-button--standard.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent,.mc-button--accent.button--outlined{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover,.mc-button--accent.button--outlined:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active,.mc-button--accent.button--outlined:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled,.mc-button--accent.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger,.mc-button--danger.button--outlined{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover,.mc-button--danger.button--outlined:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active,.mc-button--danger.button--outlined:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled,.mc-button--danger.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse,.mc-button--inverse.button--outlined{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover,.mc-button--inverse.button--outlined:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active,.mc-button--inverse.button--outlined:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled,.mc-button--inverse.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"] }]
|
|
725
|
+
], template: "<div class=\"file-uploader\" [class]=\"classes()\">\n <div class=\"file-uploader__container\">\n <div class=\"field\">\n <label class=\"field__label\" [attr.for]=\"id()\">\n {{ label() }}\n @if (necessityIndicator()) {\n <span class=\"field__requirement\">\n {{ necessityIndicator() }}\n </span>\n }\n </label>\n @if (helpText()) {\n <span [id]=\"helpId()\" class=\"field__help\">\n {{ helpText() }}\n </span>\n }\n <div class=\"field__content\">\n <input\n #fileInput\n [id]=\"id()\"\n aria-label=\"file input\"\n type=\"file\"\n class=\"file-uploader__hidden-input\"\n [disabled]=\"isDisabledState()\"\n (change)=\"onFileSelect($event)\"\n [multiple]=\"multipleFiles()\"\n [accept]=\"accept()\"\n />\n\n <div\n class=\"file-uploader__input\"\n [class]=\"inputClasses()\"\n (click)=\"openFileDialog()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n @if (hasDragDrop()) {\n <span class=\"file-uploader__input-title\">{{ title() }}</span>\n <span class=\"file-uploader__input-subtitle\">{{ subtitle() }}</span>\n }\n\n <div class=\"button button--outlined file-uploader__button\">\n <Upload24 />\n <span class=\"button__label\">{{ uploadButtonLabel() }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n @if (showFilesList() && files().length > 0) {\n <div class=\"file-uploader__files-list\">\n @for (file of files(); track file; let i = $index) {\n <moz-file-uploader-item\n [format]=\"format()\"\n [invalid]=\"invalid()\"\n [uploading]=\"uploading()\"\n [errorMessage]=\"errorMessage()\"\n [hasPreview]=\"hasPreview()\"\n [file]=\"file\"\n [fileInformation]=\"fileInformation()\"\n [retryButtonLabel]=\"retryButtonLabel()\"\n [deleteButtonLabel]=\"deleteButtonLabel()\"\n [previewButtonLabel]=\"previewButtonLabel()\"\n (delete)=\"onDeleteFile($event)\"\n (retry)=\"onRetryFile($event)\"\n (preview)=\"onPreviewFile($event)\"\n />\n }\n </div>\n }\n</div>\n", styles: [".mc-file-uploader,.file-uploader{display:flex;flex-direction:column;gap:1rem;box-sizing:border-box}.mc-file-uploader__files-list,.file-uploader__files-list{display:flex;flex-direction:column;gap:1rem}.mc-file-uploader__hidden-input,.file-uploader__hidden-input{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-file-uploader__input,.file-uploader__input{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);border-radius:var(--border-radius-m, .5rem);color:var(--file-uploader-color-drag-and-drop-text-default, #242938)}.mc-file-uploader__input .mc-file-uploader__button,.file-uploader__input .mc-file-uploader__button,.mc-file-uploader__input .file-uploader__button,.file-uploader__input .file-uploader__button{width:100%}.mc-file-uploader__input--disabled .mc-file-uploader__button.mc-button.mc-button--outlined,.file-uploader__input--disabled .mc-file-uploader__button.mc-button.mc-button--outlined,.mc-file-uploader__input--disabled .mc-button.mc-button--outlined.file-uploader__button,.file-uploader__input--disabled .mc-button.mc-button--outlined.file-uploader__button,.mc-file-uploader__input--disabled .mc-file-uploader__button.mc-button--outlined.button,.file-uploader__input--disabled .mc-file-uploader__button.mc-button--outlined.button,.mc-file-uploader__input--disabled .mc-button--outlined.file-uploader__button.button,.file-uploader__input--disabled .mc-button--outlined.file-uploader__button.button,.mc-file-uploader__input--disabled .mc-file-uploader__button.mc-button.button--outlined,.file-uploader__input--disabled .mc-file-uploader__button.mc-button.button--outlined,.mc-file-uploader__input--disabled .mc-button.file-uploader__button.button--outlined,.file-uploader__input--disabled .mc-button.file-uploader__button.button--outlined,.mc-file-uploader__input--disabled .mc-file-uploader__button.button.button--outlined,.file-uploader__input--disabled .mc-file-uploader__button.button.button--outlined,.mc-file-uploader__input--disabled .file-uploader__button.button.button--outlined,.file-uploader__input--disabled .file-uploader__button.button.button--outlined{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-file-uploader__input-title,.file-uploader__input-title{height:1.125rem;font-size:var(--font-size-150, 1rem)}.mc-file-uploader__input-subtitle,.file-uploader__input-subtitle{height:1.125rem;font-size:var(--font-size-100, .875rem)}.mc-file-uploader--draggable .mc-file-uploader__input,.file-uploader--draggable .mc-file-uploader__input,.mc-file-uploader--draggable .file-uploader__input,.file-uploader--draggable .file-uploader__input{padding:2rem;outline:.125rem dashed var(--file-uploader-color-drag-and-drop-border-default, #464e63);display:flex}.mc-file-uploader--draggable .mc-file-uploader__input--disabled,.file-uploader--draggable .mc-file-uploader__input--disabled,.mc-file-uploader--draggable .file-uploader__input--disabled,.file-uploader--draggable .file-uploader__input--disabled{outline-color:var(--file-uploader-color-drag-and-drop-border-disabled, #b3b3b3);color:var(--file-uploader-color-drag-and-drop-text-disabled, #b3b3b3);cursor:not-allowed}.mc-file-uploader--draggable .mc-file-uploader__input--dragged,.file-uploader--draggable .mc-file-uploader__input--dragged,.mc-file-uploader--draggable .file-uploader__input--dragged,.file-uploader--draggable .file-uploader__input--dragged{outline-width:.25rem}.mc-file-uploader-item{display:flex;flex-direction:column;gap:.25rem}.mc-file-uploader-item__container{border:1px solid var(--file-uploader-color-file-item-border-default, #cccccc);border-radius:var(--border-radius-m, .5rem);padding:.75rem}.mc-file-uploader-item__meta-row{display:flex;align-items:center;flex-grow:1}.mc-file-uploader-item__meta-row--with-info{align-items:start}.mc-file-uploader-item__status-icon{fill:var(--file-uploader-color-file-item-icon-valid, #3f9e10)}.mc-file-uploader-item__info-content{display:flex;flex-direction:column;flex-grow:1;padding-left:.5rem;padding-right:1rem}.mc-file-uploader-item__label{color:var(--file-uploader-color-file-item-text-file-name, #000000);font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600)}.mc-file-uploader-item__details{color:var(--file-uploader-color-file-item-text-information, #666666);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400)}.mc-file-uploader-item__error-message{color:var(--field-color-validation-invalid, #c61112);font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400)}.mc-file-uploader-item__container--inline{display:flex;align-items:center}.mc-file-uploader-item__container--stacked{display:flex;flex-direction:column;gap:.75rem}.mc-file-uploader-item__delete-button-container{padding-left:.25rem;margin-left:.25rem;border-left:1px solid var(--divider-color-primary, #cccccc)}.mc-file-uploader-item__actions-container{padding:0 2rem;display:flex;align-items:center;gap:.25rem;justify-content:center}.mc-file-uploader-item__action{padding:0 .75rem;flex-grow:1}.mc-file-uploader-item--error .mc-file-uploader-item__container{border-width:var(--border-width-m, .125rem);border-color:var(--file-uploader-color-file-item-border-invalid, #ea302d)}.mc-file-uploader-item--error .mc-file-uploader-item__status-icon{fill:var(--file-uploader-color-file-item-icon-invalid, #ea302d)}.mc-file-uploader-item--loading .mc-file-uploader-item__container{gap:1rem;flex-direction:column;align-items:normal}.mc-file-uploader-item--loading .mc-file-uploader-item__status-icon{fill:var(--color-standalone-disabled, #b3b3b3)}.mc-file-uploader-item--loading .mc-file-uploader-item__label,.mc-file-uploader-item--loading .mc-file-uploader-item__details{color:var(--color-standalone-disabled, #b3b3b3)}.mc-field__label,.field__label,.mc-field__legend{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000)}.mc-field__legend{padding-inline:0}.mc-field__requirement,.field__requirement,.mc-field__help,.field__help{font-size:var(--font-size-50, .75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help,.field__help{display:block;margin-top:.125rem}.mc-field__content,.field__content{margin-top:.5rem}.mc-field__content:where(.mc-field__content--inline),.field__content:where(.mc-field__content--inline){display:flex;flex-flow:row wrap;gap:.25rem 1rem}.mc-field__validation-message{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:.25rem;margin-top:.25rem}.mc-field__validation-message.is-valid:before,.mc-field__validation-message.is-invalid:before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid:before{background-color:var(--field-color-validation-valid, #117f03);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-invalid{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before{background-color:var(--field-color-validation-invalid, #c61112);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-loading{color:var(--field-color-validation-loading, #666666)}.mc-field--group{border-width:0;margin-inline:0;padding:0}.mc-field--group .mc-field__content:not(.mc-field__content--inline),.mc-field--group .field__content:not(.mc-field__content--inline){display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active,.button:active{transform:scale(.95)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label,.button .mc-button__label,.mc-button .button__label,.button .button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:background-color ease .2s,border-color ease .2s,color ease .2s,transform ease-out .15s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label,.button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus,.button:focus{box-shadow:none;outline:none}.mc-button:focus-visible,.button: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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label,.mc-button--s .button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label,.mc-button--m .button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label,.mc-button--l .button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined,.button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover,.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active,.button--outlined:active{transform:scale(.95)}.mc-button--outlined:disabled,.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active{transform:scale(.95)}.mc-button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{transform:scale(.95)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{transform:scale(.95)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{transform:scale(.95)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard,.mc-button--standard.button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover,.mc-button--standard.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active,.mc-button--standard.button--outlined:active{transform:scale(.95)}.mc-button--outlined.mc-button--standard:disabled,.mc-button--standard.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent,.mc-button--accent.button--outlined{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover,.mc-button--accent.button--outlined:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active,.mc-button--accent.button--outlined:active{transform:scale(.95)}.mc-button--outlined.mc-button--accent:disabled,.mc-button--accent.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger,.mc-button--danger.button--outlined{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover,.mc-button--danger.button--outlined:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active,.mc-button--danger.button--outlined:active{transform:scale(.95)}.mc-button--outlined.mc-button--danger:disabled,.mc-button--danger.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse,.mc-button--inverse.button--outlined{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover,.mc-button--inverse.button--outlined:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active,.mc-button--inverse.button--outlined:active{transform:scale(.95)}.mc-button--outlined.mc-button--inverse:disabled,.mc-button--inverse.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active{transform:scale(.95)}.mc-button--ghost.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active{transform:scale(.95)}.mc-button--ghost.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active{transform:scale(.95)}.mc-button--ghost.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active{transform:scale(.95)}.mc-button--ghost.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"] }]
|
|
726
726
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helpText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpText", required: false }] }], helpId: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpId", required: false }] }], necessityIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "necessityIndicator", required: false }] }], hasDragDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDragDrop", required: false }] }], showFilesList: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFilesList", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], multipleFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "multipleFiles", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], uploadButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadButtonLabel", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], uploading: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploading", required: false }] }], hasPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPreview", required: false }] }], retryButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "retryButtonLabel", required: false }] }], deleteButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteButtonLabel", required: false }] }], previewButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewButtonLabel", required: false }] }], information: [{ type: i0.Input, args: [{ isSignal: true, alias: "information", required: false }] }], fileInformation: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileInformation", required: false }] }], retryFile: [{ type: i0.Output, args: ["retryFile"] }], previewFile: [{ type: i0.Output, args: ["previewFile"] }], filesChange: [{ type: i0.Output, args: ["filesChange"] }], initialFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFiles", required: false }] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
|
|
727
727
|
|
|
728
728
|
class MozLinkComponent {
|
|
@@ -761,11 +761,11 @@ class MozLinkComponent {
|
|
|
761
761
|
}, /* @ts-ignore */
|
|
762
762
|
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
763
763
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
764
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozLinkComponent, isStandalone: true, selector: "moz-link", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, router: { classPropertyName: "router", publicName: "router", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, ariaCurrent: { classPropertyName: "ariaCurrent", publicName: "ariaCurrent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (router()) {\n<a\n [routerLink]=\"href()\"\n [attr.href]=\"href()\"\n [class]=\"classes()\"\n [attr.target]=\"target()\"\n [attr.aria-current]=\"ariaCurrent()\"\n (click)=\"$event.preventDefault()\"\n>\n <ng-container [ngTemplateOutlet]=\"linkContent\"></ng-container>\n</a>\n} @else {\n<a\n [attr.href]=\"href()\"\n [class]=\"classes()\"\n [attr.target]=\"target()\"\n [attr.aria-current]=\"ariaCurrent()\"\n>\n <ng-container [ngTemplateOutlet]=\"linkContent\"></ng-container>\n</a>\n}\n\n<ng-template #linkContent>\n @if(iconPosition() === 'left'){\n <span class=\"link__icon\" aria-hidden=\"true\">\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n </span>\n }\n\n <span class=\"link__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n </span>\n\n @if(iconPosition() === 'right'){\n <span class=\"link__icon\" aria-hidden=\"true\">\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n </span>\n }\n</ng-template>\n\n<ng-template #iconTemplate>\n <ng-content select=\"[icon]\"></ng-content>\n</ng-template>\n\n<ng-template #labelTemplate>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".mc-link,.link{transition:box-shadow .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:.875rem}.mc-link__label,.link__label{line-height:1.3}.mc-link__icon,.link__icon{display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor}.mc-link:hover:not(.mc-link--stand-alone,.link--stand-alone,.mc-link--inline,.link--inline) .mc-link__label,.link:hover:not(.mc-link--stand-alone,.link--stand-alone,.mc-link--inline,.link--inline) .mc-link__label,.mc-link:hover:not(.mc-link--stand-alone,.link--stand-alone,.mc-link--inline,.link--inline) .link__label,.link:hover:not(.mc-link--stand-alone,.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 .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-link--m,.link--m{min-height:2rem;font-size:1rem}.mc-link--secondary,.link--secondary{color:var(--link-color-text-secondary, #666666)}.mc-link--accent,.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,.link--stand-alone{min-height:2rem;font-weight:var(--link-font-weight, 600)}.mc-link--stand-alone .mc-link__label,.link--stand-alone .mc-link__label,.mc-link--stand-alone .link__label,.link--stand-alone .link__label{
|
|
764
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozLinkComponent, isStandalone: true, selector: "moz-link", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, router: { classPropertyName: "router", publicName: "router", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, ariaCurrent: { classPropertyName: "ariaCurrent", publicName: "ariaCurrent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (router()) {\n<a\n [routerLink]=\"href()\"\n [attr.href]=\"href()\"\n [class]=\"classes()\"\n [attr.target]=\"target()\"\n [attr.aria-current]=\"ariaCurrent()\"\n (click)=\"$event.preventDefault()\"\n>\n <ng-container [ngTemplateOutlet]=\"linkContent\"></ng-container>\n</a>\n} @else {\n<a\n [attr.href]=\"href()\"\n [class]=\"classes()\"\n [attr.target]=\"target()\"\n [attr.aria-current]=\"ariaCurrent()\"\n>\n <ng-container [ngTemplateOutlet]=\"linkContent\"></ng-container>\n</a>\n}\n\n<ng-template #linkContent>\n @if(iconPosition() === 'left'){\n <span class=\"link__icon\" aria-hidden=\"true\">\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n </span>\n }\n\n <span class=\"link__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n </span>\n\n @if(iconPosition() === 'right'){\n <span class=\"link__icon\" aria-hidden=\"true\">\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n </span>\n }\n</ng-template>\n\n<ng-template #iconTemplate>\n <ng-content select=\"[icon]\"></ng-content>\n</ng-template>\n\n<ng-template #labelTemplate>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".mc-link,.link{transition:box-shadow .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:.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:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor}.mc-link:hover:not(.mc-link--stand-alone,.link--stand-alone,.mc-link--inline,.link--inline) .mc-link__label,.link:hover:not(.mc-link--stand-alone,.link--stand-alone,.mc-link--inline,.link--inline) .mc-link__label,.mc-link:hover:not(.mc-link--stand-alone,.link--stand-alone,.mc-link--inline,.link--inline) .link__label,.link:hover:not(.mc-link--stand-alone,.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 .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-link--m,.link--m{min-height:2rem;font-size:1rem}.mc-link--m .mc-link__label,.link--m .mc-link__label,.mc-link--m .link__label,.link--m .link__label{text-decoration-thickness:6.5%;text-underline-offset:31%}.mc-link--secondary,.link--secondary{color:var(--link-color-text-secondary, #666666)}.mc-link--accent,.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,.link--stand-alone{min-height:2rem;font-weight:var(--link-font-weight, 600)}.mc-link--stand-alone .mc-link__label,.link--stand-alone .mc-link__label,.mc-link--stand-alone .link__label,.link--stand-alone .link__label{text-decoration-line:underline}.mc-link--stand-alone:hover .mc-link__label,.link--stand-alone:hover .mc-link__label,.mc-link--stand-alone:hover .link__label,.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}.link:not([href]){cursor:pointer}.link__icon:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
765
765
|
}
|
|
766
766
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozLinkComponent, decorators: [{
|
|
767
767
|
type: Component,
|
|
768
|
-
args: [{ selector: 'moz-link', imports: [NgTemplateOutlet, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (router()) {\n<a\n [routerLink]=\"href()\"\n [attr.href]=\"href()\"\n [class]=\"classes()\"\n [attr.target]=\"target()\"\n [attr.aria-current]=\"ariaCurrent()\"\n (click)=\"$event.preventDefault()\"\n>\n <ng-container [ngTemplateOutlet]=\"linkContent\"></ng-container>\n</a>\n} @else {\n<a\n [attr.href]=\"href()\"\n [class]=\"classes()\"\n [attr.target]=\"target()\"\n [attr.aria-current]=\"ariaCurrent()\"\n>\n <ng-container [ngTemplateOutlet]=\"linkContent\"></ng-container>\n</a>\n}\n\n<ng-template #linkContent>\n @if(iconPosition() === 'left'){\n <span class=\"link__icon\" aria-hidden=\"true\">\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n </span>\n }\n\n <span class=\"link__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n </span>\n\n @if(iconPosition() === 'right'){\n <span class=\"link__icon\" aria-hidden=\"true\">\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n </span>\n }\n</ng-template>\n\n<ng-template #iconTemplate>\n <ng-content select=\"[icon]\"></ng-content>\n</ng-template>\n\n<ng-template #labelTemplate>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".mc-link,.link{transition:box-shadow .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:.875rem}.mc-link__label,.link__label{line-height:1.3}.mc-link__icon,.link__icon{display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor}.mc-link:hover:not(.mc-link--stand-alone,.link--stand-alone,.mc-link--inline,.link--inline) .mc-link__label,.link:hover:not(.mc-link--stand-alone,.link--stand-alone,.mc-link--inline,.link--inline) .mc-link__label,.mc-link:hover:not(.mc-link--stand-alone,.link--stand-alone,.mc-link--inline,.link--inline) .link__label,.link:hover:not(.mc-link--stand-alone,.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 .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-link--m,.link--m{min-height:2rem;font-size:1rem}.mc-link--secondary,.link--secondary{color:var(--link-color-text-secondary, #666666)}.mc-link--accent,.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,.link--stand-alone{min-height:2rem;font-weight:var(--link-font-weight, 600)}.mc-link--stand-alone .mc-link__label,.link--stand-alone .mc-link__label,.mc-link--stand-alone .link__label,.link--stand-alone .link__label{
|
|
768
|
+
args: [{ selector: 'moz-link', imports: [NgTemplateOutlet, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (router()) {\n<a\n [routerLink]=\"href()\"\n [attr.href]=\"href()\"\n [class]=\"classes()\"\n [attr.target]=\"target()\"\n [attr.aria-current]=\"ariaCurrent()\"\n (click)=\"$event.preventDefault()\"\n>\n <ng-container [ngTemplateOutlet]=\"linkContent\"></ng-container>\n</a>\n} @else {\n<a\n [attr.href]=\"href()\"\n [class]=\"classes()\"\n [attr.target]=\"target()\"\n [attr.aria-current]=\"ariaCurrent()\"\n>\n <ng-container [ngTemplateOutlet]=\"linkContent\"></ng-container>\n</a>\n}\n\n<ng-template #linkContent>\n @if(iconPosition() === 'left'){\n <span class=\"link__icon\" aria-hidden=\"true\">\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n </span>\n }\n\n <span class=\"link__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n </span>\n\n @if(iconPosition() === 'right'){\n <span class=\"link__icon\" aria-hidden=\"true\">\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n </span>\n }\n</ng-template>\n\n<ng-template #iconTemplate>\n <ng-content select=\"[icon]\"></ng-content>\n</ng-template>\n\n<ng-template #labelTemplate>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".mc-link,.link{transition:box-shadow .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:.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:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor}.mc-link:hover:not(.mc-link--stand-alone,.link--stand-alone,.mc-link--inline,.link--inline) .mc-link__label,.link:hover:not(.mc-link--stand-alone,.link--stand-alone,.mc-link--inline,.link--inline) .mc-link__label,.mc-link:hover:not(.mc-link--stand-alone,.link--stand-alone,.mc-link--inline,.link--inline) .link__label,.link:hover:not(.mc-link--stand-alone,.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 .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-link--m,.link--m{min-height:2rem;font-size:1rem}.mc-link--m .mc-link__label,.link--m .mc-link__label,.mc-link--m .link__label,.link--m .link__label{text-decoration-thickness:6.5%;text-underline-offset:31%}.mc-link--secondary,.link--secondary{color:var(--link-color-text-secondary, #666666)}.mc-link--accent,.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,.link--stand-alone{min-height:2rem;font-weight:var(--link-font-weight, 600)}.mc-link--stand-alone .mc-link__label,.link--stand-alone .mc-link__label,.mc-link--stand-alone .link__label,.link--stand-alone .link__label{text-decoration-line:underline}.mc-link--stand-alone:hover .mc-link__label,.link--stand-alone:hover .mc-link__label,.mc-link--stand-alone:hover .link__label,.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}.link:not([href]){cursor:pointer}.link__icon:empty{display:none}\n"] }]
|
|
769
769
|
}], propDecorators: { href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], router: [{ type: i0.Input, args: [{ isSignal: true, alias: "router", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], ariaCurrent: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaCurrent", required: false }] }] } });
|
|
770
770
|
|
|
771
771
|
class MozLoaderComponent {
|
|
@@ -811,11 +811,11 @@ class MozLoaderComponent {
|
|
|
811
811
|
}, /* @ts-ignore */
|
|
812
812
|
...(ngDevMode ? [{ debugName: "circleRadius" }] : /* istanbul ignore next */ []));
|
|
813
813
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
814
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozLoaderComponent, isStandalone: true, selector: "moz-loader", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"classes()\">\n <span class=\"loader__spinner\">\n <svg\n class=\"loader__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.viewBox]=\"viewBox()\"\n aria-hidden=\"true\"\n >\n <circle class=\"loader__path\" cx=\"50%\" cy=\"50%\" [attr.r]=\"circleRadius()\"></circle>\n </svg>\n </span>\n\n @if (text()) {\n <span class=\"loader__text\" role=\"status\">{{ text() }}</span>\n }\n</div>\n", styles: [".mc-loader .mc-loader__spinner,.loader .mc-loader__spinner,.mc-loader .loader__spinner,.loader .loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path,.loader .mc-loader__path,.mc-loader .loader__path,.loader .loader__path{stroke-width:4}.mc-loader,.loader{color:var(--loader-color-standard, #464e63)}.mc-loader .mc-loader__path,.loader .mc-loader__path,.mc-loader .loader__path,.loader .loader__path{stroke:currentcolor}.mc-loader,.loader{align-items:center;display:inline-flex;flex-direction:column}.mc-loader__spinner:not(:only-child),.loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon,.loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path,.loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text,.loader__text{font-size:var(--font-size-150, 1rem);color:currentcolor}.mc-loader:not(.mc-loader--text-visible):not(.loader--text-visible) .mc-loader__text,.loader:not(.mc-loader--text-visible):not(.loader--text-visible) .mc-loader__text,.mc-loader:not(.mc-loader--text-visible):not(.loader--text-visible) .loader__text,.loader:not(.mc-loader--text-visible):not(.loader--text-visible) .loader__text{
|
|
814
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozLoaderComponent, isStandalone: true, selector: "moz-loader", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"classes()\">\n <span class=\"loader__spinner\">\n <svg\n class=\"loader__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.viewBox]=\"viewBox()\"\n aria-hidden=\"true\"\n >\n <circle class=\"loader__path\" cx=\"50%\" cy=\"50%\" [attr.r]=\"circleRadius()\"></circle>\n </svg>\n </span>\n\n @if (text()) {\n <span class=\"loader__text\" role=\"status\">{{ text() }}</span>\n }\n</div>\n", styles: [".mc-loader .mc-loader__spinner,.loader .mc-loader__spinner,.mc-loader .loader__spinner,.loader .loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path,.loader .mc-loader__path,.mc-loader .loader__path,.loader .loader__path{stroke-width:4}.mc-loader,.loader{color:var(--loader-color-standard, #464e63)}.mc-loader .mc-loader__path,.loader .mc-loader__path,.mc-loader .loader__path,.loader .loader__path{stroke:currentcolor}.mc-loader,.loader{align-items:center;display:inline-flex;flex-direction:column}.mc-loader__spinner:not(:only-child),.loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon,.loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path,.loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text,.loader__text{font-size:var(--font-size-150, 1rem);color:currentcolor}.mc-loader:not(.mc-loader--text-visible):not(.loader--text-visible) .mc-loader__text,.loader:not(.mc-loader--text-visible):not(.loader--text-visible) .mc-loader__text,.mc-loader:not(.mc-loader--text-visible):not(.loader--text-visible) .loader__text,.loader:not(.mc-loader--text-visible):not(.loader--text-visible) .loader__text{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-loader--xs .mc-loader__spinner,.loader--xs .mc-loader__spinner,.mc-loader--xs .loader__spinner,.loader--xs .loader__spinner{height:1.25rem;width:1.25rem}.mc-loader--xs .mc-loader__path,.loader--xs .mc-loader__path,.mc-loader--xs .loader__path,.loader--xs .loader__path{stroke-width:2}.mc-loader--s .mc-loader__spinner,.loader--s .mc-loader__spinner,.mc-loader--s .loader__spinner,.loader--s .loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path,.loader--s .mc-loader__path,.mc-loader--s .loader__path,.loader--s .loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner,.loader--l .mc-loader__spinner,.mc-loader--l .loader__spinner,.loader--l .loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path,.loader--l .mc-loader__path,.mc-loader--l .loader__path,.loader--l .loader__path{stroke-width:8}.mc-loader--accent,.loader--accent{color:var(--loader-color-accent, #117f03)}.mc-loader--accent .mc-loader__path,.loader--accent .mc-loader__path,.mc-loader--accent .loader__path,.loader--accent .loader__path{stroke:currentcolor}.mc-loader--inverse,.loader--inverse{color:var(--loader-color-inverse, #ffffff)}.mc-loader--inverse .mc-loader__path,.loader--inverse .mc-loader__path,.mc-loader--inverse .loader__path,.loader--inverse .loader__path{stroke:currentcolor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
815
815
|
}
|
|
816
816
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozLoaderComponent, decorators: [{
|
|
817
817
|
type: Component,
|
|
818
|
-
args: [{ selector: 'moz-loader', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"classes()\">\n <span class=\"loader__spinner\">\n <svg\n class=\"loader__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.viewBox]=\"viewBox()\"\n aria-hidden=\"true\"\n >\n <circle class=\"loader__path\" cx=\"50%\" cy=\"50%\" [attr.r]=\"circleRadius()\"></circle>\n </svg>\n </span>\n\n @if (text()) {\n <span class=\"loader__text\" role=\"status\">{{ text() }}</span>\n }\n</div>\n", styles: [".mc-loader .mc-loader__spinner,.loader .mc-loader__spinner,.mc-loader .loader__spinner,.loader .loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path,.loader .mc-loader__path,.mc-loader .loader__path,.loader .loader__path{stroke-width:4}.mc-loader,.loader{color:var(--loader-color-standard, #464e63)}.mc-loader .mc-loader__path,.loader .mc-loader__path,.mc-loader .loader__path,.loader .loader__path{stroke:currentcolor}.mc-loader,.loader{align-items:center;display:inline-flex;flex-direction:column}.mc-loader__spinner:not(:only-child),.loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon,.loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path,.loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text,.loader__text{font-size:var(--font-size-150, 1rem);color:currentcolor}.mc-loader:not(.mc-loader--text-visible):not(.loader--text-visible) .mc-loader__text,.loader:not(.mc-loader--text-visible):not(.loader--text-visible) .mc-loader__text,.mc-loader:not(.mc-loader--text-visible):not(.loader--text-visible) .loader__text,.loader:not(.mc-loader--text-visible):not(.loader--text-visible) .loader__text{
|
|
818
|
+
args: [{ selector: 'moz-loader', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"classes()\">\n <span class=\"loader__spinner\">\n <svg\n class=\"loader__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.viewBox]=\"viewBox()\"\n aria-hidden=\"true\"\n >\n <circle class=\"loader__path\" cx=\"50%\" cy=\"50%\" [attr.r]=\"circleRadius()\"></circle>\n </svg>\n </span>\n\n @if (text()) {\n <span class=\"loader__text\" role=\"status\">{{ text() }}</span>\n }\n</div>\n", styles: [".mc-loader .mc-loader__spinner,.loader .mc-loader__spinner,.mc-loader .loader__spinner,.loader .loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path,.loader .mc-loader__path,.mc-loader .loader__path,.loader .loader__path{stroke-width:4}.mc-loader,.loader{color:var(--loader-color-standard, #464e63)}.mc-loader .mc-loader__path,.loader .mc-loader__path,.mc-loader .loader__path,.loader .loader__path{stroke:currentcolor}.mc-loader,.loader{align-items:center;display:inline-flex;flex-direction:column}.mc-loader__spinner:not(:only-child),.loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon,.loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path,.loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text,.loader__text{font-size:var(--font-size-150, 1rem);color:currentcolor}.mc-loader:not(.mc-loader--text-visible):not(.loader--text-visible) .mc-loader__text,.loader:not(.mc-loader--text-visible):not(.loader--text-visible) .mc-loader__text,.mc-loader:not(.mc-loader--text-visible):not(.loader--text-visible) .loader__text,.loader:not(.mc-loader--text-visible):not(.loader--text-visible) .loader__text{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-loader--xs .mc-loader__spinner,.loader--xs .mc-loader__spinner,.mc-loader--xs .loader__spinner,.loader--xs .loader__spinner{height:1.25rem;width:1.25rem}.mc-loader--xs .mc-loader__path,.loader--xs .mc-loader__path,.mc-loader--xs .loader__path,.loader--xs .loader__path{stroke-width:2}.mc-loader--s .mc-loader__spinner,.loader--s .mc-loader__spinner,.mc-loader--s .loader__spinner,.loader--s .loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path,.loader--s .mc-loader__path,.mc-loader--s .loader__path,.loader--s .loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner,.loader--l .mc-loader__spinner,.mc-loader--l .loader__spinner,.loader--l .loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path,.loader--l .mc-loader__path,.mc-loader--l .loader__path,.loader--l .loader__path{stroke-width:8}.mc-loader--accent,.loader--accent{color:var(--loader-color-accent, #117f03)}.mc-loader--accent .mc-loader__path,.loader--accent .mc-loader__path,.mc-loader--accent .loader__path,.loader--accent .loader__path{stroke:currentcolor}.mc-loader--inverse,.loader--inverse{color:var(--loader-color-inverse, #ffffff)}.mc-loader--inverse .mc-loader__path,.loader--inverse .mc-loader__path,.mc-loader--inverse .loader__path,.loader--inverse .loader__path{stroke:currentcolor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}\n"] }]
|
|
819
819
|
}], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
|
|
820
820
|
|
|
821
821
|
class MozLoadingOverlayComponent {
|
|
@@ -1212,7 +1212,7 @@ class MozPaginationComponent {
|
|
|
1212
1212
|
this.updateValue.emit(+value);
|
|
1213
1213
|
}
|
|
1214
1214
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1215
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozPaginationComponent, isStandalone: true, selector: "moz-pagination", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, buttonAppearance: { classPropertyName: "buttonAppearance", publicName: "buttonAppearance", isSignal: true, isRequired: false, transformFunction: null }, buttonSize: { classPropertyName: "buttonSize", publicName: "buttonSize", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateValue: "updateValue" }, ngImport: i0, template: "<nav class=\"pagination\" role=\"navigation\">\n @if (!compact() && buttonAppearance() === 'square') {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Previous page\"\n [disabled]=\"isFirstPage()\"\n (click)=\"previous()\"\n [size]=\"buttonSize()\"\n >\n @if(buttonSize() === 'm') {\n <ChevronLeft24 icon />\n } @else {\n <ChevronLeft20 icon />\n }\n </button>\n } @else {\n <moz-icon-button\n aria-label=\"Previous page\"\n [disabled]=\"isFirstPage()\"\n (activated)=\"previous()\"\n [size]=\"buttonSize()\"\n [id]=\"'pagination-previous-button'\"\n >\n @if(buttonSize() === 'm') {\n <ChevronLeft24 icon />\n } @else {\n <ChevronLeft20 icon />\n }\n </moz-icon-button>\n } @if (!compact()) {\n <div class=\"pagination__field\">\n <moz-select\n class=\"pagination__select\"\n [id]=\"id()\"\n [name]=\"id()\"\n [options]=\"options()\"\n [ngModel]=\"_currentValue()\"\n (ngModelChange)=\"onSelectChange($event)\"\n [ariaLabel]=\"selectLabel()\"\n [size]=\"buttonSize()\"\n />\n </div>\n } @else {\n <span class=\"pagination__label\" aria-current=\"page\">\n {{ currentPageText() }}\n </span>\n } @if (!compact() && buttonAppearance() === 'square') {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Next page\"\n [disabled]=\"isLastPage()\"\n (click)=\"next()\"\n [size]=\"buttonSize()\"\n >\n @if(buttonSize() === 'm') {\n <ChevronRight24 icon />\n } @else {\n <ChevronRight20 icon />\n }\n </button>\n } @else {\n <moz-icon-button\n aria-label=\"Next page\"\n [disabled]=\"isLastPage()\"\n (activated)=\"next()\"\n [size]=\"buttonSize()\"\n [id]=\"'pagination-next-button'\"\n >\n @if(buttonSize() === 'm') {\n <ChevronRight24 icon />\n } @else {\n <ChevronRight20 icon />\n }\n </moz-icon-button>\n }\n</nav>\n", styles: [".mc-pagination,.pagination{align-items:center;display:flex;justify-content:center;gap:.5rem}.mc-pagination__label,.pagination__label{
|
|
1215
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozPaginationComponent, isStandalone: true, selector: "moz-pagination", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, buttonAppearance: { classPropertyName: "buttonAppearance", publicName: "buttonAppearance", isSignal: true, isRequired: false, transformFunction: null }, buttonSize: { classPropertyName: "buttonSize", publicName: "buttonSize", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateValue: "updateValue" }, ngImport: i0, template: "<nav class=\"pagination\" role=\"navigation\">\n @if (!compact() && buttonAppearance() === 'square') {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Previous page\"\n [disabled]=\"isFirstPage()\"\n (click)=\"previous()\"\n [size]=\"buttonSize()\"\n >\n @if(buttonSize() === 'm') {\n <ChevronLeft24 icon />\n } @else {\n <ChevronLeft20 icon />\n }\n </button>\n } @else {\n <moz-icon-button\n aria-label=\"Previous page\"\n [disabled]=\"isFirstPage()\"\n (activated)=\"previous()\"\n [size]=\"buttonSize()\"\n [id]=\"'pagination-previous-button'\"\n >\n @if(buttonSize() === 'm') {\n <ChevronLeft24 icon />\n } @else {\n <ChevronLeft20 icon />\n }\n </moz-icon-button>\n } @if (!compact()) {\n <div class=\"pagination__field\">\n <moz-select\n class=\"pagination__select\"\n [id]=\"id()\"\n [name]=\"id()\"\n [options]=\"options()\"\n [ngModel]=\"_currentValue()\"\n (ngModelChange)=\"onSelectChange($event)\"\n [ariaLabel]=\"selectLabel()\"\n [size]=\"buttonSize()\"\n />\n </div>\n } @else {\n <span class=\"pagination__label\" aria-current=\"page\">\n {{ currentPageText() }}\n </span>\n } @if (!compact() && buttonAppearance() === 'square') {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Next page\"\n [disabled]=\"isLastPage()\"\n (click)=\"next()\"\n [size]=\"buttonSize()\"\n >\n @if(buttonSize() === 'm') {\n <ChevronRight24 icon />\n } @else {\n <ChevronRight20 icon />\n }\n </button>\n } @else {\n <moz-icon-button\n aria-label=\"Next page\"\n [disabled]=\"isLastPage()\"\n (activated)=\"next()\"\n [size]=\"buttonSize()\"\n [id]=\"'pagination-next-button'\"\n >\n @if(buttonSize() === 'm') {\n <ChevronRight24 icon />\n } @else {\n <ChevronRight20 icon />\n }\n </moz-icon-button>\n }\n</nav>\n", styles: [".mc-pagination,.pagination{align-items:center;display:flex;justify-content:center;gap:.5rem}.mc-pagination__label,.pagination__label{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}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "component", type: ChevronLeft24, selector: "ChevronLeft24", inputs: ["hostClass"] }, { kind: "component", type: ChevronRight24, selector: "ChevronRight24", inputs: ["hostClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ChevronLeft20, selector: "ChevronLeft20", inputs: ["hostClass"] }, { kind: "component", type: ChevronRight20, selector: "ChevronRight20", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1216
1216
|
}
|
|
1217
1217
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozPaginationComponent, decorators: [{
|
|
1218
1218
|
type: Component,
|
|
@@ -1225,7 +1225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1225
1225
|
FormsModule,
|
|
1226
1226
|
ChevronLeft20,
|
|
1227
1227
|
ChevronRight20,
|
|
1228
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"pagination\" role=\"navigation\">\n @if (!compact() && buttonAppearance() === 'square') {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Previous page\"\n [disabled]=\"isFirstPage()\"\n (click)=\"previous()\"\n [size]=\"buttonSize()\"\n >\n @if(buttonSize() === 'm') {\n <ChevronLeft24 icon />\n } @else {\n <ChevronLeft20 icon />\n }\n </button>\n } @else {\n <moz-icon-button\n aria-label=\"Previous page\"\n [disabled]=\"isFirstPage()\"\n (activated)=\"previous()\"\n [size]=\"buttonSize()\"\n [id]=\"'pagination-previous-button'\"\n >\n @if(buttonSize() === 'm') {\n <ChevronLeft24 icon />\n } @else {\n <ChevronLeft20 icon />\n }\n </moz-icon-button>\n } @if (!compact()) {\n <div class=\"pagination__field\">\n <moz-select\n class=\"pagination__select\"\n [id]=\"id()\"\n [name]=\"id()\"\n [options]=\"options()\"\n [ngModel]=\"_currentValue()\"\n (ngModelChange)=\"onSelectChange($event)\"\n [ariaLabel]=\"selectLabel()\"\n [size]=\"buttonSize()\"\n />\n </div>\n } @else {\n <span class=\"pagination__label\" aria-current=\"page\">\n {{ currentPageText() }}\n </span>\n } @if (!compact() && buttonAppearance() === 'square') {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Next page\"\n [disabled]=\"isLastPage()\"\n (click)=\"next()\"\n [size]=\"buttonSize()\"\n >\n @if(buttonSize() === 'm') {\n <ChevronRight24 icon />\n } @else {\n <ChevronRight20 icon />\n }\n </button>\n } @else {\n <moz-icon-button\n aria-label=\"Next page\"\n [disabled]=\"isLastPage()\"\n (activated)=\"next()\"\n [size]=\"buttonSize()\"\n [id]=\"'pagination-next-button'\"\n >\n @if(buttonSize() === 'm') {\n <ChevronRight24 icon />\n } @else {\n <ChevronRight20 icon />\n }\n </moz-icon-button>\n }\n</nav>\n", styles: [".mc-pagination,.pagination{align-items:center;display:flex;justify-content:center;gap:.5rem}.mc-pagination__label,.pagination__label{
|
|
1228
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"pagination\" role=\"navigation\">\n @if (!compact() && buttonAppearance() === 'square') {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Previous page\"\n [disabled]=\"isFirstPage()\"\n (click)=\"previous()\"\n [size]=\"buttonSize()\"\n >\n @if(buttonSize() === 'm') {\n <ChevronLeft24 icon />\n } @else {\n <ChevronLeft20 icon />\n }\n </button>\n } @else {\n <moz-icon-button\n aria-label=\"Previous page\"\n [disabled]=\"isFirstPage()\"\n (activated)=\"previous()\"\n [size]=\"buttonSize()\"\n [id]=\"'pagination-previous-button'\"\n >\n @if(buttonSize() === 'm') {\n <ChevronLeft24 icon />\n } @else {\n <ChevronLeft20 icon />\n }\n </moz-icon-button>\n } @if (!compact()) {\n <div class=\"pagination__field\">\n <moz-select\n class=\"pagination__select\"\n [id]=\"id()\"\n [name]=\"id()\"\n [options]=\"options()\"\n [ngModel]=\"_currentValue()\"\n (ngModelChange)=\"onSelectChange($event)\"\n [ariaLabel]=\"selectLabel()\"\n [size]=\"buttonSize()\"\n />\n </div>\n } @else {\n <span class=\"pagination__label\" aria-current=\"page\">\n {{ currentPageText() }}\n </span>\n } @if (!compact() && buttonAppearance() === 'square') {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Next page\"\n [disabled]=\"isLastPage()\"\n (click)=\"next()\"\n [size]=\"buttonSize()\"\n >\n @if(buttonSize() === 'm') {\n <ChevronRight24 icon />\n } @else {\n <ChevronRight20 icon />\n }\n </button>\n } @else {\n <moz-icon-button\n aria-label=\"Next page\"\n [disabled]=\"isLastPage()\"\n (activated)=\"next()\"\n [size]=\"buttonSize()\"\n [id]=\"'pagination-next-button'\"\n >\n @if(buttonSize() === 'm') {\n <ChevronRight24 icon />\n } @else {\n <ChevronRight20 icon />\n }\n </moz-icon-button>\n }\n</nav>\n", styles: [".mc-pagination,.pagination{align-items:center;display:flex;justify-content:center;gap:.5rem}.mc-pagination__label,.pagination__label{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}\n"] }]
|
|
1229
1229
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], selectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectLabel", required: false }] }], buttonAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonAppearance", required: false }] }], buttonSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonSize", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], updateValue: [{ type: i0.Output, args: ["updateValue"] }] } });
|
|
1230
1230
|
|
|
1231
1231
|
/**
|
|
@@ -1397,7 +1397,7 @@ class MozPasswordInputDirective {
|
|
|
1397
1397
|
useExisting: forwardRef(() => MozPasswordInputDirective),
|
|
1398
1398
|
multi: true,
|
|
1399
1399
|
},
|
|
1400
|
-
], ngImport: i0, template: '', isInline: true, styles: [".mc-controls-options{align-items:center;display:inline-flex;justify-content:center;gap:.5rem}.mc-controls-options__button,.controls-options__button{background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--border-radius-full, 100%)}.mc-controls-options__button:hover .mc-controls-options__icon,.controls-options__button:hover .mc-controls-options__icon,.mc-controls-options__button:hover .controls-options__icon,.controls-options__button:hover .controls-options__icon{fill:var(--forms-color-icon-clear-hover, #4d4d4d)}.mc-controls-options__button:focus-visible,.controls-options__button: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-controls-options__icon,.controls-options__icon{fill:var(--forms-color-icon-clear, #666666);color:var(--forms-color-icon-clear, #666666)}.mc-controls-options__button,.controls-options__button,.mc-controls-options__icon,.controls-options__icon{height:1.5rem;width:1.5rem}.mc-controls-options__label,.controls-options__label{height:0;width:0;overflow:hidden;position:absolute;top:-1000px;left:-1000px;text-align:left;opacity:0}.mc-controls-options__unit{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-text-input,.text-input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-text-input__control,.text-input__control{background-color:transparent;border-width:0;font-family:inherit;outline:none}.mc-text-input__control[type=number]::-webkit-inner-spin-button,[type=number].text-input__control::-webkit-inner-spin-button,.mc-text-input__control[type=number]::-webkit-outer-spin-button,[type=number].text-input__control::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input__control[type=number],[type=number].text-input__control{appearance:textfield}.mc-text-input__control[type=search]::-webkit-search-decoration,[type=search].text-input__control::-webkit-search-decoration,.mc-text-input__control[type=search]::-webkit-search-cancel-button,[type=search].text-input__control::-webkit-search-cancel-button{appearance:none}.mc-text-input__control,.text-input__control{padding:.75rem .6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);flex-grow:1}.mc-text-input__control::placeholder,.text-input__control::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-text-input__addon{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-text-input__icon{fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0}.mc-text-input:focus-within,.text-input:focus-within{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-text-input:hover:not(:focus-within),.text-input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-text-input:has(input:disabled),.text-input:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-text-input:has(input[readonly]),.text-input:has(input[readonly]){border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-text-input:has(.mc-text-input__icon),.text-input:has(.mc-text-input__icon),.mc-text-input:has(.mc-text-input__addon),.text-input:has(.mc-text-input__addon){padding-inline-start:.6875rem}.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control,.text-input:has(.mc-text-input__icon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__icon) .text-input__control,.text-input:has(.mc-text-input__icon) .text-input__control,.mc-text-input:has(.mc-text-input__addon) .mc-text-input__control,.text-input:has(.mc-text-input__addon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon) .text-input__control,.text-input:has(.mc-text-input__addon) .text-input__control{padding-inline-start:0}.mc-text-input:has(.mc-controls-options),.text-input:has(.mc-controls-options),.mc-text-input:has(.mc-text-input__addon),.text-input:has(.mc-text-input__addon){padding-inline-end:.6875rem}.mc-text-input:has(.mc-controls-options) .mc-text-input__control,.text-input:has(.mc-controls-options) .mc-text-input__control,.mc-text-input:has(.mc-controls-options) .text-input__control,.text-input:has(.mc-controls-options) .text-input__control,.mc-text-input:has(.mc-text-input__addon) .mc-text-input__control,.text-input:has(.mc-text-input__addon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon) .text-input__control,.text-input:has(.mc-text-input__addon) .text-input__control{padding-inline-end:0}.mc-text-input--s{height:2rem}.mc-text-input--s .mc-text-input__control,.mc-text-input--s .text-input__control{padding:.375rem .6875rem;font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3)}.mc-text-input--s:has(.mc-text-input__icon){padding-inline-start:.4375rem}.mc-text-input--s:has(.mc-controls-options){padding-inline-end:.4375rem}.mc-text-input.is-invalid,.is-invalid.text-input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-text-input.is-invalid:hover:not(:focus-within),.is-invalid.text-input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-text-input *,.text-input *{box-sizing:border-box}.mc-password-input .mc-button,.password-input .mc-button,.mc-password-input .button,.password-input .button{min-width:4rem;margin:.5rem}.mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active,.button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label,.button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus,.button:focus{box-shadow:none;outline:none}.mc-button:focus-visible,.button: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-button--s,.button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label,.button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active,.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1400
|
+
], ngImport: i0, template: '', isInline: true, styles: [".mc-controls-options{align-items:center;display:inline-flex;justify-content:center;gap:.5rem}.mc-controls-options__button,.controls-options__button{background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--border-radius-full, 100%)}.mc-controls-options__button:hover .mc-controls-options__icon,.controls-options__button:hover .mc-controls-options__icon,.mc-controls-options__button:hover .controls-options__icon,.controls-options__button:hover .controls-options__icon{fill:var(--forms-color-icon-clear-hover, #4d4d4d)}.mc-controls-options__button:focus-visible,.controls-options__button: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-controls-options__icon,.controls-options__icon{fill:var(--forms-color-icon-clear, #666666);color:var(--forms-color-icon-clear, #666666)}.mc-controls-options__button,.controls-options__button,.mc-controls-options__icon,.controls-options__icon{height:1.5rem;width:1.5rem}.mc-controls-options__label,.controls-options__label{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-controls-options__unit{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-text-input,.text-input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-text-input__control,.text-input__control{background-color:transparent;border-width:0;font-family:inherit;outline:none}.mc-text-input__control[type=number]::-webkit-inner-spin-button,[type=number].text-input__control::-webkit-inner-spin-button,.mc-text-input__control[type=number]::-webkit-outer-spin-button,[type=number].text-input__control::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input__control[type=number],[type=number].text-input__control{appearance:textfield}.mc-text-input__control[type=search]::-webkit-search-decoration,[type=search].text-input__control::-webkit-search-decoration,.mc-text-input__control[type=search]::-webkit-search-cancel-button,[type=search].text-input__control::-webkit-search-cancel-button{appearance:none}.mc-text-input__control,.text-input__control{padding:.75rem .6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);flex-grow:1;min-width:0}.mc-text-input__control:placeholder-shown,.text-input__control:placeholder-shown{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-text-input__control::placeholder,.text-input__control::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-text-input__addon{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-text-input__icon{fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0}.mc-text-input:focus-within,.text-input:focus-within{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-text-input:hover:not(:focus-within),.text-input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-text-input:has(input:disabled),.text-input:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-text-input:has(input[readonly]),.text-input:has(input[readonly]){border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-text-input:has(.mc-text-input__icon),.text-input:has(.mc-text-input__icon),.mc-text-input:has(.mc-text-input__addon),.text-input:has(.mc-text-input__addon){padding-inline-start:.6875rem}.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control,.text-input:has(.mc-text-input__icon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__icon) .text-input__control,.text-input:has(.mc-text-input__icon) .text-input__control,.mc-text-input:has(.mc-text-input__addon) .mc-text-input__control,.text-input:has(.mc-text-input__addon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon) .text-input__control,.text-input:has(.mc-text-input__addon) .text-input__control{padding-inline-start:0}.mc-text-input:has(.mc-controls-options),.text-input:has(.mc-controls-options),.mc-text-input:has(.mc-text-input__addon),.text-input:has(.mc-text-input__addon){padding-inline-end:.6875rem}.mc-text-input:has(.mc-controls-options) .mc-text-input__control,.text-input:has(.mc-controls-options) .mc-text-input__control,.mc-text-input:has(.mc-controls-options) .text-input__control,.text-input:has(.mc-controls-options) .text-input__control,.mc-text-input:has(.mc-text-input__addon) .mc-text-input__control,.text-input:has(.mc-text-input__addon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon) .text-input__control,.text-input:has(.mc-text-input__addon) .text-input__control{padding-inline-end:0}.mc-text-input--s{height:2rem}.mc-text-input--s .mc-text-input__control,.mc-text-input--s .text-input__control{padding:.375rem .6875rem;font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3)}.mc-text-input--s:has(.mc-text-input__icon){padding-inline-start:.4375rem}.mc-text-input--s:has(.mc-controls-options){padding-inline-end:.4375rem}.mc-text-input.is-invalid,.is-invalid.text-input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-text-input.is-invalid:hover:not(:focus-within),.is-invalid.text-input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-text-input *,.text-input *{box-sizing:border-box}.mc-password-input .mc-button,.password-input .mc-button,.mc-password-input .button,.password-input .button{min-width:4rem;margin:.5rem;flex-shrink:0}.mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active,.button:active{transform:scale(.95)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label,.button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:background-color ease .2s,border-color ease .2s,color ease .2s,transform ease-out .15s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus,.button:focus{box-shadow:none;outline:none}.mc-button:focus-visible,.button: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-button--s,.button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label,.button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active{transform:scale(.95)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active,.button--ghost:active{transform:scale(.95)}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{transform:scale(.95)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{transform:scale(.95)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{transform:scale(.95)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active{transform:scale(.95)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active{transform:scale(.95)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active{transform:scale(.95)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active{transform:scale(.95)}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1401
1401
|
}
|
|
1402
1402
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozPasswordInputDirective, decorators: [{
|
|
1403
1403
|
type: Component,
|
|
@@ -1415,7 +1415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1415
1415
|
'(input)': 'onInput($event)',
|
|
1416
1416
|
'(blur)': 'onTouched()',
|
|
1417
1417
|
'[disabled]': 'disabled()',
|
|
1418
|
-
}, styles: [".mc-controls-options{align-items:center;display:inline-flex;justify-content:center;gap:.5rem}.mc-controls-options__button,.controls-options__button{background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--border-radius-full, 100%)}.mc-controls-options__button:hover .mc-controls-options__icon,.controls-options__button:hover .mc-controls-options__icon,.mc-controls-options__button:hover .controls-options__icon,.controls-options__button:hover .controls-options__icon{fill:var(--forms-color-icon-clear-hover, #4d4d4d)}.mc-controls-options__button:focus-visible,.controls-options__button: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-controls-options__icon,.controls-options__icon{fill:var(--forms-color-icon-clear, #666666);color:var(--forms-color-icon-clear, #666666)}.mc-controls-options__button,.controls-options__button,.mc-controls-options__icon,.controls-options__icon{height:1.5rem;width:1.5rem}.mc-controls-options__label,.controls-options__label{height:0;width:0;overflow:hidden;position:absolute;top:-1000px;left:-1000px;text-align:left;opacity:0}.mc-controls-options__unit{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-text-input,.text-input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-text-input__control,.text-input__control{background-color:transparent;border-width:0;font-family:inherit;outline:none}.mc-text-input__control[type=number]::-webkit-inner-spin-button,[type=number].text-input__control::-webkit-inner-spin-button,.mc-text-input__control[type=number]::-webkit-outer-spin-button,[type=number].text-input__control::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input__control[type=number],[type=number].text-input__control{appearance:textfield}.mc-text-input__control[type=search]::-webkit-search-decoration,[type=search].text-input__control::-webkit-search-decoration,.mc-text-input__control[type=search]::-webkit-search-cancel-button,[type=search].text-input__control::-webkit-search-cancel-button{appearance:none}.mc-text-input__control,.text-input__control{padding:.75rem .6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);flex-grow:1}.mc-text-input__control::placeholder,.text-input__control::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-text-input__addon{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-text-input__icon{fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0}.mc-text-input:focus-within,.text-input:focus-within{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-text-input:hover:not(:focus-within),.text-input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-text-input:has(input:disabled),.text-input:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-text-input:has(input[readonly]),.text-input:has(input[readonly]){border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-text-input:has(.mc-text-input__icon),.text-input:has(.mc-text-input__icon),.mc-text-input:has(.mc-text-input__addon),.text-input:has(.mc-text-input__addon){padding-inline-start:.6875rem}.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control,.text-input:has(.mc-text-input__icon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__icon) .text-input__control,.text-input:has(.mc-text-input__icon) .text-input__control,.mc-text-input:has(.mc-text-input__addon) .mc-text-input__control,.text-input:has(.mc-text-input__addon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon) .text-input__control,.text-input:has(.mc-text-input__addon) .text-input__control{padding-inline-start:0}.mc-text-input:has(.mc-controls-options),.text-input:has(.mc-controls-options),.mc-text-input:has(.mc-text-input__addon),.text-input:has(.mc-text-input__addon){padding-inline-end:.6875rem}.mc-text-input:has(.mc-controls-options) .mc-text-input__control,.text-input:has(.mc-controls-options) .mc-text-input__control,.mc-text-input:has(.mc-controls-options) .text-input__control,.text-input:has(.mc-controls-options) .text-input__control,.mc-text-input:has(.mc-text-input__addon) .mc-text-input__control,.text-input:has(.mc-text-input__addon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon) .text-input__control,.text-input:has(.mc-text-input__addon) .text-input__control{padding-inline-end:0}.mc-text-input--s{height:2rem}.mc-text-input--s .mc-text-input__control,.mc-text-input--s .text-input__control{padding:.375rem .6875rem;font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3)}.mc-text-input--s:has(.mc-text-input__icon){padding-inline-start:.4375rem}.mc-text-input--s:has(.mc-controls-options){padding-inline-end:.4375rem}.mc-text-input.is-invalid,.is-invalid.text-input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-text-input.is-invalid:hover:not(:focus-within),.is-invalid.text-input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-text-input *,.text-input *{box-sizing:border-box}.mc-password-input .mc-button,.password-input .mc-button,.mc-password-input .button,.password-input .button{min-width:4rem;margin:.5rem}.mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active,.button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label,.button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus,.button:focus{box-shadow:none;outline:none}.mc-button:focus-visible,.button: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-button--s,.button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label,.button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active,.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"] }]
|
|
1418
|
+
}, styles: [".mc-controls-options{align-items:center;display:inline-flex;justify-content:center;gap:.5rem}.mc-controls-options__button,.controls-options__button{background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--border-radius-full, 100%)}.mc-controls-options__button:hover .mc-controls-options__icon,.controls-options__button:hover .mc-controls-options__icon,.mc-controls-options__button:hover .controls-options__icon,.controls-options__button:hover .controls-options__icon{fill:var(--forms-color-icon-clear-hover, #4d4d4d)}.mc-controls-options__button:focus-visible,.controls-options__button: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-controls-options__icon,.controls-options__icon{fill:var(--forms-color-icon-clear, #666666);color:var(--forms-color-icon-clear, #666666)}.mc-controls-options__button,.controls-options__button,.mc-controls-options__icon,.controls-options__icon{height:1.5rem;width:1.5rem}.mc-controls-options__label,.controls-options__label{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-controls-options__unit{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-text-input,.text-input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-text-input__control,.text-input__control{background-color:transparent;border-width:0;font-family:inherit;outline:none}.mc-text-input__control[type=number]::-webkit-inner-spin-button,[type=number].text-input__control::-webkit-inner-spin-button,.mc-text-input__control[type=number]::-webkit-outer-spin-button,[type=number].text-input__control::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input__control[type=number],[type=number].text-input__control{appearance:textfield}.mc-text-input__control[type=search]::-webkit-search-decoration,[type=search].text-input__control::-webkit-search-decoration,.mc-text-input__control[type=search]::-webkit-search-cancel-button,[type=search].text-input__control::-webkit-search-cancel-button{appearance:none}.mc-text-input__control,.text-input__control{padding:.75rem .6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);flex-grow:1;min-width:0}.mc-text-input__control:placeholder-shown,.text-input__control:placeholder-shown{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-text-input__control::placeholder,.text-input__control::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-text-input__addon{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-text-input__icon{fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0}.mc-text-input:focus-within,.text-input:focus-within{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-text-input:hover:not(:focus-within),.text-input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-text-input:has(input:disabled),.text-input:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-text-input:has(input[readonly]),.text-input:has(input[readonly]){border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-text-input:has(.mc-text-input__icon),.text-input:has(.mc-text-input__icon),.mc-text-input:has(.mc-text-input__addon),.text-input:has(.mc-text-input__addon){padding-inline-start:.6875rem}.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control,.text-input:has(.mc-text-input__icon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__icon) .text-input__control,.text-input:has(.mc-text-input__icon) .text-input__control,.mc-text-input:has(.mc-text-input__addon) .mc-text-input__control,.text-input:has(.mc-text-input__addon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon) .text-input__control,.text-input:has(.mc-text-input__addon) .text-input__control{padding-inline-start:0}.mc-text-input:has(.mc-controls-options),.text-input:has(.mc-controls-options),.mc-text-input:has(.mc-text-input__addon),.text-input:has(.mc-text-input__addon){padding-inline-end:.6875rem}.mc-text-input:has(.mc-controls-options) .mc-text-input__control,.text-input:has(.mc-controls-options) .mc-text-input__control,.mc-text-input:has(.mc-controls-options) .text-input__control,.text-input:has(.mc-controls-options) .text-input__control,.mc-text-input:has(.mc-text-input__addon) .mc-text-input__control,.text-input:has(.mc-text-input__addon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon) .text-input__control,.text-input:has(.mc-text-input__addon) .text-input__control{padding-inline-end:0}.mc-text-input--s{height:2rem}.mc-text-input--s .mc-text-input__control,.mc-text-input--s .text-input__control{padding:.375rem .6875rem;font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3)}.mc-text-input--s:has(.mc-text-input__icon){padding-inline-start:.4375rem}.mc-text-input--s:has(.mc-controls-options){padding-inline-end:.4375rem}.mc-text-input.is-invalid,.is-invalid.text-input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-text-input.is-invalid:hover:not(:focus-within),.is-invalid.text-input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-text-input *,.text-input *{box-sizing:border-box}.mc-password-input .mc-button,.password-input .mc-button,.mc-password-input .button,.password-input .button{min-width:4rem;margin:.5rem;flex-shrink:0}.mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active,.button:active{transform:scale(.95)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label,.button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:background-color ease .2s,border-color ease .2s,color ease .2s,transform ease-out .15s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus,.button:focus{box-shadow:none;outline:none}.mc-button:focus-visible,.button: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-button--s,.button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label,.button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active{transform:scale(.95)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active,.button--ghost:active{transform:scale(.95)}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{transform:scale(.95)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{transform:scale(.95)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{transform:scale(.95)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active{transform:scale(.95)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active{transform:scale(.95)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active{transform:scale(.95)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active{transform:scale(.95)}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"] }]
|
|
1419
1419
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }] } });
|
|
1420
1420
|
|
|
1421
1421
|
class MozPincodeInputComponent {
|
|
@@ -1623,7 +1623,7 @@ class MozQuantitySelectorComponent {
|
|
|
1623
1623
|
useExisting: forwardRef(() => MozQuantitySelectorComponent),
|
|
1624
1624
|
multi: true,
|
|
1625
1625
|
},
|
|
1626
|
-
], ngImport: i0, template: "<div [class]=\"classes()\">\n <input\n class=\"quantity-selector__control\"\n type=\"number\"\n [id]=\"id()\"\n [name]=\"name()\"\n [disabled]=\"disabled()\"\n [min]=\"min()\"\n [max]=\"max()\"\n [step]=\"step()\"\n [readonly]=\"readonly()\"\n [attr.aria-invalid]=\"isInvalid()\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"_value()\"\n [value]=\"_value()\"\n (change)=\"onChangeInput($event)\"\n />\n\n @if (!readonly()) {\n <button\n type=\"button\"\n [attr.aria-controls]=\"id()\"\n class=\"quantity-selector__button quantity-selector__button--increase\"\n tabindex=\"-1\"\n [disabled]=\"disabled() || _value() === max()\"\n (click)=\"increment()\"\n >\n <span class=\"quantity-selector__icon\">\n <More24 />\n </span>\n <span class=\"quantity-selector__label\">{{ incrementLabel() }}</span>\n </button>\n\n <button\n type=\"button\"\n [attr.aria-controls]=\"id()\"\n class=\"quantity-selector__button quantity-selector__button--decrease\"\n tabindex=\"-1\"\n [disabled]=\"disabled() || _value() === min()\"\n (click)=\"decrement()\"\n >\n <span class=\"quantity-selector__icon\">\n <Less24 />\n </span>\n <span class=\"quantity-selector__label\">{{ decrementLabel() }}</span>\n </button>\n }\n</div>\n", styles: [".mc-quantity-selector,.quantity-selector{background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;display:flex;gap:.25rem;padding:.1875rem;position:relative;border-radius:var(--border-radius-s, .25rem);box-sizing:border-box}.mc-quantity-selector__control,.quantity-selector__control{background-color:transparent;border-width:0;color:inherit;font-family:inherit;outline:none}.mc-quantity-selector__control[type=number]::-webkit-inner-spin-button,[type=number].quantity-selector__control::-webkit-inner-spin-button,.mc-quantity-selector__control[type=number]::-webkit-outer-spin-button,[type=number].quantity-selector__control::-webkit-outer-spin-button{appearance:none;margin:0}.mc-quantity-selector__control[type=number],[type=number].quantity-selector__control{appearance:textfield}.mc-quantity-selector__control[type=search]::-webkit-search-decoration,[type=search].quantity-selector__control::-webkit-search-decoration,.mc-quantity-selector__control[type=search]::-webkit-search-cancel-button,[type=search].quantity-selector__control::-webkit-search-cancel-button{appearance:none}.mc-quantity-selector__control,.quantity-selector__control{padding:0;font-size:inherit;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-semi-bold, 600);cursor:inherit;text-align:center;flex-grow:1}.mc-quantity-selector__control::placeholder,.quantity-selector__control::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-quantity-selector__button,.quantity-selector__button{background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;height:2.5rem;width:2.5rem;border-radius:var(--border-radius-full, 100%);color:var(--quantity-selector-color-button-text-default, #000000);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.mc-quantity-selector__button:disabled,.quantity-selector__button:disabled{color:var(--quantity-selector-color-button-text-disabled, #b3b3b3);cursor:not-allowed}.mc-quantity-selector__button:hover:not(:disabled),.quantity-selector__button:hover:not(:disabled){background-color:var(--quantity-selector-color-button-background-hover, rgba(0, 0, 0, .05))}.mc-quantity-selector__button--decrease,.quantity-selector__button--decrease{order:-1}.mc-quantity-selector__icon,.quantity-selector__icon{height:1.5rem;width:1.5rem;fill:currentcolor}.mc-quantity-selector__label,.quantity-selector__label{
|
|
1626
|
+
], ngImport: i0, template: "<div [class]=\"classes()\">\n <input\n class=\"quantity-selector__control\"\n type=\"number\"\n [id]=\"id()\"\n [name]=\"name()\"\n [disabled]=\"disabled()\"\n [min]=\"min()\"\n [max]=\"max()\"\n [step]=\"step()\"\n [readonly]=\"readonly()\"\n [attr.aria-invalid]=\"isInvalid()\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"_value()\"\n [value]=\"_value()\"\n (change)=\"onChangeInput($event)\"\n />\n\n @if (!readonly()) {\n <button\n type=\"button\"\n [attr.aria-controls]=\"id()\"\n class=\"quantity-selector__button quantity-selector__button--increase\"\n tabindex=\"-1\"\n [disabled]=\"disabled() || _value() === max()\"\n (click)=\"increment()\"\n >\n <span class=\"quantity-selector__icon\">\n <More24 />\n </span>\n <span class=\"quantity-selector__label\">{{ incrementLabel() }}</span>\n </button>\n\n <button\n type=\"button\"\n [attr.aria-controls]=\"id()\"\n class=\"quantity-selector__button quantity-selector__button--decrease\"\n tabindex=\"-1\"\n [disabled]=\"disabled() || _value() === min()\"\n (click)=\"decrement()\"\n >\n <span class=\"quantity-selector__icon\">\n <Less24 />\n </span>\n <span class=\"quantity-selector__label\">{{ decrementLabel() }}</span>\n </button>\n }\n</div>\n", styles: [".mc-quantity-selector,.quantity-selector{background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;display:flex;gap:.25rem;padding:.1875rem;position:relative;border-radius:var(--border-radius-s, .25rem);box-sizing:border-box}.mc-quantity-selector__control,.quantity-selector__control{background-color:transparent;border-width:0;color:inherit;font-family:inherit;outline:none}.mc-quantity-selector__control[type=number]::-webkit-inner-spin-button,[type=number].quantity-selector__control::-webkit-inner-spin-button,.mc-quantity-selector__control[type=number]::-webkit-outer-spin-button,[type=number].quantity-selector__control::-webkit-outer-spin-button{appearance:none;margin:0}.mc-quantity-selector__control[type=number],[type=number].quantity-selector__control{appearance:textfield}.mc-quantity-selector__control[type=search]::-webkit-search-decoration,[type=search].quantity-selector__control::-webkit-search-decoration,.mc-quantity-selector__control[type=search]::-webkit-search-cancel-button,[type=search].quantity-selector__control::-webkit-search-cancel-button{appearance:none}.mc-quantity-selector__control,.quantity-selector__control{padding:0;font-size:inherit;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-semi-bold, 600);cursor:inherit;text-align:center;flex-grow:1}.mc-quantity-selector__control::placeholder,.quantity-selector__control::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-quantity-selector__button,.quantity-selector__button{background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;height:2.5rem;width:2.5rem;border-radius:var(--border-radius-full, 100%);color:var(--quantity-selector-color-button-text-default, #000000);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.mc-quantity-selector__button:disabled,.quantity-selector__button:disabled{color:var(--quantity-selector-color-button-text-disabled, #b3b3b3);cursor:not-allowed}.mc-quantity-selector__button:hover:not(:disabled),.quantity-selector__button:hover:not(:disabled){background-color:var(--quantity-selector-color-button-background-hover, rgba(0, 0, 0, .05))}.mc-quantity-selector__button--decrease,.quantity-selector__button--decrease{order:-1}.mc-quantity-selector__icon,.quantity-selector__icon{height:1.5rem;width:1.5rem;fill:currentcolor}.mc-quantity-selector__label,.quantity-selector__label{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-quantity-selector:after,.quantity-selector:after{transition:box-shadow .2s ease;content:\"\";position:absolute;inset:-.125rem var(--inset-x, 3rem);pointer-events:none;display:block;border-radius:var(--border-radius-s, .25rem)}.mc-quantity-selector:hover:not(:focus-within),.quantity-selector:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-quantity-selector:has(input:disabled),.quantity-selector:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-quantity-selector:has(input:disabled) .mc-quantity-selector__button:disabled,.quantity-selector:has(input:disabled) .mc-quantity-selector__button:disabled,.mc-quantity-selector:has(input:disabled) .quantity-selector__button:disabled,.quantity-selector:has(input:disabled) .quantity-selector__button:disabled{color:var(--forms-color-icon-disabled, #737373)}.mc-quantity-selector:has(input[readonly]),.quantity-selector:has(input[readonly]){border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-quantity-selector:has(input[readonly]) .mc-quantity-selector__control[readonly],.quantity-selector:has(input[readonly]) .mc-quantity-selector__control[readonly],.mc-quantity-selector:has(input[readonly]) [readonly].quantity-selector__control,.quantity-selector:has(input[readonly]) [readonly].quantity-selector__control{text-align:left;padding-left:.5rem}.mc-quantity-selector:has(input:focus):after,.quantity-selector:has(input:focus):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-quantity-selector--s,.quantity-selector--s{--inset-x: 2rem;height:2rem}.mc-quantity-selector--s .mc-quantity-selector__button,.quantity-selector--s .mc-quantity-selector__button,.mc-quantity-selector--s .quantity-selector__button,.quantity-selector--s .quantity-selector__button{height:1.5rem;width:1.5rem}.mc-quantity-selector--s .mc-quantity-selector__icon,.quantity-selector--s .mc-quantity-selector__icon,.mc-quantity-selector--s .quantity-selector__icon,.quantity-selector--s .quantity-selector__icon{height:1.25rem;width:1.25rem}.mc-quantity-selector.is-invalid,.is-invalid.quantity-selector{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-quantity-selector.is-invalid:hover:not(:focus-within),.is-invalid.quantity-selector:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-quantity-selector *,.quantity-selector *{box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: More24, selector: "More24", inputs: ["hostClass"] }, { kind: "component", type: Less24, selector: "Less24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1627
1627
|
}
|
|
1628
1628
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozQuantitySelectorComponent, decorators: [{
|
|
1629
1629
|
type: Component,
|
|
@@ -1633,7 +1633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1633
1633
|
useExisting: forwardRef(() => MozQuantitySelectorComponent),
|
|
1634
1634
|
multi: true,
|
|
1635
1635
|
},
|
|
1636
|
-
], template: "<div [class]=\"classes()\">\n <input\n class=\"quantity-selector__control\"\n type=\"number\"\n [id]=\"id()\"\n [name]=\"name()\"\n [disabled]=\"disabled()\"\n [min]=\"min()\"\n [max]=\"max()\"\n [step]=\"step()\"\n [readonly]=\"readonly()\"\n [attr.aria-invalid]=\"isInvalid()\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"_value()\"\n [value]=\"_value()\"\n (change)=\"onChangeInput($event)\"\n />\n\n @if (!readonly()) {\n <button\n type=\"button\"\n [attr.aria-controls]=\"id()\"\n class=\"quantity-selector__button quantity-selector__button--increase\"\n tabindex=\"-1\"\n [disabled]=\"disabled() || _value() === max()\"\n (click)=\"increment()\"\n >\n <span class=\"quantity-selector__icon\">\n <More24 />\n </span>\n <span class=\"quantity-selector__label\">{{ incrementLabel() }}</span>\n </button>\n\n <button\n type=\"button\"\n [attr.aria-controls]=\"id()\"\n class=\"quantity-selector__button quantity-selector__button--decrease\"\n tabindex=\"-1\"\n [disabled]=\"disabled() || _value() === min()\"\n (click)=\"decrement()\"\n >\n <span class=\"quantity-selector__icon\">\n <Less24 />\n </span>\n <span class=\"quantity-selector__label\">{{ decrementLabel() }}</span>\n </button>\n }\n</div>\n", styles: [".mc-quantity-selector,.quantity-selector{background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;display:flex;gap:.25rem;padding:.1875rem;position:relative;border-radius:var(--border-radius-s, .25rem);box-sizing:border-box}.mc-quantity-selector__control,.quantity-selector__control{background-color:transparent;border-width:0;color:inherit;font-family:inherit;outline:none}.mc-quantity-selector__control[type=number]::-webkit-inner-spin-button,[type=number].quantity-selector__control::-webkit-inner-spin-button,.mc-quantity-selector__control[type=number]::-webkit-outer-spin-button,[type=number].quantity-selector__control::-webkit-outer-spin-button{appearance:none;margin:0}.mc-quantity-selector__control[type=number],[type=number].quantity-selector__control{appearance:textfield}.mc-quantity-selector__control[type=search]::-webkit-search-decoration,[type=search].quantity-selector__control::-webkit-search-decoration,.mc-quantity-selector__control[type=search]::-webkit-search-cancel-button,[type=search].quantity-selector__control::-webkit-search-cancel-button{appearance:none}.mc-quantity-selector__control,.quantity-selector__control{padding:0;font-size:inherit;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-semi-bold, 600);cursor:inherit;text-align:center;flex-grow:1}.mc-quantity-selector__control::placeholder,.quantity-selector__control::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-quantity-selector__button,.quantity-selector__button{background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;height:2.5rem;width:2.5rem;border-radius:var(--border-radius-full, 100%);color:var(--quantity-selector-color-button-text-default, #000000);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.mc-quantity-selector__button:disabled,.quantity-selector__button:disabled{color:var(--quantity-selector-color-button-text-disabled, #b3b3b3);cursor:not-allowed}.mc-quantity-selector__button:hover:not(:disabled),.quantity-selector__button:hover:not(:disabled){background-color:var(--quantity-selector-color-button-background-hover, rgba(0, 0, 0, .05))}.mc-quantity-selector__button--decrease,.quantity-selector__button--decrease{order:-1}.mc-quantity-selector__icon,.quantity-selector__icon{height:1.5rem;width:1.5rem;fill:currentcolor}.mc-quantity-selector__label,.quantity-selector__label{
|
|
1636
|
+
], template: "<div [class]=\"classes()\">\n <input\n class=\"quantity-selector__control\"\n type=\"number\"\n [id]=\"id()\"\n [name]=\"name()\"\n [disabled]=\"disabled()\"\n [min]=\"min()\"\n [max]=\"max()\"\n [step]=\"step()\"\n [readonly]=\"readonly()\"\n [attr.aria-invalid]=\"isInvalid()\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"_value()\"\n [value]=\"_value()\"\n (change)=\"onChangeInput($event)\"\n />\n\n @if (!readonly()) {\n <button\n type=\"button\"\n [attr.aria-controls]=\"id()\"\n class=\"quantity-selector__button quantity-selector__button--increase\"\n tabindex=\"-1\"\n [disabled]=\"disabled() || _value() === max()\"\n (click)=\"increment()\"\n >\n <span class=\"quantity-selector__icon\">\n <More24 />\n </span>\n <span class=\"quantity-selector__label\">{{ incrementLabel() }}</span>\n </button>\n\n <button\n type=\"button\"\n [attr.aria-controls]=\"id()\"\n class=\"quantity-selector__button quantity-selector__button--decrease\"\n tabindex=\"-1\"\n [disabled]=\"disabled() || _value() === min()\"\n (click)=\"decrement()\"\n >\n <span class=\"quantity-selector__icon\">\n <Less24 />\n </span>\n <span class=\"quantity-selector__label\">{{ decrementLabel() }}</span>\n </button>\n }\n</div>\n", styles: [".mc-quantity-selector,.quantity-selector{background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;display:flex;gap:.25rem;padding:.1875rem;position:relative;border-radius:var(--border-radius-s, .25rem);box-sizing:border-box}.mc-quantity-selector__control,.quantity-selector__control{background-color:transparent;border-width:0;color:inherit;font-family:inherit;outline:none}.mc-quantity-selector__control[type=number]::-webkit-inner-spin-button,[type=number].quantity-selector__control::-webkit-inner-spin-button,.mc-quantity-selector__control[type=number]::-webkit-outer-spin-button,[type=number].quantity-selector__control::-webkit-outer-spin-button{appearance:none;margin:0}.mc-quantity-selector__control[type=number],[type=number].quantity-selector__control{appearance:textfield}.mc-quantity-selector__control[type=search]::-webkit-search-decoration,[type=search].quantity-selector__control::-webkit-search-decoration,.mc-quantity-selector__control[type=search]::-webkit-search-cancel-button,[type=search].quantity-selector__control::-webkit-search-cancel-button{appearance:none}.mc-quantity-selector__control,.quantity-selector__control{padding:0;font-size:inherit;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-semi-bold, 600);cursor:inherit;text-align:center;flex-grow:1}.mc-quantity-selector__control::placeholder,.quantity-selector__control::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-quantity-selector__button,.quantity-selector__button{background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;height:2.5rem;width:2.5rem;border-radius:var(--border-radius-full, 100%);color:var(--quantity-selector-color-button-text-default, #000000);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.mc-quantity-selector__button:disabled,.quantity-selector__button:disabled{color:var(--quantity-selector-color-button-text-disabled, #b3b3b3);cursor:not-allowed}.mc-quantity-selector__button:hover:not(:disabled),.quantity-selector__button:hover:not(:disabled){background-color:var(--quantity-selector-color-button-background-hover, rgba(0, 0, 0, .05))}.mc-quantity-selector__button--decrease,.quantity-selector__button--decrease{order:-1}.mc-quantity-selector__icon,.quantity-selector__icon{height:1.5rem;width:1.5rem;fill:currentcolor}.mc-quantity-selector__label,.quantity-selector__label{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-quantity-selector:after,.quantity-selector:after{transition:box-shadow .2s ease;content:\"\";position:absolute;inset:-.125rem var(--inset-x, 3rem);pointer-events:none;display:block;border-radius:var(--border-radius-s, .25rem)}.mc-quantity-selector:hover:not(:focus-within),.quantity-selector:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-quantity-selector:has(input:disabled),.quantity-selector:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-quantity-selector:has(input:disabled) .mc-quantity-selector__button:disabled,.quantity-selector:has(input:disabled) .mc-quantity-selector__button:disabled,.mc-quantity-selector:has(input:disabled) .quantity-selector__button:disabled,.quantity-selector:has(input:disabled) .quantity-selector__button:disabled{color:var(--forms-color-icon-disabled, #737373)}.mc-quantity-selector:has(input[readonly]),.quantity-selector:has(input[readonly]){border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-quantity-selector:has(input[readonly]) .mc-quantity-selector__control[readonly],.quantity-selector:has(input[readonly]) .mc-quantity-selector__control[readonly],.mc-quantity-selector:has(input[readonly]) [readonly].quantity-selector__control,.quantity-selector:has(input[readonly]) [readonly].quantity-selector__control{text-align:left;padding-left:.5rem}.mc-quantity-selector:has(input:focus):after,.quantity-selector:has(input:focus):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-quantity-selector--s,.quantity-selector--s{--inset-x: 2rem;height:2rem}.mc-quantity-selector--s .mc-quantity-selector__button,.quantity-selector--s .mc-quantity-selector__button,.mc-quantity-selector--s .quantity-selector__button,.quantity-selector--s .quantity-selector__button{height:1.5rem;width:1.5rem}.mc-quantity-selector--s .mc-quantity-selector__icon,.quantity-selector--s .mc-quantity-selector__icon,.mc-quantity-selector--s .quantity-selector__icon,.quantity-selector--s .quantity-selector__icon{height:1.25rem;width:1.25rem}.mc-quantity-selector.is-invalid,.is-invalid.quantity-selector{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-quantity-selector.is-invalid:hover:not(:focus-within),.is-invalid.quantity-selector:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-quantity-selector *,.quantity-selector *{box-sizing:border-box}\n"] }]
|
|
1637
1637
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], incrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementLabel", required: false }] }], decrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementLabel", required: false }] }] } });
|
|
1638
1638
|
|
|
1639
1639
|
class MozRadioComponent {
|
|
@@ -1927,11 +1927,11 @@ class MozTabsComponent {
|
|
|
1927
1927
|
}
|
|
1928
1928
|
}
|
|
1929
1929
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1930
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozTabsComponent, isStandalone: true, selector: "moz-tabs", inputs: { description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, centered: { classPropertyName: "centered", publicName: "centered", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, tabsInput: { classPropertyName: "tabsInput", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange" }, queries: [{ propertyName: "tabs", predicate: MozTabComponent }], ngImport: i0, template: "<nav [class]=\"classes()\" aria-label=\"Tabs\">\n <ul class=\"tabs__list\" role=\"tablist\" [attr.aria-label]=\"description()\">\n @if (hasVirtualTabs()) { @for (tab of virtualTabs(); let index = $index; track index) {\n <li class=\"tabs__item\" role=\"presentation\">\n @if (tab.routerLink) {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tab.id\"\n [class]=\"getVirtualTabClasses(index)()\"\n [routerLink]=\"tab.routerLink\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n @if (tab.badge != null) {\n <span class=\"mc-number-badge mc-tabs__badge\" [class.mc-number-badge--accent]=\"isTabSelected(index)\">{{ tab.badge }}</span>\n }\n </button>\n } @else {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tab.id\"\n [class]=\"getVirtualTabClasses(index)()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickVirtualTab(index, tab)\"\n >\n @if (tab.icon) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n @if (tab.badge != null) {\n <span class=\"mc-number-badge mc-tabs__badge\" [class.mc-number-badge--accent]=\"isTabSelected(index)\">{{ tab.badge }}</span>\n }\n </button>\n }\n </li>\n } } @else { @for (tab of tabsArray(); let index = $index; track index) {\n <li class=\"tabs__item\" role=\"presentation\">\n @if (tab.routerLink()) {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tab.id()\"\n [class]=\"getTabClasses(index)()\"\n [routerLink]=\"tab.routerLink()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon()) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label() }}</span>\n </div>\n @if (tab.badge() != null) {\n <span class=\"mc-number-badge mc-tabs__badge\" [class.mc-number-badge--accent]=\"isTabSelected(index)\">{{ tab.badge() }}</span>\n }\n </button>\n } @else {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tab.id()\"\n [class]=\"getTabClasses(index)()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon()) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label() }}</span>\n </div>\n @if (tab.badge() != null) {\n <span class=\"mc-number-badge mc-tabs__badge\" [class.mc-number-badge--accent]=\"isTabSelected(index)\">{{ tab.badge() }}</span>\n }\n </button>\n }\n </li>\n } }\n </ul>\n\n @if (divider()) {\n <moz-divider></moz-divider>\n }\n</nav>\n", styles: [".mc-tabs,.tabs{height:3.5rem}.mc-tabs .mc-tabs__tab,.tabs .mc-tabs__tab,.mc-tabs .tabs__tab,.tabs .tabs__tab{font-size:var(--font-size-100, .875rem);height:2.5rem;padding-left:.75rem;padding-right:.75rem}.mc-tabs .mc-tabs__tab .mc-tabs__icon,.tabs .mc-tabs__tab .mc-tabs__icon,.mc-tabs .tabs__tab .mc-tabs__icon,.tabs .tabs__tab .mc-tabs__icon,.mc-tabs .mc-tabs__tab .tabs__icon,.tabs .mc-tabs__tab .tabs__icon,.mc-tabs .tabs__tab .tabs__icon,.tabs .tabs__tab .tabs__icon{height:1.5rem;width:1.5rem}.mc-tabs,.tabs{background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%}.mc-tabs__list,.tabs__list{list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:.5rem;padding:var(--tabs-list-padding, .5rem .25rem);overflow:scroll}@media screen and (min-width:681px){.mc-tabs__list,.tabs__list{overflow:hidden}}.mc-tabs--s{height:2.5rem}.mc-tabs--s .mc-tabs__tab,.mc-tabs--s .tabs__tab{font-size:var(--font-size-50, .75rem);height:1.5rem;padding-left:.5rem;padding-right:.5rem}.mc-tabs--s .mc-tabs__tab .mc-tabs__icon,.mc-tabs--s .tabs__tab .mc-tabs__icon,.mc-tabs--s .mc-tabs__tab .tabs__icon,.mc-tabs--s .tabs__tab .tabs__icon{height:1.25rem;width:1.25rem}.mc-tabs__tab,.tabs__tab{
|
|
1930
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozTabsComponent, isStandalone: true, selector: "moz-tabs", inputs: { description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, centered: { classPropertyName: "centered", publicName: "centered", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, tabsInput: { classPropertyName: "tabsInput", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange" }, queries: [{ propertyName: "tabs", predicate: MozTabComponent }], ngImport: i0, template: "<nav [class]=\"classes()\" aria-label=\"Tabs\">\n <ul class=\"tabs__list\" role=\"tablist\" [attr.aria-label]=\"description()\">\n @if (hasVirtualTabs()) { @for (tab of virtualTabs(); let index = $index; track index) {\n <li class=\"tabs__item\" role=\"presentation\">\n @if (tab.routerLink) {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tab.id\"\n [class]=\"getVirtualTabClasses(index)()\"\n [routerLink]=\"tab.routerLink\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n @if (tab.badge != null) {\n <span class=\"mc-number-badge mc-tabs__badge\" [class.mc-number-badge--accent]=\"isTabSelected(index)\">{{ tab.badge }}</span>\n }\n </button>\n } @else {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tab.id\"\n [class]=\"getVirtualTabClasses(index)()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickVirtualTab(index, tab)\"\n >\n @if (tab.icon) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n @if (tab.badge != null) {\n <span class=\"mc-number-badge mc-tabs__badge\" [class.mc-number-badge--accent]=\"isTabSelected(index)\">{{ tab.badge }}</span>\n }\n </button>\n }\n </li>\n } } @else { @for (tab of tabsArray(); let index = $index; track index) {\n <li class=\"tabs__item\" role=\"presentation\">\n @if (tab.routerLink()) {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tab.id()\"\n [class]=\"getTabClasses(index)()\"\n [routerLink]=\"tab.routerLink()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon()) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label() }}</span>\n </div>\n @if (tab.badge() != null) {\n <span class=\"mc-number-badge mc-tabs__badge\" [class.mc-number-badge--accent]=\"isTabSelected(index)\">{{ tab.badge() }}</span>\n }\n </button>\n } @else {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tab.id()\"\n [class]=\"getTabClasses(index)()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon()) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label() }}</span>\n </div>\n @if (tab.badge() != null) {\n <span class=\"mc-number-badge mc-tabs__badge\" [class.mc-number-badge--accent]=\"isTabSelected(index)\">{{ tab.badge() }}</span>\n }\n </button>\n }\n </li>\n } }\n </ul>\n\n @if (divider()) {\n <moz-divider></moz-divider>\n }\n</nav>\n", styles: [".mc-tabs,.tabs{height:3.5rem}.mc-tabs .mc-tabs__tab,.tabs .mc-tabs__tab,.mc-tabs .tabs__tab,.tabs .tabs__tab{font-size:var(--font-size-100, .875rem);height:2.5rem;padding-left:.75rem;padding-right:.75rem}.mc-tabs .mc-tabs__tab .mc-tabs__icon,.tabs .mc-tabs__tab .mc-tabs__icon,.mc-tabs .tabs__tab .mc-tabs__icon,.tabs .tabs__tab .mc-tabs__icon,.mc-tabs .mc-tabs__tab .tabs__icon,.tabs .mc-tabs__tab .tabs__icon,.mc-tabs .tabs__tab .tabs__icon,.tabs .tabs__tab .tabs__icon{height:1.5rem;width:1.5rem}.mc-tabs,.tabs{background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%}.mc-tabs__list,.tabs__list{list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:.5rem;padding:var(--tabs-list-padding, .5rem .25rem);overflow:scroll}@media screen and (min-width:681px){.mc-tabs__list,.tabs__list{overflow:hidden}}.mc-tabs--s{height:2.5rem}.mc-tabs--s .mc-tabs__tab,.mc-tabs--s .tabs__tab{font-size:var(--font-size-50, .75rem);height:1.5rem;padding-left:.5rem;padding-right:.5rem}.mc-tabs--s .mc-tabs__tab .mc-tabs__icon,.mc-tabs--s .tabs__tab .mc-tabs__icon,.mc-tabs--s .mc-tabs__tab .tabs__icon,.mc-tabs--s .tabs__tab .tabs__icon{height:1.25rem;width:1.25rem}.mc-tabs__tab,.tabs__tab{align-items:center;background:none;border:none;border-radius:var(--border-radius-s, .25rem);color:var(--tabs-color-text-default, #404040);cursor:pointer;display:flex;gap:.25rem;justify-content:center;outline:none;position:relative;text-decoration:none}.mc-tabs__tab:hover,.tabs__tab:hover{background-color:var(--tabs-color-background-hover, rgba(0, 0, 0, .05))}.mc-tabs__tab:focus-visible,.tabs__tab: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-tabs__tab--selected,.tabs__tab--selected{font-weight:var(--font-weight-semi-bold, 600);color:var(--tabs-color-text-selected, #006902);background-color:var(--tabs-color-background-selected, #ebf5de)}.mc-tabs__tab--selected:hover,.tabs__tab--selected:hover{background-color:var(--tabs-color-background-selected-hover, #c5e39e)}.mc-tabs__tab--disabled,.tabs__tab--disabled{color:var(--tabs-color-text-disabled, #b3b3b3);cursor:not-allowed}.mc-tabs__tab--disabled:hover,.tabs__tab--disabled:hover{background:none}.mc-tabs__tab--s{font-size:var(--font-size-50, .75rem);height:1.5rem;padding-left:.5rem;padding-right:.5rem}.mc-tabs__tab--s .mc-tabs__icon,.mc-tabs__tab--s .tabs__icon{height:1.25rem;width:1.25rem}.mc-tabs__tab--m{font-size:var(--font-size-100, .875rem);height:2.5rem;padding-left:.75rem;padding-right:.75rem}.mc-tabs__tab--m .mc-tabs__icon,.mc-tabs__tab--m .tabs__icon{height:1.5rem;width:1.5rem}.mc-tabs__label,.tabs__label{pointer-events:none;white-space:nowrap}.mc-tabs__icon,.tabs__icon{fill:currentcolor}.mc-tabs--centered .mc-tabs__list,.tabs--centered .mc-tabs__list,.mc-tabs--centered .tabs__list,.tabs--centered .tabs__list{justify-content:center}.mc-number-badge{color:var(--number-badge-color-text-standard, #ffffff);background-color:var(--number-badge-color-background-standard, #464e63);height:1rem;min-width:1rem;padding-inline:.125rem;font-size:var(--font-size-25, .625rem);border-radius:var(--border-radius-l, 1rem);font-weight:var(--font-weight-semi-bold, 600);display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;line-height:1}.mc-number-badge--m{height:1.5rem;min-width:1.5rem;padding-inline:.25rem;font-size:var(--font-size-50, .75rem)}.mc-number-badge--accent{color:var(--number-badge-color-text-accent, #ffffff);background-color:var(--number-badge-color-background-accent, #117f03)}.mc-number-badge--danger{color:var(--number-badge-color-text-danger, #ffffff);background-color:var(--number-badge-color-background-danger, #c61112)}.mc-number-badge--inverse{color:var(--number-badge-color-text-inverse, #464e63);background-color:var(--number-badge-color-background-inverse, #ffffff)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: MozDividerComponent, selector: "moz-divider", inputs: ["orientation", "appearance", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1931
1931
|
}
|
|
1932
1932
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozTabsComponent, decorators: [{
|
|
1933
1933
|
type: Component,
|
|
1934
|
-
args: [{ selector: 'moz-tabs', imports: [NgComponentOutlet, RouterLink, MozDividerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [class]=\"classes()\" aria-label=\"Tabs\">\n <ul class=\"tabs__list\" role=\"tablist\" [attr.aria-label]=\"description()\">\n @if (hasVirtualTabs()) { @for (tab of virtualTabs(); let index = $index; track index) {\n <li class=\"tabs__item\" role=\"presentation\">\n @if (tab.routerLink) {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tab.id\"\n [class]=\"getVirtualTabClasses(index)()\"\n [routerLink]=\"tab.routerLink\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n @if (tab.badge != null) {\n <span class=\"mc-number-badge mc-tabs__badge\" [class.mc-number-badge--accent]=\"isTabSelected(index)\">{{ tab.badge }}</span>\n }\n </button>\n } @else {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tab.id\"\n [class]=\"getVirtualTabClasses(index)()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickVirtualTab(index, tab)\"\n >\n @if (tab.icon) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n @if (tab.badge != null) {\n <span class=\"mc-number-badge mc-tabs__badge\" [class.mc-number-badge--accent]=\"isTabSelected(index)\">{{ tab.badge }}</span>\n }\n </button>\n }\n </li>\n } } @else { @for (tab of tabsArray(); let index = $index; track index) {\n <li class=\"tabs__item\" role=\"presentation\">\n @if (tab.routerLink()) {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tab.id()\"\n [class]=\"getTabClasses(index)()\"\n [routerLink]=\"tab.routerLink()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon()) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label() }}</span>\n </div>\n @if (tab.badge() != null) {\n <span class=\"mc-number-badge mc-tabs__badge\" [class.mc-number-badge--accent]=\"isTabSelected(index)\">{{ tab.badge() }}</span>\n }\n </button>\n } @else {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tab.id()\"\n [class]=\"getTabClasses(index)()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon()) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label() }}</span>\n </div>\n @if (tab.badge() != null) {\n <span class=\"mc-number-badge mc-tabs__badge\" [class.mc-number-badge--accent]=\"isTabSelected(index)\">{{ tab.badge() }}</span>\n }\n </button>\n }\n </li>\n } }\n </ul>\n\n @if (divider()) {\n <moz-divider></moz-divider>\n }\n</nav>\n", styles: [".mc-tabs,.tabs{height:3.5rem}.mc-tabs .mc-tabs__tab,.tabs .mc-tabs__tab,.mc-tabs .tabs__tab,.tabs .tabs__tab{font-size:var(--font-size-100, .875rem);height:2.5rem;padding-left:.75rem;padding-right:.75rem}.mc-tabs .mc-tabs__tab .mc-tabs__icon,.tabs .mc-tabs__tab .mc-tabs__icon,.mc-tabs .tabs__tab .mc-tabs__icon,.tabs .tabs__tab .mc-tabs__icon,.mc-tabs .mc-tabs__tab .tabs__icon,.tabs .mc-tabs__tab .tabs__icon,.mc-tabs .tabs__tab .tabs__icon,.tabs .tabs__tab .tabs__icon{height:1.5rem;width:1.5rem}.mc-tabs,.tabs{background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%}.mc-tabs__list,.tabs__list{list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:.5rem;padding:var(--tabs-list-padding, .5rem .25rem);overflow:scroll}@media screen and (min-width:681px){.mc-tabs__list,.tabs__list{overflow:hidden}}.mc-tabs--s{height:2.5rem}.mc-tabs--s .mc-tabs__tab,.mc-tabs--s .tabs__tab{font-size:var(--font-size-50, .75rem);height:1.5rem;padding-left:.5rem;padding-right:.5rem}.mc-tabs--s .mc-tabs__tab .mc-tabs__icon,.mc-tabs--s .tabs__tab .mc-tabs__icon,.mc-tabs--s .mc-tabs__tab .tabs__icon,.mc-tabs--s .tabs__tab .tabs__icon{height:1.25rem;width:1.25rem}.mc-tabs__tab,.tabs__tab{
|
|
1934
|
+
args: [{ selector: 'moz-tabs', imports: [NgComponentOutlet, RouterLink, MozDividerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [class]=\"classes()\" aria-label=\"Tabs\">\n <ul class=\"tabs__list\" role=\"tablist\" [attr.aria-label]=\"description()\">\n @if (hasVirtualTabs()) { @for (tab of virtualTabs(); let index = $index; track index) {\n <li class=\"tabs__item\" role=\"presentation\">\n @if (tab.routerLink) {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tab.id\"\n [class]=\"getVirtualTabClasses(index)()\"\n [routerLink]=\"tab.routerLink\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n @if (tab.badge != null) {\n <span class=\"mc-number-badge mc-tabs__badge\" [class.mc-number-badge--accent]=\"isTabSelected(index)\">{{ tab.badge }}</span>\n }\n </button>\n } @else {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tab.id\"\n [class]=\"getVirtualTabClasses(index)()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickVirtualTab(index, tab)\"\n >\n @if (tab.icon) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n @if (tab.badge != null) {\n <span class=\"mc-number-badge mc-tabs__badge\" [class.mc-number-badge--accent]=\"isTabSelected(index)\">{{ tab.badge }}</span>\n }\n </button>\n }\n </li>\n } } @else { @for (tab of tabsArray(); let index = $index; track index) {\n <li class=\"tabs__item\" role=\"presentation\">\n @if (tab.routerLink()) {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tab.id()\"\n [class]=\"getTabClasses(index)()\"\n [routerLink]=\"tab.routerLink()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon()) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label() }}</span>\n </div>\n @if (tab.badge() != null) {\n <span class=\"mc-number-badge mc-tabs__badge\" [class.mc-number-badge--accent]=\"isTabSelected(index)\">{{ tab.badge() }}</span>\n }\n </button>\n } @else {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"tab.id()\"\n [class]=\"getTabClasses(index)()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon()) {\n <span class=\"tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n </span>\n }\n <div class=\"tabs__label\">\n <span>{{ tab.label() }}</span>\n </div>\n @if (tab.badge() != null) {\n <span class=\"mc-number-badge mc-tabs__badge\" [class.mc-number-badge--accent]=\"isTabSelected(index)\">{{ tab.badge() }}</span>\n }\n </button>\n }\n </li>\n } }\n </ul>\n\n @if (divider()) {\n <moz-divider></moz-divider>\n }\n</nav>\n", styles: [".mc-tabs,.tabs{height:3.5rem}.mc-tabs .mc-tabs__tab,.tabs .mc-tabs__tab,.mc-tabs .tabs__tab,.tabs .tabs__tab{font-size:var(--font-size-100, .875rem);height:2.5rem;padding-left:.75rem;padding-right:.75rem}.mc-tabs .mc-tabs__tab .mc-tabs__icon,.tabs .mc-tabs__tab .mc-tabs__icon,.mc-tabs .tabs__tab .mc-tabs__icon,.tabs .tabs__tab .mc-tabs__icon,.mc-tabs .mc-tabs__tab .tabs__icon,.tabs .mc-tabs__tab .tabs__icon,.mc-tabs .tabs__tab .tabs__icon,.tabs .tabs__tab .tabs__icon{height:1.5rem;width:1.5rem}.mc-tabs,.tabs{background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%}.mc-tabs__list,.tabs__list{list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:.5rem;padding:var(--tabs-list-padding, .5rem .25rem);overflow:scroll}@media screen and (min-width:681px){.mc-tabs__list,.tabs__list{overflow:hidden}}.mc-tabs--s{height:2.5rem}.mc-tabs--s .mc-tabs__tab,.mc-tabs--s .tabs__tab{font-size:var(--font-size-50, .75rem);height:1.5rem;padding-left:.5rem;padding-right:.5rem}.mc-tabs--s .mc-tabs__tab .mc-tabs__icon,.mc-tabs--s .tabs__tab .mc-tabs__icon,.mc-tabs--s .mc-tabs__tab .tabs__icon,.mc-tabs--s .tabs__tab .tabs__icon{height:1.25rem;width:1.25rem}.mc-tabs__tab,.tabs__tab{align-items:center;background:none;border:none;border-radius:var(--border-radius-s, .25rem);color:var(--tabs-color-text-default, #404040);cursor:pointer;display:flex;gap:.25rem;justify-content:center;outline:none;position:relative;text-decoration:none}.mc-tabs__tab:hover,.tabs__tab:hover{background-color:var(--tabs-color-background-hover, rgba(0, 0, 0, .05))}.mc-tabs__tab:focus-visible,.tabs__tab: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-tabs__tab--selected,.tabs__tab--selected{font-weight:var(--font-weight-semi-bold, 600);color:var(--tabs-color-text-selected, #006902);background-color:var(--tabs-color-background-selected, #ebf5de)}.mc-tabs__tab--selected:hover,.tabs__tab--selected:hover{background-color:var(--tabs-color-background-selected-hover, #c5e39e)}.mc-tabs__tab--disabled,.tabs__tab--disabled{color:var(--tabs-color-text-disabled, #b3b3b3);cursor:not-allowed}.mc-tabs__tab--disabled:hover,.tabs__tab--disabled:hover{background:none}.mc-tabs__tab--s{font-size:var(--font-size-50, .75rem);height:1.5rem;padding-left:.5rem;padding-right:.5rem}.mc-tabs__tab--s .mc-tabs__icon,.mc-tabs__tab--s .tabs__icon{height:1.25rem;width:1.25rem}.mc-tabs__tab--m{font-size:var(--font-size-100, .875rem);height:2.5rem;padding-left:.75rem;padding-right:.75rem}.mc-tabs__tab--m .mc-tabs__icon,.mc-tabs__tab--m .tabs__icon{height:1.5rem;width:1.5rem}.mc-tabs__label,.tabs__label{pointer-events:none;white-space:nowrap}.mc-tabs__icon,.tabs__icon{fill:currentcolor}.mc-tabs--centered .mc-tabs__list,.tabs--centered .mc-tabs__list,.mc-tabs--centered .tabs__list,.tabs--centered .tabs__list{justify-content:center}.mc-number-badge{color:var(--number-badge-color-text-standard, #ffffff);background-color:var(--number-badge-color-background-standard, #464e63);height:1rem;min-width:1rem;padding-inline:.125rem;font-size:var(--font-size-25, .625rem);border-radius:var(--border-radius-l, 1rem);font-weight:var(--font-weight-semi-bold, 600);display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;line-height:1}.mc-number-badge--m{height:1.5rem;min-width:1.5rem;padding-inline:.25rem;font-size:var(--font-size-50, .75rem)}.mc-number-badge--accent{color:var(--number-badge-color-text-accent, #ffffff);background-color:var(--number-badge-color-background-accent, #117f03)}.mc-number-badge--danger{color:var(--number-badge-color-text-danger, #ffffff);background-color:var(--number-badge-color-background-danger, #c61112)}.mc-number-badge--inverse{color:var(--number-badge-color-text-inverse, #464e63);background-color:var(--number-badge-color-background-inverse, #ffffff)}\n"] }]
|
|
1935
1935
|
}], ctorParameters: () => [], propDecorators: { tabs: [{
|
|
1936
1936
|
type: ContentChildren,
|
|
1937
1937
|
args: [MozTabComponent]
|
|
@@ -1987,7 +1987,7 @@ class MozTagComponent {
|
|
|
1987
1987
|
useExisting: forwardRef(() => MozTagComponent),
|
|
1988
1988
|
multi: true,
|
|
1989
1989
|
},
|
|
1990
|
-
], ngImport: i0, template: "<ng-template #labelTemplate>\n <ng-content />\n</ng-template>\n\n<!-- Selectable -->\n@if (type() === 'selectable') {\n<label class=\"tag\" [class]=\"classes()\" [attr.for]=\"id()\">\n <input\n type=\"checkbox\"\n class=\"tag__input\"\n [id]=\"id()\"\n [name]=\"name()\"\n [checked]=\"_value()\"\n [disabled]=\"disabled()\"\n (change)=\"onCheckboxChange($event)\"\n />\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</label>\n}\n<!-- Interactive -->\n@if (type() === 'interactive') {\n<button type=\"button\" class=\"tag\" [class]=\"classes()\" [disabled]=\"disabled()\">\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</button>\n}\n<!-- Contextualised -->\n@if (type() === 'contextualised') {\n<button type=\"button\" class=\"tag\" [class]=\"classes()\" [disabled]=\"disabled()\">\n <moz-number-badge\n appearance=\"inverse\"\n [label]=\"contextualisedNumber()\"\n [size]=\"size() === 'l' ? 'm' : 's'\"\n />\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</button>\n}\n<!-- Removable -->\n@if (type() === 'removable') {\n<span class=\"tag\" [class]=\"classes()\">\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n <button class=\"tag-removable__remove\" type=\"button\" (click)=\"onRemove()\">\n <CrossCircleFilled24 class=\"tag-removable__icon\" aria-hidden=\"true\" />\n <span class=\"tag-removable__text\">{{ removableLabel() }}</span>\n </button>\n</span>\n}\n<!-- Informative -->\n@if (type() === 'informative') {\n<span class=\"tag\" [class]=\"classes()\">\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</span>\n}\n", styles: [".mc-tag,.tag{font-size:var(--font-size-100, .875rem);border-radius:2rem;height:2rem;padding-inline:.75rem;box-sizing:border-box;display:inline-flex;gap:.25rem;align-items:center;background:var(--tag-color-background-standard, #ffffff);color:var(--tag-color-text-standard, #242938);border:var(--border-width-s, .0625rem) solid var(--tag-color-border-informative, #c9d0de)}.mc-tag--s,.tag--s{font-size:var(--font-size-50, .75rem);border-radius:1.5rem;height:1.5rem;padding-inline:.5rem}.mc-tag--l,.tag--l{font-size:var(--font-size-100, .875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem}.mc-tag.is-disabled,.is-disabled.tag,.mc-tag:disabled,.tag:disabled{cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none}.mc-tag.is-disabled .mc-badge,.is-disabled.tag .mc-badge,.mc-tag:disabled .mc-badge,.tag:disabled .mc-badge{color:currentcolor}.mc-tag-interactive,.tag-interactive{text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600)}.mc-tag-interactive:not(:disabled):hover,.tag-interactive:not(:disabled):hover{box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--tag-color-border-interactive, #8891aa)}.mc-tag-interactive:focus-visible,.tag-interactive: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-tag-contextualised,.tag-contextualised{text-decoration:none;outline:none;color:var(--tag-color-text-inverse, #ffffff);border:none;background:var(--tag-color-background-selected, #117f03);cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);padding-inline-end:1rem;padding-inline-start:.5rem}.mc-tag-contextualised:not(:disabled):hover,.tag-contextualised:not(:disabled):hover{background:var(--tag-color-background-selected-hover, #006902)}.mc-tag-contextualised:focus-visible,.tag-contextualised: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-tag-contextualised.mc-tag--s,.mc-tag--s.tag-contextualised,.mc-tag-contextualised.tag--s,.tag-contextualised.tag--s{padding-inline-end:.5rem;padding-inline-start:.25rem}.mc-tag-removable,.tag-removable{gap:.125rem;padding:0 0 0 1rem;background:var(--tag-color-background-inverse, #242938);color:var(--tag-color-text-inverse, #ffffff);border:none}.mc-tag-removable__remove,.tag-removable__remove{width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;padding:.25rem;display:block;cursor:pointer;border-radius:var(--border-radius-full, 100%)}.mc-tag-removable__remove:hover,.tag-removable__remove:hover{background:var(--tag-color-background-inverse-hover, #343b4c)}.mc-tag-removable__remove:focus-visible,.tag-removable__remove: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-tag-removable__icon,.tag-removable__icon{fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem}.mc-tag-removable__text,.tag-removable__text{height:0;width:0;overflow:hidden;position:absolute;top:-1000px;left:-1000px;text-align:left;opacity:0}.mc-tag-removable.mc-tag--s,.mc-tag--s.tag-removable,.mc-tag-removable.tag--s,.tag-removable.tag--s{padding:0 0 0 .5rem}.mc-tag-removable.mc-tag--s .mc-tag-removable__remove,.mc-tag--s.tag-removable .mc-tag-removable__remove,.mc-tag-removable.tag--s .mc-tag-removable__remove,.tag-removable.tag--s .mc-tag-removable__remove,.mc-tag-removable.mc-tag--s .tag-removable__remove,.mc-tag--s.tag-removable .tag-removable__remove,.mc-tag-removable.tag--s .tag-removable__remove,.tag-removable.tag--s .tag-removable__remove{width:1.5rem;height:1.5rem;padding:.125rem}.mc-tag-removable.mc-tag--s .mc-tag-removable__icon,.mc-tag--s.tag-removable .mc-tag-removable__icon,.mc-tag-removable.tag--s .mc-tag-removable__icon,.tag-removable.tag--s .mc-tag-removable__icon,.mc-tag-removable.mc-tag--s .tag-removable__icon,.mc-tag--s.tag-removable .tag-removable__icon,.mc-tag-removable.tag--s .tag-removable__icon,.tag-removable.tag--s .tag-removable__icon{width:1.25rem;height:1.25rem}.mc-tag-removable.mc-tag--l .mc-tag-removable__remove,.mc-tag--l.tag-removable .mc-tag-removable__remove,.mc-tag-removable.tag--l .mc-tag-removable__remove,.tag-removable.tag--l .mc-tag-removable__remove,.mc-tag-removable.mc-tag--l .tag-removable__remove,.mc-tag--l.tag-removable .tag-removable__remove,.mc-tag-removable.tag--l .tag-removable__remove,.tag-removable.tag--l .tag-removable__remove{width:2.5rem;height:2.5rem}.mc-tag-removable.mc-tag--l .mc-tag-removable__icon,.mc-tag--l.tag-removable .mc-tag-removable__icon,.mc-tag-removable.tag--l .mc-tag-removable__icon,.tag-removable.tag--l .mc-tag-removable__icon,.mc-tag-removable.mc-tag--l .tag-removable__icon,.mc-tag--l.tag-removable .tag-removable__icon,.mc-tag-removable.tag--l .tag-removable__icon,.tag-removable.tag--l .tag-removable__icon{width:2rem;height:2rem}.mc-tag-selectable,.tag-selectable{white-space:nowrap;cursor:pointer;padding-inline-start:.5rem;font-weight:var(--font-weight-semi-bold, 600)}.mc-tag-selectable:hover,.tag-selectable:hover{box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--tag-color-border-interactive, #8891aa)}.mc-tag-selectable:has(:focus-visible),.tag-selectable:has(: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-tag-selectable:has(:checked),.tag-selectable:has(:checked){background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none}.mc-tag-selectable:has(:checked):before,.tag-selectable:has(:checked):before{display:inline-block;content:\"\";height:1.25rem;width:1.25rem;background-color:var(--tag-color-text-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\") no-repeat center/contain}.mc-tag-selectable:has(:checked):not(:has(:disabled)):hover,.tag-selectable:has(:checked):not(:has(:disabled)):hover{background:var(--tag-color-background-selected-hover, #006902);border-color:var(--tag-color-background-selected-hover, #006902);box-shadow:none}.mc-tag-selectable:has(:disabled),.tag-selectable:has(:disabled){cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none}.mc-tag-selectable:has(:disabled):before,.tag-selectable:has(:disabled):before{-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\") no-repeat center/contain}.mc-tag-selectable .mc-tag__input,.tag-selectable .mc-tag__input,.mc-tag-selectable .tag__input,.tag-selectable .tag__input{height:0;width:0;overflow:hidden;position:absolute;top:-1000px;left:-1000px;text-align:left;opacity:0}.mc-tag-selectable .mc-tag__label,.tag-selectable .mc-tag__label,.mc-tag-selectable .tag__label,.tag-selectable .tag__label{-webkit-user-select:none;user-select:none}.mc-tag-selectable.mc-tag--s,.mc-tag--s.tag-selectable,.mc-tag-selectable.tag--s,.tag-selectable.tag--s{padding-inline-start:.25rem;gap:.125rem}.mc-tag-selectable.mc-tag--l,.mc-tag--l.tag-selectable,.mc-tag-selectable.tag--l,.tag-selectable.tag--l{padding-inline-start:.75rem}\n"], dependencies: [{ kind: "component", type: CrossCircleFilled24, selector: "CrossCircleFilled24", inputs: ["hostClass"] }, { kind: "component", type: MozNumberBadgeComponent, selector: "moz-number-badge", inputs: ["label", "appearance", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1990
|
+
], ngImport: i0, template: "<ng-template #labelTemplate>\n <ng-content />\n</ng-template>\n\n<!-- Selectable -->\n@if (type() === 'selectable') {\n<label class=\"tag\" [class]=\"classes()\" [attr.for]=\"id()\">\n <input\n type=\"checkbox\"\n class=\"tag__input\"\n [id]=\"id()\"\n [name]=\"name()\"\n [checked]=\"_value()\"\n [disabled]=\"disabled()\"\n (change)=\"onCheckboxChange($event)\"\n />\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</label>\n}\n<!-- Interactive -->\n@if (type() === 'interactive') {\n<button type=\"button\" class=\"tag\" [class]=\"classes()\" [disabled]=\"disabled()\">\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</button>\n}\n<!-- Contextualised -->\n@if (type() === 'contextualised') {\n<button type=\"button\" class=\"tag\" [class]=\"classes()\" [disabled]=\"disabled()\">\n <moz-number-badge\n appearance=\"inverse\"\n [label]=\"contextualisedNumber()\"\n [size]=\"size() === 'l' ? 'm' : 's'\"\n />\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</button>\n}\n<!-- Removable -->\n@if (type() === 'removable') {\n<span class=\"tag\" [class]=\"classes()\">\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n <button class=\"tag-removable__remove\" type=\"button\" (click)=\"onRemove()\">\n <CrossCircleFilled24 class=\"tag-removable__icon\" aria-hidden=\"true\" />\n <span class=\"tag-removable__text\">{{ removableLabel() }}</span>\n </button>\n</span>\n}\n<!-- Informative -->\n@if (type() === 'informative') {\n<span class=\"tag\" [class]=\"classes()\">\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</span>\n}\n", styles: [".mc-tag,.tag{font-size:var(--font-size-100, .875rem);border-radius:2rem;height:2rem;padding-inline:.75rem;box-sizing:border-box;display:inline-flex;gap:.25rem;align-items:center;background:var(--tag-color-background-standard, #ffffff);color:var(--tag-color-text-standard, #242938);border:var(--border-width-s, .0625rem) solid var(--tag-color-border-informative, #c9d0de);max-width:100%}.mc-tag__label,.tag__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mc-tag--s,.tag--s{font-size:var(--font-size-50, .75rem);border-radius:1.5rem;height:1.5rem;padding-inline:.5rem}.mc-tag--l,.tag--l{font-size:var(--font-size-100, .875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem}.mc-tag.is-disabled,.is-disabled.tag,.mc-tag:disabled,.tag:disabled{cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none}.mc-tag.is-disabled .mc-badge,.is-disabled.tag .mc-badge,.mc-tag:disabled .mc-badge,.tag:disabled .mc-badge{color:currentcolor}.mc-tag-interactive,.tag-interactive{text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600)}.mc-tag-interactive:not(:disabled):hover,.tag-interactive:not(:disabled):hover{box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--tag-color-border-interactive, #8891aa)}.mc-tag-interactive:focus-visible,.tag-interactive: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-tag-contextualised,.tag-contextualised{text-decoration:none;outline:none;color:var(--tag-color-text-inverse, #ffffff);border:none;background:var(--tag-color-background-selected, #117f03);cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);padding-inline-end:1rem;padding-inline-start:.5rem}.mc-tag-contextualised:not(:disabled):hover,.tag-contextualised:not(:disabled):hover{background:var(--tag-color-background-selected-hover, #006902)}.mc-tag-contextualised:focus-visible,.tag-contextualised: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-tag-contextualised.mc-tag--s,.mc-tag--s.tag-contextualised,.mc-tag-contextualised.tag--s,.tag-contextualised.tag--s{padding-inline-end:.5rem;padding-inline-start:.25rem}.mc-tag-removable,.tag-removable{gap:.125rem;padding:0 0 0 1rem;background:var(--tag-color-background-inverse, #242938);color:var(--tag-color-text-inverse, #ffffff);border:none}.mc-tag-removable__remove,.tag-removable__remove{width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;padding:.25rem;display:block;cursor:pointer;border-radius:var(--border-radius-full, 100%)}.mc-tag-removable__remove:hover,.tag-removable__remove:hover{background:var(--tag-color-background-inverse-hover, #343b4c)}.mc-tag-removable__remove:focus-visible,.tag-removable__remove: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-tag-removable__icon,.tag-removable__icon{fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem}.mc-tag-removable__text,.tag-removable__text{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-tag-removable.mc-tag--s,.mc-tag--s.tag-removable,.mc-tag-removable.tag--s,.tag-removable.tag--s{padding:0 0 0 .5rem}.mc-tag-removable.mc-tag--s .mc-tag-removable__remove,.mc-tag--s.tag-removable .mc-tag-removable__remove,.mc-tag-removable.tag--s .mc-tag-removable__remove,.tag-removable.tag--s .mc-tag-removable__remove,.mc-tag-removable.mc-tag--s .tag-removable__remove,.mc-tag--s.tag-removable .tag-removable__remove,.mc-tag-removable.tag--s .tag-removable__remove,.tag-removable.tag--s .tag-removable__remove{width:1.5rem;height:1.5rem;padding:.125rem}.mc-tag-removable.mc-tag--s .mc-tag-removable__icon,.mc-tag--s.tag-removable .mc-tag-removable__icon,.mc-tag-removable.tag--s .mc-tag-removable__icon,.tag-removable.tag--s .mc-tag-removable__icon,.mc-tag-removable.mc-tag--s .tag-removable__icon,.mc-tag--s.tag-removable .tag-removable__icon,.mc-tag-removable.tag--s .tag-removable__icon,.tag-removable.tag--s .tag-removable__icon{width:1.25rem;height:1.25rem}.mc-tag-removable.mc-tag--l .mc-tag-removable__remove,.mc-tag--l.tag-removable .mc-tag-removable__remove,.mc-tag-removable.tag--l .mc-tag-removable__remove,.tag-removable.tag--l .mc-tag-removable__remove,.mc-tag-removable.mc-tag--l .tag-removable__remove,.mc-tag--l.tag-removable .tag-removable__remove,.mc-tag-removable.tag--l .tag-removable__remove,.tag-removable.tag--l .tag-removable__remove{width:2.5rem;height:2.5rem}.mc-tag-removable.mc-tag--l .mc-tag-removable__icon,.mc-tag--l.tag-removable .mc-tag-removable__icon,.mc-tag-removable.tag--l .mc-tag-removable__icon,.tag-removable.tag--l .mc-tag-removable__icon,.mc-tag-removable.mc-tag--l .tag-removable__icon,.mc-tag--l.tag-removable .tag-removable__icon,.mc-tag-removable.tag--l .tag-removable__icon,.tag-removable.tag--l .tag-removable__icon{width:2rem;height:2rem}.mc-tag-selectable,.tag-selectable{white-space:nowrap;cursor:pointer;padding-inline-start:.5rem;font-weight:var(--font-weight-semi-bold, 600)}.mc-tag-selectable:hover,.tag-selectable:hover{box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--tag-color-border-interactive, #8891aa)}.mc-tag-selectable:has(:focus-visible),.tag-selectable:has(: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-tag-selectable:has(:checked),.tag-selectable:has(:checked){background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none}.mc-tag-selectable:has(:checked):before,.tag-selectable:has(:checked):before{display:inline-block;content:\"\";height:1.25rem;width:1.25rem;background-color:var(--tag-color-text-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\") no-repeat center/contain}.mc-tag-selectable:has(:checked):not(:has(:disabled)):hover,.tag-selectable:has(:checked):not(:has(:disabled)):hover{background:var(--tag-color-background-selected-hover, #006902);border-color:var(--tag-color-background-selected-hover, #006902);box-shadow:none}.mc-tag-selectable:has(:disabled),.tag-selectable:has(:disabled){cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none}.mc-tag-selectable:has(:disabled):before,.tag-selectable:has(:disabled):before{-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\") no-repeat center/contain}.mc-tag-selectable .mc-tag__input,.tag-selectable .mc-tag__input,.mc-tag-selectable .tag__input,.tag-selectable .tag__input{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-tag-selectable .mc-tag__label,.tag-selectable .mc-tag__label,.mc-tag-selectable .tag__label,.tag-selectable .tag__label{-webkit-user-select:none;user-select:none}.mc-tag-selectable.mc-tag--s,.mc-tag--s.tag-selectable,.mc-tag-selectable.tag--s,.tag-selectable.tag--s{padding-inline-start:.25rem;gap:.125rem}.mc-tag-selectable.mc-tag--l,.mc-tag--l.tag-selectable,.mc-tag-selectable.tag--l,.tag-selectable.tag--l{padding-inline-start:.75rem}\n"], dependencies: [{ kind: "component", type: CrossCircleFilled24, selector: "CrossCircleFilled24", inputs: ["hostClass"] }, { kind: "component", type: MozNumberBadgeComponent, selector: "moz-number-badge", inputs: ["label", "appearance", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1991
1991
|
}
|
|
1992
1992
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozTagComponent, decorators: [{
|
|
1993
1993
|
type: Component,
|
|
@@ -1997,7 +1997,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1997
1997
|
useExisting: forwardRef(() => MozTagComponent),
|
|
1998
1998
|
multi: true,
|
|
1999
1999
|
},
|
|
2000
|
-
], template: "<ng-template #labelTemplate>\n <ng-content />\n</ng-template>\n\n<!-- Selectable -->\n@if (type() === 'selectable') {\n<label class=\"tag\" [class]=\"classes()\" [attr.for]=\"id()\">\n <input\n type=\"checkbox\"\n class=\"tag__input\"\n [id]=\"id()\"\n [name]=\"name()\"\n [checked]=\"_value()\"\n [disabled]=\"disabled()\"\n (change)=\"onCheckboxChange($event)\"\n />\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</label>\n}\n<!-- Interactive -->\n@if (type() === 'interactive') {\n<button type=\"button\" class=\"tag\" [class]=\"classes()\" [disabled]=\"disabled()\">\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</button>\n}\n<!-- Contextualised -->\n@if (type() === 'contextualised') {\n<button type=\"button\" class=\"tag\" [class]=\"classes()\" [disabled]=\"disabled()\">\n <moz-number-badge\n appearance=\"inverse\"\n [label]=\"contextualisedNumber()\"\n [size]=\"size() === 'l' ? 'm' : 's'\"\n />\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</button>\n}\n<!-- Removable -->\n@if (type() === 'removable') {\n<span class=\"tag\" [class]=\"classes()\">\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n <button class=\"tag-removable__remove\" type=\"button\" (click)=\"onRemove()\">\n <CrossCircleFilled24 class=\"tag-removable__icon\" aria-hidden=\"true\" />\n <span class=\"tag-removable__text\">{{ removableLabel() }}</span>\n </button>\n</span>\n}\n<!-- Informative -->\n@if (type() === 'informative') {\n<span class=\"tag\" [class]=\"classes()\">\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</span>\n}\n", styles: [".mc-tag,.tag{font-size:var(--font-size-100, .875rem);border-radius:2rem;height:2rem;padding-inline:.75rem;box-sizing:border-box;display:inline-flex;gap:.25rem;align-items:center;background:var(--tag-color-background-standard, #ffffff);color:var(--tag-color-text-standard, #242938);border:var(--border-width-s, .0625rem) solid var(--tag-color-border-informative, #c9d0de)}.mc-tag--s,.tag--s{font-size:var(--font-size-50, .75rem);border-radius:1.5rem;height:1.5rem;padding-inline:.5rem}.mc-tag--l,.tag--l{font-size:var(--font-size-100, .875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem}.mc-tag.is-disabled,.is-disabled.tag,.mc-tag:disabled,.tag:disabled{cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none}.mc-tag.is-disabled .mc-badge,.is-disabled.tag .mc-badge,.mc-tag:disabled .mc-badge,.tag:disabled .mc-badge{color:currentcolor}.mc-tag-interactive,.tag-interactive{text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600)}.mc-tag-interactive:not(:disabled):hover,.tag-interactive:not(:disabled):hover{box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--tag-color-border-interactive, #8891aa)}.mc-tag-interactive:focus-visible,.tag-interactive: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-tag-contextualised,.tag-contextualised{text-decoration:none;outline:none;color:var(--tag-color-text-inverse, #ffffff);border:none;background:var(--tag-color-background-selected, #117f03);cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);padding-inline-end:1rem;padding-inline-start:.5rem}.mc-tag-contextualised:not(:disabled):hover,.tag-contextualised:not(:disabled):hover{background:var(--tag-color-background-selected-hover, #006902)}.mc-tag-contextualised:focus-visible,.tag-contextualised: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-tag-contextualised.mc-tag--s,.mc-tag--s.tag-contextualised,.mc-tag-contextualised.tag--s,.tag-contextualised.tag--s{padding-inline-end:.5rem;padding-inline-start:.25rem}.mc-tag-removable,.tag-removable{gap:.125rem;padding:0 0 0 1rem;background:var(--tag-color-background-inverse, #242938);color:var(--tag-color-text-inverse, #ffffff);border:none}.mc-tag-removable__remove,.tag-removable__remove{width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;padding:.25rem;display:block;cursor:pointer;border-radius:var(--border-radius-full, 100%)}.mc-tag-removable__remove:hover,.tag-removable__remove:hover{background:var(--tag-color-background-inverse-hover, #343b4c)}.mc-tag-removable__remove:focus-visible,.tag-removable__remove: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-tag-removable__icon,.tag-removable__icon{fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem}.mc-tag-removable__text,.tag-removable__text{height:0;width:0;overflow:hidden;position:absolute;top:-1000px;left:-1000px;text-align:left;opacity:0}.mc-tag-removable.mc-tag--s,.mc-tag--s.tag-removable,.mc-tag-removable.tag--s,.tag-removable.tag--s{padding:0 0 0 .5rem}.mc-tag-removable.mc-tag--s .mc-tag-removable__remove,.mc-tag--s.tag-removable .mc-tag-removable__remove,.mc-tag-removable.tag--s .mc-tag-removable__remove,.tag-removable.tag--s .mc-tag-removable__remove,.mc-tag-removable.mc-tag--s .tag-removable__remove,.mc-tag--s.tag-removable .tag-removable__remove,.mc-tag-removable.tag--s .tag-removable__remove,.tag-removable.tag--s .tag-removable__remove{width:1.5rem;height:1.5rem;padding:.125rem}.mc-tag-removable.mc-tag--s .mc-tag-removable__icon,.mc-tag--s.tag-removable .mc-tag-removable__icon,.mc-tag-removable.tag--s .mc-tag-removable__icon,.tag-removable.tag--s .mc-tag-removable__icon,.mc-tag-removable.mc-tag--s .tag-removable__icon,.mc-tag--s.tag-removable .tag-removable__icon,.mc-tag-removable.tag--s .tag-removable__icon,.tag-removable.tag--s .tag-removable__icon{width:1.25rem;height:1.25rem}.mc-tag-removable.mc-tag--l .mc-tag-removable__remove,.mc-tag--l.tag-removable .mc-tag-removable__remove,.mc-tag-removable.tag--l .mc-tag-removable__remove,.tag-removable.tag--l .mc-tag-removable__remove,.mc-tag-removable.mc-tag--l .tag-removable__remove,.mc-tag--l.tag-removable .tag-removable__remove,.mc-tag-removable.tag--l .tag-removable__remove,.tag-removable.tag--l .tag-removable__remove{width:2.5rem;height:2.5rem}.mc-tag-removable.mc-tag--l .mc-tag-removable__icon,.mc-tag--l.tag-removable .mc-tag-removable__icon,.mc-tag-removable.tag--l .mc-tag-removable__icon,.tag-removable.tag--l .mc-tag-removable__icon,.mc-tag-removable.mc-tag--l .tag-removable__icon,.mc-tag--l.tag-removable .tag-removable__icon,.mc-tag-removable.tag--l .tag-removable__icon,.tag-removable.tag--l .tag-removable__icon{width:2rem;height:2rem}.mc-tag-selectable,.tag-selectable{white-space:nowrap;cursor:pointer;padding-inline-start:.5rem;font-weight:var(--font-weight-semi-bold, 600)}.mc-tag-selectable:hover,.tag-selectable:hover{box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--tag-color-border-interactive, #8891aa)}.mc-tag-selectable:has(:focus-visible),.tag-selectable:has(: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-tag-selectable:has(:checked),.tag-selectable:has(:checked){background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none}.mc-tag-selectable:has(:checked):before,.tag-selectable:has(:checked):before{display:inline-block;content:\"\";height:1.25rem;width:1.25rem;background-color:var(--tag-color-text-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\") no-repeat center/contain}.mc-tag-selectable:has(:checked):not(:has(:disabled)):hover,.tag-selectable:has(:checked):not(:has(:disabled)):hover{background:var(--tag-color-background-selected-hover, #006902);border-color:var(--tag-color-background-selected-hover, #006902);box-shadow:none}.mc-tag-selectable:has(:disabled),.tag-selectable:has(:disabled){cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none}.mc-tag-selectable:has(:disabled):before,.tag-selectable:has(:disabled):before{-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\") no-repeat center/contain}.mc-tag-selectable .mc-tag__input,.tag-selectable .mc-tag__input,.mc-tag-selectable .tag__input,.tag-selectable .tag__input{height:0;width:0;overflow:hidden;position:absolute;top:-1000px;left:-1000px;text-align:left;opacity:0}.mc-tag-selectable .mc-tag__label,.tag-selectable .mc-tag__label,.mc-tag-selectable .tag__label,.tag-selectable .tag__label{-webkit-user-select:none;user-select:none}.mc-tag-selectable.mc-tag--s,.mc-tag--s.tag-selectable,.mc-tag-selectable.tag--s,.tag-selectable.tag--s{padding-inline-start:.25rem;gap:.125rem}.mc-tag-selectable.mc-tag--l,.mc-tag--l.tag-selectable,.mc-tag-selectable.tag--l,.tag-selectable.tag--l{padding-inline-start:.75rem}\n"] }]
|
|
2000
|
+
], template: "<ng-template #labelTemplate>\n <ng-content />\n</ng-template>\n\n<!-- Selectable -->\n@if (type() === 'selectable') {\n<label class=\"tag\" [class]=\"classes()\" [attr.for]=\"id()\">\n <input\n type=\"checkbox\"\n class=\"tag__input\"\n [id]=\"id()\"\n [name]=\"name()\"\n [checked]=\"_value()\"\n [disabled]=\"disabled()\"\n (change)=\"onCheckboxChange($event)\"\n />\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</label>\n}\n<!-- Interactive -->\n@if (type() === 'interactive') {\n<button type=\"button\" class=\"tag\" [class]=\"classes()\" [disabled]=\"disabled()\">\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</button>\n}\n<!-- Contextualised -->\n@if (type() === 'contextualised') {\n<button type=\"button\" class=\"tag\" [class]=\"classes()\" [disabled]=\"disabled()\">\n <moz-number-badge\n appearance=\"inverse\"\n [label]=\"contextualisedNumber()\"\n [size]=\"size() === 'l' ? 'm' : 's'\"\n />\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</button>\n}\n<!-- Removable -->\n@if (type() === 'removable') {\n<span class=\"tag\" [class]=\"classes()\">\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n <button class=\"tag-removable__remove\" type=\"button\" (click)=\"onRemove()\">\n <CrossCircleFilled24 class=\"tag-removable__icon\" aria-hidden=\"true\" />\n <span class=\"tag-removable__text\">{{ removableLabel() }}</span>\n </button>\n</span>\n}\n<!-- Informative -->\n@if (type() === 'informative') {\n<span class=\"tag\" [class]=\"classes()\">\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</span>\n}\n", styles: [".mc-tag,.tag{font-size:var(--font-size-100, .875rem);border-radius:2rem;height:2rem;padding-inline:.75rem;box-sizing:border-box;display:inline-flex;gap:.25rem;align-items:center;background:var(--tag-color-background-standard, #ffffff);color:var(--tag-color-text-standard, #242938);border:var(--border-width-s, .0625rem) solid var(--tag-color-border-informative, #c9d0de);max-width:100%}.mc-tag__label,.tag__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mc-tag--s,.tag--s{font-size:var(--font-size-50, .75rem);border-radius:1.5rem;height:1.5rem;padding-inline:.5rem}.mc-tag--l,.tag--l{font-size:var(--font-size-100, .875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem}.mc-tag.is-disabled,.is-disabled.tag,.mc-tag:disabled,.tag:disabled{cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none}.mc-tag.is-disabled .mc-badge,.is-disabled.tag .mc-badge,.mc-tag:disabled .mc-badge,.tag:disabled .mc-badge{color:currentcolor}.mc-tag-interactive,.tag-interactive{text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600)}.mc-tag-interactive:not(:disabled):hover,.tag-interactive:not(:disabled):hover{box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--tag-color-border-interactive, #8891aa)}.mc-tag-interactive:focus-visible,.tag-interactive: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-tag-contextualised,.tag-contextualised{text-decoration:none;outline:none;color:var(--tag-color-text-inverse, #ffffff);border:none;background:var(--tag-color-background-selected, #117f03);cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);padding-inline-end:1rem;padding-inline-start:.5rem}.mc-tag-contextualised:not(:disabled):hover,.tag-contextualised:not(:disabled):hover{background:var(--tag-color-background-selected-hover, #006902)}.mc-tag-contextualised:focus-visible,.tag-contextualised: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-tag-contextualised.mc-tag--s,.mc-tag--s.tag-contextualised,.mc-tag-contextualised.tag--s,.tag-contextualised.tag--s{padding-inline-end:.5rem;padding-inline-start:.25rem}.mc-tag-removable,.tag-removable{gap:.125rem;padding:0 0 0 1rem;background:var(--tag-color-background-inverse, #242938);color:var(--tag-color-text-inverse, #ffffff);border:none}.mc-tag-removable__remove,.tag-removable__remove{width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;padding:.25rem;display:block;cursor:pointer;border-radius:var(--border-radius-full, 100%)}.mc-tag-removable__remove:hover,.tag-removable__remove:hover{background:var(--tag-color-background-inverse-hover, #343b4c)}.mc-tag-removable__remove:focus-visible,.tag-removable__remove: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-tag-removable__icon,.tag-removable__icon{fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem}.mc-tag-removable__text,.tag-removable__text{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-tag-removable.mc-tag--s,.mc-tag--s.tag-removable,.mc-tag-removable.tag--s,.tag-removable.tag--s{padding:0 0 0 .5rem}.mc-tag-removable.mc-tag--s .mc-tag-removable__remove,.mc-tag--s.tag-removable .mc-tag-removable__remove,.mc-tag-removable.tag--s .mc-tag-removable__remove,.tag-removable.tag--s .mc-tag-removable__remove,.mc-tag-removable.mc-tag--s .tag-removable__remove,.mc-tag--s.tag-removable .tag-removable__remove,.mc-tag-removable.tag--s .tag-removable__remove,.tag-removable.tag--s .tag-removable__remove{width:1.5rem;height:1.5rem;padding:.125rem}.mc-tag-removable.mc-tag--s .mc-tag-removable__icon,.mc-tag--s.tag-removable .mc-tag-removable__icon,.mc-tag-removable.tag--s .mc-tag-removable__icon,.tag-removable.tag--s .mc-tag-removable__icon,.mc-tag-removable.mc-tag--s .tag-removable__icon,.mc-tag--s.tag-removable .tag-removable__icon,.mc-tag-removable.tag--s .tag-removable__icon,.tag-removable.tag--s .tag-removable__icon{width:1.25rem;height:1.25rem}.mc-tag-removable.mc-tag--l .mc-tag-removable__remove,.mc-tag--l.tag-removable .mc-tag-removable__remove,.mc-tag-removable.tag--l .mc-tag-removable__remove,.tag-removable.tag--l .mc-tag-removable__remove,.mc-tag-removable.mc-tag--l .tag-removable__remove,.mc-tag--l.tag-removable .tag-removable__remove,.mc-tag-removable.tag--l .tag-removable__remove,.tag-removable.tag--l .tag-removable__remove{width:2.5rem;height:2.5rem}.mc-tag-removable.mc-tag--l .mc-tag-removable__icon,.mc-tag--l.tag-removable .mc-tag-removable__icon,.mc-tag-removable.tag--l .mc-tag-removable__icon,.tag-removable.tag--l .mc-tag-removable__icon,.mc-tag-removable.mc-tag--l .tag-removable__icon,.mc-tag--l.tag-removable .tag-removable__icon,.mc-tag-removable.tag--l .tag-removable__icon,.tag-removable.tag--l .tag-removable__icon{width:2rem;height:2rem}.mc-tag-selectable,.tag-selectable{white-space:nowrap;cursor:pointer;padding-inline-start:.5rem;font-weight:var(--font-weight-semi-bold, 600)}.mc-tag-selectable:hover,.tag-selectable:hover{box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--tag-color-border-interactive, #8891aa)}.mc-tag-selectable:has(:focus-visible),.tag-selectable:has(: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-tag-selectable:has(:checked),.tag-selectable:has(:checked){background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none}.mc-tag-selectable:has(:checked):before,.tag-selectable:has(:checked):before{display:inline-block;content:\"\";height:1.25rem;width:1.25rem;background-color:var(--tag-color-text-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\") no-repeat center/contain}.mc-tag-selectable:has(:checked):not(:has(:disabled)):hover,.tag-selectable:has(:checked):not(:has(:disabled)):hover{background:var(--tag-color-background-selected-hover, #006902);border-color:var(--tag-color-background-selected-hover, #006902);box-shadow:none}.mc-tag-selectable:has(:disabled),.tag-selectable:has(:disabled){cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none}.mc-tag-selectable:has(:disabled):before,.tag-selectable:has(:disabled):before{-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\") no-repeat center/contain}.mc-tag-selectable .mc-tag__input,.tag-selectable .mc-tag__input,.mc-tag-selectable .tag__input,.tag-selectable .tag__input{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-tag-selectable .mc-tag__label,.tag-selectable .mc-tag__label,.mc-tag-selectable .tag__label,.tag-selectable .tag__label{-webkit-user-select:none;user-select:none}.mc-tag-selectable.mc-tag--s,.mc-tag--s.tag-selectable,.mc-tag-selectable.tag--s,.tag-selectable.tag--s{padding-inline-start:.25rem;gap:.125rem}.mc-tag-selectable.mc-tag--l,.mc-tag--l.tag-selectable,.mc-tag-selectable.tag--l,.tag-selectable.tag--l{padding-inline-start:.75rem}\n"] }]
|
|
2001
2001
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], contextualisedNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextualisedNumber", required: false }] }], removableLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removableLabel", required: false }] }], removeTag: [{ type: i0.Output, args: ["removeTag"] }] } });
|
|
2002
2002
|
|
|
2003
2003
|
/**
|
|
@@ -2299,7 +2299,7 @@ class MozTextInput {
|
|
|
2299
2299
|
useExisting: forwardRef(() => MozTextInput),
|
|
2300
2300
|
multi: true,
|
|
2301
2301
|
},
|
|
2302
|
-
], ngImport: i0, template: '', isInline: true, styles: [".mc-controls-options,.controls-options{align-items:center;display:inline-flex;justify-content:center;gap:.5rem}.mc-controls-options__button,.controls-options__button{background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--border-radius-full, 100%)}.mc-controls-options__button:hover .mc-controls-options__icon,.controls-options__button:hover .mc-controls-options__icon,.mc-controls-options__button:hover .controls-options__icon,.controls-options__button:hover .controls-options__icon{fill:var(--forms-color-icon-clear-hover, #4d4d4d)}.mc-controls-options__button:focus-visible,.controls-options__button: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-controls-options__icon,.controls-options__icon{fill:var(--forms-color-icon-clear, #666666);color:var(--forms-color-icon-clear, #666666)}.mc-controls-options__button,.controls-options__button,.mc-controls-options__icon,.controls-options__icon{height:1.5rem;width:1.5rem}.mc-controls-options__label,.controls-options__label{
|
|
2302
|
+
], ngImport: i0, template: '', isInline: true, styles: [".mc-controls-options,.controls-options{align-items:center;display:inline-flex;justify-content:center;gap:.5rem}.mc-controls-options__button,.controls-options__button{background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--border-radius-full, 100%)}.mc-controls-options__button:hover .mc-controls-options__icon,.controls-options__button:hover .mc-controls-options__icon,.mc-controls-options__button:hover .controls-options__icon,.controls-options__button:hover .controls-options__icon{fill:var(--forms-color-icon-clear-hover, #4d4d4d)}.mc-controls-options__button:focus-visible,.controls-options__button: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-controls-options__icon,.controls-options__icon{fill:var(--forms-color-icon-clear, #666666);color:var(--forms-color-icon-clear, #666666)}.mc-controls-options__button,.controls-options__button,.mc-controls-options__icon,.controls-options__icon{height:1.5rem;width:1.5rem}.mc-controls-options__label,.controls-options__label{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-controls-options__unit{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-text-input,.text-input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-text-input__control,.text-input__control{background-color:transparent;border-width:0;font-family:inherit;outline:none}.mc-text-input__control[type=number]::-webkit-inner-spin-button,[type=number].text-input__control::-webkit-inner-spin-button,.mc-text-input__control[type=number]::-webkit-outer-spin-button,[type=number].text-input__control::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input__control[type=number],[type=number].text-input__control{appearance:textfield}.mc-text-input__control[type=search]::-webkit-search-decoration,[type=search].text-input__control::-webkit-search-decoration,.mc-text-input__control[type=search]::-webkit-search-cancel-button,[type=search].text-input__control::-webkit-search-cancel-button{appearance:none}.mc-text-input__control,.text-input__control{padding:.75rem .6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);flex-grow:1;min-width:0}.mc-text-input__control:placeholder-shown,.text-input__control:placeholder-shown{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-text-input__control::placeholder,.text-input__control::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-text-input__addon,.text-input__addon{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-text-input__icon,.text-input__icon{fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0}.mc-text-input:focus-within,.text-input:focus-within{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-text-input:hover:not(:focus-within),.text-input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-text-input:has(input:disabled),.text-input:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-text-input:has(input[readonly]),.text-input:has(input[readonly]){border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-text-input:has(.mc-text-input__icon,.text-input__icon),.text-input:has(.mc-text-input__icon,.text-input__icon),.mc-text-input:has(.mc-text-input__addon,.text-input__addon),.text-input:has(.mc-text-input__addon,.text-input__addon){padding-inline-start:.6875rem}.mc-text-input:has(.mc-text-input__icon,.text-input__icon) .mc-text-input__control,.text-input:has(.mc-text-input__icon,.text-input__icon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__icon,.text-input__icon) .text-input__control,.text-input:has(.mc-text-input__icon,.text-input__icon) .text-input__control,.mc-text-input:has(.mc-text-input__addon,.text-input__addon) .mc-text-input__control,.text-input:has(.mc-text-input__addon,.text-input__addon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon,.text-input__addon) .text-input__control,.text-input:has(.mc-text-input__addon,.text-input__addon) .text-input__control{padding-inline-start:0}.mc-text-input:has(.mc-controls-options,.controls-options),.text-input:has(.mc-controls-options,.controls-options),.mc-text-input:has(.mc-text-input__addon,.text-input__addon),.text-input:has(.mc-text-input__addon,.text-input__addon){padding-inline-end:.6875rem}.mc-text-input:has(.mc-controls-options,.controls-options) .mc-text-input__control,.text-input:has(.mc-controls-options,.controls-options) .mc-text-input__control,.mc-text-input:has(.mc-controls-options,.controls-options) .text-input__control,.text-input:has(.mc-controls-options,.controls-options) .text-input__control,.mc-text-input:has(.mc-text-input__addon,.text-input__addon) .mc-text-input__control,.text-input:has(.mc-text-input__addon,.text-input__addon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon,.text-input__addon) .text-input__control,.text-input:has(.mc-text-input__addon,.text-input__addon) .text-input__control{padding-inline-end:0}.mc-text-input--s,.text-input--s{height:2rem}.mc-text-input--s .mc-text-input__control,.text-input--s .mc-text-input__control,.mc-text-input--s .text-input__control,.text-input--s .text-input__control{padding:.375rem .6875rem;font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3)}.mc-text-input--s:has(.mc-text-input__icon,.text-input__icon),.text-input--s:has(.mc-text-input__icon,.text-input__icon){padding-inline-start:.4375rem}.mc-text-input--s:has(.mc-controls-options,.controls-options),.text-input--s:has(.mc-controls-options,.controls-options){padding-inline-end:.4375rem}.mc-text-input.is-invalid,.is-invalid.text-input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-text-input.is-invalid:hover:not(:focus-within),.is-invalid.text-input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-text-input *,.text-input *{box-sizing:border-box}.text-input__icon:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2303
2303
|
}
|
|
2304
2304
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozTextInput, decorators: [{
|
|
2305
2305
|
type: Component,
|
|
@@ -2316,7 +2316,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
2316
2316
|
'[disabled]': 'isDisabledState()',
|
|
2317
2317
|
'(input)': 'onInput($event)',
|
|
2318
2318
|
'(blur)': 'onTouched()',
|
|
2319
|
-
}, styles: [".mc-controls-options,.controls-options{align-items:center;display:inline-flex;justify-content:center;gap:.5rem}.mc-controls-options__button,.controls-options__button{background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--border-radius-full, 100%)}.mc-controls-options__button:hover .mc-controls-options__icon,.controls-options__button:hover .mc-controls-options__icon,.mc-controls-options__button:hover .controls-options__icon,.controls-options__button:hover .controls-options__icon{fill:var(--forms-color-icon-clear-hover, #4d4d4d)}.mc-controls-options__button:focus-visible,.controls-options__button: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-controls-options__icon,.controls-options__icon{fill:var(--forms-color-icon-clear, #666666);color:var(--forms-color-icon-clear, #666666)}.mc-controls-options__button,.controls-options__button,.mc-controls-options__icon,.controls-options__icon{height:1.5rem;width:1.5rem}.mc-controls-options__label,.controls-options__label{
|
|
2319
|
+
}, styles: [".mc-controls-options,.controls-options{align-items:center;display:inline-flex;justify-content:center;gap:.5rem}.mc-controls-options__button,.controls-options__button{background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--border-radius-full, 100%)}.mc-controls-options__button:hover .mc-controls-options__icon,.controls-options__button:hover .mc-controls-options__icon,.mc-controls-options__button:hover .controls-options__icon,.controls-options__button:hover .controls-options__icon{fill:var(--forms-color-icon-clear-hover, #4d4d4d)}.mc-controls-options__button:focus-visible,.controls-options__button: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-controls-options__icon,.controls-options__icon{fill:var(--forms-color-icon-clear, #666666);color:var(--forms-color-icon-clear, #666666)}.mc-controls-options__button,.controls-options__button,.mc-controls-options__icon,.controls-options__icon{height:1.5rem;width:1.5rem}.mc-controls-options__label,.controls-options__label{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-controls-options__unit{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-text-input,.text-input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-text-input__control,.text-input__control{background-color:transparent;border-width:0;font-family:inherit;outline:none}.mc-text-input__control[type=number]::-webkit-inner-spin-button,[type=number].text-input__control::-webkit-inner-spin-button,.mc-text-input__control[type=number]::-webkit-outer-spin-button,[type=number].text-input__control::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input__control[type=number],[type=number].text-input__control{appearance:textfield}.mc-text-input__control[type=search]::-webkit-search-decoration,[type=search].text-input__control::-webkit-search-decoration,.mc-text-input__control[type=search]::-webkit-search-cancel-button,[type=search].text-input__control::-webkit-search-cancel-button{appearance:none}.mc-text-input__control,.text-input__control{padding:.75rem .6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);flex-grow:1;min-width:0}.mc-text-input__control:placeholder-shown,.text-input__control:placeholder-shown{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-text-input__control::placeholder,.text-input__control::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-text-input__addon,.text-input__addon{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-text-input__icon,.text-input__icon{fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0}.mc-text-input:focus-within,.text-input:focus-within{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-text-input:hover:not(:focus-within),.text-input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-text-input:has(input:disabled),.text-input:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-text-input:has(input[readonly]),.text-input:has(input[readonly]){border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-text-input:has(.mc-text-input__icon,.text-input__icon),.text-input:has(.mc-text-input__icon,.text-input__icon),.mc-text-input:has(.mc-text-input__addon,.text-input__addon),.text-input:has(.mc-text-input__addon,.text-input__addon){padding-inline-start:.6875rem}.mc-text-input:has(.mc-text-input__icon,.text-input__icon) .mc-text-input__control,.text-input:has(.mc-text-input__icon,.text-input__icon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__icon,.text-input__icon) .text-input__control,.text-input:has(.mc-text-input__icon,.text-input__icon) .text-input__control,.mc-text-input:has(.mc-text-input__addon,.text-input__addon) .mc-text-input__control,.text-input:has(.mc-text-input__addon,.text-input__addon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon,.text-input__addon) .text-input__control,.text-input:has(.mc-text-input__addon,.text-input__addon) .text-input__control{padding-inline-start:0}.mc-text-input:has(.mc-controls-options,.controls-options),.text-input:has(.mc-controls-options,.controls-options),.mc-text-input:has(.mc-text-input__addon,.text-input__addon),.text-input:has(.mc-text-input__addon,.text-input__addon){padding-inline-end:.6875rem}.mc-text-input:has(.mc-controls-options,.controls-options) .mc-text-input__control,.text-input:has(.mc-controls-options,.controls-options) .mc-text-input__control,.mc-text-input:has(.mc-controls-options,.controls-options) .text-input__control,.text-input:has(.mc-controls-options,.controls-options) .text-input__control,.mc-text-input:has(.mc-text-input__addon,.text-input__addon) .mc-text-input__control,.text-input:has(.mc-text-input__addon,.text-input__addon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon,.text-input__addon) .text-input__control,.text-input:has(.mc-text-input__addon,.text-input__addon) .text-input__control{padding-inline-end:0}.mc-text-input--s,.text-input--s{height:2rem}.mc-text-input--s .mc-text-input__control,.text-input--s .mc-text-input__control,.mc-text-input--s .text-input__control,.text-input--s .text-input__control{padding:.375rem .6875rem;font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3)}.mc-text-input--s:has(.mc-text-input__icon,.text-input__icon),.text-input--s:has(.mc-text-input__icon,.text-input__icon){padding-inline-start:.4375rem}.mc-text-input--s:has(.mc-controls-options,.controls-options),.text-input--s:has(.mc-controls-options,.controls-options){padding-inline-end:.4375rem}.mc-text-input.is-invalid,.is-invalid.text-input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-text-input.is-invalid:hover:not(:focus-within),.is-invalid.text-input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-text-input *,.text-input *{box-sizing:border-box}.text-input__icon:empty{display:none}\n"] }]
|
|
2320
2320
|
}], propDecorators: { isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }] } });
|
|
2321
2321
|
|
|
2322
2322
|
class MozToggleComponent {
|
|
@@ -2361,7 +2361,7 @@ class MozToggleComponent {
|
|
|
2361
2361
|
useExisting: forwardRef(() => MozToggleComponent),
|
|
2362
2362
|
multi: true,
|
|
2363
2363
|
},
|
|
2364
|
-
], ngImport: i0, template: "<div [class]=\"classes()\">\n <label class=\"toggle__container\">\n <input\n [id]=\"id()\"\n type=\"checkbox\"\n class=\"toggle__input\"\n [name]=\"name()\"\n [checked]=\"_value()\"\n [disabled]=\"disabled()\"\n (change)=\"onInputChange($event)\"\n [attr.aria-labelledby]=\"id() + '-label'\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-checked]=\"_value()\"\n />\n <span class=\"toggle__label\" [id]=\"id() + '-label'\" [attr.for]=\"id()\">\n <ng-content></ng-content>\n </span>\n </label>\n</div>\n", styles: [".mc-toggle,.toggle{width:fit-content}.mc-toggle__container,.toggle__container{display:flex;align-items:center;cursor:pointer;gap:.5rem;position:relative;padding:.25rem}.mc-toggle__container:before,.toggle__container:before,.mc-toggle__container:after,.toggle__container:after{content:\"\"}.mc-toggle__container:before,.toggle__container:before{transition:box-shadow .2s ease;height:1.5rem;width:2.5rem;background-color:var(--forms-color-background-unchecked, #666666);border-radius:var(--border-radius-l, 1rem);flex-shrink:0}.mc-toggle__container:after,.toggle__container:after{height:1.25rem;width:1.25rem;background-color:var(--forms-color-icon-inverse, #ffffff);border-radius:var(--border-radius-full, 100%);background-position:center;left:.375rem;position:absolute;top:50%;transform:translateY(-50%)}.mc-toggle__input,.toggle__input{
|
|
2364
|
+
], ngImport: i0, template: "<div [class]=\"classes()\">\n <label class=\"toggle__container\">\n <input\n [id]=\"id()\"\n type=\"checkbox\"\n class=\"toggle__input\"\n [name]=\"name()\"\n [checked]=\"_value()\"\n [disabled]=\"disabled()\"\n (change)=\"onInputChange($event)\"\n [attr.aria-labelledby]=\"id() + '-label'\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-checked]=\"_value()\"\n />\n <span class=\"toggle__label\" [id]=\"id() + '-label'\" [attr.for]=\"id()\">\n <ng-content></ng-content>\n </span>\n </label>\n</div>\n", styles: [".mc-toggle,.toggle{width:fit-content}.mc-toggle__container,.toggle__container{display:flex;align-items:center;cursor:pointer;gap:.5rem;position:relative;padding:.25rem}.mc-toggle__container:before,.toggle__container:before,.mc-toggle__container:after,.toggle__container:after{content:\"\"}.mc-toggle__container:before,.toggle__container:before{transition:box-shadow .2s ease;height:1.5rem;width:2.5rem;background-color:var(--forms-color-background-unchecked, #666666);border-radius:var(--border-radius-l, 1rem);flex-shrink:0}.mc-toggle__container:after,.toggle__container:after{height:1.25rem;width:1.25rem;background-color:var(--forms-color-icon-inverse, #ffffff);border-radius:var(--border-radius-full, 100%);background-position:center;left:.375rem;position:absolute;top:50%;transform:translateY(-50%)}.mc-toggle__input,.toggle__input{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-toggle__label,.toggle__label{color:var(--forms-color-text-default, #000000);font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-m, 1.5)}.mc-toggle:has(:checked) .mc-toggle__container:before,.toggle:has(:checked) .mc-toggle__container:before,.mc-toggle:has(:checked) .toggle__container:before,.toggle:has(:checked) .toggle__container:before{background-color:var(--forms-color-background-checked, #117f03)}.mc-toggle:has(:checked) .mc-toggle__container:after,.toggle:has(:checked) .mc-toggle__container:after,.mc-toggle:has(:checked) .toggle__container:after,.toggle:has(:checked) .toggle__container:after{transform:translate(1rem,-50%)}.mc-toggle:has(:disabled) .mc-toggle__container,.toggle:has(:disabled) .mc-toggle__container,.mc-toggle:has(:disabled) .toggle__container,.toggle:has(:disabled) .toggle__container{cursor:not-allowed}.mc-toggle:has(:disabled) .mc-toggle__container:before,.toggle:has(:disabled) .mc-toggle__container:before,.mc-toggle:has(:disabled) .toggle__container:before,.toggle:has(:disabled) .toggle__container:before{background-color:var(--forms-color-background-disabled, #d9d9d9)}.mc-toggle:has(:disabled) .mc-toggle__container:after,.toggle:has(:disabled) .mc-toggle__container:after,.mc-toggle:has(:disabled) .toggle__container:after,.toggle:has(:disabled) .toggle__container:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-toggle:has(:disabled) .mc-toggle__label,.toggle:has(:disabled) .mc-toggle__label,.mc-toggle:has(:disabled) .toggle__label,.toggle:has(:disabled) .toggle__label{color:var(--forms-color-text-disabled, #737373)}.mc-toggle:has(:focus-visible) .mc-toggle__container:before,.toggle:has(:focus-visible) .mc-toggle__container:before,.mc-toggle:has(:focus-visible) .toggle__container:before,.toggle:has(:focus-visible) .toggle__container:before{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-toggle--m .mc-toggle__container:before,.toggle--m .mc-toggle__container:before,.mc-toggle--m .toggle__container:before,.toggle--m .toggle__container:before{height:2rem;width:3.5rem}.mc-toggle--m .mc-toggle__container:after,.toggle--m .mc-toggle__container:after,.mc-toggle--m .toggle__container:after,.toggle--m .toggle__container:after{height:1.5rem;width:1.5rem;left:.5rem}.mc-toggle--m:has(:checked) .mc-toggle__container:after,.toggle--m:has(:checked) .mc-toggle__container:after,.mc-toggle--m:has(:checked) .toggle__container:after,.toggle--m:has(:checked) .toggle__container:after{transform:translate(1.5rem,-50%)}.mc-toggle--hide-label .mc-toggle__label,.mc-toggle--hide-label .toggle__label{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}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2365
2365
|
}
|
|
2366
2366
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozToggleComponent, decorators: [{
|
|
2367
2367
|
type: Component,
|
|
@@ -2371,7 +2371,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
2371
2371
|
useExisting: forwardRef(() => MozToggleComponent),
|
|
2372
2372
|
multi: true,
|
|
2373
2373
|
},
|
|
2374
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"classes()\">\n <label class=\"toggle__container\">\n <input\n [id]=\"id()\"\n type=\"checkbox\"\n class=\"toggle__input\"\n [name]=\"name()\"\n [checked]=\"_value()\"\n [disabled]=\"disabled()\"\n (change)=\"onInputChange($event)\"\n [attr.aria-labelledby]=\"id() + '-label'\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-checked]=\"_value()\"\n />\n <span class=\"toggle__label\" [id]=\"id() + '-label'\" [attr.for]=\"id()\">\n <ng-content></ng-content>\n </span>\n </label>\n</div>\n", styles: [".mc-toggle,.toggle{width:fit-content}.mc-toggle__container,.toggle__container{display:flex;align-items:center;cursor:pointer;gap:.5rem;position:relative;padding:.25rem}.mc-toggle__container:before,.toggle__container:before,.mc-toggle__container:after,.toggle__container:after{content:\"\"}.mc-toggle__container:before,.toggle__container:before{transition:box-shadow .2s ease;height:1.5rem;width:2.5rem;background-color:var(--forms-color-background-unchecked, #666666);border-radius:var(--border-radius-l, 1rem);flex-shrink:0}.mc-toggle__container:after,.toggle__container:after{height:1.25rem;width:1.25rem;background-color:var(--forms-color-icon-inverse, #ffffff);border-radius:var(--border-radius-full, 100%);background-position:center;left:.375rem;position:absolute;top:50%;transform:translateY(-50%)}.mc-toggle__input,.toggle__input{
|
|
2374
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"classes()\">\n <label class=\"toggle__container\">\n <input\n [id]=\"id()\"\n type=\"checkbox\"\n class=\"toggle__input\"\n [name]=\"name()\"\n [checked]=\"_value()\"\n [disabled]=\"disabled()\"\n (change)=\"onInputChange($event)\"\n [attr.aria-labelledby]=\"id() + '-label'\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-checked]=\"_value()\"\n />\n <span class=\"toggle__label\" [id]=\"id() + '-label'\" [attr.for]=\"id()\">\n <ng-content></ng-content>\n </span>\n </label>\n</div>\n", styles: [".mc-toggle,.toggle{width:fit-content}.mc-toggle__container,.toggle__container{display:flex;align-items:center;cursor:pointer;gap:.5rem;position:relative;padding:.25rem}.mc-toggle__container:before,.toggle__container:before,.mc-toggle__container:after,.toggle__container:after{content:\"\"}.mc-toggle__container:before,.toggle__container:before{transition:box-shadow .2s ease;height:1.5rem;width:2.5rem;background-color:var(--forms-color-background-unchecked, #666666);border-radius:var(--border-radius-l, 1rem);flex-shrink:0}.mc-toggle__container:after,.toggle__container:after{height:1.25rem;width:1.25rem;background-color:var(--forms-color-icon-inverse, #ffffff);border-radius:var(--border-radius-full, 100%);background-position:center;left:.375rem;position:absolute;top:50%;transform:translateY(-50%)}.mc-toggle__input,.toggle__input{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-toggle__label,.toggle__label{color:var(--forms-color-text-default, #000000);font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-m, 1.5)}.mc-toggle:has(:checked) .mc-toggle__container:before,.toggle:has(:checked) .mc-toggle__container:before,.mc-toggle:has(:checked) .toggle__container:before,.toggle:has(:checked) .toggle__container:before{background-color:var(--forms-color-background-checked, #117f03)}.mc-toggle:has(:checked) .mc-toggle__container:after,.toggle:has(:checked) .mc-toggle__container:after,.mc-toggle:has(:checked) .toggle__container:after,.toggle:has(:checked) .toggle__container:after{transform:translate(1rem,-50%)}.mc-toggle:has(:disabled) .mc-toggle__container,.toggle:has(:disabled) .mc-toggle__container,.mc-toggle:has(:disabled) .toggle__container,.toggle:has(:disabled) .toggle__container{cursor:not-allowed}.mc-toggle:has(:disabled) .mc-toggle__container:before,.toggle:has(:disabled) .mc-toggle__container:before,.mc-toggle:has(:disabled) .toggle__container:before,.toggle:has(:disabled) .toggle__container:before{background-color:var(--forms-color-background-disabled, #d9d9d9)}.mc-toggle:has(:disabled) .mc-toggle__container:after,.toggle:has(:disabled) .mc-toggle__container:after,.mc-toggle:has(:disabled) .toggle__container:after,.toggle:has(:disabled) .toggle__container:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-toggle:has(:disabled) .mc-toggle__label,.toggle:has(:disabled) .mc-toggle__label,.mc-toggle:has(:disabled) .toggle__label,.toggle:has(:disabled) .toggle__label{color:var(--forms-color-text-disabled, #737373)}.mc-toggle:has(:focus-visible) .mc-toggle__container:before,.toggle:has(:focus-visible) .mc-toggle__container:before,.mc-toggle:has(:focus-visible) .toggle__container:before,.toggle:has(:focus-visible) .toggle__container:before{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-toggle--m .mc-toggle__container:before,.toggle--m .mc-toggle__container:before,.mc-toggle--m .toggle__container:before,.toggle--m .toggle__container:before{height:2rem;width:3.5rem}.mc-toggle--m .mc-toggle__container:after,.toggle--m .mc-toggle__container:after,.mc-toggle--m .toggle__container:after,.toggle--m .toggle__container:after{height:1.5rem;width:1.5rem;left:.5rem}.mc-toggle--m:has(:checked) .mc-toggle__container:after,.toggle--m:has(:checked) .mc-toggle__container:after,.mc-toggle--m:has(:checked) .toggle__container:after,.toggle--m:has(:checked) .toggle__container:after{transform:translate(1.5rem,-50%)}.mc-toggle--hide-label .mc-toggle__label,.mc-toggle--hide-label .toggle__label{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}\n"] }]
|
|
2375
2375
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
2376
2376
|
|
|
2377
2377
|
class MozFlagComponent {
|
|
@@ -2457,7 +2457,7 @@ class MozDatepickerComponent {
|
|
|
2457
2457
|
useExisting: forwardRef(() => MozDatepickerComponent),
|
|
2458
2458
|
multi: true,
|
|
2459
2459
|
},
|
|
2460
|
-
], ngImport: i0, template: "<div class=\"mc-field\">\n <label class=\"mc-field__label\" [attr.for]=\"id()\"> {{ label() }} </label>\n\n <div class=\"mc-field__content\">\n <div [class]=\"classes()\">\n <input\n type=\"date\"\n [id]=\"id()\"\n class=\"mc-datepicker__control mc-text-input__control\"\n [value]=\"_value() ?? ''\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [attr.aria-invalid]=\"invalid()\"\n />\n\n @if (clearable() && !disabled() && !readonly() && _value()) {\n <div class=\"mc-controls-options mc-datepicker__controls-options\">\n <button\n type=\"button\"\n class=\"mc-controls-options__button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n tabindex=\"-1\"\n >\n <CrossCircle24 class=\"mc-controls-options__icon\" />\n <span class=\"mc-controls-options__label\">Clear content</span>\n </button>\n </div>\n }\n </div>\n </div>\n\n @if (invalid() && error()) {\n <span class=\"mc-field__validation-message is-invalid\"> {{ error() }} </span>\n }\n</div>\n", styles: [".mc-text-input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-text-input__control{background-color:transparent;border-width:0;font-family:inherit;outline:none}.mc-text-input__control[type=number]::-webkit-inner-spin-button,.mc-text-input__control[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input__control[type=number]{appearance:textfield}.mc-text-input__control[type=search]::-webkit-search-decoration,.mc-text-input__control[type=search]::-webkit-search-cancel-button{appearance:none}.mc-text-input__control{padding:.75rem .6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);flex-grow:1}.mc-text-input__control::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-text-input__addon{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-text-input__icon{fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0}.mc-text-input:focus-within{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-text-input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-text-input:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-text-input:has(input[readonly]){border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-text-input:has(.mc-text-input__icon),.mc-text-input:has(.mc-text-input__addon){padding-inline-start:.6875rem}.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon) .mc-text-input__control{padding-inline-start:0}.mc-text-input:has(.mc-controls-options),.mc-text-input:has(.mc-text-input__addon){padding-inline-end:.6875rem}.mc-text-input:has(.mc-controls-options) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon) .mc-text-input__control{padding-inline-end:0}.mc-text-input--s{height:2rem}.mc-text-input--s .mc-text-input__control{padding:.375rem .6875rem;font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3)}.mc-text-input--s:has(.mc-text-input__icon){padding-inline-start:.4375rem}.mc-text-input--s:has(.mc-controls-options){padding-inline-end:.4375rem}.mc-text-input.is-invalid{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-text-input.is-invalid:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-text-input *{box-sizing:border-box}.mc-field__label,.mc-field__legend{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000)}.mc-field__legend{padding-inline:0}.mc-field__requirement,.mc-field__help{font-size:var(--font-size-50, .75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help{display:block;margin-top:.125rem}.mc-field__content{margin-top:.5rem}.mc-field__content:where(.mc-field__content--inline){display:flex;flex-flow:row wrap;gap:.25rem 1rem}.mc-field__validation-message{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:.25rem;margin-top:.25rem}.mc-field__validation-message.is-valid:before,.mc-field__validation-message.is-invalid:before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid:before{background-color:var(--field-color-validation-valid, #117f03);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-invalid{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before{background-color:var(--field-color-validation-invalid, #c61112);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-loading{color:var(--field-color-validation-loading, #666666)}.mc-field--group{border-width:0;margin-inline:0;padding:0}.mc-field--group .mc-field__content:not(.mc-field__content--inline){display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-controls-options{align-items:center;display:inline-flex;justify-content:center;gap:.5rem}.mc-controls-options__button{background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--border-radius-full, 100%)}.mc-controls-options__button:hover .mc-controls-options__icon{fill:var(--forms-color-icon-clear-hover, #4d4d4d)}.mc-controls-options__button: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-controls-options__icon{fill:var(--forms-color-icon-clear, #666666);color:var(--forms-color-icon-clear, #666666)}.mc-controls-options__button,.mc-controls-options__icon{height:1.5rem;width:1.5rem}.mc-controls-options__label{height:0;width:0;overflow:hidden;position:absolute;top:-1000px;left:-1000px;text-align:left;opacity:0}.mc-controls-options__unit{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-datepicker{border-radius:var(--border-radius-s, .25rem);position:relative}.mc-datepicker__control{font-family:var(--font-family, LeroyMerlin),sans-serif;background-repeat:no-repeat;background-position:right .75rem center;display:block;padding:0 .75rem}.mc-datepicker__control::-webkit-calendar-picker-indicator{padding-right:1rem;opacity:0;transform:scale(2)}.mc-datepicker__control::-moz-calendar-picker-indicator{padding-right:1rem;opacity:0;transform:scale(2)}.mc-datepicker__control:after{content:\"\";pointer-events:none;position:absolute;right:.75rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;background-color:var(--forms-color-icon-interactive, #000000);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-datepicker__control.is-invalid{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-datepicker__control.is-invalid:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-datepicker__control:disabled{-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E\") no-repeat center/contain;background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373)}.mc-datepicker__control:disabled:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-datepicker__control:disabled:hover:not(:focus-within){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373)}.mc-datepicker__controls-options{position:absolute;right:2.75rem;top:.75rem}.mc-datepicker:has(.mc-controls-options){padding-inline-end:0}.mc-datepicker:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:all;cursor:not-allowed}.mc-datepicker:has(input:disabled):hover{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373)}.mc-datepicker--s .mc-datepicker__control:after{-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-datepicker--s .mc-datepicker__control:disabled:after{-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-datepicker--s .mc-datepicker__controls-options{top:.3125rem}.mc-datepicker--s .mc-datepicker__controls-options button,.mc-datepicker--s .mc-datepicker__controls-options svg{width:1.25rem;height:1.25rem}\n"], dependencies: [{ kind: "component", type: CrossCircle24, selector: "CrossCircle24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2460
|
+
], ngImport: i0, template: "<div class=\"mc-field\">\n <label class=\"mc-field__label\" [attr.for]=\"id()\"> {{ label() }} </label>\n\n <div class=\"mc-field__content\">\n <div [class]=\"classes()\">\n <input\n type=\"date\"\n [id]=\"id()\"\n class=\"mc-datepicker__control mc-text-input__control\"\n [value]=\"_value() ?? ''\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [attr.aria-invalid]=\"invalid()\"\n />\n\n @if (clearable() && !disabled() && !readonly() && _value()) {\n <div class=\"mc-controls-options mc-datepicker__controls-options\">\n <button\n type=\"button\"\n class=\"mc-controls-options__button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n tabindex=\"-1\"\n >\n <CrossCircle24 class=\"mc-controls-options__icon\" />\n <span class=\"mc-controls-options__label\">Clear content</span>\n </button>\n </div>\n }\n </div>\n </div>\n\n @if (invalid() && error()) {\n <span class=\"mc-field__validation-message is-invalid\"> {{ error() }} </span>\n }\n</div>\n", styles: [".mc-text-input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-text-input__control{background-color:transparent;border-width:0;font-family:inherit;outline:none}.mc-text-input__control[type=number]::-webkit-inner-spin-button,.mc-text-input__control[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input__control[type=number]{appearance:textfield}.mc-text-input__control[type=search]::-webkit-search-decoration,.mc-text-input__control[type=search]::-webkit-search-cancel-button{appearance:none}.mc-text-input__control{padding:.75rem .6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);flex-grow:1;min-width:0}.mc-text-input__control:placeholder-shown{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-text-input__control::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-text-input__addon{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-text-input__icon{fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0}.mc-text-input:focus-within{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-text-input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-text-input:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-text-input:has(input[readonly]){border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-text-input:has(.mc-text-input__icon),.mc-text-input:has(.mc-text-input__addon){padding-inline-start:.6875rem}.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon) .mc-text-input__control{padding-inline-start:0}.mc-text-input:has(.mc-controls-options),.mc-text-input:has(.mc-text-input__addon){padding-inline-end:.6875rem}.mc-text-input:has(.mc-controls-options) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon) .mc-text-input__control{padding-inline-end:0}.mc-text-input--s{height:2rem}.mc-text-input--s .mc-text-input__control{padding:.375rem .6875rem;font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3)}.mc-text-input--s:has(.mc-text-input__icon){padding-inline-start:.4375rem}.mc-text-input--s:has(.mc-controls-options){padding-inline-end:.4375rem}.mc-text-input.is-invalid{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-text-input.is-invalid:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-text-input *{box-sizing:border-box}.mc-field__label,.mc-field__legend{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000)}.mc-field__legend{padding-inline:0}.mc-field__requirement,.mc-field__help{font-size:var(--font-size-50, .75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help{display:block;margin-top:.125rem}.mc-field__content{margin-top:.5rem}.mc-field__content:where(.mc-field__content--inline){display:flex;flex-flow:row wrap;gap:.25rem 1rem}.mc-field__validation-message{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:.25rem;margin-top:.25rem}.mc-field__validation-message.is-valid:before,.mc-field__validation-message.is-invalid:before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid:before{background-color:var(--field-color-validation-valid, #117f03);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-invalid{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before{background-color:var(--field-color-validation-invalid, #c61112);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-loading{color:var(--field-color-validation-loading, #666666)}.mc-field--group{border-width:0;margin-inline:0;padding:0}.mc-field--group .mc-field__content:not(.mc-field__content--inline){display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-controls-options{align-items:center;display:inline-flex;justify-content:center;gap:.5rem}.mc-controls-options__button{background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--border-radius-full, 100%)}.mc-controls-options__button:hover .mc-controls-options__icon{fill:var(--forms-color-icon-clear-hover, #4d4d4d)}.mc-controls-options__button: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-controls-options__icon{fill:var(--forms-color-icon-clear, #666666);color:var(--forms-color-icon-clear, #666666)}.mc-controls-options__button,.mc-controls-options__icon{height:1.5rem;width:1.5rem}.mc-controls-options__label{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-controls-options__unit{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-datepicker{border-radius:var(--border-radius-s, .25rem);position:relative}.mc-datepicker__control{font-family:var(--font-family, LeroyMerlin),sans-serif;background-repeat:no-repeat;background-position:right .75rem center;display:block;padding:0 .75rem}.mc-datepicker__control::-webkit-calendar-picker-indicator{padding-right:1rem;opacity:0;transform:scale(2)}.mc-datepicker__control::-moz-calendar-picker-indicator{padding-right:1rem;opacity:0;transform:scale(2)}.mc-datepicker__control:after{content:\"\";pointer-events:none;position:absolute;right:.75rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;background-color:var(--forms-color-icon-interactive, #000000);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-datepicker__control.is-invalid{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-datepicker__control.is-invalid:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-datepicker__control:disabled{-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E\") no-repeat center/contain;background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373)}.mc-datepicker__control:disabled:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-datepicker__control:disabled:hover:not(:focus-within){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373)}.mc-datepicker__controls-options{position:absolute;right:2.75rem;top:.75rem}.mc-datepicker:has(.mc-controls-options){padding-inline-end:0}.mc-datepicker:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:all;cursor:not-allowed}.mc-datepicker:has(input:disabled):hover{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373)}.mc-datepicker--s .mc-datepicker__control:after{-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-datepicker--s .mc-datepicker__control:disabled:after{-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-datepicker--s .mc-datepicker__controls-options{top:.3125rem}.mc-datepicker--s .mc-datepicker__controls-options button,.mc-datepicker--s .mc-datepicker__controls-options svg{width:1.25rem;height:1.25rem}\n"], dependencies: [{ kind: "component", type: CrossCircle24, selector: "CrossCircle24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2461
2461
|
}
|
|
2462
2462
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozDatepickerComponent, decorators: [{
|
|
2463
2463
|
type: Component,
|
|
@@ -2467,7 +2467,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
2467
2467
|
useExisting: forwardRef(() => MozDatepickerComponent),
|
|
2468
2468
|
multi: true,
|
|
2469
2469
|
},
|
|
2470
|
-
], imports: [CrossCircle24], template: "<div class=\"mc-field\">\n <label class=\"mc-field__label\" [attr.for]=\"id()\"> {{ label() }} </label>\n\n <div class=\"mc-field__content\">\n <div [class]=\"classes()\">\n <input\n type=\"date\"\n [id]=\"id()\"\n class=\"mc-datepicker__control mc-text-input__control\"\n [value]=\"_value() ?? ''\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [attr.aria-invalid]=\"invalid()\"\n />\n\n @if (clearable() && !disabled() && !readonly() && _value()) {\n <div class=\"mc-controls-options mc-datepicker__controls-options\">\n <button\n type=\"button\"\n class=\"mc-controls-options__button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n tabindex=\"-1\"\n >\n <CrossCircle24 class=\"mc-controls-options__icon\" />\n <span class=\"mc-controls-options__label\">Clear content</span>\n </button>\n </div>\n }\n </div>\n </div>\n\n @if (invalid() && error()) {\n <span class=\"mc-field__validation-message is-invalid\"> {{ error() }} </span>\n }\n</div>\n", styles: [".mc-text-input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-text-input__control{background-color:transparent;border-width:0;font-family:inherit;outline:none}.mc-text-input__control[type=number]::-webkit-inner-spin-button,.mc-text-input__control[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input__control[type=number]{appearance:textfield}.mc-text-input__control[type=search]::-webkit-search-decoration,.mc-text-input__control[type=search]::-webkit-search-cancel-button{appearance:none}.mc-text-input__control{padding:.75rem .6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);flex-grow:1}.mc-text-input__control::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-text-input__addon{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-text-input__icon{fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0}.mc-text-input:focus-within{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-text-input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-text-input:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-text-input:has(input[readonly]){border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-text-input:has(.mc-text-input__icon),.mc-text-input:has(.mc-text-input__addon){padding-inline-start:.6875rem}.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon) .mc-text-input__control{padding-inline-start:0}.mc-text-input:has(.mc-controls-options),.mc-text-input:has(.mc-text-input__addon){padding-inline-end:.6875rem}.mc-text-input:has(.mc-controls-options) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon) .mc-text-input__control{padding-inline-end:0}.mc-text-input--s{height:2rem}.mc-text-input--s .mc-text-input__control{padding:.375rem .6875rem;font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3)}.mc-text-input--s:has(.mc-text-input__icon){padding-inline-start:.4375rem}.mc-text-input--s:has(.mc-controls-options){padding-inline-end:.4375rem}.mc-text-input.is-invalid{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-text-input.is-invalid:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-text-input *{box-sizing:border-box}.mc-field__label,.mc-field__legend{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000)}.mc-field__legend{padding-inline:0}.mc-field__requirement,.mc-field__help{font-size:var(--font-size-50, .75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help{display:block;margin-top:.125rem}.mc-field__content{margin-top:.5rem}.mc-field__content:where(.mc-field__content--inline){display:flex;flex-flow:row wrap;gap:.25rem 1rem}.mc-field__validation-message{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:.25rem;margin-top:.25rem}.mc-field__validation-message.is-valid:before,.mc-field__validation-message.is-invalid:before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid:before{background-color:var(--field-color-validation-valid, #117f03);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-invalid{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before{background-color:var(--field-color-validation-invalid, #c61112);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-loading{color:var(--field-color-validation-loading, #666666)}.mc-field--group{border-width:0;margin-inline:0;padding:0}.mc-field--group .mc-field__content:not(.mc-field__content--inline){display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-controls-options{align-items:center;display:inline-flex;justify-content:center;gap:.5rem}.mc-controls-options__button{background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--border-radius-full, 100%)}.mc-controls-options__button:hover .mc-controls-options__icon{fill:var(--forms-color-icon-clear-hover, #4d4d4d)}.mc-controls-options__button: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-controls-options__icon{fill:var(--forms-color-icon-clear, #666666);color:var(--forms-color-icon-clear, #666666)}.mc-controls-options__button,.mc-controls-options__icon{height:1.5rem;width:1.5rem}.mc-controls-options__label{height:0;width:0;overflow:hidden;position:absolute;top:-1000px;left:-1000px;text-align:left;opacity:0}.mc-controls-options__unit{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-datepicker{border-radius:var(--border-radius-s, .25rem);position:relative}.mc-datepicker__control{font-family:var(--font-family, LeroyMerlin),sans-serif;background-repeat:no-repeat;background-position:right .75rem center;display:block;padding:0 .75rem}.mc-datepicker__control::-webkit-calendar-picker-indicator{padding-right:1rem;opacity:0;transform:scale(2)}.mc-datepicker__control::-moz-calendar-picker-indicator{padding-right:1rem;opacity:0;transform:scale(2)}.mc-datepicker__control:after{content:\"\";pointer-events:none;position:absolute;right:.75rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;background-color:var(--forms-color-icon-interactive, #000000);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-datepicker__control.is-invalid{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-datepicker__control.is-invalid:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-datepicker__control:disabled{-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E\") no-repeat center/contain;background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373)}.mc-datepicker__control:disabled:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-datepicker__control:disabled:hover:not(:focus-within){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373)}.mc-datepicker__controls-options{position:absolute;right:2.75rem;top:.75rem}.mc-datepicker:has(.mc-controls-options){padding-inline-end:0}.mc-datepicker:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:all;cursor:not-allowed}.mc-datepicker:has(input:disabled):hover{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373)}.mc-datepicker--s .mc-datepicker__control:after{-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-datepicker--s .mc-datepicker__control:disabled:after{-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-datepicker--s .mc-datepicker__controls-options{top:.3125rem}.mc-datepicker--s .mc-datepicker__controls-options button,.mc-datepicker--s .mc-datepicker__controls-options svg{width:1.25rem;height:1.25rem}\n"] }]
|
|
2470
|
+
], imports: [CrossCircle24], template: "<div class=\"mc-field\">\n <label class=\"mc-field__label\" [attr.for]=\"id()\"> {{ label() }} </label>\n\n <div class=\"mc-field__content\">\n <div [class]=\"classes()\">\n <input\n type=\"date\"\n [id]=\"id()\"\n class=\"mc-datepicker__control mc-text-input__control\"\n [value]=\"_value() ?? ''\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [attr.aria-invalid]=\"invalid()\"\n />\n\n @if (clearable() && !disabled() && !readonly() && _value()) {\n <div class=\"mc-controls-options mc-datepicker__controls-options\">\n <button\n type=\"button\"\n class=\"mc-controls-options__button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n tabindex=\"-1\"\n >\n <CrossCircle24 class=\"mc-controls-options__icon\" />\n <span class=\"mc-controls-options__label\">Clear content</span>\n </button>\n </div>\n }\n </div>\n </div>\n\n @if (invalid() && error()) {\n <span class=\"mc-field__validation-message is-invalid\"> {{ error() }} </span>\n }\n</div>\n", styles: [".mc-text-input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-text-input__control{background-color:transparent;border-width:0;font-family:inherit;outline:none}.mc-text-input__control[type=number]::-webkit-inner-spin-button,.mc-text-input__control[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input__control[type=number]{appearance:textfield}.mc-text-input__control[type=search]::-webkit-search-decoration,.mc-text-input__control[type=search]::-webkit-search-cancel-button{appearance:none}.mc-text-input__control{padding:.75rem .6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);flex-grow:1;min-width:0}.mc-text-input__control:placeholder-shown{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-text-input__control::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-text-input__addon{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-text-input__icon{fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0}.mc-text-input:focus-within{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-text-input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-text-input:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-text-input:has(input[readonly]){border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-text-input:has(.mc-text-input__icon),.mc-text-input:has(.mc-text-input__addon){padding-inline-start:.6875rem}.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon) .mc-text-input__control{padding-inline-start:0}.mc-text-input:has(.mc-controls-options),.mc-text-input:has(.mc-text-input__addon){padding-inline-end:.6875rem}.mc-text-input:has(.mc-controls-options) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon) .mc-text-input__control{padding-inline-end:0}.mc-text-input--s{height:2rem}.mc-text-input--s .mc-text-input__control{padding:.375rem .6875rem;font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3)}.mc-text-input--s:has(.mc-text-input__icon){padding-inline-start:.4375rem}.mc-text-input--s:has(.mc-controls-options){padding-inline-end:.4375rem}.mc-text-input.is-invalid{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-text-input.is-invalid:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-text-input *{box-sizing:border-box}.mc-field__label,.mc-field__legend{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000)}.mc-field__legend{padding-inline:0}.mc-field__requirement,.mc-field__help{font-size:var(--font-size-50, .75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help{display:block;margin-top:.125rem}.mc-field__content{margin-top:.5rem}.mc-field__content:where(.mc-field__content--inline){display:flex;flex-flow:row wrap;gap:.25rem 1rem}.mc-field__validation-message{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:.25rem;margin-top:.25rem}.mc-field__validation-message.is-valid:before,.mc-field__validation-message.is-invalid:before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid:before{background-color:var(--field-color-validation-valid, #117f03);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-invalid{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before{background-color:var(--field-color-validation-invalid, #c61112);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-loading{color:var(--field-color-validation-loading, #666666)}.mc-field--group{border-width:0;margin-inline:0;padding:0}.mc-field--group .mc-field__content:not(.mc-field__content--inline){display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-controls-options{align-items:center;display:inline-flex;justify-content:center;gap:.5rem}.mc-controls-options__button{background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--border-radius-full, 100%)}.mc-controls-options__button:hover .mc-controls-options__icon{fill:var(--forms-color-icon-clear-hover, #4d4d4d)}.mc-controls-options__button: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-controls-options__icon{fill:var(--forms-color-icon-clear, #666666);color:var(--forms-color-icon-clear, #666666)}.mc-controls-options__button,.mc-controls-options__icon{height:1.5rem;width:1.5rem}.mc-controls-options__label{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-controls-options__unit{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-datepicker{border-radius:var(--border-radius-s, .25rem);position:relative}.mc-datepicker__control{font-family:var(--font-family, LeroyMerlin),sans-serif;background-repeat:no-repeat;background-position:right .75rem center;display:block;padding:0 .75rem}.mc-datepicker__control::-webkit-calendar-picker-indicator{padding-right:1rem;opacity:0;transform:scale(2)}.mc-datepicker__control::-moz-calendar-picker-indicator{padding-right:1rem;opacity:0;transform:scale(2)}.mc-datepicker__control:after{content:\"\";pointer-events:none;position:absolute;right:.75rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;background-color:var(--forms-color-icon-interactive, #000000);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-datepicker__control.is-invalid{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-datepicker__control.is-invalid:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-datepicker__control:disabled{-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E\") no-repeat center/contain;background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373)}.mc-datepicker__control:disabled:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-datepicker__control:disabled:hover:not(:focus-within){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373)}.mc-datepicker__controls-options{position:absolute;right:2.75rem;top:.75rem}.mc-datepicker:has(.mc-controls-options){padding-inline-end:0}.mc-datepicker:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:all;cursor:not-allowed}.mc-datepicker:has(input:disabled):hover{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373)}.mc-datepicker--s .mc-datepicker__control:after{-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-datepicker--s .mc-datepicker__control:disabled:after{-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-datepicker--s .mc-datepicker__controls-options{top:.3125rem}.mc-datepicker--s .mc-datepicker__controls-options button,.mc-datepicker--s .mc-datepicker__controls-options svg{width:1.25rem;height:1.25rem}\n"] }]
|
|
2471
2471
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
|
|
2472
2472
|
|
|
2473
2473
|
class MozTooltipComponent {
|
|
@@ -2488,11 +2488,11 @@ class MozTooltipComponent {
|
|
|
2488
2488
|
}), /* @ts-ignore */
|
|
2489
2489
|
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
2490
2490
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2491
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozTooltipComponent, isStandalone: true, selector: "moz-tooltip", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, noPointer: { classPropertyName: "noPointer", publicName: "noPointer", isSignal: true, isRequired: false, transformFunction: null }, standalone: { classPropertyName: "standalone", publicName: "standalone", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"classes()\">\n @if (!standalone()) {\n <div>\n <ng-content select=\"[trigger]\"></ng-content>\n </div>\n }\n\n <span [id]=\"id()\" class=\"tooltip__content\" role=\"tooltip\">\n @if (content) {\n
|
|
2491
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozTooltipComponent, isStandalone: true, selector: "moz-tooltip", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, noPointer: { classPropertyName: "noPointer", publicName: "noPointer", isSignal: true, isRequired: false, transformFunction: null }, standalone: { classPropertyName: "standalone", publicName: "standalone", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"classes()\">\n @if (!standalone()) {\n <div>\n <ng-content select=\"[trigger]\"></ng-content>\n </div>\n }\n\n <span [id]=\"id()\" class=\"tooltip__content\" role=\"tooltip\">\n <span class=\"tooltip__text\">\n @if (content) {\n {{ content }}\n } @else {\n <ng-content select=\"[content]\"></ng-content>\n }\n </span>\n </span>\n</div>\n", styles: [".mc-tooltip,.tooltip{display:inline-flex;position:relative}.mc-tooltip:focus,.tooltip:focus,.mc-tooltip:hover,.tooltip:hover{cursor:help}.mc-tooltip:focus .mc-tooltip__content,.tooltip:focus .mc-tooltip__content,.mc-tooltip:focus .tooltip__content,.tooltip:focus .tooltip__content,.mc-tooltip:hover .mc-tooltip__content,.tooltip:hover .mc-tooltip__content,.mc-tooltip:hover .tooltip__content,.tooltip:hover .tooltip__content{visibility:visible}.mc-tooltip__content,.tooltip__content{font-size:var(--font-size-100, .875rem);border-radius:var(--border-radius-s, .25rem);line-height:var(--line-height-s, 1.3);align-items:center;max-width:16rem;min-width:4rem;background-color:var(--tooltip-color-background, #242938);box-sizing:border-box;color:var(--tooltip-color-text, #ffffff);position:absolute;text-align:center;visibility:hidden;z-index:var(--tooltip-z-index, 1);border:var(--border-width-s, .0625rem) solid var(--tooltip-color-border, #636d88);word-break:break-all;padding:.375rem .5rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}@supports (width: max-content){.mc-tooltip__content,.tooltip__content{width:max-content}}.mc-tooltip__content:before,.tooltip__content:before{background-color:var(--tooltip-color-border, #636d88);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E\") no-repeat center/contain;content:\"\";height:.625rem;position:absolute;width:.625rem}.mc-tooltip__content:after,.tooltip__content:after{background-color:var(--tooltip-color-background, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E\") no-repeat center/contain;content:\"\";height:.5rem;position:absolute;width:.5rem}.mc-tooltip__text,.tooltip__text{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.mc-tooltip--top .mc-tooltip__content,.tooltip--top .mc-tooltip__content,.mc-tooltip--top .tooltip__content,.tooltip--top .tooltip__content{top:0;left:50%;transform:translate(-50%,calc(-100% - 1rem))}.mc-tooltip--top .mc-tooltip__content:after,.tooltip--top .mc-tooltip__content:after,.mc-tooltip--top .tooltip__content:after,.tooltip--top .tooltip__content:after,.mc-tooltip--top .mc-tooltip__content:before,.tooltip--top .mc-tooltip__content:before,.mc-tooltip--top .tooltip__content:before,.tooltip--top .tooltip__content:before{bottom:0;left:50%;transform:translate(-50%,100%) rotate(-90deg)}.mc-tooltip--top .mc-tooltip__content:before,.tooltip--top .mc-tooltip__content:before,.mc-tooltip--top .tooltip__content:before,.tooltip--top .tooltip__content:before{bottom:-1px}.mc-tooltip--right .mc-tooltip__content,.tooltip--right .mc-tooltip__content,.mc-tooltip--right .tooltip__content,.tooltip--right .tooltip__content{top:50%;right:0;transform:translate(calc(100% + 1rem),-50%)}.mc-tooltip--right .mc-tooltip__content:after,.tooltip--right .mc-tooltip__content:after,.mc-tooltip--right .tooltip__content:after,.tooltip--right .tooltip__content:after,.mc-tooltip--right .mc-tooltip__content:before,.tooltip--right .mc-tooltip__content:before,.mc-tooltip--right .tooltip__content:before,.tooltip--right .tooltip__content:before{top:50%;left:0;transform:translate(-99%,-50%)}.mc-tooltip--right .mc-tooltip__content:before,.tooltip--right .mc-tooltip__content:before,.mc-tooltip--right .tooltip__content:before,.tooltip--right .tooltip__content:before{left:-1px}.mc-tooltip--left .mc-tooltip__content,.tooltip--left .mc-tooltip__content,.mc-tooltip--left .tooltip__content,.tooltip--left .tooltip__content{left:0;top:50%;transform:translate(calc(-100% - 1rem),-50%)}.mc-tooltip--left .mc-tooltip__content:after,.tooltip--left .mc-tooltip__content:after,.mc-tooltip--left .tooltip__content:after,.tooltip--left .tooltip__content:after,.mc-tooltip--left .mc-tooltip__content:before,.tooltip--left .mc-tooltip__content:before,.mc-tooltip--left .tooltip__content:before,.tooltip--left .tooltip__content:before{top:50%;right:0;transform:translate(99%,-50%) rotate(180deg)}.mc-tooltip--left .mc-tooltip__content:before,.tooltip--left .mc-tooltip__content:before,.mc-tooltip--left .tooltip__content:before,.tooltip--left .tooltip__content:before{right:-1px}.mc-tooltip--bottom .mc-tooltip__content,.tooltip--bottom .mc-tooltip__content,.mc-tooltip--bottom .tooltip__content,.tooltip--bottom .tooltip__content{bottom:0;left:50%;transform:translate(-50%,calc(100% + 1rem))}.mc-tooltip--bottom .mc-tooltip__content:after,.tooltip--bottom .mc-tooltip__content:after,.mc-tooltip--bottom .tooltip__content:after,.tooltip--bottom .tooltip__content:after,.mc-tooltip--bottom .mc-tooltip__content:before,.tooltip--bottom .mc-tooltip__content:before,.mc-tooltip--bottom .tooltip__content:before,.tooltip--bottom .tooltip__content:before{top:0;left:50%;transform:translate(-50%,-100%) rotate(90deg)}.mc-tooltip--bottom .mc-tooltip__content:before,.tooltip--bottom .mc-tooltip__content:before,.mc-tooltip--bottom .tooltip__content:before,.tooltip--bottom .tooltip__content:before{top:-1px}.mc-tooltip--no-pointer .mc-tooltip__content:after,.tooltip--no-pointer .mc-tooltip__content:after,.mc-tooltip--no-pointer .tooltip__content:after,.tooltip--no-pointer .tooltip__content:after,.mc-tooltip--no-pointer .mc-tooltip__content:before,.tooltip--no-pointer .mc-tooltip__content:before,.mc-tooltip--no-pointer .tooltip__content:before,.tooltip--no-pointer .tooltip__content:before{background:none}.mc-tooltip--standalone,.tooltip--standalone{cursor:help}.mc-tooltip--standalone .mc-tooltip__content,.tooltip--standalone .mc-tooltip__content,.mc-tooltip--standalone .tooltip__content,.tooltip--standalone .tooltip__content{visibility:visible;position:relative;transform:none;top:0;left:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2492
2492
|
}
|
|
2493
2493
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozTooltipComponent, decorators: [{
|
|
2494
2494
|
type: Component,
|
|
2495
|
-
args: [{ selector: 'moz-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"classes()\">\n @if (!standalone()) {\n <div>\n <ng-content select=\"[trigger]\"></ng-content>\n </div>\n }\n\n <span [id]=\"id()\" class=\"tooltip__content\" role=\"tooltip\">\n @if (content) {\n
|
|
2495
|
+
args: [{ selector: 'moz-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"classes()\">\n @if (!standalone()) {\n <div>\n <ng-content select=\"[trigger]\"></ng-content>\n </div>\n }\n\n <span [id]=\"id()\" class=\"tooltip__content\" role=\"tooltip\">\n <span class=\"tooltip__text\">\n @if (content) {\n {{ content }}\n } @else {\n <ng-content select=\"[content]\"></ng-content>\n }\n </span>\n </span>\n</div>\n", styles: [".mc-tooltip,.tooltip{display:inline-flex;position:relative}.mc-tooltip:focus,.tooltip:focus,.mc-tooltip:hover,.tooltip:hover{cursor:help}.mc-tooltip:focus .mc-tooltip__content,.tooltip:focus .mc-tooltip__content,.mc-tooltip:focus .tooltip__content,.tooltip:focus .tooltip__content,.mc-tooltip:hover .mc-tooltip__content,.tooltip:hover .mc-tooltip__content,.mc-tooltip:hover .tooltip__content,.tooltip:hover .tooltip__content{visibility:visible}.mc-tooltip__content,.tooltip__content{font-size:var(--font-size-100, .875rem);border-radius:var(--border-radius-s, .25rem);line-height:var(--line-height-s, 1.3);align-items:center;max-width:16rem;min-width:4rem;background-color:var(--tooltip-color-background, #242938);box-sizing:border-box;color:var(--tooltip-color-text, #ffffff);position:absolute;text-align:center;visibility:hidden;z-index:var(--tooltip-z-index, 1);border:var(--border-width-s, .0625rem) solid var(--tooltip-color-border, #636d88);word-break:break-all;padding:.375rem .5rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}@supports (width: max-content){.mc-tooltip__content,.tooltip__content{width:max-content}}.mc-tooltip__content:before,.tooltip__content:before{background-color:var(--tooltip-color-border, #636d88);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E\") no-repeat center/contain;content:\"\";height:.625rem;position:absolute;width:.625rem}.mc-tooltip__content:after,.tooltip__content:after{background-color:var(--tooltip-color-background, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E\") no-repeat center/contain;content:\"\";height:.5rem;position:absolute;width:.5rem}.mc-tooltip__text,.tooltip__text{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.mc-tooltip--top .mc-tooltip__content,.tooltip--top .mc-tooltip__content,.mc-tooltip--top .tooltip__content,.tooltip--top .tooltip__content{top:0;left:50%;transform:translate(-50%,calc(-100% - 1rem))}.mc-tooltip--top .mc-tooltip__content:after,.tooltip--top .mc-tooltip__content:after,.mc-tooltip--top .tooltip__content:after,.tooltip--top .tooltip__content:after,.mc-tooltip--top .mc-tooltip__content:before,.tooltip--top .mc-tooltip__content:before,.mc-tooltip--top .tooltip__content:before,.tooltip--top .tooltip__content:before{bottom:0;left:50%;transform:translate(-50%,100%) rotate(-90deg)}.mc-tooltip--top .mc-tooltip__content:before,.tooltip--top .mc-tooltip__content:before,.mc-tooltip--top .tooltip__content:before,.tooltip--top .tooltip__content:before{bottom:-1px}.mc-tooltip--right .mc-tooltip__content,.tooltip--right .mc-tooltip__content,.mc-tooltip--right .tooltip__content,.tooltip--right .tooltip__content{top:50%;right:0;transform:translate(calc(100% + 1rem),-50%)}.mc-tooltip--right .mc-tooltip__content:after,.tooltip--right .mc-tooltip__content:after,.mc-tooltip--right .tooltip__content:after,.tooltip--right .tooltip__content:after,.mc-tooltip--right .mc-tooltip__content:before,.tooltip--right .mc-tooltip__content:before,.mc-tooltip--right .tooltip__content:before,.tooltip--right .tooltip__content:before{top:50%;left:0;transform:translate(-99%,-50%)}.mc-tooltip--right .mc-tooltip__content:before,.tooltip--right .mc-tooltip__content:before,.mc-tooltip--right .tooltip__content:before,.tooltip--right .tooltip__content:before{left:-1px}.mc-tooltip--left .mc-tooltip__content,.tooltip--left .mc-tooltip__content,.mc-tooltip--left .tooltip__content,.tooltip--left .tooltip__content{left:0;top:50%;transform:translate(calc(-100% - 1rem),-50%)}.mc-tooltip--left .mc-tooltip__content:after,.tooltip--left .mc-tooltip__content:after,.mc-tooltip--left .tooltip__content:after,.tooltip--left .tooltip__content:after,.mc-tooltip--left .mc-tooltip__content:before,.tooltip--left .mc-tooltip__content:before,.mc-tooltip--left .tooltip__content:before,.tooltip--left .tooltip__content:before{top:50%;right:0;transform:translate(99%,-50%) rotate(180deg)}.mc-tooltip--left .mc-tooltip__content:before,.tooltip--left .mc-tooltip__content:before,.mc-tooltip--left .tooltip__content:before,.tooltip--left .tooltip__content:before{right:-1px}.mc-tooltip--bottom .mc-tooltip__content,.tooltip--bottom .mc-tooltip__content,.mc-tooltip--bottom .tooltip__content,.tooltip--bottom .tooltip__content{bottom:0;left:50%;transform:translate(-50%,calc(100% + 1rem))}.mc-tooltip--bottom .mc-tooltip__content:after,.tooltip--bottom .mc-tooltip__content:after,.mc-tooltip--bottom .tooltip__content:after,.tooltip--bottom .tooltip__content:after,.mc-tooltip--bottom .mc-tooltip__content:before,.tooltip--bottom .mc-tooltip__content:before,.mc-tooltip--bottom .tooltip__content:before,.tooltip--bottom .tooltip__content:before{top:0;left:50%;transform:translate(-50%,-100%) rotate(90deg)}.mc-tooltip--bottom .mc-tooltip__content:before,.tooltip--bottom .mc-tooltip__content:before,.mc-tooltip--bottom .tooltip__content:before,.tooltip--bottom .tooltip__content:before{top:-1px}.mc-tooltip--no-pointer .mc-tooltip__content:after,.tooltip--no-pointer .mc-tooltip__content:after,.mc-tooltip--no-pointer .tooltip__content:after,.tooltip--no-pointer .tooltip__content:after,.mc-tooltip--no-pointer .mc-tooltip__content:before,.tooltip--no-pointer .mc-tooltip__content:before,.mc-tooltip--no-pointer .tooltip__content:before,.tooltip--no-pointer .tooltip__content:before{background:none}.mc-tooltip--standalone,.tooltip--standalone{cursor:help}.mc-tooltip--standalone .mc-tooltip__content,.tooltip--standalone .mc-tooltip__content,.mc-tooltip--standalone .tooltip__content,.tooltip--standalone .tooltip__content{visibility:visible;position:relative;transform:none;top:0;left:0}\n"] }]
|
|
2496
2496
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], noPointer: [{ type: i0.Input, args: [{ isSignal: true, alias: "noPointer", required: false }] }], standalone: [{ type: i0.Input, args: [{ isSignal: true, alias: "standalone", required: false }] }] } });
|
|
2497
2497
|
|
|
2498
2498
|
class MozTooltipDirective {
|
|
@@ -3030,7 +3030,7 @@ class MozPhoneNumberComponent {
|
|
|
3030
3030
|
useExisting: forwardRef(() => MozPhoneNumberComponent),
|
|
3031
3031
|
multi: true,
|
|
3032
3032
|
},
|
|
3033
|
-
], ngImport: i0, template: "<div\n class=\"field\"\n [class.is-disabled]=\"disabled()\"\n [class.is-readonly]=\"readonly()\"\n>\n <legend class=\"field__legend\">\n {{ label() }} @if (showRequirement() && requirementText()) {\n <span class=\"field__requirement\">{{ requirementText() }}</span>\n }\n </legend>\n\n @if (helpText()) {\n <span [id]=\"helpId\" class=\"field__help\">{{ helpText() }}</span>\n }\n\n <div class=\"field__content\">\n <div id=\"mc-phone-number-input\" class=\"phone-number-input\">\n <!-- Select pays + flag -->\n <div\n class=\"phone-number-input__select-wrapper\"\n [class.phone-number-input__select-wrapper--hidden]=\"\n !showCountrySelect()\n \"\n >\n <select\n [id]=\"selectId\"\n [name]=\"selectName()\"\n class=\"select phone-number-input__select\"\n [class.select--s]=\"size() === 's'\"\n [disabled]=\"disabled() || readonly()\"\n [ngModel]=\"selectedCountryCode()\"\n (ngModelChange)=\"onCountryChange($event)\"\n aria-label=\"Country\"\n >\n <option value=\"\" selected hidden></option>\n @for (code of availableCountries(); track code) {\n <option\n [attr.data-flag]=\"code\"\n [value]=\"code\"\n [selected]=\"code === selectedCountryCode()\"\n >\n {{ getCountryName(code) }} (+{{ getCountryCallingCodeFor(code) }})\n </option>\n }\n </select>\n\n @if (showCountrySelect()) {\n <div class=\"phone-number-input__select-display\">\n <div class=\"phone-number-input__flag\">\n <img\n class=\"phone-number-input__flag-image\"\n [id]=\"flagImgId\"\n [src]=\"selectedFlagUrl()\"\n [alt]=\"selectedCountryName()\"\n width=\"20\"\n />\n </div>\n <ChevronDown24 class=\"phone-number-input__chevron\" />\n </div>\n }\n </div>\n\n <!-- Input num\u00E9ro -->\n <div\n class=\"text-input phone-number-input__input\"\n [class.text-input--s]=\"size() === 's'\"\n [class.is-invalid]=\"isInvalid()\"\n >\n @if (showCountryCode()) {\n <span [id]=\"ccId\" class=\"phone-number-input__country-code\"\n >{{ selectedDialCode() }}</span\n >\n }\n\n <input\n type=\"tel\"\n [id]=\"inputId\"\n class=\"phone-number-input__control text-input__control\"\n [placeholder]=\"dynamicPlaceholder()\"\n [name]=\"inputName()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.aria-invalid]=\"isInvalid() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n [ngModel]=\"number()\"\n (ngModelChange)=\"onNumberChange($event)\"\n (blur)=\"onTouched?.()\"\n />\n </div>\n </div>\n </div>\n\n <!-- Message d'erreur -->\n @if (isInvalid() && errorToShow()) {\n <span [id]=\"errorId\" class=\"field__validation-message is-invalid\">\n {{ errorToShow() }}\n </span>\n }\n</div>\n", styles: [".mc-text-input,.text-input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-text-input__control,.text-input__control{background-color:transparent;border-width:0;font-family:inherit;outline:none}.mc-text-input__control[type=number]::-webkit-inner-spin-button,[type=number].text-input__control::-webkit-inner-spin-button,.mc-text-input__control[type=number]::-webkit-outer-spin-button,[type=number].text-input__control::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input__control[type=number],[type=number].text-input__control{appearance:textfield}.mc-text-input__control[type=search]::-webkit-search-decoration,[type=search].text-input__control::-webkit-search-decoration,.mc-text-input__control[type=search]::-webkit-search-cancel-button,[type=search].text-input__control::-webkit-search-cancel-button{appearance:none}.mc-text-input__control,.text-input__control{padding:.75rem .6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);flex-grow:1}.mc-text-input__control::placeholder,.text-input__control::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-text-input__addon{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-text-input__icon{fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0}.mc-text-input:focus-within,.text-input:focus-within{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-text-input:hover:not(:focus-within),.text-input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-text-input:has(input:disabled),.text-input:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-text-input:has(input[readonly]),.text-input:has(input[readonly]){border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-text-input:has(.mc-text-input__icon),.text-input:has(.mc-text-input__icon),.mc-text-input:has(.mc-text-input__addon),.text-input:has(.mc-text-input__addon){padding-inline-start:.6875rem}.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control,.text-input:has(.mc-text-input__icon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__icon) .text-input__control,.text-input:has(.mc-text-input__icon) .text-input__control,.mc-text-input:has(.mc-text-input__addon) .mc-text-input__control,.text-input:has(.mc-text-input__addon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon) .text-input__control,.text-input:has(.mc-text-input__addon) .text-input__control{padding-inline-start:0}.mc-text-input:has(.mc-controls-options),.text-input:has(.mc-controls-options),.mc-text-input:has(.mc-text-input__addon),.text-input:has(.mc-text-input__addon){padding-inline-end:.6875rem}.mc-text-input:has(.mc-controls-options) .mc-text-input__control,.text-input:has(.mc-controls-options) .mc-text-input__control,.mc-text-input:has(.mc-controls-options) .text-input__control,.text-input:has(.mc-controls-options) .text-input__control,.mc-text-input:has(.mc-text-input__addon) .mc-text-input__control,.text-input:has(.mc-text-input__addon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon) .text-input__control,.text-input:has(.mc-text-input__addon) .text-input__control{padding-inline-end:0}.mc-text-input--s,.text-input--s{height:2rem}.mc-text-input--s .mc-text-input__control,.text-input--s .mc-text-input__control,.mc-text-input--s .text-input__control,.text-input--s .text-input__control{padding:.375rem .6875rem;font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3)}.mc-text-input--s:has(.mc-text-input__icon),.text-input--s:has(.mc-text-input__icon){padding-inline-start:.4375rem}.mc-text-input--s:has(.mc-controls-options),.text-input--s:has(.mc-controls-options){padding-inline-end:.4375rem}.mc-text-input.is-invalid,.is-invalid.text-input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-text-input.is-invalid:hover:not(:focus-within),.is-invalid.text-input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-text-input *,.text-input *{box-sizing:border-box}.mc-button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus{box-shadow:none;outline:none}.mc-button: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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-listbox:has(.mc-listbox__content:not([popover])),.mc-listbox:has(.mc-listbox__content:popover-open){display:flex;align-items:flex-end;justify-content:center;z-index:1;padding:.5rem;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-listbox:has(.mc-listbox__content:not([popover])).is-visible,.mc-listbox:has(.mc-listbox__content:popover-open).is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-listbox:has(.mc-listbox__content:not([popover])),.mc-listbox:has(.mc-listbox__content:popover-open){opacity:1}@media(width>=680px){.mc-listbox:has(.mc-listbox__content:not([popover])),.mc-listbox:has(.mc-listbox__content:popover-open){position:relative;display:block;padding:0;background-color:transparent}}.mc-listbox__content{border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all}@media(width>=680px){.mc-listbox__content{min-width:18.75rem}}.mc-listbox__header{display:flex;align-items:center;justify-content:center;position:relative;height:4rem}@media(width>=680px){.mc-listbox__header{display:none}}.mc-listbox__title{line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, .875rem);color:var(--color-text-tertiary, #666666);text-align:center;margin:0}.mc-listbox__close{position:absolute;right:1.25rem;width:1.5rem;height:1.5rem}.mc-listbox__body{overflow:hidden}@media(width>=680px){.mc-listbox--top .mc-listbox__content{margin:0 0 8px;inset:auto;position-area:span-right top}.mc-listbox--bottom .mc-listbox__content{margin:8px 0 0;inset:auto;position-area:span-right bottom}.mc-listbox--left .mc-listbox__content{margin:0 8px 0 0;inset:auto;position-area:span-bottom left}.mc-listbox--right .mc-listbox__content{margin:0 0 0 8px;inset:auto;position-area:span-bottom right}}.mc-select,.select{position:relative;display:block;width:100%}.mc-select:after,.select:after{content:\"\";pointer-events:none;position:absolute;top:50%;right:1rem;transform:translateY(-50%);width:1rem;height:1rem;background-color:var(--forms-color-icon-interactive, #000000);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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\") no-repeat center/contain}.mc-select__control{appearance:none;font-family:inherit;transition:box-shadow .2s ease;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);height:3rem;padding:0 3rem 0 .75rem;background-position:right 1rem center;border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);display:block;width:100%;color:var(--forms-color-text-default, #000000);background-color:var(--forms-color-background-default, #ffffff);text-overflow:ellipsis;border-radius:var(--border-radius-s, .25rem)}.mc-select__control:hover{border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-select__control:focus{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-select__control:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);border-color:transparent;cursor:not-allowed;box-shadow:none;color:var(--forms-color-text-disabled, #737373)}.mc-select__control--readonly{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-select__control.is-invalid{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-select__control.is-invalid:hover{border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-select--s .mc-select__control,.select--s .mc-select__control{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);height:2rem;padding:0 2rem 0 .5rem;background-position:right .5rem center}.mc-field__label,.mc-field__legend,.field__legend{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000)}.mc-field__legend,.field__legend{padding-inline:0}.mc-field__requirement,.field__requirement,.mc-field__help,.field__help{font-size:var(--font-size-50, .75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help,.field__help{display:block;margin-top:.125rem}.mc-field__content,.field__content{margin-top:.5rem}.mc-field__content:where(.mc-field__content--inline),.field__content:where(.mc-field__content--inline){display:flex;flex-flow:row wrap;gap:.25rem 1rem}.mc-field__validation-message,.field__validation-message{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:.25rem;margin-top:.25rem}.mc-field__validation-message.is-valid:before,.is-valid.field__validation-message:before,.mc-field__validation-message.is-invalid:before,.is-invalid.field__validation-message:before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid,.is-valid.field__validation-message{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid:before,.is-valid.field__validation-message:before{background-color:var(--field-color-validation-valid, #117f03);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-invalid,.is-invalid.field__validation-message{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before,.is-invalid.field__validation-message:before{background-color:var(--field-color-validation-invalid, #c61112);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-loading,.is-loading.field__validation-message{color:var(--field-color-validation-loading, #666666)}.mc-field--group{border-width:0;margin-inline:0;padding:0}.mc-field--group .mc-field__content:not(.mc-field__content--inline),.mc-field--group .field__content:not(.mc-field__content--inline){display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-phone-number-input,.phone-number-input{font-family:var(--font-family, LeroyMerlin),sans-serif;display:flex;position:relative;gap:.25rem;box-sizing:border-box}.mc-phone-number-input__country-code,.phone-number-input__country-code{font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000);font-size:var(--font-size-150, 1rem);margin-left:.75rem}.mc-phone-number-input__flag,.phone-number-input__flag{width:1.5rem;height:1.125rem;margin-left:auto;display:flex;align-items:center}.mc-phone-number-input__flag-image,.phone-number-input__flag-image{width:24px;max-height:18px;border-radius:var(--border-radius-xs, .125rem)}.mc-phone-number-input__chevron,.phone-number-input__chevron{width:1.5rem;height:1.5rem;margin:.75rem}.mc-phone-number-input__select-wrapper,.phone-number-input__select-wrapper{position:relative}.mc-phone-number-input__select-wrapper--hidden,.phone-number-input__select-wrapper--hidden{display:none}.mc-phone-number-input .mc-phone-number-input__select,.phone-number-input .mc-phone-number-input__select,.mc-phone-number-input .phone-number-input__select,.phone-number-input .phone-number-input__select{width:5.75rem;padding:0;z-index:2;opacity:0;position:relative}.mc-phone-number-input .mc-phone-number-input__select:hover+.mc-phone-number-input__select-display,.phone-number-input .mc-phone-number-input__select:hover+.mc-phone-number-input__select-display,.mc-phone-number-input .phone-number-input__select:hover+.mc-phone-number-input__select-display,.phone-number-input .phone-number-input__select:hover+.mc-phone-number-input__select-display,.mc-phone-number-input .mc-phone-number-input__select:hover+.phone-number-input__select-display,.phone-number-input .mc-phone-number-input__select:hover+.phone-number-input__select-display,.mc-phone-number-input .phone-number-input__select:hover+.phone-number-input__select-display,.phone-number-input .phone-number-input__select:hover+.phone-number-input__select-display{border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-phone-number-input .mc-phone-number-input__select :read-only .mc-phone-number-input__chevron,.phone-number-input .mc-phone-number-input__select :read-only .mc-phone-number-input__chevron,.mc-phone-number-input .phone-number-input__select :read-only .mc-phone-number-input__chevron,.phone-number-input .phone-number-input__select :read-only .mc-phone-number-input__chevron,.mc-phone-number-input .mc-phone-number-input__select :read-only .phone-number-input__chevron,.phone-number-input .mc-phone-number-input__select :read-only .phone-number-input__chevron,.mc-phone-number-input .phone-number-input__select :read-only .phone-number-input__chevron,.phone-number-input .phone-number-input__select :read-only .phone-number-input__chevron{display:none}.mc-phone-number-input__select-display,.phone-number-input__select-display{box-sizing:border-box;position:absolute;top:0;right:0;width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;z-index:1;border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--border-radius-s, .25rem)}.mc-phone-number-input__input,.phone-number-input__input{gap:0}.mc-phone-number-input__control,.phone-number-input__control{border-top-left-radius:0;border-bottom-left-radius:0;padding-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ChevronDown24, selector: "ChevronDown24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3033
|
+
], ngImport: i0, template: "<div\n class=\"field\"\n [class.is-disabled]=\"disabled()\"\n [class.is-readonly]=\"readonly()\"\n>\n <legend class=\"field__legend\">\n {{ label() }} @if (showRequirement() && requirementText()) {\n <span class=\"field__requirement\">{{ requirementText() }}</span>\n }\n </legend>\n\n @if (helpText()) {\n <span [id]=\"helpId\" class=\"field__help\">{{ helpText() }}</span>\n }\n\n <div class=\"field__content\">\n <div id=\"mc-phone-number-input\" class=\"phone-number-input\">\n <!-- Select pays + flag -->\n <div\n class=\"phone-number-input__select-wrapper\"\n [class.phone-number-input__select-wrapper--hidden]=\"\n !showCountrySelect()\n \"\n >\n <select\n [id]=\"selectId\"\n [name]=\"selectName()\"\n class=\"select phone-number-input__select\"\n [class.select--s]=\"size() === 's'\"\n [disabled]=\"disabled() || readonly()\"\n [ngModel]=\"selectedCountryCode()\"\n (ngModelChange)=\"onCountryChange($event)\"\n aria-label=\"Country\"\n >\n <option value=\"\" selected hidden></option>\n @for (code of availableCountries(); track code) {\n <option\n [attr.data-flag]=\"code\"\n [value]=\"code\"\n [selected]=\"code === selectedCountryCode()\"\n >\n {{ getCountryName(code) }} (+{{ getCountryCallingCodeFor(code) }})\n </option>\n }\n </select>\n\n @if (showCountrySelect()) {\n <div class=\"phone-number-input__select-display\">\n <div class=\"phone-number-input__flag\">\n <img\n class=\"phone-number-input__flag-image\"\n [id]=\"flagImgId\"\n [src]=\"selectedFlagUrl()\"\n [alt]=\"selectedCountryName()\"\n width=\"20\"\n />\n </div>\n <ChevronDown24 class=\"phone-number-input__chevron\" />\n </div>\n }\n </div>\n\n <!-- Input num\u00E9ro -->\n <div\n class=\"text-input phone-number-input__input\"\n [class.text-input--s]=\"size() === 's'\"\n [class.is-invalid]=\"isInvalid()\"\n >\n @if (showCountryCode()) {\n <span [id]=\"ccId\" class=\"phone-number-input__country-code\"\n >{{ selectedDialCode() }}</span\n >\n }\n\n <input\n type=\"tel\"\n [id]=\"inputId\"\n class=\"phone-number-input__control text-input__control\"\n [placeholder]=\"dynamicPlaceholder()\"\n [name]=\"inputName()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.aria-invalid]=\"isInvalid() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n [ngModel]=\"number()\"\n (ngModelChange)=\"onNumberChange($event)\"\n (blur)=\"onTouched?.()\"\n />\n </div>\n </div>\n </div>\n\n <!-- Message d'erreur -->\n @if (isInvalid() && errorToShow()) {\n <span [id]=\"errorId\" class=\"field__validation-message is-invalid\">\n {{ errorToShow() }}\n </span>\n }\n</div>\n", styles: [".mc-text-input,.text-input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-text-input__control,.text-input__control{background-color:transparent;border-width:0;font-family:inherit;outline:none}.mc-text-input__control[type=number]::-webkit-inner-spin-button,[type=number].text-input__control::-webkit-inner-spin-button,.mc-text-input__control[type=number]::-webkit-outer-spin-button,[type=number].text-input__control::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input__control[type=number],[type=number].text-input__control{appearance:textfield}.mc-text-input__control[type=search]::-webkit-search-decoration,[type=search].text-input__control::-webkit-search-decoration,.mc-text-input__control[type=search]::-webkit-search-cancel-button,[type=search].text-input__control::-webkit-search-cancel-button{appearance:none}.mc-text-input__control,.text-input__control{padding:.75rem .6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);flex-grow:1;min-width:0}.mc-text-input__control:placeholder-shown,.text-input__control:placeholder-shown{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-text-input__control::placeholder,.text-input__control::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-text-input__addon{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-text-input__icon{fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0}.mc-text-input:focus-within,.text-input:focus-within{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-text-input:hover:not(:focus-within),.text-input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-text-input:has(input:disabled),.text-input:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-text-input:has(input[readonly]),.text-input:has(input[readonly]){border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-text-input:has(.mc-text-input__icon),.text-input:has(.mc-text-input__icon),.mc-text-input:has(.mc-text-input__addon),.text-input:has(.mc-text-input__addon){padding-inline-start:.6875rem}.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control,.text-input:has(.mc-text-input__icon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__icon) .text-input__control,.text-input:has(.mc-text-input__icon) .text-input__control,.mc-text-input:has(.mc-text-input__addon) .mc-text-input__control,.text-input:has(.mc-text-input__addon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon) .text-input__control,.text-input:has(.mc-text-input__addon) .text-input__control{padding-inline-start:0}.mc-text-input:has(.mc-controls-options),.text-input:has(.mc-controls-options),.mc-text-input:has(.mc-text-input__addon),.text-input:has(.mc-text-input__addon){padding-inline-end:.6875rem}.mc-text-input:has(.mc-controls-options) .mc-text-input__control,.text-input:has(.mc-controls-options) .mc-text-input__control,.mc-text-input:has(.mc-controls-options) .text-input__control,.text-input:has(.mc-controls-options) .text-input__control,.mc-text-input:has(.mc-text-input__addon) .mc-text-input__control,.text-input:has(.mc-text-input__addon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon) .text-input__control,.text-input:has(.mc-text-input__addon) .text-input__control{padding-inline-end:0}.mc-text-input--s,.text-input--s{height:2rem}.mc-text-input--s .mc-text-input__control,.text-input--s .mc-text-input__control,.mc-text-input--s .text-input__control,.text-input--s .text-input__control{padding:.375rem .6875rem;font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3)}.mc-text-input--s:has(.mc-text-input__icon),.text-input--s:has(.mc-text-input__icon){padding-inline-start:.4375rem}.mc-text-input--s:has(.mc-controls-options),.text-input--s:has(.mc-controls-options){padding-inline-end:.4375rem}.mc-text-input.is-invalid,.is-invalid.text-input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-text-input.is-invalid:hover:not(:focus-within),.is-invalid.text-input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-text-input *,.text-input *{box-sizing:border-box}.mc-button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active{transform:scale(.95)}.mc-button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:background-color ease .2s,border-color ease .2s,color ease .2s,transform ease-out .15s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus{box-shadow:none;outline:none}.mc-button: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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active{transform:scale(.95)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active{transform:scale(.95)}.mc-button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{transform:scale(.95)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{transform:scale(.95)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{transform:scale(.95)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active{transform:scale(.95)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active{transform:scale(.95)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active{transform:scale(.95)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active{transform:scale(.95)}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active{transform:scale(.95)}.mc-button--ghost.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active{transform:scale(.95)}.mc-button--ghost.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active{transform:scale(.95)}.mc-button--ghost.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active{transform:scale(.95)}.mc-button--ghost.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-listbox:has(.mc-listbox__content:not([popover])),.mc-listbox:has(.mc-listbox__content:popover-open){display:flex;align-items:flex-end;justify-content:center;z-index:1;padding:.5rem;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-listbox:has(.mc-listbox__content:not([popover])).is-visible,.mc-listbox:has(.mc-listbox__content:popover-open).is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-listbox:has(.mc-listbox__content:not([popover])),.mc-listbox:has(.mc-listbox__content:popover-open){opacity:1}@media(width>=680px){.mc-listbox:has(.mc-listbox__content:not([popover])),.mc-listbox:has(.mc-listbox__content:popover-open){position:relative;display:block;padding:0;background-color:transparent}}.mc-listbox__content{border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all}@media(width>=680px){.mc-listbox__content{min-width:18.75rem}}.mc-listbox__header{display:flex;align-items:center;justify-content:center;position:relative;height:4rem}@media(width>=680px){.mc-listbox__header{display:none}}.mc-listbox__title{line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, .875rem);color:var(--color-text-tertiary, #666666);text-align:center;margin:0}.mc-listbox__close{position:absolute;right:1.25rem;width:1.5rem;height:1.5rem}.mc-listbox__body{overflow:hidden}@media(width>=680px){.mc-listbox--top .mc-listbox__content{margin:0 0 8px;inset:auto;position-area:span-right top}.mc-listbox--bottom .mc-listbox__content{margin:8px 0 0;inset:auto;position-area:span-right bottom}.mc-listbox--left .mc-listbox__content{margin:0 8px 0 0;inset:auto;position-area:span-bottom left}.mc-listbox--right .mc-listbox__content{margin:0 0 0 8px;inset:auto;position-area:span-bottom right}}.mc-select,.select{position:relative;display:block;width:100%}.mc-select:after,.select:after{content:\"\";pointer-events:none;position:absolute;top:50%;right:1rem;transform:translateY(-50%);width:1rem;height:1rem;background-color:var(--forms-color-icon-interactive, #000000);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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\") no-repeat center/contain}.mc-select__control{appearance:none;font-family:inherit;transition:box-shadow .2s ease;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);height:3rem;padding:0 3rem 0 .75rem;background-position:right 1rem center;border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);display:block;width:100%;color:var(--forms-color-text-default, #000000);background-color:var(--forms-color-background-default, #ffffff);text-overflow:ellipsis;border-radius:var(--border-radius-s, .25rem)}.mc-select__control:hover{border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-select__control:focus{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-select__control:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);border-color:transparent;cursor:not-allowed;box-shadow:none;color:var(--forms-color-text-disabled, #737373)}.mc-select__control--readonly{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-select__control.is-invalid{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-select__control.is-invalid:hover{border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-select--s .mc-select__control,.select--s .mc-select__control{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);height:2rem;padding:0 2rem 0 .5rem;background-position:right .5rem center}.mc-field__label,.mc-field__legend,.field__legend{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000)}.mc-field__legend,.field__legend{padding-inline:0}.mc-field__requirement,.field__requirement,.mc-field__help,.field__help{font-size:var(--font-size-50, .75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help,.field__help{display:block;margin-top:.125rem}.mc-field__content,.field__content{margin-top:.5rem}.mc-field__content:where(.mc-field__content--inline),.field__content:where(.mc-field__content--inline){display:flex;flex-flow:row wrap;gap:.25rem 1rem}.mc-field__validation-message,.field__validation-message{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:.25rem;margin-top:.25rem}.mc-field__validation-message.is-valid:before,.is-valid.field__validation-message:before,.mc-field__validation-message.is-invalid:before,.is-invalid.field__validation-message:before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid,.is-valid.field__validation-message{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid:before,.is-valid.field__validation-message:before{background-color:var(--field-color-validation-valid, #117f03);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-invalid,.is-invalid.field__validation-message{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before,.is-invalid.field__validation-message:before{background-color:var(--field-color-validation-invalid, #c61112);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-loading,.is-loading.field__validation-message{color:var(--field-color-validation-loading, #666666)}.mc-field--group{border-width:0;margin-inline:0;padding:0}.mc-field--group .mc-field__content:not(.mc-field__content--inline),.mc-field--group .field__content:not(.mc-field__content--inline){display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-phone-number-input,.phone-number-input{font-family:var(--font-family, LeroyMerlin),sans-serif;display:flex;position:relative;gap:.25rem;box-sizing:border-box}.mc-phone-number-input__country-code,.phone-number-input__country-code{font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000);font-size:var(--font-size-150, 1rem);margin-left:.75rem}.mc-phone-number-input__flag,.phone-number-input__flag{width:1.5rem;height:1.125rem;margin-left:auto;display:flex;align-items:center}.mc-phone-number-input__flag-image,.phone-number-input__flag-image{width:24px;max-height:18px;border-radius:var(--border-radius-xs, .125rem)}.mc-phone-number-input__chevron,.phone-number-input__chevron{width:1.5rem;height:1.5rem;margin:.75rem}.mc-phone-number-input__select-wrapper,.phone-number-input__select-wrapper{position:relative}.mc-phone-number-input__select-wrapper--hidden,.phone-number-input__select-wrapper--hidden{display:none}.mc-phone-number-input .mc-phone-number-input__select,.phone-number-input .mc-phone-number-input__select,.mc-phone-number-input .phone-number-input__select,.phone-number-input .phone-number-input__select{width:5.75rem;padding:0;z-index:2;opacity:0;position:relative}.mc-phone-number-input .mc-phone-number-input__select:hover+.mc-phone-number-input__select-display,.phone-number-input .mc-phone-number-input__select:hover+.mc-phone-number-input__select-display,.mc-phone-number-input .phone-number-input__select:hover+.mc-phone-number-input__select-display,.phone-number-input .phone-number-input__select:hover+.mc-phone-number-input__select-display,.mc-phone-number-input .mc-phone-number-input__select:hover+.phone-number-input__select-display,.phone-number-input .mc-phone-number-input__select:hover+.phone-number-input__select-display,.mc-phone-number-input .phone-number-input__select:hover+.phone-number-input__select-display,.phone-number-input .phone-number-input__select:hover+.phone-number-input__select-display{border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-phone-number-input .mc-phone-number-input__select :read-only .mc-phone-number-input__chevron,.phone-number-input .mc-phone-number-input__select :read-only .mc-phone-number-input__chevron,.mc-phone-number-input .phone-number-input__select :read-only .mc-phone-number-input__chevron,.phone-number-input .phone-number-input__select :read-only .mc-phone-number-input__chevron,.mc-phone-number-input .mc-phone-number-input__select :read-only .phone-number-input__chevron,.phone-number-input .mc-phone-number-input__select :read-only .phone-number-input__chevron,.mc-phone-number-input .phone-number-input__select :read-only .phone-number-input__chevron,.phone-number-input .phone-number-input__select :read-only .phone-number-input__chevron{display:none}.mc-phone-number-input__select-display,.phone-number-input__select-display{box-sizing:border-box;position:absolute;top:0;right:0;width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;z-index:1;border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--border-radius-s, .25rem)}.mc-phone-number-input__input,.phone-number-input__input{gap:0}.mc-phone-number-input__control,.phone-number-input__control{border-top-left-radius:0;border-bottom-left-radius:0;padding-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ChevronDown24, selector: "ChevronDown24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3034
3034
|
}
|
|
3035
3035
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozPhoneNumberComponent, decorators: [{
|
|
3036
3036
|
type: Component,
|
|
@@ -3040,7 +3040,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
3040
3040
|
useExisting: forwardRef(() => MozPhoneNumberComponent),
|
|
3041
3041
|
multi: true,
|
|
3042
3042
|
},
|
|
3043
|
-
], template: "<div\n class=\"field\"\n [class.is-disabled]=\"disabled()\"\n [class.is-readonly]=\"readonly()\"\n>\n <legend class=\"field__legend\">\n {{ label() }} @if (showRequirement() && requirementText()) {\n <span class=\"field__requirement\">{{ requirementText() }}</span>\n }\n </legend>\n\n @if (helpText()) {\n <span [id]=\"helpId\" class=\"field__help\">{{ helpText() }}</span>\n }\n\n <div class=\"field__content\">\n <div id=\"mc-phone-number-input\" class=\"phone-number-input\">\n <!-- Select pays + flag -->\n <div\n class=\"phone-number-input__select-wrapper\"\n [class.phone-number-input__select-wrapper--hidden]=\"\n !showCountrySelect()\n \"\n >\n <select\n [id]=\"selectId\"\n [name]=\"selectName()\"\n class=\"select phone-number-input__select\"\n [class.select--s]=\"size() === 's'\"\n [disabled]=\"disabled() || readonly()\"\n [ngModel]=\"selectedCountryCode()\"\n (ngModelChange)=\"onCountryChange($event)\"\n aria-label=\"Country\"\n >\n <option value=\"\" selected hidden></option>\n @for (code of availableCountries(); track code) {\n <option\n [attr.data-flag]=\"code\"\n [value]=\"code\"\n [selected]=\"code === selectedCountryCode()\"\n >\n {{ getCountryName(code) }} (+{{ getCountryCallingCodeFor(code) }})\n </option>\n }\n </select>\n\n @if (showCountrySelect()) {\n <div class=\"phone-number-input__select-display\">\n <div class=\"phone-number-input__flag\">\n <img\n class=\"phone-number-input__flag-image\"\n [id]=\"flagImgId\"\n [src]=\"selectedFlagUrl()\"\n [alt]=\"selectedCountryName()\"\n width=\"20\"\n />\n </div>\n <ChevronDown24 class=\"phone-number-input__chevron\" />\n </div>\n }\n </div>\n\n <!-- Input num\u00E9ro -->\n <div\n class=\"text-input phone-number-input__input\"\n [class.text-input--s]=\"size() === 's'\"\n [class.is-invalid]=\"isInvalid()\"\n >\n @if (showCountryCode()) {\n <span [id]=\"ccId\" class=\"phone-number-input__country-code\"\n >{{ selectedDialCode() }}</span\n >\n }\n\n <input\n type=\"tel\"\n [id]=\"inputId\"\n class=\"phone-number-input__control text-input__control\"\n [placeholder]=\"dynamicPlaceholder()\"\n [name]=\"inputName()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.aria-invalid]=\"isInvalid() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n [ngModel]=\"number()\"\n (ngModelChange)=\"onNumberChange($event)\"\n (blur)=\"onTouched?.()\"\n />\n </div>\n </div>\n </div>\n\n <!-- Message d'erreur -->\n @if (isInvalid() && errorToShow()) {\n <span [id]=\"errorId\" class=\"field__validation-message is-invalid\">\n {{ errorToShow() }}\n </span>\n }\n</div>\n", styles: [".mc-text-input,.text-input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-text-input__control,.text-input__control{background-color:transparent;border-width:0;font-family:inherit;outline:none}.mc-text-input__control[type=number]::-webkit-inner-spin-button,[type=number].text-input__control::-webkit-inner-spin-button,.mc-text-input__control[type=number]::-webkit-outer-spin-button,[type=number].text-input__control::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input__control[type=number],[type=number].text-input__control{appearance:textfield}.mc-text-input__control[type=search]::-webkit-search-decoration,[type=search].text-input__control::-webkit-search-decoration,.mc-text-input__control[type=search]::-webkit-search-cancel-button,[type=search].text-input__control::-webkit-search-cancel-button{appearance:none}.mc-text-input__control,.text-input__control{padding:.75rem .6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);flex-grow:1}.mc-text-input__control::placeholder,.text-input__control::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-text-input__addon{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-text-input__icon{fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0}.mc-text-input:focus-within,.text-input:focus-within{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-text-input:hover:not(:focus-within),.text-input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-text-input:has(input:disabled),.text-input:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-text-input:has(input[readonly]),.text-input:has(input[readonly]){border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-text-input:has(.mc-text-input__icon),.text-input:has(.mc-text-input__icon),.mc-text-input:has(.mc-text-input__addon),.text-input:has(.mc-text-input__addon){padding-inline-start:.6875rem}.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control,.text-input:has(.mc-text-input__icon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__icon) .text-input__control,.text-input:has(.mc-text-input__icon) .text-input__control,.mc-text-input:has(.mc-text-input__addon) .mc-text-input__control,.text-input:has(.mc-text-input__addon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon) .text-input__control,.text-input:has(.mc-text-input__addon) .text-input__control{padding-inline-start:0}.mc-text-input:has(.mc-controls-options),.text-input:has(.mc-controls-options),.mc-text-input:has(.mc-text-input__addon),.text-input:has(.mc-text-input__addon){padding-inline-end:.6875rem}.mc-text-input:has(.mc-controls-options) .mc-text-input__control,.text-input:has(.mc-controls-options) .mc-text-input__control,.mc-text-input:has(.mc-controls-options) .text-input__control,.text-input:has(.mc-controls-options) .text-input__control,.mc-text-input:has(.mc-text-input__addon) .mc-text-input__control,.text-input:has(.mc-text-input__addon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon) .text-input__control,.text-input:has(.mc-text-input__addon) .text-input__control{padding-inline-end:0}.mc-text-input--s,.text-input--s{height:2rem}.mc-text-input--s .mc-text-input__control,.text-input--s .mc-text-input__control,.mc-text-input--s .text-input__control,.text-input--s .text-input__control{padding:.375rem .6875rem;font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3)}.mc-text-input--s:has(.mc-text-input__icon),.text-input--s:has(.mc-text-input__icon){padding-inline-start:.4375rem}.mc-text-input--s:has(.mc-controls-options),.text-input--s:has(.mc-controls-options){padding-inline-end:.4375rem}.mc-text-input.is-invalid,.is-invalid.text-input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-text-input.is-invalid:hover:not(:focus-within),.is-invalid.text-input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-text-input *,.text-input *{box-sizing:border-box}.mc-button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus{box-shadow:none;outline:none}.mc-button: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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-listbox:has(.mc-listbox__content:not([popover])),.mc-listbox:has(.mc-listbox__content:popover-open){display:flex;align-items:flex-end;justify-content:center;z-index:1;padding:.5rem;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-listbox:has(.mc-listbox__content:not([popover])).is-visible,.mc-listbox:has(.mc-listbox__content:popover-open).is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-listbox:has(.mc-listbox__content:not([popover])),.mc-listbox:has(.mc-listbox__content:popover-open){opacity:1}@media(width>=680px){.mc-listbox:has(.mc-listbox__content:not([popover])),.mc-listbox:has(.mc-listbox__content:popover-open){position:relative;display:block;padding:0;background-color:transparent}}.mc-listbox__content{border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all}@media(width>=680px){.mc-listbox__content{min-width:18.75rem}}.mc-listbox__header{display:flex;align-items:center;justify-content:center;position:relative;height:4rem}@media(width>=680px){.mc-listbox__header{display:none}}.mc-listbox__title{line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, .875rem);color:var(--color-text-tertiary, #666666);text-align:center;margin:0}.mc-listbox__close{position:absolute;right:1.25rem;width:1.5rem;height:1.5rem}.mc-listbox__body{overflow:hidden}@media(width>=680px){.mc-listbox--top .mc-listbox__content{margin:0 0 8px;inset:auto;position-area:span-right top}.mc-listbox--bottom .mc-listbox__content{margin:8px 0 0;inset:auto;position-area:span-right bottom}.mc-listbox--left .mc-listbox__content{margin:0 8px 0 0;inset:auto;position-area:span-bottom left}.mc-listbox--right .mc-listbox__content{margin:0 0 0 8px;inset:auto;position-area:span-bottom right}}.mc-select,.select{position:relative;display:block;width:100%}.mc-select:after,.select:after{content:\"\";pointer-events:none;position:absolute;top:50%;right:1rem;transform:translateY(-50%);width:1rem;height:1rem;background-color:var(--forms-color-icon-interactive, #000000);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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\") no-repeat center/contain}.mc-select__control{appearance:none;font-family:inherit;transition:box-shadow .2s ease;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);height:3rem;padding:0 3rem 0 .75rem;background-position:right 1rem center;border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);display:block;width:100%;color:var(--forms-color-text-default, #000000);background-color:var(--forms-color-background-default, #ffffff);text-overflow:ellipsis;border-radius:var(--border-radius-s, .25rem)}.mc-select__control:hover{border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-select__control:focus{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-select__control:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);border-color:transparent;cursor:not-allowed;box-shadow:none;color:var(--forms-color-text-disabled, #737373)}.mc-select__control--readonly{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-select__control.is-invalid{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-select__control.is-invalid:hover{border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-select--s .mc-select__control,.select--s .mc-select__control{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);height:2rem;padding:0 2rem 0 .5rem;background-position:right .5rem center}.mc-field__label,.mc-field__legend,.field__legend{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000)}.mc-field__legend,.field__legend{padding-inline:0}.mc-field__requirement,.field__requirement,.mc-field__help,.field__help{font-size:var(--font-size-50, .75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help,.field__help{display:block;margin-top:.125rem}.mc-field__content,.field__content{margin-top:.5rem}.mc-field__content:where(.mc-field__content--inline),.field__content:where(.mc-field__content--inline){display:flex;flex-flow:row wrap;gap:.25rem 1rem}.mc-field__validation-message,.field__validation-message{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:.25rem;margin-top:.25rem}.mc-field__validation-message.is-valid:before,.is-valid.field__validation-message:before,.mc-field__validation-message.is-invalid:before,.is-invalid.field__validation-message:before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid,.is-valid.field__validation-message{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid:before,.is-valid.field__validation-message:before{background-color:var(--field-color-validation-valid, #117f03);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-invalid,.is-invalid.field__validation-message{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before,.is-invalid.field__validation-message:before{background-color:var(--field-color-validation-invalid, #c61112);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-loading,.is-loading.field__validation-message{color:var(--field-color-validation-loading, #666666)}.mc-field--group{border-width:0;margin-inline:0;padding:0}.mc-field--group .mc-field__content:not(.mc-field__content--inline),.mc-field--group .field__content:not(.mc-field__content--inline){display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-phone-number-input,.phone-number-input{font-family:var(--font-family, LeroyMerlin),sans-serif;display:flex;position:relative;gap:.25rem;box-sizing:border-box}.mc-phone-number-input__country-code,.phone-number-input__country-code{font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000);font-size:var(--font-size-150, 1rem);margin-left:.75rem}.mc-phone-number-input__flag,.phone-number-input__flag{width:1.5rem;height:1.125rem;margin-left:auto;display:flex;align-items:center}.mc-phone-number-input__flag-image,.phone-number-input__flag-image{width:24px;max-height:18px;border-radius:var(--border-radius-xs, .125rem)}.mc-phone-number-input__chevron,.phone-number-input__chevron{width:1.5rem;height:1.5rem;margin:.75rem}.mc-phone-number-input__select-wrapper,.phone-number-input__select-wrapper{position:relative}.mc-phone-number-input__select-wrapper--hidden,.phone-number-input__select-wrapper--hidden{display:none}.mc-phone-number-input .mc-phone-number-input__select,.phone-number-input .mc-phone-number-input__select,.mc-phone-number-input .phone-number-input__select,.phone-number-input .phone-number-input__select{width:5.75rem;padding:0;z-index:2;opacity:0;position:relative}.mc-phone-number-input .mc-phone-number-input__select:hover+.mc-phone-number-input__select-display,.phone-number-input .mc-phone-number-input__select:hover+.mc-phone-number-input__select-display,.mc-phone-number-input .phone-number-input__select:hover+.mc-phone-number-input__select-display,.phone-number-input .phone-number-input__select:hover+.mc-phone-number-input__select-display,.mc-phone-number-input .mc-phone-number-input__select:hover+.phone-number-input__select-display,.phone-number-input .mc-phone-number-input__select:hover+.phone-number-input__select-display,.mc-phone-number-input .phone-number-input__select:hover+.phone-number-input__select-display,.phone-number-input .phone-number-input__select:hover+.phone-number-input__select-display{border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-phone-number-input .mc-phone-number-input__select :read-only .mc-phone-number-input__chevron,.phone-number-input .mc-phone-number-input__select :read-only .mc-phone-number-input__chevron,.mc-phone-number-input .phone-number-input__select :read-only .mc-phone-number-input__chevron,.phone-number-input .phone-number-input__select :read-only .mc-phone-number-input__chevron,.mc-phone-number-input .mc-phone-number-input__select :read-only .phone-number-input__chevron,.phone-number-input .mc-phone-number-input__select :read-only .phone-number-input__chevron,.mc-phone-number-input .phone-number-input__select :read-only .phone-number-input__chevron,.phone-number-input .phone-number-input__select :read-only .phone-number-input__chevron{display:none}.mc-phone-number-input__select-display,.phone-number-input__select-display{box-sizing:border-box;position:absolute;top:0;right:0;width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;z-index:1;border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--border-radius-s, .25rem)}.mc-phone-number-input__input,.phone-number-input__input{gap:0}.mc-phone-number-input__control,.phone-number-input__control{border-top-left-radius:0;border-bottom-left-radius:0;padding-left:.5rem}\n"] }]
|
|
3043
|
+
], template: "<div\n class=\"field\"\n [class.is-disabled]=\"disabled()\"\n [class.is-readonly]=\"readonly()\"\n>\n <legend class=\"field__legend\">\n {{ label() }} @if (showRequirement() && requirementText()) {\n <span class=\"field__requirement\">{{ requirementText() }}</span>\n }\n </legend>\n\n @if (helpText()) {\n <span [id]=\"helpId\" class=\"field__help\">{{ helpText() }}</span>\n }\n\n <div class=\"field__content\">\n <div id=\"mc-phone-number-input\" class=\"phone-number-input\">\n <!-- Select pays + flag -->\n <div\n class=\"phone-number-input__select-wrapper\"\n [class.phone-number-input__select-wrapper--hidden]=\"\n !showCountrySelect()\n \"\n >\n <select\n [id]=\"selectId\"\n [name]=\"selectName()\"\n class=\"select phone-number-input__select\"\n [class.select--s]=\"size() === 's'\"\n [disabled]=\"disabled() || readonly()\"\n [ngModel]=\"selectedCountryCode()\"\n (ngModelChange)=\"onCountryChange($event)\"\n aria-label=\"Country\"\n >\n <option value=\"\" selected hidden></option>\n @for (code of availableCountries(); track code) {\n <option\n [attr.data-flag]=\"code\"\n [value]=\"code\"\n [selected]=\"code === selectedCountryCode()\"\n >\n {{ getCountryName(code) }} (+{{ getCountryCallingCodeFor(code) }})\n </option>\n }\n </select>\n\n @if (showCountrySelect()) {\n <div class=\"phone-number-input__select-display\">\n <div class=\"phone-number-input__flag\">\n <img\n class=\"phone-number-input__flag-image\"\n [id]=\"flagImgId\"\n [src]=\"selectedFlagUrl()\"\n [alt]=\"selectedCountryName()\"\n width=\"20\"\n />\n </div>\n <ChevronDown24 class=\"phone-number-input__chevron\" />\n </div>\n }\n </div>\n\n <!-- Input num\u00E9ro -->\n <div\n class=\"text-input phone-number-input__input\"\n [class.text-input--s]=\"size() === 's'\"\n [class.is-invalid]=\"isInvalid()\"\n >\n @if (showCountryCode()) {\n <span [id]=\"ccId\" class=\"phone-number-input__country-code\"\n >{{ selectedDialCode() }}</span\n >\n }\n\n <input\n type=\"tel\"\n [id]=\"inputId\"\n class=\"phone-number-input__control text-input__control\"\n [placeholder]=\"dynamicPlaceholder()\"\n [name]=\"inputName()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.aria-invalid]=\"isInvalid() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n [ngModel]=\"number()\"\n (ngModelChange)=\"onNumberChange($event)\"\n (blur)=\"onTouched?.()\"\n />\n </div>\n </div>\n </div>\n\n <!-- Message d'erreur -->\n @if (isInvalid() && errorToShow()) {\n <span [id]=\"errorId\" class=\"field__validation-message is-invalid\">\n {{ errorToShow() }}\n </span>\n }\n</div>\n", styles: [".mc-text-input,.text-input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-text-input__control,.text-input__control{background-color:transparent;border-width:0;font-family:inherit;outline:none}.mc-text-input__control[type=number]::-webkit-inner-spin-button,[type=number].text-input__control::-webkit-inner-spin-button,.mc-text-input__control[type=number]::-webkit-outer-spin-button,[type=number].text-input__control::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input__control[type=number],[type=number].text-input__control{appearance:textfield}.mc-text-input__control[type=search]::-webkit-search-decoration,[type=search].text-input__control::-webkit-search-decoration,.mc-text-input__control[type=search]::-webkit-search-cancel-button,[type=search].text-input__control::-webkit-search-cancel-button{appearance:none}.mc-text-input__control,.text-input__control{padding:.75rem .6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);flex-grow:1;min-width:0}.mc-text-input__control:placeholder-shown,.text-input__control:placeholder-shown{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-text-input__control::placeholder,.text-input__control::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-text-input__addon{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-text-input__icon{fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0}.mc-text-input:focus-within,.text-input:focus-within{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-text-input:hover:not(:focus-within),.text-input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-text-input:has(input:disabled),.text-input:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-text-input:has(input[readonly]),.text-input:has(input[readonly]){border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-text-input:has(.mc-text-input__icon),.text-input:has(.mc-text-input__icon),.mc-text-input:has(.mc-text-input__addon),.text-input:has(.mc-text-input__addon){padding-inline-start:.6875rem}.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control,.text-input:has(.mc-text-input__icon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__icon) .text-input__control,.text-input:has(.mc-text-input__icon) .text-input__control,.mc-text-input:has(.mc-text-input__addon) .mc-text-input__control,.text-input:has(.mc-text-input__addon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon) .text-input__control,.text-input:has(.mc-text-input__addon) .text-input__control{padding-inline-start:0}.mc-text-input:has(.mc-controls-options),.text-input:has(.mc-controls-options),.mc-text-input:has(.mc-text-input__addon),.text-input:has(.mc-text-input__addon){padding-inline-end:.6875rem}.mc-text-input:has(.mc-controls-options) .mc-text-input__control,.text-input:has(.mc-controls-options) .mc-text-input__control,.mc-text-input:has(.mc-controls-options) .text-input__control,.text-input:has(.mc-controls-options) .text-input__control,.mc-text-input:has(.mc-text-input__addon) .mc-text-input__control,.text-input:has(.mc-text-input__addon) .mc-text-input__control,.mc-text-input:has(.mc-text-input__addon) .text-input__control,.text-input:has(.mc-text-input__addon) .text-input__control{padding-inline-end:0}.mc-text-input--s,.text-input--s{height:2rem}.mc-text-input--s .mc-text-input__control,.text-input--s .mc-text-input__control,.mc-text-input--s .text-input__control,.text-input--s .text-input__control{padding:.375rem .6875rem;font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3)}.mc-text-input--s:has(.mc-text-input__icon),.text-input--s:has(.mc-text-input__icon){padding-inline-start:.4375rem}.mc-text-input--s:has(.mc-controls-options),.text-input--s:has(.mc-controls-options){padding-inline-end:.4375rem}.mc-text-input.is-invalid,.is-invalid.text-input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-text-input.is-invalid:hover:not(:focus-within),.is-invalid.text-input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-text-input *,.text-input *{box-sizing:border-box}.mc-button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active{transform:scale(.95)}.mc-button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:background-color ease .2s,border-color ease .2s,color ease .2s,transform ease-out .15s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus{box-shadow:none;outline:none}.mc-button: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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active{transform:scale(.95)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active{transform:scale(.95)}.mc-button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{transform:scale(.95)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{transform:scale(.95)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{transform:scale(.95)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active{transform:scale(.95)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active{transform:scale(.95)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active{transform:scale(.95)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active{transform:scale(.95)}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active{transform:scale(.95)}.mc-button--ghost.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active{transform:scale(.95)}.mc-button--ghost.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active{transform:scale(.95)}.mc-button--ghost.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active{transform:scale(.95)}.mc-button--ghost.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-listbox:has(.mc-listbox__content:not([popover])),.mc-listbox:has(.mc-listbox__content:popover-open){display:flex;align-items:flex-end;justify-content:center;z-index:1;padding:.5rem;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-listbox:has(.mc-listbox__content:not([popover])).is-visible,.mc-listbox:has(.mc-listbox__content:popover-open).is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-listbox:has(.mc-listbox__content:not([popover])),.mc-listbox:has(.mc-listbox__content:popover-open){opacity:1}@media(width>=680px){.mc-listbox:has(.mc-listbox__content:not([popover])),.mc-listbox:has(.mc-listbox__content:popover-open){position:relative;display:block;padding:0;background-color:transparent}}.mc-listbox__content{border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all}@media(width>=680px){.mc-listbox__content{min-width:18.75rem}}.mc-listbox__header{display:flex;align-items:center;justify-content:center;position:relative;height:4rem}@media(width>=680px){.mc-listbox__header{display:none}}.mc-listbox__title{line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, .875rem);color:var(--color-text-tertiary, #666666);text-align:center;margin:0}.mc-listbox__close{position:absolute;right:1.25rem;width:1.5rem;height:1.5rem}.mc-listbox__body{overflow:hidden}@media(width>=680px){.mc-listbox--top .mc-listbox__content{margin:0 0 8px;inset:auto;position-area:span-right top}.mc-listbox--bottom .mc-listbox__content{margin:8px 0 0;inset:auto;position-area:span-right bottom}.mc-listbox--left .mc-listbox__content{margin:0 8px 0 0;inset:auto;position-area:span-bottom left}.mc-listbox--right .mc-listbox__content{margin:0 0 0 8px;inset:auto;position-area:span-bottom right}}.mc-select,.select{position:relative;display:block;width:100%}.mc-select:after,.select:after{content:\"\";pointer-events:none;position:absolute;top:50%;right:1rem;transform:translateY(-50%);width:1rem;height:1rem;background-color:var(--forms-color-icon-interactive, #000000);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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\") no-repeat center/contain}.mc-select__control{appearance:none;font-family:inherit;transition:box-shadow .2s ease;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);height:3rem;padding:0 3rem 0 .75rem;background-position:right 1rem center;border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);display:block;width:100%;color:var(--forms-color-text-default, #000000);background-color:var(--forms-color-background-default, #ffffff);text-overflow:ellipsis;border-radius:var(--border-radius-s, .25rem)}.mc-select__control:hover{border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-select__control:focus{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-select__control:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);border-color:transparent;cursor:not-allowed;box-shadow:none;color:var(--forms-color-text-disabled, #737373)}.mc-select__control--readonly{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-select__control.is-invalid{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-select__control.is-invalid:hover{border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-select--s .mc-select__control,.select--s .mc-select__control{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);height:2rem;padding:0 2rem 0 .5rem;background-position:right .5rem center}.mc-field__label,.mc-field__legend,.field__legend{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000)}.mc-field__legend,.field__legend{padding-inline:0}.mc-field__requirement,.field__requirement,.mc-field__help,.field__help{font-size:var(--font-size-50, .75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help,.field__help{display:block;margin-top:.125rem}.mc-field__content,.field__content{margin-top:.5rem}.mc-field__content:where(.mc-field__content--inline),.field__content:where(.mc-field__content--inline){display:flex;flex-flow:row wrap;gap:.25rem 1rem}.mc-field__validation-message,.field__validation-message{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:.25rem;margin-top:.25rem}.mc-field__validation-message.is-valid:before,.is-valid.field__validation-message:before,.mc-field__validation-message.is-invalid:before,.is-invalid.field__validation-message:before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid,.is-valid.field__validation-message{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid:before,.is-valid.field__validation-message:before{background-color:var(--field-color-validation-valid, #117f03);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-invalid,.is-invalid.field__validation-message{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before,.is-invalid.field__validation-message:before{background-color:var(--field-color-validation-invalid, #c61112);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-field__validation-message.is-loading,.is-loading.field__validation-message{color:var(--field-color-validation-loading, #666666)}.mc-field--group{border-width:0;margin-inline:0;padding:0}.mc-field--group .mc-field__content:not(.mc-field__content--inline),.mc-field--group .field__content:not(.mc-field__content--inline){display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-phone-number-input,.phone-number-input{font-family:var(--font-family, LeroyMerlin),sans-serif;display:flex;position:relative;gap:.25rem;box-sizing:border-box}.mc-phone-number-input__country-code,.phone-number-input__country-code{font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000);font-size:var(--font-size-150, 1rem);margin-left:.75rem}.mc-phone-number-input__flag,.phone-number-input__flag{width:1.5rem;height:1.125rem;margin-left:auto;display:flex;align-items:center}.mc-phone-number-input__flag-image,.phone-number-input__flag-image{width:24px;max-height:18px;border-radius:var(--border-radius-xs, .125rem)}.mc-phone-number-input__chevron,.phone-number-input__chevron{width:1.5rem;height:1.5rem;margin:.75rem}.mc-phone-number-input__select-wrapper,.phone-number-input__select-wrapper{position:relative}.mc-phone-number-input__select-wrapper--hidden,.phone-number-input__select-wrapper--hidden{display:none}.mc-phone-number-input .mc-phone-number-input__select,.phone-number-input .mc-phone-number-input__select,.mc-phone-number-input .phone-number-input__select,.phone-number-input .phone-number-input__select{width:5.75rem;padding:0;z-index:2;opacity:0;position:relative}.mc-phone-number-input .mc-phone-number-input__select:hover+.mc-phone-number-input__select-display,.phone-number-input .mc-phone-number-input__select:hover+.mc-phone-number-input__select-display,.mc-phone-number-input .phone-number-input__select:hover+.mc-phone-number-input__select-display,.phone-number-input .phone-number-input__select:hover+.mc-phone-number-input__select-display,.mc-phone-number-input .mc-phone-number-input__select:hover+.phone-number-input__select-display,.phone-number-input .mc-phone-number-input__select:hover+.phone-number-input__select-display,.mc-phone-number-input .phone-number-input__select:hover+.phone-number-input__select-display,.phone-number-input .phone-number-input__select:hover+.phone-number-input__select-display{border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-phone-number-input .mc-phone-number-input__select :read-only .mc-phone-number-input__chevron,.phone-number-input .mc-phone-number-input__select :read-only .mc-phone-number-input__chevron,.mc-phone-number-input .phone-number-input__select :read-only .mc-phone-number-input__chevron,.phone-number-input .phone-number-input__select :read-only .mc-phone-number-input__chevron,.mc-phone-number-input .mc-phone-number-input__select :read-only .phone-number-input__chevron,.phone-number-input .mc-phone-number-input__select :read-only .phone-number-input__chevron,.mc-phone-number-input .phone-number-input__select :read-only .phone-number-input__chevron,.phone-number-input .phone-number-input__select :read-only .phone-number-input__chevron{display:none}.mc-phone-number-input__select-display,.phone-number-input__select-display{box-sizing:border-box;position:absolute;top:0;right:0;width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;z-index:1;border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--border-radius-s, .25rem)}.mc-phone-number-input__input,.phone-number-input__input{gap:0}.mc-phone-number-input__control,.phone-number-input__control{border-top-left-radius:0;border-bottom-left-radius:0;padding-left:.5rem}\n"] }]
|
|
3044
3044
|
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], requirementText: [{ type: i0.Input, args: [{ isSignal: true, alias: "requirementText", required: false }] }], showRequirement: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequirement", required: false }] }], helpText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpText", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], defaultCountry: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultCountry", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], countryCodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "countryCodes", required: false }] }], countries: [{ type: i0.Input, args: [{ isSignal: true, alias: "countries", required: false }] }], showCountrySelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCountrySelect", required: false }] }], showCountryCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCountryCode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], selectName: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectName", required: false }] }], inputName: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputName", required: false }] }] } });
|
|
3045
3045
|
|
|
3046
3046
|
class MozToasterComponent {
|
|
@@ -3368,11 +3368,11 @@ class MozSidebarComponent {
|
|
|
3368
3368
|
item.open = !item.open;
|
|
3369
3369
|
}
|
|
3370
3370
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3371
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozSidebarComponent, isStandalone: true, selector: "moz-sidebar", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, logoSrc: { classPropertyName: "logoSrc", publicName: "logoSrc", isSignal: true, isRequired: false, transformFunction: null }, logoAlt: { classPropertyName: "logoAlt", publicName: "logoAlt", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, showProfile: { classPropertyName: "showProfile", publicName: "showProfile", isSignal: true, isRequired: false, transformFunction: null }, profileName: { classPropertyName: "profileName", publicName: "profileName", isSignal: true, isRequired: false, transformFunction: null }, profileTitle: { classPropertyName: "profileTitle", publicName: "profileTitle", isSignal: true, isRequired: false, transformFunction: null }, profileAvatarSrc: { classPropertyName: "profileAvatarSrc", publicName: "profileAvatarSrc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange", itemClick: "itemClick" }, ngImport: i0, template: "<aside [class]=\"hostClasses()\">\n <header class=\"sidebar__header\">\n @if (logoSrc()) {\n <img class=\"sidebar__header-logo\" [src]=\"logoSrc()!\" [alt]=\"logoAlt()\" />\n } @if (title()) {\n <p class=\"sidebar__header-title\">{{ title() }}</p>\n }\n </header>\n\n <section class=\"sidebar__container\">\n <nav class=\"sidebar__menu\" role=\"navigation\">\n <ul class=\"sidebar__list\">\n @for (item of items(); track item.id) {\n <li class=\"sidebar__item\">\n @if (expanded() && !!item.children?.length) {\n <details\n class=\"sidebar__link-expand\"\n (click)=\"toggleOpen(item)\"\n [attr.open]=\"item.open || null\"\n >\n <summary class=\"sidebar__link\" (click)=\"$event.preventDefault()\">\n @if (item.icon) {\n <span class=\"sidebar__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"item.icon\"></ng-container>\n </span>\n }\n <span class=\"sidebar__text\">{{ item.label }}</span>\n <span aria-hidden=\"true\" class=\"sidebar__sub\">\n <ChevronDown20 />\n </span>\n </summary>\n\n <ul class=\"sidebar__sublist\">\n @for (sub of item.children!; track sub.id) {\n <li class=\"sidebar__item\">\n <a\n class=\"sidebar__sublink\"\n [class.sidebar__sublink--selected]=\"!!sub.selected\"\n [attr.href]=\"sub.href || '#'\"\n (click)=\"onItemClick(item.id, sub.id, $event)\"\n >\n <span class=\"sidebar__text\">{{ sub.label }}</span>\n </a>\n </li>\n }\n </ul>\n </details>\n } @else {\n <a\n class=\"sidebar__link\"\n [class.sidebar__link--selected]=\"!!item.selected\"\n [attr.title]=\"item.label\"\n [attr.href]=\"item.href || '#'\"\n (click)=\"onItemClick(item.id, null, $event)\"\n >\n @if (item.icon) {\n <span class=\"sidebar__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"item.icon\"></ng-container>\n </span>\n }\n <span class=\"sidebar__text\">{{ item.label }}</span>\n </a>\n }\n </li>\n }\n </ul>\n </nav>\n </section>\n\n @if (showFooter()) {\n <footer class=\"sidebar__footer\">\n <div class=\"divider-horizontal\"></div>\n <div class=\"sidebar__footer-container\">\n @if (showProfile() && (profileName() || profileTitle() || profileAvatarSrc())) {\n <a href=\"#\" class=\"sidebar__footer-profile\" (click)=\"$event.preventDefault()\">\n @if (profileAvatarSrc()) {\n <img\n class=\"sidebar__footer-avatar\"\n [src]=\"profileAvatarSrc()!\"\n [alt]=\"profileName() || 'User'\"\n loading=\"lazy\"\n />\n }\n <div class=\"sidebar__footer-content\">\n @if (profileName()) {\n <p class=\"sidebar__footer-identity\">\n {{ profileName() }}\n </p>\n } @if (profileTitle()) {\n <p class=\"sidebar__footer-title\">{{ profileTitle() }}</p>\n }\n </div>\n </a>\n }\n <button\n class=\"sidebar__footer-expand button button--ghost\"\n type=\"button\"\n [attr.aria-label]=\"expandButtonAriaLabel()\"\n [attr.aria-expanded]=\"expanded()\"\n (click)=\"toggleExpanded()\"\n >\n <SidebarExpand24 class=\"button__icon\" />\n </button>\n </div>\n </footer>\n }\n</aside>\n", styles: [".mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active,.button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label,.button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon,.button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus,.button:focus{box-shadow:none;outline:none}.mc-button:focus-visible,.button: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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.mc-button--s .button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.mc-button--s .button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon,.mc-button--m .button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child,.mc-button--m .button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon,.mc-button--l .button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child,.mc-button--l .button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active,.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon,.mc-button--loading .button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-divider{position:relative}.mc-divider-horizontal,.divider-horizontal{background:var(--divider-color-primary, #cccccc);height:.0625rem}.mc-divider-horizontal--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-horizontal--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-horizontal--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-horizontal--m{height:.25rem}.mc-divider-horizontal--l{height:.5rem}.mc-divider-vertical{background:var(--divider-color-primary, #cccccc);width:.0625rem}.mc-divider-vertical--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-vertical--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-vertical--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-vertical--m{height:.25rem}.mc-divider-vertical--l{height:.5rem}.mc-sidebar,.sidebar{width:100%;display:flex;align-items:start;font-size:var(--font-size-100, .875rem);color:var(--sidebar-color-text-default, #404040);box-sizing:border-box;background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));padding-right:4rem;position:relative}@media screen and (min-width:680px){.mc-sidebar,.sidebar{display:inline-flex;padding-right:0;width:18.75rem}}.mc-sidebar__wrapper{box-sizing:border-box;display:flex;flex-direction:column;gap:.75rem;min-height:100vh;width:100%;padding:.75rem;background-color:var(--sidebar-color-background-primary, #ffffff)}.mc-sidebar__wrapper--divider{border-right:1px solid var(--divider-color-secondary, #999999)}.mc-sidebar__close-button{position:absolute;top:.5rem;right:.5rem}@media screen and (min-width:680px){.mc-sidebar__close-button{display:none}}.mc-sidebar__container,.sidebar__container{flex-grow:1}.mc-sidebar__floating-item{position:absolute;z-index:var(--sidebar-floating-item-index, 4);padding-left:1.25rem;left:calc(2.5rem - 1px)}.mc-sidebar__floating-item--tooltip{top:.25rem}.mc-sidebar__floating-item--expanded{left:0;padding:0}@media screen and (min-width:680px){.mc-sidebar__floating-item--expanded{left:18.5rem}}.mc-sidebar__floating-item--hidden{visibility:hidden;overflow:hidden;opacity:0;height:0;pointer-events:none}.mc-sidebar--collapsed,.sidebar--collapsed{width:4rem}.mc-sidebar--collapsed .mc-sidebar__menu,.sidebar--collapsed .mc-sidebar__menu,.mc-sidebar--collapsed .sidebar__menu,.sidebar--collapsed .sidebar__menu{padding:0}.mc-sidebar__footer,.sidebar__footer{width:100%}.mc-sidebar__footer-container,.sidebar__footer-container{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;margin-top:.5rem}.mc-sidebar__footer-avatar,.sidebar__footer-avatar{width:2rem;height:2rem;border-radius:var(--border-radius-full, 100%)}.mc-sidebar__footer-profile,.sidebar__footer-profile{width:100%;display:flex;align-items:center;gap:.5rem;height:2.5rem;flex-grow:1;border-radius:var(--border-radius-s, .25rem);background-color:var(--sidebar-color-extra-feature-background-default, rgba(255, 255, 255, .01));cursor:pointer;border:none}.mc-sidebar__footer-profile:focus-visible,.sidebar__footer-profile: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-sidebar__footer-profile:hover,.sidebar__footer-profile:hover{background:var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, .05))}.mc-sidebar__footer-content,.sidebar__footer-content{display:none}.mc-sidebar__footer-title,.sidebar__footer-title{margin:0;text-align:left;font-size:var(--font-body-xs, .75rem);color:var(--sidebar-color-section-item-text-default, #404040);font-weight:var(--font-weight-bold, 700)}.mc-sidebar__footer-subtitle{margin:0;font-size:var(--font-caption, .75rem);color:var(--sidebar-color-job-title, #666666)}.mc-sidebar__footer-expand,.sidebar__footer-expand{display:none;min-width:2.5rem;min-height:2.5rem;width:2.5rem;height:2.5rem;transform:none}@media screen and (min-width:680px){.mc-sidebar__footer-expand,.sidebar__footer-expand{display:inline-flex}}.mc-sidebar__footer-expand--mobile{position:relative}@media screen and (min-width:680px){.mc-sidebar__footer-expand--mobile{display:none}}.mc-sidebar__footer--expanded .mc-sidebar__footer-container,.mc-sidebar__footer--expanded .sidebar__footer-container{flex-direction:row;justify-content:flex-end;height:3.5rem}.mc-sidebar__footer--expanded .mc-sidebar__footer-content,.mc-sidebar__footer--expanded .sidebar__footer-content{display:block}.mc-sidebar__footer--expanded .mc-sidebar__footer-expand,.mc-sidebar__footer--expanded .sidebar__footer-expand{transform:rotate(180deg)}.mc-sidebar__footer--collapsed .mc-sidebar__footer-container,.mc-sidebar__footer--collapsed .sidebar__footer-container{flex-direction:column;justify-content:flex-start;height:auto}.mc-sidebar__footer--collapsed .mc-sidebar__footer-content,.mc-sidebar__footer--collapsed .sidebar__footer-content{display:none}.mc-sidebar__footer--collapsed .mc-sidebar__footer-profile,.mc-sidebar__footer--collapsed .sidebar__footer-profile{justify-content:center}.mc-sidebar__footer--collapsed .mc-sidebar__footer-expand,.mc-sidebar__footer--collapsed .sidebar__footer-expand{transform:none}.mc-sidebar__footer-menu{width:19.75rem;box-sizing:border-box;padding:.5rem .75rem;background-color:var(--listbox-color-background, #ffffff);border:1px solid var(--listbox-color-border, #cccccc);border-radius:var(--border-radius-m, .5rem);box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%))}@media screen and (min-width:680px){.mc-sidebar__footer-menu{width:18.75rem}}.mc-sidebar__footer-menu .mc-sidebar__footer-menu-divider{margin:.5rem .75rem}.mc-sidebar__header,.sidebar__header{display:flex;align-items:center;justify-content:center;gap:.5rem}.mc-sidebar__header-logo,.sidebar__header-logo{width:2.5rem;height:2.5rem}.mc-sidebar__header-title,.sidebar__header-title{font-size:var(--font-size-200, 1.125rem);font-weight:var(--font-weight-bold, 700);color:var(--sidebar-color-product-name, #000000);margin:0;flex-grow:1;display:none}.mc-sidebar__header--expanded .mc-sidebar__header-title,.mc-sidebar__header--expanded .sidebar__header-title{display:block}.mc-sidebar__header--collapsed .mc-sidebar__header-title,.mc-sidebar__header--collapsed .sidebar__header-title{display:none}.mc-sidebar__listbox{min-width:18.75rem;border-radius:var(--border-radius-m, .5rem);background-color:var(--listbox-color-background, #ffffff);padding:1rem;display:flex;flex-direction:column;gap:.25rem;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%))}.mc-sidebar__listbox-title{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);padding-bottom:.75rem;margin:0;border-bottom:1px solid var(--divider-color-primary, #cccccc);color:var(--sidebar-color-shortcut-item-text-default, #404040)}.mc-sidebar__list,.sidebar__list{list-style-type:none;margin:0;padding:0}.mc-sidebar__link,.sidebar__link{display:flex;align-items:center;gap:.5rem;height:2.5rem;width:100%;padding-left:.5rem;text-align:left;text-decoration:none;font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--sidebar-color-section-item-text-default, #404040);border-radius:var(--border-radius-m, .5rem);background:transparent;border:none;cursor:pointer}.mc-sidebar__link--selected,.sidebar__link--selected{color:var(--sidebar-color-section-item-text-selected, #006902);background:var(--sidebar-color-section-item-background-selected, #ebf5de)}.mc-sidebar__link--locked{pointer-events:none}.mc-sidebar__link:not(.mc-sidebar__link--selected):not(.sidebar__link--selected):hover,.sidebar__link:not(.mc-sidebar__link--selected):not(.sidebar__link--selected):hover{background:var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, .05))}.mc-sidebar__link:focus-visible,.sidebar__link: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-sidebar__link-expand:open .mc-sidebar__sub,.sidebar__link-expand:open .mc-sidebar__sub,.mc-sidebar__link-expand:open .sidebar__sub,.sidebar__link-expand:open .sidebar__sub{transform:rotate(180deg)}.mc-sidebar__link:is(summary) .mc-sidebar__text,.sidebar__link:is(summary) .mc-sidebar__text,.mc-sidebar__link:is(summary) .sidebar__text,.sidebar__link:is(summary) .sidebar__text{flex-grow:1}.mc-sidebar__icon,.sidebar__icon{fill:currentcolor;width:1.5rem;height:1.5rem}.mc-sidebar__indicator{fill:currentcolor;width:1.25rem;height:1.25rem}.mc-sidebar__text,.sidebar__text{display:block}.mc-sidebar__sub,.sidebar__sub{width:1.25rem;height:1.25rem}.mc-sidebar__sublist,.sidebar__sublist{list-style-type:none;margin:0;padding:0 0 0 2rem;display:flex;flex-direction:column;gap:.25rem}.mc-sidebar__item,.sidebar__item{position:relative;width:100%}.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link,.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link,.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link,.mc-sidebar__item--sub.sidebar__item .sidebar__link{display:flex;align-items:center;justify-content:start;gap:.25rem;padding:.25rem;height:1.75rem;text-decoration:none;color:var(--sidebar-color-section-item-text-default, #404040);border-radius:var(--border-radius-m, .5rem);background:transparent;border:none;cursor:pointer}.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link .mc-sidebar__text,.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link .mc-sidebar__text,.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link .mc-sidebar__text,.mc-sidebar__item--sub.sidebar__item .sidebar__link .mc-sidebar__text,.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link .sidebar__text,.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link .sidebar__text,.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link .sidebar__text,.mc-sidebar__item--sub.sidebar__item .sidebar__link .sidebar__text{display:block;font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-regular, 400)}.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected,.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link--selected,.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link--selected,.mc-sidebar__item--sub.sidebar__item .sidebar__link--selected{color:var(--sidebar-color-section-item-text-selected, #006902);background:var(--sidebar-color-section-item-background-selected, #ebf5de)}.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link:not(.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .sidebar__link--selected):hover,.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link:not(.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .sidebar__link--selected):hover,.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link:not(.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .sidebar__link--selected):hover,.mc-sidebar__item--sub.sidebar__item .sidebar__link:not(.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .sidebar__link--selected):hover{background:var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, .05))}.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link:focus-visible,.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link:focus-visible,.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link:focus-visible,.mc-sidebar__item--sub.sidebar__item .sidebar__link: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-sidebar__item--collapsed .mc-sidebar__text,.mc-sidebar__item--collapsed .sidebar__text,.mc-sidebar__item--collapsed .mc-sidebar__sub,.mc-sidebar__item--collapsed .sidebar__sub,.mc-sidebar__item--collapsed .mc-sidebar__sublist,.mc-sidebar__item--collapsed .sidebar__sublist{display:none}.mc-sidebar__item--collapsed .mc-sidebar__link,.mc-sidebar__item--collapsed .sidebar__link{padding:0;justify-content:center}.mc-sidebar__shortcuts{width:100%}.mc-sidebar__shortcut-wrapper{width:100%;display:grid;justify-content:center;position:relative}.mc-sidebar__shortcut-list{display:flex;margin:0 0 1rem}.mc-sidebar__shortcut-list--grid{padding:0;gap:.5rem;align-items:center}.mc-sidebar__shortcut-list--stacked{gap:.25rem;flex-direction:column;padding:0}.mc-sidebar__shortcut-list--stacked:not(.mc-sidebar__shortcut-list--floating){padding:0 0 .5rem 1rem;margin-bottom:.5rem}.mc-sidebar__shortcut-item{cursor:pointer;display:flex;align-items:center;list-style:none;border-radius:var(--border-radius-m, .5rem);overflow:hidden}.mc-sidebar__shortcut-item:hover{background-color:var(--sidebar-color-shortcut-item-background-hover, rgba(70, 78, 99, .2))}.mc-sidebar__shortcut-item:nth-child(n+5){display:none}.mc-sidebar__shortcut-item--grid{justify-content:center;padding:0 .125rem;height:3rem;width:3.9375rem}.mc-sidebar__shortcut-item--grid .mc-sidebar__shortcut-link{flex-direction:column;gap:.125rem;border-radius:var(--border-radius-m, .5rem)}.mc-sidebar__shortcut-item--stacked{padding:.125rem .25rem;width:12.5rem;height:2.5rem}.mc-sidebar__shortcut-item--stacked.mc-sidebar__shortcut-item--floating{width:100%;padding:.125rem 0 .125rem .25rem}.mc-sidebar__shortcut-item--stacked .mc-sidebar__shortcut-label{font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-body-m, 1rem)}.mc-sidebar__shortcut-item--stacked .mc-sidebar__shortcut-link{gap:.25rem}.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item{background-color:var(--sidebar-color-shortcut-item-background-selected, #ebf5de)}.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item .mc-sidebar__shortcut-label{color:var(--sidebar-color-shortcut-item-text-selected, #006902)}.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item .mc-sidebar__shortcut-icon{fill:var(--sidebar-color-shortcut-item-text-selected, #006902)}.mc-sidebar__shortcut-item:is(.mc-sidebar__trigger){width:3rem;height:3rem;justify-content:center;border:none;background:none;margin-bottom:1rem}.mc-sidebar__shortcut-item:is(.mc-sidebar__trigger):hover{background-color:var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, .1))}.mc-sidebar__shortcut-link: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-sidebar__shortcut-link{text-decoration:none;display:flex;align-items:center;justify-content:center}.mc-sidebar__shortcut-label{font-size:var(--font-size-25, .625rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);color:var(--sidebar-color-shortcut-item-text-default, #404040);white-space:nowrap;overflow:hidden}.mc-sidebar__shortcut-icon{fill:var(--sidebar-color-shortcut-item-text-default, #404040);width:1.5rem;height:1.5rem}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: SidebarExpand24, selector: "SidebarExpand24", inputs: ["hostClass"] }, { kind: "component", type: ChevronDown20, selector: "ChevronDown20", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3371
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozSidebarComponent, isStandalone: true, selector: "moz-sidebar", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, logoSrc: { classPropertyName: "logoSrc", publicName: "logoSrc", isSignal: true, isRequired: false, transformFunction: null }, logoAlt: { classPropertyName: "logoAlt", publicName: "logoAlt", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, showProfile: { classPropertyName: "showProfile", publicName: "showProfile", isSignal: true, isRequired: false, transformFunction: null }, profileName: { classPropertyName: "profileName", publicName: "profileName", isSignal: true, isRequired: false, transformFunction: null }, profileTitle: { classPropertyName: "profileTitle", publicName: "profileTitle", isSignal: true, isRequired: false, transformFunction: null }, profileAvatarSrc: { classPropertyName: "profileAvatarSrc", publicName: "profileAvatarSrc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange", itemClick: "itemClick" }, ngImport: i0, template: "<aside [class]=\"hostClasses()\">\n <header class=\"sidebar__header\">\n @if (logoSrc()) {\n <img class=\"sidebar__header-logo\" [src]=\"logoSrc()!\" [alt]=\"logoAlt()\" />\n } @if (title()) {\n <p class=\"sidebar__header-title\">{{ title() }}</p>\n }\n </header>\n\n <section class=\"sidebar__container\">\n <nav class=\"sidebar__menu\" role=\"navigation\">\n <ul class=\"sidebar__list\">\n @for (item of items(); track item.id) {\n <li class=\"sidebar__item\">\n @if (expanded() && !!item.children?.length) {\n <details\n class=\"sidebar__link-expand\"\n (click)=\"toggleOpen(item)\"\n [attr.open]=\"item.open || null\"\n >\n <summary class=\"sidebar__link\" (click)=\"$event.preventDefault()\">\n @if (item.icon) {\n <span class=\"sidebar__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"item.icon\"></ng-container>\n </span>\n }\n <span class=\"sidebar__text\">{{ item.label }}</span>\n <span aria-hidden=\"true\" class=\"sidebar__sub\">\n <ChevronDown20 />\n </span>\n </summary>\n\n <ul class=\"sidebar__sublist\">\n @for (sub of item.children!; track sub.id) {\n <li class=\"sidebar__item\">\n <a\n class=\"sidebar__sublink\"\n [class.sidebar__sublink--selected]=\"!!sub.selected\"\n [attr.href]=\"sub.href || '#'\"\n (click)=\"onItemClick(item.id, sub.id, $event)\"\n >\n <span class=\"sidebar__text\">{{ sub.label }}</span>\n </a>\n </li>\n }\n </ul>\n </details>\n } @else {\n <a\n class=\"sidebar__link\"\n [class.sidebar__link--selected]=\"!!item.selected\"\n [attr.title]=\"item.label\"\n [attr.href]=\"item.href || '#'\"\n (click)=\"onItemClick(item.id, null, $event)\"\n >\n @if (item.icon) {\n <span class=\"sidebar__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"item.icon\"></ng-container>\n </span>\n }\n <span class=\"sidebar__text\">{{ item.label }}</span>\n </a>\n }\n </li>\n }\n </ul>\n </nav>\n </section>\n\n @if (showFooter()) {\n <footer class=\"sidebar__footer\">\n <div class=\"divider-horizontal\"></div>\n <div class=\"sidebar__footer-container\">\n @if (showProfile() && (profileName() || profileTitle() || profileAvatarSrc())) {\n <a href=\"#\" class=\"sidebar__footer-profile\" (click)=\"$event.preventDefault()\">\n @if (profileAvatarSrc()) {\n <img\n class=\"sidebar__footer-avatar\"\n [src]=\"profileAvatarSrc()!\"\n [alt]=\"profileName() || 'User'\"\n loading=\"lazy\"\n />\n }\n <div class=\"sidebar__footer-content\">\n @if (profileName()) {\n <p class=\"sidebar__footer-identity\">\n {{ profileName() }}\n </p>\n } @if (profileTitle()) {\n <p class=\"sidebar__footer-title\">{{ profileTitle() }}</p>\n }\n </div>\n </a>\n }\n <button\n class=\"sidebar__footer-expand button button--ghost\"\n type=\"button\"\n [attr.aria-label]=\"expandButtonAriaLabel()\"\n [attr.aria-expanded]=\"expanded()\"\n (click)=\"toggleExpanded()\"\n >\n <SidebarExpand24 class=\"button__icon\" />\n </button>\n </div>\n </footer>\n }\n</aside>\n", styles: [".mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active,.button:active{transform:scale(.95)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label,.button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:background-color ease .2s,border-color ease .2s,color ease .2s,transform ease-out .15s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon,.button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus,.button:focus{box-shadow:none;outline:none}.mc-button:focus-visible,.button: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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.mc-button--s .button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.mc-button--s .button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon,.mc-button--m .button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child,.mc-button--m .button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon,.mc-button--l .button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child,.mc-button--l .button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active{transform:scale(.95)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active,.button--ghost:active{transform:scale(.95)}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{transform:scale(.95)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{transform:scale(.95)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{transform:scale(.95)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon,.mc-button--loading .button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active{transform:scale(.95)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active{transform:scale(.95)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active{transform:scale(.95)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active{transform:scale(.95)}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-divider{position:relative}.mc-divider-horizontal,.divider-horizontal{background:var(--divider-color-primary, #cccccc);height:.0625rem}.mc-divider-horizontal--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-horizontal--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-horizontal--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-horizontal--m{height:.25rem}.mc-divider-horizontal--l{height:.5rem}.mc-divider-vertical{background:var(--divider-color-primary, #cccccc);width:.0625rem}.mc-divider-vertical--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-vertical--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-vertical--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-vertical--m{height:.25rem}.mc-divider-vertical--l{height:.5rem}.mc-sidebar,.sidebar{width:100%;display:flex;align-items:start;font-size:var(--font-size-100, .875rem);color:var(--sidebar-color-text-default, #404040);box-sizing:border-box;background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));padding-right:4rem;position:relative}@media screen and (min-width:680px){.mc-sidebar,.sidebar{display:inline-flex;padding-right:0;width:18.75rem}}.mc-sidebar__wrapper{box-sizing:border-box;display:flex;flex-direction:column;gap:.75rem;min-height:100vh;width:100%;padding:.75rem;background-color:var(--sidebar-color-background-primary, #ffffff)}.mc-sidebar__wrapper--divider{border-right:1px solid var(--divider-color-secondary, #999999)}.mc-sidebar__close-button{position:absolute;top:.5rem;right:.5rem}@media screen and (min-width:680px){.mc-sidebar__close-button{display:none}}.mc-sidebar__container,.sidebar__container{flex-grow:1}.mc-sidebar__floating-item{position:absolute;z-index:var(--sidebar-floating-item-index, 4);padding-left:1.25rem}.mc-sidebar__floating-item--hidden{visibility:hidden;overflow:hidden;opacity:0;pointer-events:none;width:max-content;top:0;left:0}.mc-sidebar__floating-item--tooltip{top:.25rem}.mc-sidebar__floating-item--expanded{left:0;padding:0}@media screen and (min-width:680px){.mc-sidebar__floating-item--expanded{left:18.5rem}}.mc-sidebar--collapsed,.sidebar--collapsed{width:4rem}.mc-sidebar--collapsed .mc-sidebar__menu,.sidebar--collapsed .mc-sidebar__menu,.mc-sidebar--collapsed .sidebar__menu,.sidebar--collapsed .sidebar__menu{padding:0}.mc-sidebar__footer,.sidebar__footer{width:100%}.mc-sidebar__footer-container,.sidebar__footer-container{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;margin-top:.5rem}.mc-sidebar__footer-avatar,.sidebar__footer-avatar{width:2rem;height:2rem;border-radius:var(--border-radius-full, 100%)}.mc-sidebar__footer-profile,.sidebar__footer-profile{width:100%;display:flex;align-items:center;gap:.5rem;height:2.5rem;flex-grow:1;border-radius:var(--border-radius-s, .25rem);background-color:var(--sidebar-color-extra-feature-background-default, rgba(255, 255, 255, .01));cursor:pointer;border:none}.mc-sidebar__footer-profile:focus-visible,.sidebar__footer-profile: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-sidebar__footer-profile:hover,.sidebar__footer-profile:hover{background:var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, .05))}.mc-sidebar__footer-content,.sidebar__footer-content{display:none}.mc-sidebar__footer-title,.sidebar__footer-title{margin:0;text-align:left;font-size:var(--font-body-xs, .75rem);color:var(--sidebar-color-section-item-text-default, #404040);font-weight:var(--font-weight-bold, 700)}.mc-sidebar__footer-subtitle{margin:0;font-size:var(--font-caption, .75rem);color:var(--sidebar-color-job-title, #666666)}.mc-sidebar__footer-expand,.sidebar__footer-expand{display:none;min-width:2.5rem;min-height:2.5rem;width:2.5rem;height:2.5rem;transform:none}@media screen and (min-width:680px){.mc-sidebar__footer-expand,.sidebar__footer-expand{display:inline-flex}}.mc-sidebar__footer-expand--mobile{position:relative}@media screen and (min-width:680px){.mc-sidebar__footer-expand--mobile{display:none}}.mc-sidebar__footer--expanded .mc-sidebar__footer-container,.mc-sidebar__footer--expanded .sidebar__footer-container{flex-direction:row;justify-content:flex-end;height:3.5rem}.mc-sidebar__footer--expanded .mc-sidebar__footer-content,.mc-sidebar__footer--expanded .sidebar__footer-content{display:block}.mc-sidebar__footer--expanded .mc-sidebar__footer-expand,.mc-sidebar__footer--expanded .sidebar__footer-expand{transform:rotate(180deg)}.mc-sidebar__footer--collapsed .mc-sidebar__footer-container,.mc-sidebar__footer--collapsed .sidebar__footer-container{flex-direction:column;justify-content:flex-start;height:auto}.mc-sidebar__footer--collapsed .mc-sidebar__footer-content,.mc-sidebar__footer--collapsed .sidebar__footer-content{display:none}.mc-sidebar__footer--collapsed .mc-sidebar__footer-profile,.mc-sidebar__footer--collapsed .sidebar__footer-profile{justify-content:center}.mc-sidebar__footer--collapsed .mc-sidebar__footer-expand,.mc-sidebar__footer--collapsed .sidebar__footer-expand{transform:none}.mc-sidebar__footer-menu{width:19.75rem;box-sizing:border-box;padding:.5rem .75rem;background-color:var(--listbox-color-background, #ffffff);border:1px solid var(--listbox-color-border, #cccccc);border-radius:var(--border-radius-m, .5rem);box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%))}@media screen and (min-width:680px){.mc-sidebar__footer-menu{width:18.75rem}}.mc-sidebar__footer-menu .mc-sidebar__footer-menu-divider{margin:.5rem .75rem}.mc-sidebar__header,.sidebar__header{display:flex;align-items:center;justify-content:center;gap:.5rem}.mc-sidebar__header-logo,.sidebar__header-logo{width:2.5rem;height:2.5rem}.mc-sidebar__header-title,.sidebar__header-title{font-size:var(--font-size-200, 1.125rem);font-weight:var(--font-weight-bold, 700);color:var(--sidebar-color-product-name, #000000);margin:0;flex-grow:1;display:none}.mc-sidebar__header--expanded .mc-sidebar__header-title,.mc-sidebar__header--expanded .sidebar__header-title{display:block}.mc-sidebar__header--collapsed .mc-sidebar__header-title,.mc-sidebar__header--collapsed .sidebar__header-title{display:none}.mc-sidebar__listbox{min-width:18.75rem;border-radius:var(--border-radius-m, .5rem);background-color:var(--listbox-color-background, #ffffff);padding:1rem;display:flex;flex-direction:column;gap:.25rem;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%))}.mc-sidebar__listbox-title{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);padding-bottom:.75rem;margin:0;border-bottom:1px solid var(--divider-color-primary, #cccccc);color:var(--sidebar-color-shortcut-item-text-default, #404040)}.mc-sidebar__list,.sidebar__list{list-style-type:none;margin:0;padding:0}.mc-sidebar__link,.sidebar__link{display:flex;align-items:center;gap:.5rem;height:2.5rem;width:100%;padding-left:.5rem;text-align:left;text-decoration:none;font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--sidebar-color-section-item-text-default, #404040);border-radius:var(--border-radius-m, .5rem);background:transparent;border:none;cursor:pointer;box-sizing:border-box}.mc-sidebar__link--selected,.sidebar__link--selected{color:var(--sidebar-color-section-item-text-selected, #006902);background:var(--sidebar-color-section-item-background-selected, #ebf5de)}.mc-sidebar__link--locked{pointer-events:none}.mc-sidebar__link:not(.mc-sidebar__link--selected):not(.sidebar__link--selected):hover,.sidebar__link:not(.mc-sidebar__link--selected):not(.sidebar__link--selected):hover{background:var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, .05))}.mc-sidebar__link:focus-visible,.sidebar__link: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-sidebar__link-expand:open .mc-sidebar__sub,.sidebar__link-expand:open .mc-sidebar__sub,.mc-sidebar__link-expand:open .sidebar__sub,.sidebar__link-expand:open .sidebar__sub{transform:rotate(180deg)}.mc-sidebar__link:is(summary) .mc-sidebar__text,.sidebar__link:is(summary) .mc-sidebar__text,.mc-sidebar__link:is(summary) .sidebar__text,.sidebar__link:is(summary) .sidebar__text{flex-grow:1}.mc-sidebar__icon,.sidebar__icon{fill:currentcolor;width:1.5rem;height:1.5rem}.mc-sidebar__indicator{fill:currentcolor;width:1.25rem;height:1.25rem}.mc-sidebar__text,.sidebar__text{display:block}.mc-sidebar__sub,.sidebar__sub{width:1.25rem;height:1.25rem}.mc-sidebar__sublist,.sidebar__sublist{list-style-type:none;margin:0;padding:0 0 0 2rem;display:flex;flex-direction:column;gap:.25rem}.mc-sidebar__item,.sidebar__item{position:relative;width:100%}.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link,.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link,.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link,.mc-sidebar__item--sub.sidebar__item .sidebar__link{display:flex;align-items:center;justify-content:start;gap:.25rem;padding:.25rem;height:1.75rem;text-decoration:none;color:var(--sidebar-color-section-item-text-default, #404040);border-radius:var(--border-radius-m, .5rem);background:transparent;border:none;cursor:pointer}.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link .mc-sidebar__text,.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link .mc-sidebar__text,.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link .mc-sidebar__text,.mc-sidebar__item--sub.sidebar__item .sidebar__link .mc-sidebar__text,.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link .sidebar__text,.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link .sidebar__text,.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link .sidebar__text,.mc-sidebar__item--sub.sidebar__item .sidebar__link .sidebar__text{display:block;font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-regular, 400)}.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected,.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link--selected,.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link--selected,.mc-sidebar__item--sub.sidebar__item .sidebar__link--selected{color:var(--sidebar-color-section-item-text-selected, #006902);background:var(--sidebar-color-section-item-background-selected, #ebf5de)}.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link:not(.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .sidebar__link--selected):hover,.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link:not(.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .sidebar__link--selected):hover,.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link:not(.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .sidebar__link--selected):hover,.mc-sidebar__item--sub.sidebar__item .sidebar__link:not(.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .sidebar__link--selected):hover{background:var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, .05))}.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link:focus-visible,.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link:focus-visible,.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link:focus-visible,.mc-sidebar__item--sub.sidebar__item .sidebar__link: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-sidebar__item--collapsed .mc-sidebar__text,.mc-sidebar__item--collapsed .sidebar__text,.mc-sidebar__item--collapsed .mc-sidebar__sub,.mc-sidebar__item--collapsed .sidebar__sub,.mc-sidebar__item--collapsed .mc-sidebar__sublist,.mc-sidebar__item--collapsed .sidebar__sublist{display:none}.mc-sidebar__item--collapsed .mc-sidebar__link,.mc-sidebar__item--collapsed .sidebar__link{padding:0;justify-content:center}.mc-sidebar__shortcuts{width:100%}.mc-sidebar__shortcut-wrapper{width:100%;display:grid;justify-content:center;position:relative}.mc-sidebar__shortcut-list{display:flex;margin:0 0 1rem}.mc-sidebar__shortcut-list--grid{padding:0;gap:.5rem;align-items:center}.mc-sidebar__shortcut-list--stacked{gap:.25rem;flex-direction:column;padding:0}.mc-sidebar__shortcut-list--stacked:not(.mc-sidebar__shortcut-list--floating){padding:0 0 .5rem 1rem;margin-bottom:.5rem}.mc-sidebar__shortcut-item{cursor:pointer;display:flex;align-items:center;list-style:none;border-radius:var(--border-radius-m, .5rem);overflow:hidden}.mc-sidebar__shortcut-item:hover{background-color:var(--sidebar-color-shortcut-item-background-hover, rgba(70, 78, 99, .2))}.mc-sidebar__shortcut-item:nth-child(n+5){display:none}.mc-sidebar__shortcut-item--grid{justify-content:center;padding:0 .125rem;height:3rem;width:3.9375rem}.mc-sidebar__shortcut-item--grid .mc-sidebar__shortcut-link{flex-direction:column;gap:.125rem;border-radius:var(--border-radius-m, .5rem)}.mc-sidebar__shortcut-item--stacked{padding:.125rem .25rem;width:12.5rem;height:2.5rem}.mc-sidebar__shortcut-item--stacked.mc-sidebar__shortcut-item--floating{width:100%;padding:.125rem 0 .125rem .25rem}.mc-sidebar__shortcut-item--stacked .mc-sidebar__shortcut-label{font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-body-m, 1rem)}.mc-sidebar__shortcut-item--stacked .mc-sidebar__shortcut-link{gap:.25rem}.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item{background-color:var(--sidebar-color-shortcut-item-background-selected, #ebf5de)}.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item .mc-sidebar__shortcut-label,.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item .mc-sidebar__shortcut-icon{color:var(--sidebar-color-shortcut-item-text-selected, #006902)}.mc-sidebar__shortcut-item:is(.mc-sidebar__trigger){width:3rem;height:3rem;justify-content:center;border:none;background:none;margin-bottom:1rem}.mc-sidebar__shortcut-item:is(.mc-sidebar__trigger):hover{background-color:var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, .1))}.mc-sidebar__shortcut-link: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-sidebar__shortcut-link{text-decoration:none;display:flex;align-items:center;justify-content:center}.mc-sidebar__shortcut-label{font-size:var(--font-size-25, .625rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);color:var(--sidebar-color-shortcut-item-text-default, #404040);white-space:nowrap;overflow:hidden}.mc-sidebar__shortcut-icon{fill:var(--sidebar-color-shortcut-item-text-default, #404040);width:1.5rem;height:1.5rem}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: SidebarExpand24, selector: "SidebarExpand24", inputs: ["hostClass"] }, { kind: "component", type: ChevronDown20, selector: "ChevronDown20", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3372
3372
|
}
|
|
3373
3373
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozSidebarComponent, decorators: [{
|
|
3374
3374
|
type: Component,
|
|
3375
|
-
args: [{ selector: 'moz-sidebar', imports: [NgComponentOutlet, SidebarExpand24, ChevronDown20], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside [class]=\"hostClasses()\">\n <header class=\"sidebar__header\">\n @if (logoSrc()) {\n <img class=\"sidebar__header-logo\" [src]=\"logoSrc()!\" [alt]=\"logoAlt()\" />\n } @if (title()) {\n <p class=\"sidebar__header-title\">{{ title() }}</p>\n }\n </header>\n\n <section class=\"sidebar__container\">\n <nav class=\"sidebar__menu\" role=\"navigation\">\n <ul class=\"sidebar__list\">\n @for (item of items(); track item.id) {\n <li class=\"sidebar__item\">\n @if (expanded() && !!item.children?.length) {\n <details\n class=\"sidebar__link-expand\"\n (click)=\"toggleOpen(item)\"\n [attr.open]=\"item.open || null\"\n >\n <summary class=\"sidebar__link\" (click)=\"$event.preventDefault()\">\n @if (item.icon) {\n <span class=\"sidebar__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"item.icon\"></ng-container>\n </span>\n }\n <span class=\"sidebar__text\">{{ item.label }}</span>\n <span aria-hidden=\"true\" class=\"sidebar__sub\">\n <ChevronDown20 />\n </span>\n </summary>\n\n <ul class=\"sidebar__sublist\">\n @for (sub of item.children!; track sub.id) {\n <li class=\"sidebar__item\">\n <a\n class=\"sidebar__sublink\"\n [class.sidebar__sublink--selected]=\"!!sub.selected\"\n [attr.href]=\"sub.href || '#'\"\n (click)=\"onItemClick(item.id, sub.id, $event)\"\n >\n <span class=\"sidebar__text\">{{ sub.label }}</span>\n </a>\n </li>\n }\n </ul>\n </details>\n } @else {\n <a\n class=\"sidebar__link\"\n [class.sidebar__link--selected]=\"!!item.selected\"\n [attr.title]=\"item.label\"\n [attr.href]=\"item.href || '#'\"\n (click)=\"onItemClick(item.id, null, $event)\"\n >\n @if (item.icon) {\n <span class=\"sidebar__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"item.icon\"></ng-container>\n </span>\n }\n <span class=\"sidebar__text\">{{ item.label }}</span>\n </a>\n }\n </li>\n }\n </ul>\n </nav>\n </section>\n\n @if (showFooter()) {\n <footer class=\"sidebar__footer\">\n <div class=\"divider-horizontal\"></div>\n <div class=\"sidebar__footer-container\">\n @if (showProfile() && (profileName() || profileTitle() || profileAvatarSrc())) {\n <a href=\"#\" class=\"sidebar__footer-profile\" (click)=\"$event.preventDefault()\">\n @if (profileAvatarSrc()) {\n <img\n class=\"sidebar__footer-avatar\"\n [src]=\"profileAvatarSrc()!\"\n [alt]=\"profileName() || 'User'\"\n loading=\"lazy\"\n />\n }\n <div class=\"sidebar__footer-content\">\n @if (profileName()) {\n <p class=\"sidebar__footer-identity\">\n {{ profileName() }}\n </p>\n } @if (profileTitle()) {\n <p class=\"sidebar__footer-title\">{{ profileTitle() }}</p>\n }\n </div>\n </a>\n }\n <button\n class=\"sidebar__footer-expand button button--ghost\"\n type=\"button\"\n [attr.aria-label]=\"expandButtonAriaLabel()\"\n [attr.aria-expanded]=\"expanded()\"\n (click)=\"toggleExpanded()\"\n >\n <SidebarExpand24 class=\"button__icon\" />\n </button>\n </div>\n </footer>\n }\n</aside>\n", styles: [".mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active,.button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label,.button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon,.button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus,.button:focus{box-shadow:none;outline:none}.mc-button:focus-visible,.button: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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.mc-button--s .button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.mc-button--s .button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon,.mc-button--m .button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child,.mc-button--m .button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon,.mc-button--l .button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child,.mc-button--l .button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active,.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon,.mc-button--loading .button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-divider{position:relative}.mc-divider-horizontal,.divider-horizontal{background:var(--divider-color-primary, #cccccc);height:.0625rem}.mc-divider-horizontal--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-horizontal--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-horizontal--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-horizontal--m{height:.25rem}.mc-divider-horizontal--l{height:.5rem}.mc-divider-vertical{background:var(--divider-color-primary, #cccccc);width:.0625rem}.mc-divider-vertical--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-vertical--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-vertical--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-vertical--m{height:.25rem}.mc-divider-vertical--l{height:.5rem}.mc-sidebar,.sidebar{width:100%;display:flex;align-items:start;font-size:var(--font-size-100, .875rem);color:var(--sidebar-color-text-default, #404040);box-sizing:border-box;background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));padding-right:4rem;position:relative}@media screen and (min-width:680px){.mc-sidebar,.sidebar{display:inline-flex;padding-right:0;width:18.75rem}}.mc-sidebar__wrapper{box-sizing:border-box;display:flex;flex-direction:column;gap:.75rem;min-height:100vh;width:100%;padding:.75rem;background-color:var(--sidebar-color-background-primary, #ffffff)}.mc-sidebar__wrapper--divider{border-right:1px solid var(--divider-color-secondary, #999999)}.mc-sidebar__close-button{position:absolute;top:.5rem;right:.5rem}@media screen and (min-width:680px){.mc-sidebar__close-button{display:none}}.mc-sidebar__container,.sidebar__container{flex-grow:1}.mc-sidebar__floating-item{position:absolute;z-index:var(--sidebar-floating-item-index, 4);padding-left:1.25rem;left:calc(2.5rem - 1px)}.mc-sidebar__floating-item--tooltip{top:.25rem}.mc-sidebar__floating-item--expanded{left:0;padding:0}@media screen and (min-width:680px){.mc-sidebar__floating-item--expanded{left:18.5rem}}.mc-sidebar__floating-item--hidden{visibility:hidden;overflow:hidden;opacity:0;height:0;pointer-events:none}.mc-sidebar--collapsed,.sidebar--collapsed{width:4rem}.mc-sidebar--collapsed .mc-sidebar__menu,.sidebar--collapsed .mc-sidebar__menu,.mc-sidebar--collapsed .sidebar__menu,.sidebar--collapsed .sidebar__menu{padding:0}.mc-sidebar__footer,.sidebar__footer{width:100%}.mc-sidebar__footer-container,.sidebar__footer-container{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;margin-top:.5rem}.mc-sidebar__footer-avatar,.sidebar__footer-avatar{width:2rem;height:2rem;border-radius:var(--border-radius-full, 100%)}.mc-sidebar__footer-profile,.sidebar__footer-profile{width:100%;display:flex;align-items:center;gap:.5rem;height:2.5rem;flex-grow:1;border-radius:var(--border-radius-s, .25rem);background-color:var(--sidebar-color-extra-feature-background-default, rgba(255, 255, 255, .01));cursor:pointer;border:none}.mc-sidebar__footer-profile:focus-visible,.sidebar__footer-profile: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-sidebar__footer-profile:hover,.sidebar__footer-profile:hover{background:var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, .05))}.mc-sidebar__footer-content,.sidebar__footer-content{display:none}.mc-sidebar__footer-title,.sidebar__footer-title{margin:0;text-align:left;font-size:var(--font-body-xs, .75rem);color:var(--sidebar-color-section-item-text-default, #404040);font-weight:var(--font-weight-bold, 700)}.mc-sidebar__footer-subtitle{margin:0;font-size:var(--font-caption, .75rem);color:var(--sidebar-color-job-title, #666666)}.mc-sidebar__footer-expand,.sidebar__footer-expand{display:none;min-width:2.5rem;min-height:2.5rem;width:2.5rem;height:2.5rem;transform:none}@media screen and (min-width:680px){.mc-sidebar__footer-expand,.sidebar__footer-expand{display:inline-flex}}.mc-sidebar__footer-expand--mobile{position:relative}@media screen and (min-width:680px){.mc-sidebar__footer-expand--mobile{display:none}}.mc-sidebar__footer--expanded .mc-sidebar__footer-container,.mc-sidebar__footer--expanded .sidebar__footer-container{flex-direction:row;justify-content:flex-end;height:3.5rem}.mc-sidebar__footer--expanded .mc-sidebar__footer-content,.mc-sidebar__footer--expanded .sidebar__footer-content{display:block}.mc-sidebar__footer--expanded .mc-sidebar__footer-expand,.mc-sidebar__footer--expanded .sidebar__footer-expand{transform:rotate(180deg)}.mc-sidebar__footer--collapsed .mc-sidebar__footer-container,.mc-sidebar__footer--collapsed .sidebar__footer-container{flex-direction:column;justify-content:flex-start;height:auto}.mc-sidebar__footer--collapsed .mc-sidebar__footer-content,.mc-sidebar__footer--collapsed .sidebar__footer-content{display:none}.mc-sidebar__footer--collapsed .mc-sidebar__footer-profile,.mc-sidebar__footer--collapsed .sidebar__footer-profile{justify-content:center}.mc-sidebar__footer--collapsed .mc-sidebar__footer-expand,.mc-sidebar__footer--collapsed .sidebar__footer-expand{transform:none}.mc-sidebar__footer-menu{width:19.75rem;box-sizing:border-box;padding:.5rem .75rem;background-color:var(--listbox-color-background, #ffffff);border:1px solid var(--listbox-color-border, #cccccc);border-radius:var(--border-radius-m, .5rem);box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%))}@media screen and (min-width:680px){.mc-sidebar__footer-menu{width:18.75rem}}.mc-sidebar__footer-menu .mc-sidebar__footer-menu-divider{margin:.5rem .75rem}.mc-sidebar__header,.sidebar__header{display:flex;align-items:center;justify-content:center;gap:.5rem}.mc-sidebar__header-logo,.sidebar__header-logo{width:2.5rem;height:2.5rem}.mc-sidebar__header-title,.sidebar__header-title{font-size:var(--font-size-200, 1.125rem);font-weight:var(--font-weight-bold, 700);color:var(--sidebar-color-product-name, #000000);margin:0;flex-grow:1;display:none}.mc-sidebar__header--expanded .mc-sidebar__header-title,.mc-sidebar__header--expanded .sidebar__header-title{display:block}.mc-sidebar__header--collapsed .mc-sidebar__header-title,.mc-sidebar__header--collapsed .sidebar__header-title{display:none}.mc-sidebar__listbox{min-width:18.75rem;border-radius:var(--border-radius-m, .5rem);background-color:var(--listbox-color-background, #ffffff);padding:1rem;display:flex;flex-direction:column;gap:.25rem;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%))}.mc-sidebar__listbox-title{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);padding-bottom:.75rem;margin:0;border-bottom:1px solid var(--divider-color-primary, #cccccc);color:var(--sidebar-color-shortcut-item-text-default, #404040)}.mc-sidebar__list,.sidebar__list{list-style-type:none;margin:0;padding:0}.mc-sidebar__link,.sidebar__link{display:flex;align-items:center;gap:.5rem;height:2.5rem;width:100%;padding-left:.5rem;text-align:left;text-decoration:none;font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--sidebar-color-section-item-text-default, #404040);border-radius:var(--border-radius-m, .5rem);background:transparent;border:none;cursor:pointer}.mc-sidebar__link--selected,.sidebar__link--selected{color:var(--sidebar-color-section-item-text-selected, #006902);background:var(--sidebar-color-section-item-background-selected, #ebf5de)}.mc-sidebar__link--locked{pointer-events:none}.mc-sidebar__link:not(.mc-sidebar__link--selected):not(.sidebar__link--selected):hover,.sidebar__link:not(.mc-sidebar__link--selected):not(.sidebar__link--selected):hover{background:var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, .05))}.mc-sidebar__link:focus-visible,.sidebar__link: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-sidebar__link-expand:open .mc-sidebar__sub,.sidebar__link-expand:open .mc-sidebar__sub,.mc-sidebar__link-expand:open .sidebar__sub,.sidebar__link-expand:open .sidebar__sub{transform:rotate(180deg)}.mc-sidebar__link:is(summary) .mc-sidebar__text,.sidebar__link:is(summary) .mc-sidebar__text,.mc-sidebar__link:is(summary) .sidebar__text,.sidebar__link:is(summary) .sidebar__text{flex-grow:1}.mc-sidebar__icon,.sidebar__icon{fill:currentcolor;width:1.5rem;height:1.5rem}.mc-sidebar__indicator{fill:currentcolor;width:1.25rem;height:1.25rem}.mc-sidebar__text,.sidebar__text{display:block}.mc-sidebar__sub,.sidebar__sub{width:1.25rem;height:1.25rem}.mc-sidebar__sublist,.sidebar__sublist{list-style-type:none;margin:0;padding:0 0 0 2rem;display:flex;flex-direction:column;gap:.25rem}.mc-sidebar__item,.sidebar__item{position:relative;width:100%}.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link,.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link,.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link,.mc-sidebar__item--sub.sidebar__item .sidebar__link{display:flex;align-items:center;justify-content:start;gap:.25rem;padding:.25rem;height:1.75rem;text-decoration:none;color:var(--sidebar-color-section-item-text-default, #404040);border-radius:var(--border-radius-m, .5rem);background:transparent;border:none;cursor:pointer}.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link .mc-sidebar__text,.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link .mc-sidebar__text,.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link .mc-sidebar__text,.mc-sidebar__item--sub.sidebar__item .sidebar__link .mc-sidebar__text,.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link .sidebar__text,.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link .sidebar__text,.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link .sidebar__text,.mc-sidebar__item--sub.sidebar__item .sidebar__link .sidebar__text{display:block;font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-regular, 400)}.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected,.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link--selected,.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link--selected,.mc-sidebar__item--sub.sidebar__item .sidebar__link--selected{color:var(--sidebar-color-section-item-text-selected, #006902);background:var(--sidebar-color-section-item-background-selected, #ebf5de)}.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link:not(.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .sidebar__link--selected):hover,.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link:not(.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .sidebar__link--selected):hover,.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link:not(.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .sidebar__link--selected):hover,.mc-sidebar__item--sub.sidebar__item .sidebar__link:not(.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .sidebar__link--selected):hover{background:var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, .05))}.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link:focus-visible,.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link:focus-visible,.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link:focus-visible,.mc-sidebar__item--sub.sidebar__item .sidebar__link: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-sidebar__item--collapsed .mc-sidebar__text,.mc-sidebar__item--collapsed .sidebar__text,.mc-sidebar__item--collapsed .mc-sidebar__sub,.mc-sidebar__item--collapsed .sidebar__sub,.mc-sidebar__item--collapsed .mc-sidebar__sublist,.mc-sidebar__item--collapsed .sidebar__sublist{display:none}.mc-sidebar__item--collapsed .mc-sidebar__link,.mc-sidebar__item--collapsed .sidebar__link{padding:0;justify-content:center}.mc-sidebar__shortcuts{width:100%}.mc-sidebar__shortcut-wrapper{width:100%;display:grid;justify-content:center;position:relative}.mc-sidebar__shortcut-list{display:flex;margin:0 0 1rem}.mc-sidebar__shortcut-list--grid{padding:0;gap:.5rem;align-items:center}.mc-sidebar__shortcut-list--stacked{gap:.25rem;flex-direction:column;padding:0}.mc-sidebar__shortcut-list--stacked:not(.mc-sidebar__shortcut-list--floating){padding:0 0 .5rem 1rem;margin-bottom:.5rem}.mc-sidebar__shortcut-item{cursor:pointer;display:flex;align-items:center;list-style:none;border-radius:var(--border-radius-m, .5rem);overflow:hidden}.mc-sidebar__shortcut-item:hover{background-color:var(--sidebar-color-shortcut-item-background-hover, rgba(70, 78, 99, .2))}.mc-sidebar__shortcut-item:nth-child(n+5){display:none}.mc-sidebar__shortcut-item--grid{justify-content:center;padding:0 .125rem;height:3rem;width:3.9375rem}.mc-sidebar__shortcut-item--grid .mc-sidebar__shortcut-link{flex-direction:column;gap:.125rem;border-radius:var(--border-radius-m, .5rem)}.mc-sidebar__shortcut-item--stacked{padding:.125rem .25rem;width:12.5rem;height:2.5rem}.mc-sidebar__shortcut-item--stacked.mc-sidebar__shortcut-item--floating{width:100%;padding:.125rem 0 .125rem .25rem}.mc-sidebar__shortcut-item--stacked .mc-sidebar__shortcut-label{font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-body-m, 1rem)}.mc-sidebar__shortcut-item--stacked .mc-sidebar__shortcut-link{gap:.25rem}.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item{background-color:var(--sidebar-color-shortcut-item-background-selected, #ebf5de)}.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item .mc-sidebar__shortcut-label{color:var(--sidebar-color-shortcut-item-text-selected, #006902)}.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item .mc-sidebar__shortcut-icon{fill:var(--sidebar-color-shortcut-item-text-selected, #006902)}.mc-sidebar__shortcut-item:is(.mc-sidebar__trigger){width:3rem;height:3rem;justify-content:center;border:none;background:none;margin-bottom:1rem}.mc-sidebar__shortcut-item:is(.mc-sidebar__trigger):hover{background-color:var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, .1))}.mc-sidebar__shortcut-link: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-sidebar__shortcut-link{text-decoration:none;display:flex;align-items:center;justify-content:center}.mc-sidebar__shortcut-label{font-size:var(--font-size-25, .625rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);color:var(--sidebar-color-shortcut-item-text-default, #404040);white-space:nowrap;overflow:hidden}.mc-sidebar__shortcut-icon{fill:var(--sidebar-color-shortcut-item-text-default, #404040);width:1.5rem;height:1.5rem}\n"] }]
|
|
3375
|
+
args: [{ selector: 'moz-sidebar', imports: [NgComponentOutlet, SidebarExpand24, ChevronDown20], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside [class]=\"hostClasses()\">\n <header class=\"sidebar__header\">\n @if (logoSrc()) {\n <img class=\"sidebar__header-logo\" [src]=\"logoSrc()!\" [alt]=\"logoAlt()\" />\n } @if (title()) {\n <p class=\"sidebar__header-title\">{{ title() }}</p>\n }\n </header>\n\n <section class=\"sidebar__container\">\n <nav class=\"sidebar__menu\" role=\"navigation\">\n <ul class=\"sidebar__list\">\n @for (item of items(); track item.id) {\n <li class=\"sidebar__item\">\n @if (expanded() && !!item.children?.length) {\n <details\n class=\"sidebar__link-expand\"\n (click)=\"toggleOpen(item)\"\n [attr.open]=\"item.open || null\"\n >\n <summary class=\"sidebar__link\" (click)=\"$event.preventDefault()\">\n @if (item.icon) {\n <span class=\"sidebar__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"item.icon\"></ng-container>\n </span>\n }\n <span class=\"sidebar__text\">{{ item.label }}</span>\n <span aria-hidden=\"true\" class=\"sidebar__sub\">\n <ChevronDown20 />\n </span>\n </summary>\n\n <ul class=\"sidebar__sublist\">\n @for (sub of item.children!; track sub.id) {\n <li class=\"sidebar__item\">\n <a\n class=\"sidebar__sublink\"\n [class.sidebar__sublink--selected]=\"!!sub.selected\"\n [attr.href]=\"sub.href || '#'\"\n (click)=\"onItemClick(item.id, sub.id, $event)\"\n >\n <span class=\"sidebar__text\">{{ sub.label }}</span>\n </a>\n </li>\n }\n </ul>\n </details>\n } @else {\n <a\n class=\"sidebar__link\"\n [class.sidebar__link--selected]=\"!!item.selected\"\n [attr.title]=\"item.label\"\n [attr.href]=\"item.href || '#'\"\n (click)=\"onItemClick(item.id, null, $event)\"\n >\n @if (item.icon) {\n <span class=\"sidebar__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"item.icon\"></ng-container>\n </span>\n }\n <span class=\"sidebar__text\">{{ item.label }}</span>\n </a>\n }\n </li>\n }\n </ul>\n </nav>\n </section>\n\n @if (showFooter()) {\n <footer class=\"sidebar__footer\">\n <div class=\"divider-horizontal\"></div>\n <div class=\"sidebar__footer-container\">\n @if (showProfile() && (profileName() || profileTitle() || profileAvatarSrc())) {\n <a href=\"#\" class=\"sidebar__footer-profile\" (click)=\"$event.preventDefault()\">\n @if (profileAvatarSrc()) {\n <img\n class=\"sidebar__footer-avatar\"\n [src]=\"profileAvatarSrc()!\"\n [alt]=\"profileName() || 'User'\"\n loading=\"lazy\"\n />\n }\n <div class=\"sidebar__footer-content\">\n @if (profileName()) {\n <p class=\"sidebar__footer-identity\">\n {{ profileName() }}\n </p>\n } @if (profileTitle()) {\n <p class=\"sidebar__footer-title\">{{ profileTitle() }}</p>\n }\n </div>\n </a>\n }\n <button\n class=\"sidebar__footer-expand button button--ghost\"\n type=\"button\"\n [attr.aria-label]=\"expandButtonAriaLabel()\"\n [attr.aria-expanded]=\"expanded()\"\n (click)=\"toggleExpanded()\"\n >\n <SidebarExpand24 class=\"button__icon\" />\n </button>\n </div>\n </footer>\n }\n</aside>\n", styles: [".mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active,.button:active{transform:scale(.95)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label,.button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:background-color ease .2s,border-color ease .2s,color ease .2s,transform ease-out .15s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon,.button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus,.button:focus{box-shadow:none;outline:none}.mc-button:focus-visible,.button: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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.mc-button--s .button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.mc-button--s .button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon,.mc-button--m .button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child,.mc-button--m .button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon,.mc-button--l .button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child,.mc-button--l .button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active{transform:scale(.95)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active,.button--ghost:active{transform:scale(.95)}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{transform:scale(.95)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{transform:scale(.95)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{transform:scale(.95)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon,.mc-button--loading .button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active{transform:scale(.95)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active{transform:scale(.95)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active{transform:scale(.95)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active{transform:scale(.95)}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-divider{position:relative}.mc-divider-horizontal,.divider-horizontal{background:var(--divider-color-primary, #cccccc);height:.0625rem}.mc-divider-horizontal--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-horizontal--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-horizontal--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-horizontal--m{height:.25rem}.mc-divider-horizontal--l{height:.5rem}.mc-divider-vertical{background:var(--divider-color-primary, #cccccc);width:.0625rem}.mc-divider-vertical--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-vertical--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-vertical--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-vertical--m{height:.25rem}.mc-divider-vertical--l{height:.5rem}.mc-sidebar,.sidebar{width:100%;display:flex;align-items:start;font-size:var(--font-size-100, .875rem);color:var(--sidebar-color-text-default, #404040);box-sizing:border-box;background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));padding-right:4rem;position:relative}@media screen and (min-width:680px){.mc-sidebar,.sidebar{display:inline-flex;padding-right:0;width:18.75rem}}.mc-sidebar__wrapper{box-sizing:border-box;display:flex;flex-direction:column;gap:.75rem;min-height:100vh;width:100%;padding:.75rem;background-color:var(--sidebar-color-background-primary, #ffffff)}.mc-sidebar__wrapper--divider{border-right:1px solid var(--divider-color-secondary, #999999)}.mc-sidebar__close-button{position:absolute;top:.5rem;right:.5rem}@media screen and (min-width:680px){.mc-sidebar__close-button{display:none}}.mc-sidebar__container,.sidebar__container{flex-grow:1}.mc-sidebar__floating-item{position:absolute;z-index:var(--sidebar-floating-item-index, 4);padding-left:1.25rem}.mc-sidebar__floating-item--hidden{visibility:hidden;overflow:hidden;opacity:0;pointer-events:none;width:max-content;top:0;left:0}.mc-sidebar__floating-item--tooltip{top:.25rem}.mc-sidebar__floating-item--expanded{left:0;padding:0}@media screen and (min-width:680px){.mc-sidebar__floating-item--expanded{left:18.5rem}}.mc-sidebar--collapsed,.sidebar--collapsed{width:4rem}.mc-sidebar--collapsed .mc-sidebar__menu,.sidebar--collapsed .mc-sidebar__menu,.mc-sidebar--collapsed .sidebar__menu,.sidebar--collapsed .sidebar__menu{padding:0}.mc-sidebar__footer,.sidebar__footer{width:100%}.mc-sidebar__footer-container,.sidebar__footer-container{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;margin-top:.5rem}.mc-sidebar__footer-avatar,.sidebar__footer-avatar{width:2rem;height:2rem;border-radius:var(--border-radius-full, 100%)}.mc-sidebar__footer-profile,.sidebar__footer-profile{width:100%;display:flex;align-items:center;gap:.5rem;height:2.5rem;flex-grow:1;border-radius:var(--border-radius-s, .25rem);background-color:var(--sidebar-color-extra-feature-background-default, rgba(255, 255, 255, .01));cursor:pointer;border:none}.mc-sidebar__footer-profile:focus-visible,.sidebar__footer-profile: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-sidebar__footer-profile:hover,.sidebar__footer-profile:hover{background:var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, .05))}.mc-sidebar__footer-content,.sidebar__footer-content{display:none}.mc-sidebar__footer-title,.sidebar__footer-title{margin:0;text-align:left;font-size:var(--font-body-xs, .75rem);color:var(--sidebar-color-section-item-text-default, #404040);font-weight:var(--font-weight-bold, 700)}.mc-sidebar__footer-subtitle{margin:0;font-size:var(--font-caption, .75rem);color:var(--sidebar-color-job-title, #666666)}.mc-sidebar__footer-expand,.sidebar__footer-expand{display:none;min-width:2.5rem;min-height:2.5rem;width:2.5rem;height:2.5rem;transform:none}@media screen and (min-width:680px){.mc-sidebar__footer-expand,.sidebar__footer-expand{display:inline-flex}}.mc-sidebar__footer-expand--mobile{position:relative}@media screen and (min-width:680px){.mc-sidebar__footer-expand--mobile{display:none}}.mc-sidebar__footer--expanded .mc-sidebar__footer-container,.mc-sidebar__footer--expanded .sidebar__footer-container{flex-direction:row;justify-content:flex-end;height:3.5rem}.mc-sidebar__footer--expanded .mc-sidebar__footer-content,.mc-sidebar__footer--expanded .sidebar__footer-content{display:block}.mc-sidebar__footer--expanded .mc-sidebar__footer-expand,.mc-sidebar__footer--expanded .sidebar__footer-expand{transform:rotate(180deg)}.mc-sidebar__footer--collapsed .mc-sidebar__footer-container,.mc-sidebar__footer--collapsed .sidebar__footer-container{flex-direction:column;justify-content:flex-start;height:auto}.mc-sidebar__footer--collapsed .mc-sidebar__footer-content,.mc-sidebar__footer--collapsed .sidebar__footer-content{display:none}.mc-sidebar__footer--collapsed .mc-sidebar__footer-profile,.mc-sidebar__footer--collapsed .sidebar__footer-profile{justify-content:center}.mc-sidebar__footer--collapsed .mc-sidebar__footer-expand,.mc-sidebar__footer--collapsed .sidebar__footer-expand{transform:none}.mc-sidebar__footer-menu{width:19.75rem;box-sizing:border-box;padding:.5rem .75rem;background-color:var(--listbox-color-background, #ffffff);border:1px solid var(--listbox-color-border, #cccccc);border-radius:var(--border-radius-m, .5rem);box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%))}@media screen and (min-width:680px){.mc-sidebar__footer-menu{width:18.75rem}}.mc-sidebar__footer-menu .mc-sidebar__footer-menu-divider{margin:.5rem .75rem}.mc-sidebar__header,.sidebar__header{display:flex;align-items:center;justify-content:center;gap:.5rem}.mc-sidebar__header-logo,.sidebar__header-logo{width:2.5rem;height:2.5rem}.mc-sidebar__header-title,.sidebar__header-title{font-size:var(--font-size-200, 1.125rem);font-weight:var(--font-weight-bold, 700);color:var(--sidebar-color-product-name, #000000);margin:0;flex-grow:1;display:none}.mc-sidebar__header--expanded .mc-sidebar__header-title,.mc-sidebar__header--expanded .sidebar__header-title{display:block}.mc-sidebar__header--collapsed .mc-sidebar__header-title,.mc-sidebar__header--collapsed .sidebar__header-title{display:none}.mc-sidebar__listbox{min-width:18.75rem;border-radius:var(--border-radius-m, .5rem);background-color:var(--listbox-color-background, #ffffff);padding:1rem;display:flex;flex-direction:column;gap:.25rem;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%))}.mc-sidebar__listbox-title{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);padding-bottom:.75rem;margin:0;border-bottom:1px solid var(--divider-color-primary, #cccccc);color:var(--sidebar-color-shortcut-item-text-default, #404040)}.mc-sidebar__list,.sidebar__list{list-style-type:none;margin:0;padding:0}.mc-sidebar__link,.sidebar__link{display:flex;align-items:center;gap:.5rem;height:2.5rem;width:100%;padding-left:.5rem;text-align:left;text-decoration:none;font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--sidebar-color-section-item-text-default, #404040);border-radius:var(--border-radius-m, .5rem);background:transparent;border:none;cursor:pointer;box-sizing:border-box}.mc-sidebar__link--selected,.sidebar__link--selected{color:var(--sidebar-color-section-item-text-selected, #006902);background:var(--sidebar-color-section-item-background-selected, #ebf5de)}.mc-sidebar__link--locked{pointer-events:none}.mc-sidebar__link:not(.mc-sidebar__link--selected):not(.sidebar__link--selected):hover,.sidebar__link:not(.mc-sidebar__link--selected):not(.sidebar__link--selected):hover{background:var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, .05))}.mc-sidebar__link:focus-visible,.sidebar__link: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-sidebar__link-expand:open .mc-sidebar__sub,.sidebar__link-expand:open .mc-sidebar__sub,.mc-sidebar__link-expand:open .sidebar__sub,.sidebar__link-expand:open .sidebar__sub{transform:rotate(180deg)}.mc-sidebar__link:is(summary) .mc-sidebar__text,.sidebar__link:is(summary) .mc-sidebar__text,.mc-sidebar__link:is(summary) .sidebar__text,.sidebar__link:is(summary) .sidebar__text{flex-grow:1}.mc-sidebar__icon,.sidebar__icon{fill:currentcolor;width:1.5rem;height:1.5rem}.mc-sidebar__indicator{fill:currentcolor;width:1.25rem;height:1.25rem}.mc-sidebar__text,.sidebar__text{display:block}.mc-sidebar__sub,.sidebar__sub{width:1.25rem;height:1.25rem}.mc-sidebar__sublist,.sidebar__sublist{list-style-type:none;margin:0;padding:0 0 0 2rem;display:flex;flex-direction:column;gap:.25rem}.mc-sidebar__item,.sidebar__item{position:relative;width:100%}.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link,.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link,.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link,.mc-sidebar__item--sub.sidebar__item .sidebar__link{display:flex;align-items:center;justify-content:start;gap:.25rem;padding:.25rem;height:1.75rem;text-decoration:none;color:var(--sidebar-color-section-item-text-default, #404040);border-radius:var(--border-radius-m, .5rem);background:transparent;border:none;cursor:pointer}.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link .mc-sidebar__text,.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link .mc-sidebar__text,.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link .mc-sidebar__text,.mc-sidebar__item--sub.sidebar__item .sidebar__link .mc-sidebar__text,.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link .sidebar__text,.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link .sidebar__text,.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link .sidebar__text,.mc-sidebar__item--sub.sidebar__item .sidebar__link .sidebar__text{display:block;font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-regular, 400)}.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected,.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link--selected,.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link--selected,.mc-sidebar__item--sub.sidebar__item .sidebar__link--selected{color:var(--sidebar-color-section-item-text-selected, #006902);background:var(--sidebar-color-section-item-background-selected, #ebf5de)}.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link:not(.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .sidebar__link--selected):hover,.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link:not(.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .sidebar__link--selected):hover,.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link:not(.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .sidebar__link--selected):hover,.mc-sidebar__item--sub.sidebar__item .sidebar__link:not(.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link--selected):not(.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link--selected):not(.mc-sidebar__item--sub.sidebar__item .sidebar__link--selected):hover{background:var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, .05))}.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link:focus-visible,.mc-sidebar__item--sub.sidebar__item .mc-sidebar__link:focus-visible,.mc-sidebar__item--sub.mc-sidebar__item .sidebar__link:focus-visible,.mc-sidebar__item--sub.sidebar__item .sidebar__link: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-sidebar__item--collapsed .mc-sidebar__text,.mc-sidebar__item--collapsed .sidebar__text,.mc-sidebar__item--collapsed .mc-sidebar__sub,.mc-sidebar__item--collapsed .sidebar__sub,.mc-sidebar__item--collapsed .mc-sidebar__sublist,.mc-sidebar__item--collapsed .sidebar__sublist{display:none}.mc-sidebar__item--collapsed .mc-sidebar__link,.mc-sidebar__item--collapsed .sidebar__link{padding:0;justify-content:center}.mc-sidebar__shortcuts{width:100%}.mc-sidebar__shortcut-wrapper{width:100%;display:grid;justify-content:center;position:relative}.mc-sidebar__shortcut-list{display:flex;margin:0 0 1rem}.mc-sidebar__shortcut-list--grid{padding:0;gap:.5rem;align-items:center}.mc-sidebar__shortcut-list--stacked{gap:.25rem;flex-direction:column;padding:0}.mc-sidebar__shortcut-list--stacked:not(.mc-sidebar__shortcut-list--floating){padding:0 0 .5rem 1rem;margin-bottom:.5rem}.mc-sidebar__shortcut-item{cursor:pointer;display:flex;align-items:center;list-style:none;border-radius:var(--border-radius-m, .5rem);overflow:hidden}.mc-sidebar__shortcut-item:hover{background-color:var(--sidebar-color-shortcut-item-background-hover, rgba(70, 78, 99, .2))}.mc-sidebar__shortcut-item:nth-child(n+5){display:none}.mc-sidebar__shortcut-item--grid{justify-content:center;padding:0 .125rem;height:3rem;width:3.9375rem}.mc-sidebar__shortcut-item--grid .mc-sidebar__shortcut-link{flex-direction:column;gap:.125rem;border-radius:var(--border-radius-m, .5rem)}.mc-sidebar__shortcut-item--stacked{padding:.125rem .25rem;width:12.5rem;height:2.5rem}.mc-sidebar__shortcut-item--stacked.mc-sidebar__shortcut-item--floating{width:100%;padding:.125rem 0 .125rem .25rem}.mc-sidebar__shortcut-item--stacked .mc-sidebar__shortcut-label{font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-body-m, 1rem)}.mc-sidebar__shortcut-item--stacked .mc-sidebar__shortcut-link{gap:.25rem}.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item{background-color:var(--sidebar-color-shortcut-item-background-selected, #ebf5de)}.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item .mc-sidebar__shortcut-label,.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item .mc-sidebar__shortcut-icon{color:var(--sidebar-color-shortcut-item-text-selected, #006902)}.mc-sidebar__shortcut-item:is(.mc-sidebar__trigger){width:3rem;height:3rem;justify-content:center;border:none;background:none;margin-bottom:1rem}.mc-sidebar__shortcut-item:is(.mc-sidebar__trigger):hover{background-color:var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, .1))}.mc-sidebar__shortcut-link: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-sidebar__shortcut-link{text-decoration:none;display:flex;align-items:center;justify-content:center}.mc-sidebar__shortcut-label{font-size:var(--font-size-25, .625rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);color:var(--sidebar-color-shortcut-item-text-default, #404040);white-space:nowrap;overflow:hidden}.mc-sidebar__shortcut-icon{fill:var(--sidebar-color-shortcut-item-text-default, #404040);width:1.5rem;height:1.5rem}\n"] }]
|
|
3376
3376
|
}], propDecorators: { expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], logoSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoSrc", required: false }] }], logoAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoAlt", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], showProfile: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProfile", required: false }] }], profileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileName", required: false }] }], profileTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileTitle", required: false }] }], profileAvatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAvatarSrc", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
|
|
3377
3377
|
|
|
3378
3378
|
class MozSegmentedControlComponent {
|
|
@@ -3559,11 +3559,11 @@ class MozActionBottomBarComponent {
|
|
|
3559
3559
|
}), /* @ts-ignore */
|
|
3560
3560
|
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
3561
3561
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozActionBottomBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3562
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: MozActionBottomBarComponent, isStandalone: true, selector: "moz-action-bottom-bar", inputs: { boxShadow: { classPropertyName: "boxShadow", publicName: "boxShadow", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"classes()\">\n <moz-divider\n class=\"mc-action-bottom-bar__divider\"\n orientation=\"horizontal\"\n size=\"s\"\n ></moz-divider>\n <div class=\"mc-action-bottom-bar__left\">\n <ng-content select=\"[left]\"></ng-content>\n </div>\n\n <div class=\"mc-action-bottom-bar__right\">\n <ng-content select=\"[right]\"></ng-content>\n </div>\n</div>\n", styles: [".mc-action-bottom-bar{position:fixed;box-sizing:border-box;bottom:0;left:0;width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;background-color:var(--action-bottom-bar-color-background, #ffffff)}.mc-action-bottom-bar__divider{width:100%}.mc-action-bottom-bar__icon{width:1.5rem;height:1.5rem}@media screen and (min-width:679px){.mc-action-bottom-bar__button--icon.mc-button{display:none}}.mc-action-bottom-bar__button--text.mc-button{display:none}@media screen and (min-width:679px){.mc-action-bottom-bar__button--text.mc-button{display:block}}.mc-action-bottom-bar__left{padding-left:1rem}@media screen and (min-width:679px){.mc-action-bottom-bar__left{padding-left:2rem}}.mc-action-bottom-bar__right{margin-left:auto;padding:.5rem 1rem .5rem 0;display:flex;gap:1rem}@media screen and (min-width:679px){.mc-action-bottom-bar__right{padding:1rem 2rem 1rem 0}}\n"], dependencies: [{ kind: "component", type: MozDividerComponent, selector: "moz-divider", inputs: ["orientation", "appearance", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3562
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: MozActionBottomBarComponent, isStandalone: true, selector: "moz-action-bottom-bar", inputs: { boxShadow: { classPropertyName: "boxShadow", publicName: "boxShadow", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"classes()\">\n <moz-divider\n class=\"mc-action-bottom-bar__divider\"\n orientation=\"horizontal\"\n size=\"s\"\n ></moz-divider>\n <div class=\"mc-action-bottom-bar__left\">\n <ng-content select=\"[left]\"></ng-content>\n </div>\n\n <div class=\"mc-action-bottom-bar__right\">\n <ng-content select=\"[right]\"></ng-content>\n </div>\n</div>\n", styles: [".mc-action-bottom-bar{position:fixed;box-sizing:border-box;z-index:var(--action-bottom-bar-z-index, 2);bottom:0;left:0;width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;background-color:var(--action-bottom-bar-color-background, #ffffff)}.mc-action-bottom-bar__divider{width:100%}.mc-action-bottom-bar__icon{width:1.5rem;height:1.5rem}@media screen and (min-width:679px){.mc-action-bottom-bar__button--icon.mc-button{display:none}}.mc-action-bottom-bar__button--text.mc-button{display:none}@media screen and (min-width:679px){.mc-action-bottom-bar__button--text.mc-button{display:block}}.mc-action-bottom-bar__left{padding-left:1rem}@media screen and (min-width:679px){.mc-action-bottom-bar__left{padding-left:2rem}}.mc-action-bottom-bar__right{margin-left:auto;padding:.5rem 1rem .5rem 0;display:flex;gap:1rem}@media screen and (min-width:679px){.mc-action-bottom-bar__right{padding:1rem 2rem 1rem 0}}\n"], dependencies: [{ kind: "component", type: MozDividerComponent, selector: "moz-divider", inputs: ["orientation", "appearance", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3563
3563
|
}
|
|
3564
3564
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozActionBottomBarComponent, decorators: [{
|
|
3565
3565
|
type: Component,
|
|
3566
|
-
args: [{ selector: 'moz-action-bottom-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MozDividerComponent], encapsulation: ViewEncapsulation.None, template: "<div [class]=\"classes()\">\n <moz-divider\n class=\"mc-action-bottom-bar__divider\"\n orientation=\"horizontal\"\n size=\"s\"\n ></moz-divider>\n <div class=\"mc-action-bottom-bar__left\">\n <ng-content select=\"[left]\"></ng-content>\n </div>\n\n <div class=\"mc-action-bottom-bar__right\">\n <ng-content select=\"[right]\"></ng-content>\n </div>\n</div>\n", styles: [".mc-action-bottom-bar{position:fixed;box-sizing:border-box;bottom:0;left:0;width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;background-color:var(--action-bottom-bar-color-background, #ffffff)}.mc-action-bottom-bar__divider{width:100%}.mc-action-bottom-bar__icon{width:1.5rem;height:1.5rem}@media screen and (min-width:679px){.mc-action-bottom-bar__button--icon.mc-button{display:none}}.mc-action-bottom-bar__button--text.mc-button{display:none}@media screen and (min-width:679px){.mc-action-bottom-bar__button--text.mc-button{display:block}}.mc-action-bottom-bar__left{padding-left:1rem}@media screen and (min-width:679px){.mc-action-bottom-bar__left{padding-left:2rem}}.mc-action-bottom-bar__right{margin-left:auto;padding:.5rem 1rem .5rem 0;display:flex;gap:1rem}@media screen and (min-width:679px){.mc-action-bottom-bar__right{padding:1rem 2rem 1rem 0}}\n"] }]
|
|
3566
|
+
args: [{ selector: 'moz-action-bottom-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MozDividerComponent], encapsulation: ViewEncapsulation.None, template: "<div [class]=\"classes()\">\n <moz-divider\n class=\"mc-action-bottom-bar__divider\"\n orientation=\"horizontal\"\n size=\"s\"\n ></moz-divider>\n <div class=\"mc-action-bottom-bar__left\">\n <ng-content select=\"[left]\"></ng-content>\n </div>\n\n <div class=\"mc-action-bottom-bar__right\">\n <ng-content select=\"[right]\"></ng-content>\n </div>\n</div>\n", styles: [".mc-action-bottom-bar{position:fixed;box-sizing:border-box;z-index:var(--action-bottom-bar-z-index, 2);bottom:0;left:0;width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;background-color:var(--action-bottom-bar-color-background, #ffffff)}.mc-action-bottom-bar__divider{width:100%}.mc-action-bottom-bar__icon{width:1.5rem;height:1.5rem}@media screen and (min-width:679px){.mc-action-bottom-bar__button--icon.mc-button{display:none}}.mc-action-bottom-bar__button--text.mc-button{display:none}@media screen and (min-width:679px){.mc-action-bottom-bar__button--text.mc-button{display:block}}.mc-action-bottom-bar__left{padding-left:1rem}@media screen and (min-width:679px){.mc-action-bottom-bar__left{padding-left:2rem}}.mc-action-bottom-bar__right{margin-left:auto;padding:.5rem 1rem .5rem 0;display:flex;gap:1rem}@media screen and (min-width:679px){.mc-action-bottom-bar__right{padding:1rem 2rem 1rem 0}}\n"] }]
|
|
3567
3567
|
}], propDecorators: { boxShadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "boxShadow", required: false }] }] } });
|
|
3568
3568
|
|
|
3569
3569
|
/**
|
|
@@ -3599,11 +3599,11 @@ class MozActionListboxComponent {
|
|
|
3599
3599
|
})), /* @ts-ignore */
|
|
3600
3600
|
...(ngDevMode ? [{ debugName: "itemsWithClasses" }] : /* istanbul ignore next */ []));
|
|
3601
3601
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozActionListboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3602
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozActionListboxComponent, isStandalone: true, selector: "moz-action-listbox", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<div class=\"listbox\">\n <div class=\"listbox__content\">\n <div class=\"listbox__header\">\n @if (title()) {\n <h3 class=\"listbox__title\">{{ title() }}</h3>\n }\n <button\n class=\"listbox__close button button--icon-button button--ghost\"\n type=\"button\"\n aria-label=\"Close\"\n >\n <Cross24 icon />\n </button>\n </div>\n <div class=\"listbox__body\">\n <ul class=\"action-list\" role=\"menu\">\n @for (itemWithClasses of itemsWithClasses(); track $index) { @if\n (itemWithClasses.item.divider) {\n <li class=\"divider-horizontal action-list__divider\"></li>\n }\n <li [class]=\"itemWithClasses.classes\" role=\"menuitem\" [attr.id]=\"itemWithClasses.item.id\">\n <button\n type=\"button\"\n class=\"action-list__button\"\n [disabled]=\"itemWithClasses.item.disabled\"\n (click)=\"!itemWithClasses.item.disabled && itemClick.emit(itemWithClasses.item)\"\n >\n @if (itemWithClasses.item.icon) {\n <div class=\"action-list__icon\">\n <ng-container [ngComponentOutlet]=\"itemWithClasses.item.icon\"> </ng-container>\n </div>\n }\n <p class=\"action-list__text\">\n {{ itemWithClasses.item.label }}\n </p>\n </button>\n </li>\n }\n </ul>\n </div>\n </div>\n</div>\n", styles: [".mc-listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])),.listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])),.mc-listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open),.listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open){display:flex;align-items:flex-end;justify-content:center;z-index:1;padding:.5rem;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-listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])).is-visible,.listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])).is-visible,.mc-listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open).is-visible,.listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open).is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])),.listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])),.mc-listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open),.listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open){opacity:1}@media(width>=680px){.mc-listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])),.listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])),.mc-listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open),.listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open){position:relative;display:block;padding:0;background-color:transparent}}.mc-listbox__content,.listbox__content{border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all}@media(width>=680px){.mc-listbox__content,.listbox__content{min-width:18.75rem}}.mc-listbox__header,.listbox__header{display:flex;align-items:center;justify-content:center;position:relative;height:4rem}@media(width>=680px){.mc-listbox__header,.listbox__header{display:none}}.mc-listbox__title,.listbox__title{line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, .875rem);color:var(--color-text-tertiary, #666666);text-align:center;margin:0}.mc-listbox__close,.listbox__close{position:absolute;right:1.25rem;width:1.5rem;height:1.5rem}.mc-listbox__body,.listbox__body{overflow:hidden}@media(width>=680px){.mc-listbox--top .mc-listbox__content,.mc-listbox--top .listbox__content{margin:0 0 8px;inset:auto;position-area:span-right top}.mc-listbox--bottom .mc-listbox__content,.mc-listbox--bottom .listbox__content{margin:8px 0 0;inset:auto;position-area:span-right bottom}.mc-listbox--left .mc-listbox__content,.mc-listbox--left .listbox__content{margin:0 8px 0 0;inset:auto;position-area:span-bottom left}.mc-listbox--right .mc-listbox__content,.mc-listbox--right .listbox__content{margin:0 0 0 8px;inset:auto;position-area:span-bottom right}}.mc-action-list,.action-list{padding:.5rem;margin:0}.mc-action-list__element,.action-list__element{height:2.5rem;cursor:pointer;border-radius:var(--border-radius-s, .25rem);flex-grow:1}.mc-action-list__element:hover,.action-list__element:hover{background-color:var(--action-listbox-color-background-hover, rgba(0, 0, 0, .05))}.mc-action-list__element--danger .mc-action-list__text,.action-list__element--danger .mc-action-list__text,.mc-action-list__element--danger .action-list__text,.action-list__element--danger .action-list__text{color:var(--action-listbox-color-text-danger, #c61112)}.mc-action-list__element--danger .mc-action-list__icon,.action-list__element--danger .mc-action-list__icon,.mc-action-list__element--danger .action-list__icon,.action-list__element--danger .action-list__icon{fill:var(--action-listbox-color-text-danger, #c61112)}.mc-action-list__element--danger:hover,.action-list__element--danger:hover{background-color:var(--action-listbox-color-background-danger-hover, rgba(198, 17, 18, .1))}.mc-action-list__element--disabled .mc-action-list__text,.action-list__element--disabled .mc-action-list__text,.mc-action-list__element--disabled .action-list__text,.action-list__element--disabled .action-list__text{color:var(--action-listbox-color-text-disabled, #b3b3b3)}.mc-action-list__element--disabled .mc-action-list__icon,.action-list__element--disabled .mc-action-list__icon,.mc-action-list__element--disabled .action-list__icon,.action-list__element--disabled .action-list__icon{fill:var(--action-listbox-color-text-disabled, #b3b3b3)}.mc-action-list__element--disabled:hover,.action-list__element--disabled:hover{background-color:transparent}.mc-action-list__element--disabled button,.action-list__element--disabled button{cursor:not-allowed}.mc-action-list__button,.action-list__button{background-color:transparent;color:var(--action-listbox-color-text-default, #000000);border:none;display:flex;align-items:center;gap:.25rem;padding:0;padding:0 .25rem;cursor:pointer;width:100%;height:100%}.mc-action-list__button:focus-visible,.action-list__button: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-action-list__text,.action-list__text{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.mc-action-list__icon,.action-list__icon{width:1.25rem;height:1.25rem}.mc-action-list__divider,.action-list__divider{margin:.5rem 0}.mc-divider{position:relative}.mc-divider-horizontal,.divider-horizontal{background:var(--divider-color-primary, #cccccc);height:.0625rem}.mc-divider-horizontal--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-horizontal--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-horizontal--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-horizontal--m{height:.25rem}.mc-divider-horizontal--l{height:.5rem}.mc-divider-vertical{background:var(--divider-color-primary, #cccccc);width:.0625rem}.mc-divider-vertical--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-vertical--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-vertical--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-vertical--m{height:.25rem}.mc-divider-vertical--l{height:.5rem}.mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active,.button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label,.button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus,.button:focus{box-shadow:none;outline:none}.mc-button:focus-visible,.button: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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active,.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button,.button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3602
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozActionListboxComponent, isStandalone: true, selector: "moz-action-listbox", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<div class=\"listbox\">\n <div class=\"listbox__content\">\n <div class=\"listbox__header\">\n @if (title()) {\n <h3 class=\"listbox__title\">{{ title() }}</h3>\n }\n <button\n class=\"listbox__close button button--icon-button button--ghost\"\n type=\"button\"\n aria-label=\"Close\"\n >\n <Cross24 icon />\n </button>\n </div>\n <div class=\"listbox__body\">\n <ul class=\"action-list\" role=\"menu\">\n @for (itemWithClasses of itemsWithClasses(); track $index) { @if\n (itemWithClasses.item.divider) {\n <li class=\"divider-horizontal action-list__divider\"></li>\n }\n <li [class]=\"itemWithClasses.classes\" role=\"menuitem\" [attr.id]=\"itemWithClasses.item.id\">\n <button\n type=\"button\"\n class=\"action-list__button\"\n [disabled]=\"itemWithClasses.item.disabled\"\n (click)=\"!itemWithClasses.item.disabled && itemClick.emit(itemWithClasses.item)\"\n >\n @if (itemWithClasses.item.icon) {\n <div class=\"action-list__icon\">\n <ng-container [ngComponentOutlet]=\"itemWithClasses.item.icon\"> </ng-container>\n </div>\n }\n <p class=\"action-list__text\">\n {{ itemWithClasses.item.label }}\n </p>\n </button>\n </li>\n }\n </ul>\n </div>\n </div>\n</div>\n", styles: [".mc-listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])),.listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])),.mc-listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open),.listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open){display:flex;align-items:flex-end;justify-content:center;z-index:1;padding:.5rem;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-listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])).is-visible,.listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])).is-visible,.mc-listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open).is-visible,.listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open).is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])),.listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])),.mc-listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open),.listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open){opacity:1}@media(width>=680px){.mc-listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])),.listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])),.mc-listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open),.listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open){position:relative;display:block;padding:0;background-color:transparent}}.mc-listbox__content,.listbox__content{border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all}@media(width>=680px){.mc-listbox__content,.listbox__content{min-width:18.75rem}}.mc-listbox__header,.listbox__header{display:flex;align-items:center;justify-content:center;position:relative;height:4rem}@media(width>=680px){.mc-listbox__header,.listbox__header{display:none}}.mc-listbox__title,.listbox__title{line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, .875rem);color:var(--color-text-tertiary, #666666);text-align:center;margin:0}.mc-listbox__close,.listbox__close{position:absolute;right:1.25rem;width:1.5rem;height:1.5rem}.mc-listbox__body,.listbox__body{overflow:hidden}@media(width>=680px){.mc-listbox--top .mc-listbox__content,.mc-listbox--top .listbox__content{margin:0 0 8px;inset:auto;position-area:span-right top}.mc-listbox--bottom .mc-listbox__content,.mc-listbox--bottom .listbox__content{margin:8px 0 0;inset:auto;position-area:span-right bottom}.mc-listbox--left .mc-listbox__content,.mc-listbox--left .listbox__content{margin:0 8px 0 0;inset:auto;position-area:span-bottom left}.mc-listbox--right .mc-listbox__content,.mc-listbox--right .listbox__content{margin:0 0 0 8px;inset:auto;position-area:span-bottom right}}.mc-action-list,.action-list{padding:.5rem;margin:0}.mc-action-list__element,.action-list__element{height:2.5rem;cursor:pointer;border-radius:var(--border-radius-s, .25rem);flex-grow:1}.mc-action-list__element:hover,.action-list__element:hover{background-color:var(--action-listbox-color-background-hover, rgba(0, 0, 0, .05))}.mc-action-list__element--danger .mc-action-list__text,.action-list__element--danger .mc-action-list__text,.mc-action-list__element--danger .action-list__text,.action-list__element--danger .action-list__text{color:var(--action-listbox-color-text-danger, #c61112)}.mc-action-list__element--danger .mc-action-list__icon,.action-list__element--danger .mc-action-list__icon,.mc-action-list__element--danger .action-list__icon,.action-list__element--danger .action-list__icon{fill:var(--action-listbox-color-text-danger, #c61112)}.mc-action-list__element--danger:hover,.action-list__element--danger:hover{background-color:var(--action-listbox-color-background-danger-hover, rgba(198, 17, 18, .1))}.mc-action-list__element--disabled .mc-action-list__text,.action-list__element--disabled .mc-action-list__text,.mc-action-list__element--disabled .action-list__text,.action-list__element--disabled .action-list__text{color:var(--action-listbox-color-text-disabled, #b3b3b3)}.mc-action-list__element--disabled .mc-action-list__icon,.action-list__element--disabled .mc-action-list__icon,.mc-action-list__element--disabled .action-list__icon,.action-list__element--disabled .action-list__icon{fill:var(--action-listbox-color-text-disabled, #b3b3b3)}.mc-action-list__element--disabled:hover,.action-list__element--disabled:hover{background-color:transparent}.mc-action-list__element--disabled button,.action-list__element--disabled button{cursor:not-allowed}.mc-action-list__button,.action-list__button{background-color:transparent;color:var(--action-listbox-color-text-default, #000000);border:none;display:flex;align-items:center;gap:.25rem;padding:0;padding:0 .25rem;cursor:pointer;width:100%;height:100%}.mc-action-list__button:focus-visible,.action-list__button: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-action-list__text,.action-list__text{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.mc-action-list__icon,.action-list__icon{width:1.25rem;height:1.25rem}.mc-action-list__divider,.action-list__divider{margin:.5rem 0}.mc-divider{position:relative}.mc-divider-horizontal,.divider-horizontal{background:var(--divider-color-primary, #cccccc);height:.0625rem}.mc-divider-horizontal--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-horizontal--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-horizontal--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-horizontal--m{height:.25rem}.mc-divider-horizontal--l{height:.5rem}.mc-divider-vertical{background:var(--divider-color-primary, #cccccc);width:.0625rem}.mc-divider-vertical--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-vertical--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-vertical--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-vertical--m{height:.25rem}.mc-divider-vertical--l{height:.5rem}.mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active,.button:active{transform:scale(.95)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label,.button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:background-color ease .2s,border-color ease .2s,color ease .2s,transform ease-out .15s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus,.button:focus{box-shadow:none;outline:none}.mc-button:focus-visible,.button: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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active{transform:scale(.95)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active,.button--ghost:active{transform:scale(.95)}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{transform:scale(.95)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{transform:scale(.95)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{transform:scale(.95)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button,.button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active{transform:scale(.95)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active{transform:scale(.95)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active{transform:scale(.95)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active{transform:scale(.95)}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3603
3603
|
}
|
|
3604
3604
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozActionListboxComponent, decorators: [{
|
|
3605
3605
|
type: Component,
|
|
3606
|
-
args: [{ selector: 'moz-action-listbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgComponentOutlet, Cross24], template: "<div class=\"listbox\">\n <div class=\"listbox__content\">\n <div class=\"listbox__header\">\n @if (title()) {\n <h3 class=\"listbox__title\">{{ title() }}</h3>\n }\n <button\n class=\"listbox__close button button--icon-button button--ghost\"\n type=\"button\"\n aria-label=\"Close\"\n >\n <Cross24 icon />\n </button>\n </div>\n <div class=\"listbox__body\">\n <ul class=\"action-list\" role=\"menu\">\n @for (itemWithClasses of itemsWithClasses(); track $index) { @if\n (itemWithClasses.item.divider) {\n <li class=\"divider-horizontal action-list__divider\"></li>\n }\n <li [class]=\"itemWithClasses.classes\" role=\"menuitem\" [attr.id]=\"itemWithClasses.item.id\">\n <button\n type=\"button\"\n class=\"action-list__button\"\n [disabled]=\"itemWithClasses.item.disabled\"\n (click)=\"!itemWithClasses.item.disabled && itemClick.emit(itemWithClasses.item)\"\n >\n @if (itemWithClasses.item.icon) {\n <div class=\"action-list__icon\">\n <ng-container [ngComponentOutlet]=\"itemWithClasses.item.icon\"> </ng-container>\n </div>\n }\n <p class=\"action-list__text\">\n {{ itemWithClasses.item.label }}\n </p>\n </button>\n </li>\n }\n </ul>\n </div>\n </div>\n</div>\n", styles: [".mc-listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])),.listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])),.mc-listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open),.listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open){display:flex;align-items:flex-end;justify-content:center;z-index:1;padding:.5rem;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-listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])).is-visible,.listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])).is-visible,.mc-listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open).is-visible,.listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open).is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])),.listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])),.mc-listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open),.listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open){opacity:1}@media(width>=680px){.mc-listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])),.listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])),.mc-listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open),.listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open){position:relative;display:block;padding:0;background-color:transparent}}.mc-listbox__content,.listbox__content{border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all}@media(width>=680px){.mc-listbox__content,.listbox__content{min-width:18.75rem}}.mc-listbox__header,.listbox__header{display:flex;align-items:center;justify-content:center;position:relative;height:4rem}@media(width>=680px){.mc-listbox__header,.listbox__header{display:none}}.mc-listbox__title,.listbox__title{line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, .875rem);color:var(--color-text-tertiary, #666666);text-align:center;margin:0}.mc-listbox__close,.listbox__close{position:absolute;right:1.25rem;width:1.5rem;height:1.5rem}.mc-listbox__body,.listbox__body{overflow:hidden}@media(width>=680px){.mc-listbox--top .mc-listbox__content,.mc-listbox--top .listbox__content{margin:0 0 8px;inset:auto;position-area:span-right top}.mc-listbox--bottom .mc-listbox__content,.mc-listbox--bottom .listbox__content{margin:8px 0 0;inset:auto;position-area:span-right bottom}.mc-listbox--left .mc-listbox__content,.mc-listbox--left .listbox__content{margin:0 8px 0 0;inset:auto;position-area:span-bottom left}.mc-listbox--right .mc-listbox__content,.mc-listbox--right .listbox__content{margin:0 0 0 8px;inset:auto;position-area:span-bottom right}}.mc-action-list,.action-list{padding:.5rem;margin:0}.mc-action-list__element,.action-list__element{height:2.5rem;cursor:pointer;border-radius:var(--border-radius-s, .25rem);flex-grow:1}.mc-action-list__element:hover,.action-list__element:hover{background-color:var(--action-listbox-color-background-hover, rgba(0, 0, 0, .05))}.mc-action-list__element--danger .mc-action-list__text,.action-list__element--danger .mc-action-list__text,.mc-action-list__element--danger .action-list__text,.action-list__element--danger .action-list__text{color:var(--action-listbox-color-text-danger, #c61112)}.mc-action-list__element--danger .mc-action-list__icon,.action-list__element--danger .mc-action-list__icon,.mc-action-list__element--danger .action-list__icon,.action-list__element--danger .action-list__icon{fill:var(--action-listbox-color-text-danger, #c61112)}.mc-action-list__element--danger:hover,.action-list__element--danger:hover{background-color:var(--action-listbox-color-background-danger-hover, rgba(198, 17, 18, .1))}.mc-action-list__element--disabled .mc-action-list__text,.action-list__element--disabled .mc-action-list__text,.mc-action-list__element--disabled .action-list__text,.action-list__element--disabled .action-list__text{color:var(--action-listbox-color-text-disabled, #b3b3b3)}.mc-action-list__element--disabled .mc-action-list__icon,.action-list__element--disabled .mc-action-list__icon,.mc-action-list__element--disabled .action-list__icon,.action-list__element--disabled .action-list__icon{fill:var(--action-listbox-color-text-disabled, #b3b3b3)}.mc-action-list__element--disabled:hover,.action-list__element--disabled:hover{background-color:transparent}.mc-action-list__element--disabled button,.action-list__element--disabled button{cursor:not-allowed}.mc-action-list__button,.action-list__button{background-color:transparent;color:var(--action-listbox-color-text-default, #000000);border:none;display:flex;align-items:center;gap:.25rem;padding:0;padding:0 .25rem;cursor:pointer;width:100%;height:100%}.mc-action-list__button:focus-visible,.action-list__button: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-action-list__text,.action-list__text{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.mc-action-list__icon,.action-list__icon{width:1.25rem;height:1.25rem}.mc-action-list__divider,.action-list__divider{margin:.5rem 0}.mc-divider{position:relative}.mc-divider-horizontal,.divider-horizontal{background:var(--divider-color-primary, #cccccc);height:.0625rem}.mc-divider-horizontal--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-horizontal--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-horizontal--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-horizontal--m{height:.25rem}.mc-divider-horizontal--l{height:.5rem}.mc-divider-vertical{background:var(--divider-color-primary, #cccccc);width:.0625rem}.mc-divider-vertical--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-vertical--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-vertical--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-vertical--m{height:.25rem}.mc-divider-vertical--l{height:.5rem}.mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active,.button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label,.button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus,.button:focus{box-shadow:none;outline:none}.mc-button:focus-visible,.button: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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active,.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button,.button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"] }]
|
|
3606
|
+
args: [{ selector: 'moz-action-listbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgComponentOutlet, Cross24], template: "<div class=\"listbox\">\n <div class=\"listbox__content\">\n <div class=\"listbox__header\">\n @if (title()) {\n <h3 class=\"listbox__title\">{{ title() }}</h3>\n }\n <button\n class=\"listbox__close button button--icon-button button--ghost\"\n type=\"button\"\n aria-label=\"Close\"\n >\n <Cross24 icon />\n </button>\n </div>\n <div class=\"listbox__body\">\n <ul class=\"action-list\" role=\"menu\">\n @for (itemWithClasses of itemsWithClasses(); track $index) { @if\n (itemWithClasses.item.divider) {\n <li class=\"divider-horizontal action-list__divider\"></li>\n }\n <li [class]=\"itemWithClasses.classes\" role=\"menuitem\" [attr.id]=\"itemWithClasses.item.id\">\n <button\n type=\"button\"\n class=\"action-list__button\"\n [disabled]=\"itemWithClasses.item.disabled\"\n (click)=\"!itemWithClasses.item.disabled && itemClick.emit(itemWithClasses.item)\"\n >\n @if (itemWithClasses.item.icon) {\n <div class=\"action-list__icon\">\n <ng-container [ngComponentOutlet]=\"itemWithClasses.item.icon\"> </ng-container>\n </div>\n }\n <p class=\"action-list__text\">\n {{ itemWithClasses.item.label }}\n </p>\n </button>\n </li>\n }\n </ul>\n </div>\n </div>\n</div>\n", styles: [".mc-listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])),.listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])),.mc-listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open),.listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open){display:flex;align-items:flex-end;justify-content:center;z-index:1;padding:.5rem;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-listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])).is-visible,.listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])).is-visible,.mc-listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open).is-visible,.listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open).is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])),.listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])),.mc-listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open),.listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open){opacity:1}@media(width>=680px){.mc-listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])),.listbox:has(.mc-listbox__content:not([popover]),.listbox__content:not([popover])),.mc-listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open),.listbox:has(.mc-listbox__content:popover-open,.listbox__content:popover-open){position:relative;display:block;padding:0;background-color:transparent}}.mc-listbox__content,.listbox__content{border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all}@media(width>=680px){.mc-listbox__content,.listbox__content{min-width:18.75rem}}.mc-listbox__header,.listbox__header{display:flex;align-items:center;justify-content:center;position:relative;height:4rem}@media(width>=680px){.mc-listbox__header,.listbox__header{display:none}}.mc-listbox__title,.listbox__title{line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, .875rem);color:var(--color-text-tertiary, #666666);text-align:center;margin:0}.mc-listbox__close,.listbox__close{position:absolute;right:1.25rem;width:1.5rem;height:1.5rem}.mc-listbox__body,.listbox__body{overflow:hidden}@media(width>=680px){.mc-listbox--top .mc-listbox__content,.mc-listbox--top .listbox__content{margin:0 0 8px;inset:auto;position-area:span-right top}.mc-listbox--bottom .mc-listbox__content,.mc-listbox--bottom .listbox__content{margin:8px 0 0;inset:auto;position-area:span-right bottom}.mc-listbox--left .mc-listbox__content,.mc-listbox--left .listbox__content{margin:0 8px 0 0;inset:auto;position-area:span-bottom left}.mc-listbox--right .mc-listbox__content,.mc-listbox--right .listbox__content{margin:0 0 0 8px;inset:auto;position-area:span-bottom right}}.mc-action-list,.action-list{padding:.5rem;margin:0}.mc-action-list__element,.action-list__element{height:2.5rem;cursor:pointer;border-radius:var(--border-radius-s, .25rem);flex-grow:1}.mc-action-list__element:hover,.action-list__element:hover{background-color:var(--action-listbox-color-background-hover, rgba(0, 0, 0, .05))}.mc-action-list__element--danger .mc-action-list__text,.action-list__element--danger .mc-action-list__text,.mc-action-list__element--danger .action-list__text,.action-list__element--danger .action-list__text{color:var(--action-listbox-color-text-danger, #c61112)}.mc-action-list__element--danger .mc-action-list__icon,.action-list__element--danger .mc-action-list__icon,.mc-action-list__element--danger .action-list__icon,.action-list__element--danger .action-list__icon{fill:var(--action-listbox-color-text-danger, #c61112)}.mc-action-list__element--danger:hover,.action-list__element--danger:hover{background-color:var(--action-listbox-color-background-danger-hover, rgba(198, 17, 18, .1))}.mc-action-list__element--disabled .mc-action-list__text,.action-list__element--disabled .mc-action-list__text,.mc-action-list__element--disabled .action-list__text,.action-list__element--disabled .action-list__text{color:var(--action-listbox-color-text-disabled, #b3b3b3)}.mc-action-list__element--disabled .mc-action-list__icon,.action-list__element--disabled .mc-action-list__icon,.mc-action-list__element--disabled .action-list__icon,.action-list__element--disabled .action-list__icon{fill:var(--action-listbox-color-text-disabled, #b3b3b3)}.mc-action-list__element--disabled:hover,.action-list__element--disabled:hover{background-color:transparent}.mc-action-list__element--disabled button,.action-list__element--disabled button{cursor:not-allowed}.mc-action-list__button,.action-list__button{background-color:transparent;color:var(--action-listbox-color-text-default, #000000);border:none;display:flex;align-items:center;gap:.25rem;padding:0;padding:0 .25rem;cursor:pointer;width:100%;height:100%}.mc-action-list__button:focus-visible,.action-list__button: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-action-list__text,.action-list__text{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.mc-action-list__icon,.action-list__icon{width:1.25rem;height:1.25rem}.mc-action-list__divider,.action-list__divider{margin:.5rem 0}.mc-divider{position:relative}.mc-divider-horizontal,.divider-horizontal{background:var(--divider-color-primary, #cccccc);height:.0625rem}.mc-divider-horizontal--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-horizontal--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-horizontal--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-horizontal--m{height:.25rem}.mc-divider-horizontal--l{height:.5rem}.mc-divider-vertical{background:var(--divider-color-primary, #cccccc);width:.0625rem}.mc-divider-vertical--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-vertical--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-vertical--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-vertical--m{height:.25rem}.mc-divider-vertical--l{height:.5rem}.mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active,.button:active{transform:scale(.95)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label,.button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:background-color ease .2s,border-color ease .2s,color ease .2s,transform ease-out .15s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus,.button:focus{box-shadow:none;outline:none}.mc-button:focus-visible,.button: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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active{transform:scale(.95)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active,.button--ghost:active{transform:scale(.95)}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{transform:scale(.95)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{transform:scale(.95)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{transform:scale(.95)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button,.button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active{transform:scale(.95)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active{transform:scale(.95)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active{transform:scale(.95)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active{transform:scale(.95)}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"] }]
|
|
3607
3607
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
|
|
3608
3608
|
|
|
3609
3609
|
class ActionListboxRef {
|
|
@@ -3945,11 +3945,11 @@ class MozKpiComponent {
|
|
|
3945
3945
|
}, /* @ts-ignore */
|
|
3946
3946
|
...(ngDevMode ? [{ debugName: "IconComponent" }] : /* istanbul ignore next */ []));
|
|
3947
3947
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozKpiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3948
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozKpiComponent, isStandalone: true, selector: "moz-kpi", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, information: { classPropertyName: "information", publicName: "information", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"rootClasses()\">\n @if (isMedium() && label()) {\n <span class=\"kpi__label\">\n {{ label() }}\n </span>\n }\n\n <div class=\"kpi__content\">\n <div class=\"kpi__main\">\n @if (isLarge() && label()) {\n <span class=\"kpi__label\">\n {{ label() }}\n </span>\n }\n\n <span class=\"kpi__value\">\n {{ value() }}\n </span>\n </div>\n\n @if (trend() || information()) {\n <div class=\"kpi__aside\">\n @if (isLarge() && information()) {\n <span class=\"kpi__detail\">\n {{ information() }}\n </span>\n } @if (IconComponent()) {\n <div class=\"button__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"IconComponent()\"></ng-container>\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".mc-kpi,.kpi,.mc-kpi *,.kpi *{box-sizing:border-box}.mc-kpi,.kpi{display:inline-block}.mc-kpi:not(.mc-kpi--s):not(.kpi--s),.kpi:not(.mc-kpi--s):not(.kpi--s){min-width:10rem}.mc-kpi__label,.kpi__label{font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-semi-bold, 600);display:block}.mc-kpi__content,.kpi__content{line-height:var(--line-height-s, 1.3);display:flex}.mc-kpi__main,.kpi__main{align-items:center;display:flex;justify-content:center}.mc-kpi__value,.kpi__value{font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-body-s, .875rem);color:var(--color-kpi-value, var(--kpi-item-color-value-info, #0074aa))}.mc-kpi__aside,.kpi__aside{align-items:center;background-color:var(--kpi-item-color-trend-item-background, #ffffff);color:var(--kpi-item-color-trend-item-text, #000000);display:flex;justify-content:center;border-radius:var(--border-radius-xs, .125rem)}.mc-kpi__detail,.kpi__detail{font-size:var(--font-body-s, .875rem)}.mc-kpi__icon{display:block;height:1rem;width:1rem}.mc-kpi--s .mc-kpi__content,.kpi--s .mc-kpi__content,.mc-kpi--s .kpi__content,.kpi--s .kpi__content{gap:.25rem}.mc-kpi--s .mc-kpi__main,.kpi--s .mc-kpi__main,.mc-kpi--s .kpi__main,.kpi--s .kpi__main{background-color:var(--color-kpi-background, var(--kpi-item-color-background-info, #e1f3f9));border:1px solid var(--color-kpi-border, var(--kpi-item-color-border-info, #3facd7));border-radius:4px;overflow:hidden;padding:0 .25rem;height:1.5rem}.mc-kpi--s .mc-kpi__aside,.kpi--s .mc-kpi__aside,.mc-kpi--s .kpi__aside,.kpi--s .kpi__aside{background-color:transparent}.mc-kpi--m .mc-kpi__label,.kpi--m .mc-kpi__label,.mc-kpi--m .kpi__label,.kpi--m .kpi__label{color:var(--color-kpi-label-medium, var(--kpi-item-color-label-info-medium, #000000));margin-bottom:.25rem}.mc-kpi--m .mc-kpi__content,.kpi--m .mc-kpi__content,.mc-kpi--m .kpi__content,.kpi--m .kpi__content{background-color:var(--color-kpi-background, var(--kpi-item-color-background-info, #e1f3f9));border:1px solid var(--color-kpi-border, var(--kpi-item-color-border-info, #3facd7));border-radius:4px;overflow:hidden;height:3rem;align-items:center;padding:0 .25rem 0 .5rem;gap:.5rem}.mc-kpi--m .mc-kpi__main,.kpi--m .mc-kpi__main,.mc-kpi--m .kpi__main,.kpi--m .kpi__main{flex-grow:1;height:2.5rem}.mc-kpi--m .mc-kpi__value,.kpi--m .mc-kpi__value,.mc-kpi--m .kpi__value,.kpi--m .kpi__value{font-size:var(--font-body-l, 1.125rem)}.mc-kpi--m .mc-kpi__aside,.kpi--m .mc-kpi__aside,.mc-kpi--m .kpi__aside,.kpi--m .kpi__aside{padding:0 .5rem;height:2.5rem;width:2.5rem}.mc-kpi--l,.kpi--l{background-color:var(--color-kpi-background, var(--kpi-item-color-background-info, #e1f3f9));border:1px solid var(--color-kpi-border, var(--kpi-item-color-border-info, #3facd7));border-radius:4px;overflow:hidden;padding:.5rem;height:9rem}.mc-kpi--l .mc-kpi__content,.kpi--l .mc-kpi__content,.mc-kpi--l .kpi__content,.kpi--l .kpi__content{flex-direction:column;width:100%;height:100%;justify-content:space-between}.mc-kpi--l .mc-kpi__main,.kpi--l .mc-kpi__main,.mc-kpi--l .kpi__main,.kpi--l .kpi__main{flex-direction:column;flex-grow:1}.mc-kpi--l .mc-kpi__label,.kpi--l .mc-kpi__label,.mc-kpi--l .kpi__label,.kpi--l .kpi__label{font-size:var(--font-body-m, 1rem);color:var(--color-kpi-label-large, var(--kpi-item-color-label-info-large, #0074aa))}.mc-kpi--l .mc-kpi__value,.kpi--l .mc-kpi__value,.mc-kpi--l .kpi__value,.kpi--l .kpi__value{font-size:var(--font-heading-l, 2rem)}.mc-kpi--l .mc-kpi__aside,.kpi--l .mc-kpi__aside,.mc-kpi--l .kpi__aside,.kpi--l .kpi__aside{gap:.5rem;height:2.5rem;padding:0 .5rem;font-size:var(--font-body-s, .875rem)}.mc-kpi--warning,.kpi--warning{--color-kpi-background: var(--kpi-item-color-background-warning, #fdf1e8);--color-kpi-border: var(--kpi-item-color-border-warning, #ef934a);--color-kpi-label-medium: var(--kpi-item-color-label-warning-medium, #000000);--color-kpi-label-large: var(--kpi-item-color-label-warning-large, #b64f00);--color-kpi-value: var(--kpi-item-color-value-warning, #b64f00)}.mc-kpi--error,.kpi--error{--color-kpi-background: var(--kpi-item-color-background-error, #fdeaea);--color-kpi-border: var(--kpi-item-color-border-error, #ef5f5c);--color-kpi-label-medium: var(--kpi-item-color-label-error-medium, #000000);--color-kpi-label-large: var(--kpi-item-color-label-error-large, #c61112);--color-kpi-value: var(--kpi-item-color-value-error, #c61112)}.mc-kpi--success,.kpi--success{--color-kpi-background: var(--kpi-item-color-background-success, #ebf5de);--color-kpi-border: var(--kpi-item-color-border-success, #78be20);--color-kpi-label-medium: var(--kpi-item-color-label-success-medium, #000000);--color-kpi-label-large: var(--kpi-item-color-label-success-large, #117f03);--color-kpi-value: var(--kpi-item-color-value-success, #117f03)}.mc-kpi--neutral,.kpi--neutral{--color-kpi-background: var(--kpi-item-color-background-neutral, #f2f2f2);--color-kpi-border: var(--kpi-item-color-border-neutral, #999999);--color-kpi-label-medium: var(--kpi-item-color-label-neutral-medium, #000000);--color-kpi-label-large: var(--kpi-item-color-label-neutral-large, #666666);--color-kpi-value: var(--kpi-item-color-value-neutral, #666666)}.mc-button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon,.button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus{box-shadow:none;outline:none}.mc-button: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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.mc-button--s .button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.mc-button--s .button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon,.mc-button--m .button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child,.mc-button--m .button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon,.mc-button--l .button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child,.mc-button--l .button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon,.mc-button--loading .button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3948
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozKpiComponent, isStandalone: true, selector: "moz-kpi", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, information: { classPropertyName: "information", publicName: "information", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"rootClasses()\">\n @if (isMedium() && label()) {\n <span class=\"kpi__label\">\n {{ label() }}\n </span>\n }\n\n <div class=\"kpi__content\">\n <div class=\"kpi__main\">\n @if (isLarge() && label()) {\n <span class=\"kpi__label\">\n {{ label() }}\n </span>\n }\n\n <span class=\"kpi__value\">\n {{ value() }}\n </span>\n </div>\n\n @if (trend() || information()) {\n <div class=\"kpi__aside\">\n @if (isLarge() && information()) {\n <span class=\"kpi__detail\">\n {{ information() }}\n </span>\n } @if (IconComponent()) {\n <div class=\"button__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"IconComponent()\"></ng-container>\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".mc-kpi,.kpi,.mc-kpi *,.kpi *{box-sizing:border-box}.mc-kpi,.kpi{display:inline-block}.mc-kpi:not(.mc-kpi--s):not(.kpi--s),.kpi:not(.mc-kpi--s):not(.kpi--s){min-width:10rem}.mc-kpi__label,.kpi__label{font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-semi-bold, 600);display:block}.mc-kpi__content,.kpi__content{line-height:var(--line-height-s, 1.3);display:flex}.mc-kpi__main,.kpi__main{align-items:center;display:flex;justify-content:center}.mc-kpi__value,.kpi__value{font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-body-s, .875rem);color:var(--color-kpi-value, var(--kpi-item-color-value-info, #0074aa))}.mc-kpi__aside,.kpi__aside{align-items:center;background-color:var(--kpi-item-color-trend-item-background, #ffffff);color:var(--kpi-item-color-trend-item-text, #000000);display:flex;justify-content:center;border-radius:var(--border-radius-xs, .125rem)}.mc-kpi__detail,.kpi__detail{font-size:var(--font-body-s, .875rem)}.mc-kpi__icon{display:block;height:1rem;width:1rem}.mc-kpi--s .mc-kpi__content,.kpi--s .mc-kpi__content,.mc-kpi--s .kpi__content,.kpi--s .kpi__content{gap:.25rem}.mc-kpi--s .mc-kpi__main,.kpi--s .mc-kpi__main,.mc-kpi--s .kpi__main,.kpi--s .kpi__main{background-color:var(--color-kpi-background, var(--kpi-item-color-background-info, #e1f3f9));border:1px solid var(--color-kpi-border, var(--kpi-item-color-border-info, #3facd7));border-radius:4px;overflow:hidden;padding:0 .25rem;height:1.5rem}.mc-kpi--s .mc-kpi__aside,.kpi--s .mc-kpi__aside,.mc-kpi--s .kpi__aside,.kpi--s .kpi__aside{background-color:transparent}.mc-kpi--m .mc-kpi__label,.kpi--m .mc-kpi__label,.mc-kpi--m .kpi__label,.kpi--m .kpi__label{color:var(--color-kpi-label-medium, var(--kpi-item-color-label-info-medium, #000000));margin-bottom:.25rem}.mc-kpi--m .mc-kpi__content,.kpi--m .mc-kpi__content,.mc-kpi--m .kpi__content,.kpi--m .kpi__content{background-color:var(--color-kpi-background, var(--kpi-item-color-background-info, #e1f3f9));border:1px solid var(--color-kpi-border, var(--kpi-item-color-border-info, #3facd7));border-radius:4px;overflow:hidden;height:3rem;align-items:center;padding:0 .25rem 0 .5rem;gap:.5rem}.mc-kpi--m .mc-kpi__main,.kpi--m .mc-kpi__main,.mc-kpi--m .kpi__main,.kpi--m .kpi__main{flex-grow:1;height:2.5rem}.mc-kpi--m .mc-kpi__value,.kpi--m .mc-kpi__value,.mc-kpi--m .kpi__value,.kpi--m .kpi__value{font-size:var(--font-body-l, 1.125rem)}.mc-kpi--m .mc-kpi__aside,.kpi--m .mc-kpi__aside,.mc-kpi--m .kpi__aside,.kpi--m .kpi__aside{padding:0 .5rem;height:2.5rem;width:2.5rem}.mc-kpi--l,.kpi--l{background-color:var(--color-kpi-background, var(--kpi-item-color-background-info, #e1f3f9));border:1px solid var(--color-kpi-border, var(--kpi-item-color-border-info, #3facd7));border-radius:4px;overflow:hidden;padding:.5rem;height:9rem}.mc-kpi--l .mc-kpi__content,.kpi--l .mc-kpi__content,.mc-kpi--l .kpi__content,.kpi--l .kpi__content{flex-direction:column;width:100%;height:100%;justify-content:space-between}.mc-kpi--l .mc-kpi__main,.kpi--l .mc-kpi__main,.mc-kpi--l .kpi__main,.kpi--l .kpi__main{flex-direction:column;flex-grow:1}.mc-kpi--l .mc-kpi__label,.kpi--l .mc-kpi__label,.mc-kpi--l .kpi__label,.kpi--l .kpi__label{font-size:var(--font-body-m, 1rem);color:var(--color-kpi-label-large, var(--kpi-item-color-label-info-large, #0074aa))}.mc-kpi--l .mc-kpi__value,.kpi--l .mc-kpi__value,.mc-kpi--l .kpi__value,.kpi--l .kpi__value{font-size:var(--font-heading-l, 2rem)}.mc-kpi--l .mc-kpi__aside,.kpi--l .mc-kpi__aside,.mc-kpi--l .kpi__aside,.kpi--l .kpi__aside{gap:.5rem;height:2.5rem;padding:0 .5rem;font-size:var(--font-body-s, .875rem)}.mc-kpi--warning,.kpi--warning{--color-kpi-background: var(--kpi-item-color-background-warning, #fdf1e8);--color-kpi-border: var(--kpi-item-color-border-warning, #ef934a);--color-kpi-label-medium: var(--kpi-item-color-label-warning-medium, #000000);--color-kpi-label-large: var(--kpi-item-color-label-warning-large, #b64f00);--color-kpi-value: var(--kpi-item-color-value-warning, #b64f00)}.mc-kpi--error,.kpi--error{--color-kpi-background: var(--kpi-item-color-background-error, #fdeaea);--color-kpi-border: var(--kpi-item-color-border-error, #ef5f5c);--color-kpi-label-medium: var(--kpi-item-color-label-error-medium, #000000);--color-kpi-label-large: var(--kpi-item-color-label-error-large, #c61112);--color-kpi-value: var(--kpi-item-color-value-error, #c61112)}.mc-kpi--success,.kpi--success{--color-kpi-background: var(--kpi-item-color-background-success, #ebf5de);--color-kpi-border: var(--kpi-item-color-border-success, #78be20);--color-kpi-label-medium: var(--kpi-item-color-label-success-medium, #000000);--color-kpi-label-large: var(--kpi-item-color-label-success-large, #117f03);--color-kpi-value: var(--kpi-item-color-value-success, #117f03)}.mc-kpi--neutral,.kpi--neutral{--color-kpi-background: var(--kpi-item-color-background-neutral, #f2f2f2);--color-kpi-border: var(--kpi-item-color-border-neutral, #999999);--color-kpi-label-medium: var(--kpi-item-color-label-neutral-medium, #000000);--color-kpi-label-large: var(--kpi-item-color-label-neutral-large, #666666);--color-kpi-value: var(--kpi-item-color-value-neutral, #666666)}.mc-button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active{transform:scale(.95)}.mc-button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:background-color ease .2s,border-color ease .2s,color ease .2s,transform ease-out .15s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon,.button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus{box-shadow:none;outline:none}.mc-button: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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.mc-button--s .button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.mc-button--s .button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon,.mc-button--m .button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child,.mc-button--m .button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon,.mc-button--l .button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child,.mc-button--l .button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active{transform:scale(.95)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active{transform:scale(.95)}.mc-button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{transform:scale(.95)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{transform:scale(.95)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{transform:scale(.95)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon,.mc-button--loading .button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active{transform:scale(.95)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active{transform:scale(.95)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active{transform:scale(.95)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active{transform:scale(.95)}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active{transform:scale(.95)}.mc-button--ghost.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active{transform:scale(.95)}.mc-button--ghost.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active{transform:scale(.95)}.mc-button--ghost.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active{transform:scale(.95)}.mc-button--ghost.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3949
3949
|
}
|
|
3950
3950
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozKpiComponent, decorators: [{
|
|
3951
3951
|
type: Component,
|
|
3952
|
-
args: [{ selector: 'moz-kpi', imports: [NgComponentOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"rootClasses()\">\n @if (isMedium() && label()) {\n <span class=\"kpi__label\">\n {{ label() }}\n </span>\n }\n\n <div class=\"kpi__content\">\n <div class=\"kpi__main\">\n @if (isLarge() && label()) {\n <span class=\"kpi__label\">\n {{ label() }}\n </span>\n }\n\n <span class=\"kpi__value\">\n {{ value() }}\n </span>\n </div>\n\n @if (trend() || information()) {\n <div class=\"kpi__aside\">\n @if (isLarge() && information()) {\n <span class=\"kpi__detail\">\n {{ information() }}\n </span>\n } @if (IconComponent()) {\n <div class=\"button__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"IconComponent()\"></ng-container>\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".mc-kpi,.kpi,.mc-kpi *,.kpi *{box-sizing:border-box}.mc-kpi,.kpi{display:inline-block}.mc-kpi:not(.mc-kpi--s):not(.kpi--s),.kpi:not(.mc-kpi--s):not(.kpi--s){min-width:10rem}.mc-kpi__label,.kpi__label{font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-semi-bold, 600);display:block}.mc-kpi__content,.kpi__content{line-height:var(--line-height-s, 1.3);display:flex}.mc-kpi__main,.kpi__main{align-items:center;display:flex;justify-content:center}.mc-kpi__value,.kpi__value{font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-body-s, .875rem);color:var(--color-kpi-value, var(--kpi-item-color-value-info, #0074aa))}.mc-kpi__aside,.kpi__aside{align-items:center;background-color:var(--kpi-item-color-trend-item-background, #ffffff);color:var(--kpi-item-color-trend-item-text, #000000);display:flex;justify-content:center;border-radius:var(--border-radius-xs, .125rem)}.mc-kpi__detail,.kpi__detail{font-size:var(--font-body-s, .875rem)}.mc-kpi__icon{display:block;height:1rem;width:1rem}.mc-kpi--s .mc-kpi__content,.kpi--s .mc-kpi__content,.mc-kpi--s .kpi__content,.kpi--s .kpi__content{gap:.25rem}.mc-kpi--s .mc-kpi__main,.kpi--s .mc-kpi__main,.mc-kpi--s .kpi__main,.kpi--s .kpi__main{background-color:var(--color-kpi-background, var(--kpi-item-color-background-info, #e1f3f9));border:1px solid var(--color-kpi-border, var(--kpi-item-color-border-info, #3facd7));border-radius:4px;overflow:hidden;padding:0 .25rem;height:1.5rem}.mc-kpi--s .mc-kpi__aside,.kpi--s .mc-kpi__aside,.mc-kpi--s .kpi__aside,.kpi--s .kpi__aside{background-color:transparent}.mc-kpi--m .mc-kpi__label,.kpi--m .mc-kpi__label,.mc-kpi--m .kpi__label,.kpi--m .kpi__label{color:var(--color-kpi-label-medium, var(--kpi-item-color-label-info-medium, #000000));margin-bottom:.25rem}.mc-kpi--m .mc-kpi__content,.kpi--m .mc-kpi__content,.mc-kpi--m .kpi__content,.kpi--m .kpi__content{background-color:var(--color-kpi-background, var(--kpi-item-color-background-info, #e1f3f9));border:1px solid var(--color-kpi-border, var(--kpi-item-color-border-info, #3facd7));border-radius:4px;overflow:hidden;height:3rem;align-items:center;padding:0 .25rem 0 .5rem;gap:.5rem}.mc-kpi--m .mc-kpi__main,.kpi--m .mc-kpi__main,.mc-kpi--m .kpi__main,.kpi--m .kpi__main{flex-grow:1;height:2.5rem}.mc-kpi--m .mc-kpi__value,.kpi--m .mc-kpi__value,.mc-kpi--m .kpi__value,.kpi--m .kpi__value{font-size:var(--font-body-l, 1.125rem)}.mc-kpi--m .mc-kpi__aside,.kpi--m .mc-kpi__aside,.mc-kpi--m .kpi__aside,.kpi--m .kpi__aside{padding:0 .5rem;height:2.5rem;width:2.5rem}.mc-kpi--l,.kpi--l{background-color:var(--color-kpi-background, var(--kpi-item-color-background-info, #e1f3f9));border:1px solid var(--color-kpi-border, var(--kpi-item-color-border-info, #3facd7));border-radius:4px;overflow:hidden;padding:.5rem;height:9rem}.mc-kpi--l .mc-kpi__content,.kpi--l .mc-kpi__content,.mc-kpi--l .kpi__content,.kpi--l .kpi__content{flex-direction:column;width:100%;height:100%;justify-content:space-between}.mc-kpi--l .mc-kpi__main,.kpi--l .mc-kpi__main,.mc-kpi--l .kpi__main,.kpi--l .kpi__main{flex-direction:column;flex-grow:1}.mc-kpi--l .mc-kpi__label,.kpi--l .mc-kpi__label,.mc-kpi--l .kpi__label,.kpi--l .kpi__label{font-size:var(--font-body-m, 1rem);color:var(--color-kpi-label-large, var(--kpi-item-color-label-info-large, #0074aa))}.mc-kpi--l .mc-kpi__value,.kpi--l .mc-kpi__value,.mc-kpi--l .kpi__value,.kpi--l .kpi__value{font-size:var(--font-heading-l, 2rem)}.mc-kpi--l .mc-kpi__aside,.kpi--l .mc-kpi__aside,.mc-kpi--l .kpi__aside,.kpi--l .kpi__aside{gap:.5rem;height:2.5rem;padding:0 .5rem;font-size:var(--font-body-s, .875rem)}.mc-kpi--warning,.kpi--warning{--color-kpi-background: var(--kpi-item-color-background-warning, #fdf1e8);--color-kpi-border: var(--kpi-item-color-border-warning, #ef934a);--color-kpi-label-medium: var(--kpi-item-color-label-warning-medium, #000000);--color-kpi-label-large: var(--kpi-item-color-label-warning-large, #b64f00);--color-kpi-value: var(--kpi-item-color-value-warning, #b64f00)}.mc-kpi--error,.kpi--error{--color-kpi-background: var(--kpi-item-color-background-error, #fdeaea);--color-kpi-border: var(--kpi-item-color-border-error, #ef5f5c);--color-kpi-label-medium: var(--kpi-item-color-label-error-medium, #000000);--color-kpi-label-large: var(--kpi-item-color-label-error-large, #c61112);--color-kpi-value: var(--kpi-item-color-value-error, #c61112)}.mc-kpi--success,.kpi--success{--color-kpi-background: var(--kpi-item-color-background-success, #ebf5de);--color-kpi-border: var(--kpi-item-color-border-success, #78be20);--color-kpi-label-medium: var(--kpi-item-color-label-success-medium, #000000);--color-kpi-label-large: var(--kpi-item-color-label-success-large, #117f03);--color-kpi-value: var(--kpi-item-color-value-success, #117f03)}.mc-kpi--neutral,.kpi--neutral{--color-kpi-background: var(--kpi-item-color-background-neutral, #f2f2f2);--color-kpi-border: var(--kpi-item-color-border-neutral, #999999);--color-kpi-label-medium: var(--kpi-item-color-label-neutral-medium, #000000);--color-kpi-label-large: var(--kpi-item-color-label-neutral-large, #666666);--color-kpi-value: var(--kpi-item-color-value-neutral, #666666)}.mc-button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon,.button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus{box-shadow:none;outline:none}.mc-button: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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.mc-button--s .button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.mc-button--s .button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon,.mc-button--m .button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child,.mc-button--m .button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon,.mc-button--l .button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child,.mc-button--l .button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon,.mc-button--loading .button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"] }]
|
|
3952
|
+
args: [{ selector: 'moz-kpi', imports: [NgComponentOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"rootClasses()\">\n @if (isMedium() && label()) {\n <span class=\"kpi__label\">\n {{ label() }}\n </span>\n }\n\n <div class=\"kpi__content\">\n <div class=\"kpi__main\">\n @if (isLarge() && label()) {\n <span class=\"kpi__label\">\n {{ label() }}\n </span>\n }\n\n <span class=\"kpi__value\">\n {{ value() }}\n </span>\n </div>\n\n @if (trend() || information()) {\n <div class=\"kpi__aside\">\n @if (isLarge() && information()) {\n <span class=\"kpi__detail\">\n {{ information() }}\n </span>\n } @if (IconComponent()) {\n <div class=\"button__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"IconComponent()\"></ng-container>\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".mc-kpi,.kpi,.mc-kpi *,.kpi *{box-sizing:border-box}.mc-kpi,.kpi{display:inline-block}.mc-kpi:not(.mc-kpi--s):not(.kpi--s),.kpi:not(.mc-kpi--s):not(.kpi--s){min-width:10rem}.mc-kpi__label,.kpi__label{font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-semi-bold, 600);display:block}.mc-kpi__content,.kpi__content{line-height:var(--line-height-s, 1.3);display:flex}.mc-kpi__main,.kpi__main{align-items:center;display:flex;justify-content:center}.mc-kpi__value,.kpi__value{font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-body-s, .875rem);color:var(--color-kpi-value, var(--kpi-item-color-value-info, #0074aa))}.mc-kpi__aside,.kpi__aside{align-items:center;background-color:var(--kpi-item-color-trend-item-background, #ffffff);color:var(--kpi-item-color-trend-item-text, #000000);display:flex;justify-content:center;border-radius:var(--border-radius-xs, .125rem)}.mc-kpi__detail,.kpi__detail{font-size:var(--font-body-s, .875rem)}.mc-kpi__icon{display:block;height:1rem;width:1rem}.mc-kpi--s .mc-kpi__content,.kpi--s .mc-kpi__content,.mc-kpi--s .kpi__content,.kpi--s .kpi__content{gap:.25rem}.mc-kpi--s .mc-kpi__main,.kpi--s .mc-kpi__main,.mc-kpi--s .kpi__main,.kpi--s .kpi__main{background-color:var(--color-kpi-background, var(--kpi-item-color-background-info, #e1f3f9));border:1px solid var(--color-kpi-border, var(--kpi-item-color-border-info, #3facd7));border-radius:4px;overflow:hidden;padding:0 .25rem;height:1.5rem}.mc-kpi--s .mc-kpi__aside,.kpi--s .mc-kpi__aside,.mc-kpi--s .kpi__aside,.kpi--s .kpi__aside{background-color:transparent}.mc-kpi--m .mc-kpi__label,.kpi--m .mc-kpi__label,.mc-kpi--m .kpi__label,.kpi--m .kpi__label{color:var(--color-kpi-label-medium, var(--kpi-item-color-label-info-medium, #000000));margin-bottom:.25rem}.mc-kpi--m .mc-kpi__content,.kpi--m .mc-kpi__content,.mc-kpi--m .kpi__content,.kpi--m .kpi__content{background-color:var(--color-kpi-background, var(--kpi-item-color-background-info, #e1f3f9));border:1px solid var(--color-kpi-border, var(--kpi-item-color-border-info, #3facd7));border-radius:4px;overflow:hidden;height:3rem;align-items:center;padding:0 .25rem 0 .5rem;gap:.5rem}.mc-kpi--m .mc-kpi__main,.kpi--m .mc-kpi__main,.mc-kpi--m .kpi__main,.kpi--m .kpi__main{flex-grow:1;height:2.5rem}.mc-kpi--m .mc-kpi__value,.kpi--m .mc-kpi__value,.mc-kpi--m .kpi__value,.kpi--m .kpi__value{font-size:var(--font-body-l, 1.125rem)}.mc-kpi--m .mc-kpi__aside,.kpi--m .mc-kpi__aside,.mc-kpi--m .kpi__aside,.kpi--m .kpi__aside{padding:0 .5rem;height:2.5rem;width:2.5rem}.mc-kpi--l,.kpi--l{background-color:var(--color-kpi-background, var(--kpi-item-color-background-info, #e1f3f9));border:1px solid var(--color-kpi-border, var(--kpi-item-color-border-info, #3facd7));border-radius:4px;overflow:hidden;padding:.5rem;height:9rem}.mc-kpi--l .mc-kpi__content,.kpi--l .mc-kpi__content,.mc-kpi--l .kpi__content,.kpi--l .kpi__content{flex-direction:column;width:100%;height:100%;justify-content:space-between}.mc-kpi--l .mc-kpi__main,.kpi--l .mc-kpi__main,.mc-kpi--l .kpi__main,.kpi--l .kpi__main{flex-direction:column;flex-grow:1}.mc-kpi--l .mc-kpi__label,.kpi--l .mc-kpi__label,.mc-kpi--l .kpi__label,.kpi--l .kpi__label{font-size:var(--font-body-m, 1rem);color:var(--color-kpi-label-large, var(--kpi-item-color-label-info-large, #0074aa))}.mc-kpi--l .mc-kpi__value,.kpi--l .mc-kpi__value,.mc-kpi--l .kpi__value,.kpi--l .kpi__value{font-size:var(--font-heading-l, 2rem)}.mc-kpi--l .mc-kpi__aside,.kpi--l .mc-kpi__aside,.mc-kpi--l .kpi__aside,.kpi--l .kpi__aside{gap:.5rem;height:2.5rem;padding:0 .5rem;font-size:var(--font-body-s, .875rem)}.mc-kpi--warning,.kpi--warning{--color-kpi-background: var(--kpi-item-color-background-warning, #fdf1e8);--color-kpi-border: var(--kpi-item-color-border-warning, #ef934a);--color-kpi-label-medium: var(--kpi-item-color-label-warning-medium, #000000);--color-kpi-label-large: var(--kpi-item-color-label-warning-large, #b64f00);--color-kpi-value: var(--kpi-item-color-value-warning, #b64f00)}.mc-kpi--error,.kpi--error{--color-kpi-background: var(--kpi-item-color-background-error, #fdeaea);--color-kpi-border: var(--kpi-item-color-border-error, #ef5f5c);--color-kpi-label-medium: var(--kpi-item-color-label-error-medium, #000000);--color-kpi-label-large: var(--kpi-item-color-label-error-large, #c61112);--color-kpi-value: var(--kpi-item-color-value-error, #c61112)}.mc-kpi--success,.kpi--success{--color-kpi-background: var(--kpi-item-color-background-success, #ebf5de);--color-kpi-border: var(--kpi-item-color-border-success, #78be20);--color-kpi-label-medium: var(--kpi-item-color-label-success-medium, #000000);--color-kpi-label-large: var(--kpi-item-color-label-success-large, #117f03);--color-kpi-value: var(--kpi-item-color-value-success, #117f03)}.mc-kpi--neutral,.kpi--neutral{--color-kpi-background: var(--kpi-item-color-background-neutral, #f2f2f2);--color-kpi-border: var(--kpi-item-color-border-neutral, #999999);--color-kpi-label-medium: var(--kpi-item-color-label-neutral-medium, #000000);--color-kpi-label-large: var(--kpi-item-color-label-neutral-large, #666666);--color-kpi-value: var(--kpi-item-color-value-neutral, #666666)}.mc-button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active{transform:scale(.95)}.mc-button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:background-color ease .2s,border-color ease .2s,color ease .2s,transform ease-out .15s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon,.button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus{box-shadow:none;outline:none}.mc-button: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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.mc-button--s .button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.mc-button--s .button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon,.mc-button--m .button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child,.mc-button--m .button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon,.mc-button--l .button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child,.mc-button--l .button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active{transform:scale(.95)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active{transform:scale(.95)}.mc-button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active{transform:scale(.95)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{transform:scale(.95)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{transform:scale(.95)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon,.mc-button--loading .button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active{transform:scale(.95)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active{transform:scale(.95)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active{transform:scale(.95)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active{transform:scale(.95)}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active{transform:scale(.95)}.mc-button--ghost.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active{transform:scale(.95)}.mc-button--ghost.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active{transform:scale(.95)}.mc-button--ghost.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active{transform:scale(.95)}.mc-button--ghost.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"] }]
|
|
3953
3953
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], trend: [{ type: i0.Input, args: [{ isSignal: true, alias: "trend", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], information: [{ type: i0.Input, args: [{ isSignal: true, alias: "information", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
3954
3954
|
|
|
3955
3955
|
class MozStepperCompactComponent {
|
|
@@ -4432,11 +4432,11 @@ class MozStepperBottomBarComponent {
|
|
|
4432
4432
|
validateButtonIconId = computed(() => `${this.id()}-validate-icon`, /* @ts-ignore */
|
|
4433
4433
|
...(ngDevMode ? [{ debugName: "validateButtonIconId" }] : /* istanbul ignore next */ []));
|
|
4434
4434
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozStepperBottomBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4435
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozStepperBottomBarComponent, isStandalone: true, selector: "moz-stepper-bottom-bar", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, hasCancel: { classPropertyName: "hasCancel", publicName: "hasCancel", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, previousText: { classPropertyName: "previousText", publicName: "previousText", isSignal: true, isRequired: false, transformFunction: null }, nextText: { classPropertyName: "nextText", publicName: "nextText", isSignal: true, isRequired: false, transformFunction: null }, validateText: { classPropertyName: "validateText", publicName: "validateText", isSignal: true, isRequired: false, transformFunction: null }, disabledNext: { classPropertyName: "disabledNext", publicName: "disabledNext", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancel: "cancel", previous: "previous", next: "next", validate: "validate" }, ngImport: i0, template: "<div class=\"stepper-bottom-bar\">\n <div class=\"divider-horizontal stepper-bottom-bar__divider\"></div>\n <div class=\"stepper-bottom-bar__left\">\n @if (hasCancel()) {\n <button\n type=\"button\"\n class=\"button button--ghost button--s stepper-bottom-bar__button--text\"\n [id]=\"cancelButtonId()\"\n (click)=\"handleCancel()\"\n >\n {{ cancelText() }}\n </button>\n\n <button\n type=\"button\"\n class=\"button button--ghost button--icon stepper-bottom-bar__button--icon\"\n [id]=\"cancelButtonIconId()\"\n [attr.aria-label]=\"cancelText()\"\n (click)=\"handleCancel()\"\n >\n {{ cancelText() }}\n </button>\n }\n <ng-content [select]=\"'custom-content-left'\"></ng-content>\n </div>\n\n <div class=\"stepper-bottom-bar__right\">\n <ng-content [select]=\"'custom-content-right'\"></ng-content>\n @if (step() !== 'start') {\n <button\n type=\"button\"\n class=\"button button--outlined button--s stepper-bottom-bar__button--text\"\n [id]=\"previousButtonId()\"\n (click)=\"handlePrevious()\"\n >\n {{ previousText() }}\n </button>\n\n <button\n type=\"button\"\n class=\"button button--outlined button--icon stepper-bottom-bar__button--icon\"\n [id]=\"previousButtonIconId()\"\n [attr.aria-label]=\"previousText()\"\n (click)=\"handlePrevious()\"\n >\n <ArrowBack24 class=\"stepper-bottom-bar__icon\" />\n </button>\n } @if (step() !== 'end') {\n <button\n type=\"button\"\n class=\"button button--accent button--s stepper-bottom-bar__button--text\"\n [id]=\"nextButtonId()\"\n [disabled]=\"disabledNext()\"\n (click)=\"handleNext()\"\n >\n {{ nextText() }}\n </button>\n <button\n type=\"button\"\n class=\"button button--accent button--icon stepper-bottom-bar__button--icon\"\n [id]=\"nextButtonIconId()\"\n [attr.aria-label]=\"nextText()\"\n [disabled]=\"disabledNext()\"\n (click)=\"handleNext()\"\n >\n <ArrowNext24 class=\"stepper-bottom-bar__icon\" />\n </button>\n } @if (step() === 'end') {\n <button\n type=\"button\"\n class=\"button button--accent button--s stepper-bottom-bar__button--text\"\n [id]=\"validateButtonId()\"\n (click)=\"handleValidate()\"\n [disabled]=\"disabledNext()\"\n >\n {{ validateText() }}\n </button>\n <button\n type=\"button\"\n class=\"button button--accent button--icon stepper-bottom-bar__button--icon\"\n [id]=\"validateButtonIconId()\"\n [attr.aria-label]=\"validateText()\"\n [disabled]=\"disabledNext()\"\n (click)=\"handleValidate()\"\n >\n {{ validateText() }}\n </button>\n }\n </div>\n</div>\n", styles: [".mc-stepper-bottom-bar,.stepper-bottom-bar{position:fixed;box-sizing:border-box;bottom:0;left:0;width:100%;height:4rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;background-color:var(--action-bottom-bar-color-background, #ffffff);z-index:var(--stepper-bottom-bar-z-index, 3)}.mc-stepper-bottom-bar__divider,.stepper-bottom-bar__divider{width:100%}.mc-stepper-bottom-bar__icon,.stepper-bottom-bar__icon{width:1.5rem;height:1.5rem}@media screen and (min-width:679px){.mc-stepper-bottom-bar__button--icon.mc-button,.mc-button.stepper-bottom-bar__button--icon,.mc-stepper-bottom-bar__button--icon.button,.stepper-bottom-bar__button--icon.button{display:none}}.mc-stepper-bottom-bar__button--text.mc-button,.mc-button.stepper-bottom-bar__button--text,.mc-stepper-bottom-bar__button--text.button,.stepper-bottom-bar__button--text.button{display:none}@media screen and (min-width:679px){.mc-stepper-bottom-bar__button--text.mc-button,.mc-button.stepper-bottom-bar__button--text,.mc-stepper-bottom-bar__button--text.button,.stepper-bottom-bar__button--text.button{display:block}}.mc-stepper-bottom-bar__left,.stepper-bottom-bar__left{padding-left:1.25rem}@media screen and (min-width:679px){.mc-stepper-bottom-bar__left,.stepper-bottom-bar__left{padding-left:.5rem}}.mc-stepper-bottom-bar__right,.stepper-bottom-bar__right{margin-left:auto;padding:.25rem .5rem .25rem 0;display:flex;gap:.5rem}@media screen and (min-width:679px){.mc-stepper-bottom-bar__right,.stepper-bottom-bar__right{padding:.5rem 1rem .5rem 0}}.mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active,.button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label,.button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus,.button:focus{box-shadow:none;outline:none}.mc-button:focus-visible,.button: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-button--s,.button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label,.button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined,.button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover,.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active,.button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled,.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active,.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent,.button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover,.button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active,.button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled,.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard,.mc-button--standard.button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover,.mc-button--standard.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active,.mc-button--standard.button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled,.mc-button--standard.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent,.mc-button--accent.button--outlined,.mc-button--outlined.button--accent,.button--outlined.button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover,.mc-button--accent.button--outlined:hover,.mc-button--outlined.button--accent:hover,.button--outlined.button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active,.mc-button--accent.button--outlined:active,.mc-button--outlined.button--accent:active,.button--outlined.button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled,.mc-button--accent.button--outlined:disabled,.mc-button--outlined.button--accent:disabled,.button--outlined.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger,.mc-button--danger.button--outlined{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover,.mc-button--danger.button--outlined:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active,.mc-button--danger.button--outlined:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled,.mc-button--danger.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse,.mc-button--inverse.button--outlined{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover,.mc-button--inverse.button--outlined:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active,.mc-button--inverse.button--outlined:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled,.mc-button--inverse.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost,.mc-button--ghost.button--accent,.button--ghost.button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover,.mc-button--ghost.button--accent:hover,.button--ghost.button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active,.mc-button--ghost.button--accent:active,.button--ghost.button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled,.mc-button--ghost.button--accent:disabled,.button--ghost.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-divider{position:relative}.mc-divider-horizontal,.divider-horizontal{background:var(--divider-color-primary, #cccccc);height:.0625rem}.mc-divider-horizontal--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-horizontal--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-horizontal--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-horizontal--m{height:.25rem}.mc-divider-horizontal--l{height:.5rem}.mc-divider-vertical{background:var(--divider-color-primary, #cccccc);width:.0625rem}.mc-divider-vertical--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-vertical--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-vertical--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-vertical--m{height:.25rem}.mc-divider-vertical--l{height:.5rem}\n"], dependencies: [{ kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["hostClass"] }, { kind: "component", type: ArrowNext24, selector: "ArrowNext24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4435
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozStepperBottomBarComponent, isStandalone: true, selector: "moz-stepper-bottom-bar", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, hasCancel: { classPropertyName: "hasCancel", publicName: "hasCancel", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, previousText: { classPropertyName: "previousText", publicName: "previousText", isSignal: true, isRequired: false, transformFunction: null }, nextText: { classPropertyName: "nextText", publicName: "nextText", isSignal: true, isRequired: false, transformFunction: null }, validateText: { classPropertyName: "validateText", publicName: "validateText", isSignal: true, isRequired: false, transformFunction: null }, disabledNext: { classPropertyName: "disabledNext", publicName: "disabledNext", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancel: "cancel", previous: "previous", next: "next", validate: "validate" }, ngImport: i0, template: "<div class=\"stepper-bottom-bar\">\n <div class=\"divider-horizontal stepper-bottom-bar__divider\"></div>\n <div class=\"stepper-bottom-bar__left\">\n @if (hasCancel()) {\n <button\n type=\"button\"\n class=\"button button--ghost button--s stepper-bottom-bar__button--text\"\n [id]=\"cancelButtonId()\"\n (click)=\"handleCancel()\"\n >\n {{ cancelText() }}\n </button>\n\n <button\n type=\"button\"\n class=\"button button--ghost button--icon stepper-bottom-bar__button--icon\"\n [id]=\"cancelButtonIconId()\"\n [attr.aria-label]=\"cancelText()\"\n (click)=\"handleCancel()\"\n >\n {{ cancelText() }}\n </button>\n }\n <ng-content [select]=\"'custom-content-left'\"></ng-content>\n </div>\n\n <div class=\"stepper-bottom-bar__right\">\n <ng-content [select]=\"'custom-content-right'\"></ng-content>\n @if (step() !== 'start') {\n <button\n type=\"button\"\n class=\"button button--outlined button--s stepper-bottom-bar__button--text\"\n [id]=\"previousButtonId()\"\n (click)=\"handlePrevious()\"\n >\n {{ previousText() }}\n </button>\n\n <button\n type=\"button\"\n class=\"button button--outlined button--icon stepper-bottom-bar__button--icon\"\n [id]=\"previousButtonIconId()\"\n [attr.aria-label]=\"previousText()\"\n (click)=\"handlePrevious()\"\n >\n <ArrowBack24 class=\"stepper-bottom-bar__icon\" />\n </button>\n } @if (step() !== 'end') {\n <button\n type=\"button\"\n class=\"button button--accent button--s stepper-bottom-bar__button--text\"\n [id]=\"nextButtonId()\"\n [disabled]=\"disabledNext()\"\n (click)=\"handleNext()\"\n >\n {{ nextText() }}\n </button>\n <button\n type=\"button\"\n class=\"button button--accent button--icon stepper-bottom-bar__button--icon\"\n [id]=\"nextButtonIconId()\"\n [attr.aria-label]=\"nextText()\"\n [disabled]=\"disabledNext()\"\n (click)=\"handleNext()\"\n >\n <ArrowNext24 class=\"stepper-bottom-bar__icon\" />\n </button>\n } @if (step() === 'end') {\n <button\n type=\"button\"\n class=\"button button--accent button--s stepper-bottom-bar__button--text\"\n [id]=\"validateButtonId()\"\n (click)=\"handleValidate()\"\n [disabled]=\"disabledNext()\"\n >\n {{ validateText() }}\n </button>\n <button\n type=\"button\"\n class=\"button button--accent button--icon stepper-bottom-bar__button--icon\"\n [id]=\"validateButtonIconId()\"\n [attr.aria-label]=\"validateText()\"\n [disabled]=\"disabledNext()\"\n (click)=\"handleValidate()\"\n >\n {{ validateText() }}\n </button>\n }\n </div>\n</div>\n", styles: [".mc-stepper-bottom-bar,.stepper-bottom-bar{position:fixed;box-sizing:border-box;bottom:0;left:0;width:100%;height:4rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;background-color:var(--action-bottom-bar-color-background, #ffffff);z-index:var(--stepper-bottom-bar-z-index, 3)}.mc-stepper-bottom-bar__divider,.stepper-bottom-bar__divider{width:100%}.mc-stepper-bottom-bar__icon,.stepper-bottom-bar__icon{width:1.5rem;height:1.5rem}@media screen and (min-width:679px){.mc-stepper-bottom-bar__button--icon.mc-button,.mc-button.stepper-bottom-bar__button--icon,.mc-stepper-bottom-bar__button--icon.button,.stepper-bottom-bar__button--icon.button{display:none}}.mc-stepper-bottom-bar__button--text.mc-button,.mc-button.stepper-bottom-bar__button--text,.mc-stepper-bottom-bar__button--text.button,.stepper-bottom-bar__button--text.button{display:none}@media screen and (min-width:679px){.mc-stepper-bottom-bar__button--text.mc-button,.mc-button.stepper-bottom-bar__button--text,.mc-stepper-bottom-bar__button--text.button,.stepper-bottom-bar__button--text.button{display:block}}.mc-stepper-bottom-bar__left,.stepper-bottom-bar__left{padding-left:1.25rem}@media screen and (min-width:679px){.mc-stepper-bottom-bar__left,.stepper-bottom-bar__left{padding-left:.5rem}}.mc-stepper-bottom-bar__right,.stepper-bottom-bar__right{margin-left:auto;padding:.25rem .5rem .25rem 0;display:flex;gap:.5rem}@media screen and (min-width:679px){.mc-stepper-bottom-bar__right,.stepper-bottom-bar__right{padding:.5rem 1rem .5rem 0}}.mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active,.button:active{transform:scale(.95)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label,.button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:background-color ease .2s,border-color ease .2s,color ease .2s,transform ease-out .15s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus,.button:focus{box-shadow:none;outline:none}.mc-button:focus-visible,.button: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-button--s,.button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label,.button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined,.button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover,.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active,.button--outlined:active{transform:scale(.95)}.mc-button--outlined:disabled,.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active,.button--ghost:active{transform:scale(.95)}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent,.button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover,.button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active,.button--accent:active{transform:scale(.95)}.mc-button--accent:disabled,.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{transform:scale(.95)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{transform:scale(.95)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard,.mc-button--standard.button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover,.mc-button--standard.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active,.mc-button--standard.button--outlined:active{transform:scale(.95)}.mc-button--outlined.mc-button--standard:disabled,.mc-button--standard.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent,.mc-button--accent.button--outlined,.mc-button--outlined.button--accent,.button--outlined.button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover,.mc-button--accent.button--outlined:hover,.mc-button--outlined.button--accent:hover,.button--outlined.button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active,.mc-button--accent.button--outlined:active,.mc-button--outlined.button--accent:active,.button--outlined.button--accent:active{transform:scale(.95)}.mc-button--outlined.mc-button--accent:disabled,.mc-button--accent.button--outlined:disabled,.mc-button--outlined.button--accent:disabled,.button--outlined.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger,.mc-button--danger.button--outlined{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover,.mc-button--danger.button--outlined:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active,.mc-button--danger.button--outlined:active{transform:scale(.95)}.mc-button--outlined.mc-button--danger:disabled,.mc-button--danger.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse,.mc-button--inverse.button--outlined{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover,.mc-button--inverse.button--outlined:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active,.mc-button--inverse.button--outlined:active{transform:scale(.95)}.mc-button--outlined.mc-button--inverse:disabled,.mc-button--inverse.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost,.mc-button--ghost.button--accent,.button--ghost.button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover,.mc-button--ghost.button--accent:hover,.button--ghost.button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active,.mc-button--ghost.button--accent:active,.button--ghost.button--accent:active{transform:scale(.95)}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled,.mc-button--ghost.button--accent:disabled,.button--ghost.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-divider{position:relative}.mc-divider-horizontal,.divider-horizontal{background:var(--divider-color-primary, #cccccc);height:.0625rem}.mc-divider-horizontal--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-horizontal--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-horizontal--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-horizontal--m{height:.25rem}.mc-divider-horizontal--l{height:.5rem}.mc-divider-vertical{background:var(--divider-color-primary, #cccccc);width:.0625rem}.mc-divider-vertical--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-vertical--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-vertical--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-vertical--m{height:.25rem}.mc-divider-vertical--l{height:.5rem}\n"], dependencies: [{ kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["hostClass"] }, { kind: "component", type: ArrowNext24, selector: "ArrowNext24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4436
4436
|
}
|
|
4437
4437
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozStepperBottomBarComponent, decorators: [{
|
|
4438
4438
|
type: Component,
|
|
4439
|
-
args: [{ selector: 'moz-stepper-bottom-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ArrowBack24, ArrowNext24], template: "<div class=\"stepper-bottom-bar\">\n <div class=\"divider-horizontal stepper-bottom-bar__divider\"></div>\n <div class=\"stepper-bottom-bar__left\">\n @if (hasCancel()) {\n <button\n type=\"button\"\n class=\"button button--ghost button--s stepper-bottom-bar__button--text\"\n [id]=\"cancelButtonId()\"\n (click)=\"handleCancel()\"\n >\n {{ cancelText() }}\n </button>\n\n <button\n type=\"button\"\n class=\"button button--ghost button--icon stepper-bottom-bar__button--icon\"\n [id]=\"cancelButtonIconId()\"\n [attr.aria-label]=\"cancelText()\"\n (click)=\"handleCancel()\"\n >\n {{ cancelText() }}\n </button>\n }\n <ng-content [select]=\"'custom-content-left'\"></ng-content>\n </div>\n\n <div class=\"stepper-bottom-bar__right\">\n <ng-content [select]=\"'custom-content-right'\"></ng-content>\n @if (step() !== 'start') {\n <button\n type=\"button\"\n class=\"button button--outlined button--s stepper-bottom-bar__button--text\"\n [id]=\"previousButtonId()\"\n (click)=\"handlePrevious()\"\n >\n {{ previousText() }}\n </button>\n\n <button\n type=\"button\"\n class=\"button button--outlined button--icon stepper-bottom-bar__button--icon\"\n [id]=\"previousButtonIconId()\"\n [attr.aria-label]=\"previousText()\"\n (click)=\"handlePrevious()\"\n >\n <ArrowBack24 class=\"stepper-bottom-bar__icon\" />\n </button>\n } @if (step() !== 'end') {\n <button\n type=\"button\"\n class=\"button button--accent button--s stepper-bottom-bar__button--text\"\n [id]=\"nextButtonId()\"\n [disabled]=\"disabledNext()\"\n (click)=\"handleNext()\"\n >\n {{ nextText() }}\n </button>\n <button\n type=\"button\"\n class=\"button button--accent button--icon stepper-bottom-bar__button--icon\"\n [id]=\"nextButtonIconId()\"\n [attr.aria-label]=\"nextText()\"\n [disabled]=\"disabledNext()\"\n (click)=\"handleNext()\"\n >\n <ArrowNext24 class=\"stepper-bottom-bar__icon\" />\n </button>\n } @if (step() === 'end') {\n <button\n type=\"button\"\n class=\"button button--accent button--s stepper-bottom-bar__button--text\"\n [id]=\"validateButtonId()\"\n (click)=\"handleValidate()\"\n [disabled]=\"disabledNext()\"\n >\n {{ validateText() }}\n </button>\n <button\n type=\"button\"\n class=\"button button--accent button--icon stepper-bottom-bar__button--icon\"\n [id]=\"validateButtonIconId()\"\n [attr.aria-label]=\"validateText()\"\n [disabled]=\"disabledNext()\"\n (click)=\"handleValidate()\"\n >\n {{ validateText() }}\n </button>\n }\n </div>\n</div>\n", styles: [".mc-stepper-bottom-bar,.stepper-bottom-bar{position:fixed;box-sizing:border-box;bottom:0;left:0;width:100%;height:4rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;background-color:var(--action-bottom-bar-color-background, #ffffff);z-index:var(--stepper-bottom-bar-z-index, 3)}.mc-stepper-bottom-bar__divider,.stepper-bottom-bar__divider{width:100%}.mc-stepper-bottom-bar__icon,.stepper-bottom-bar__icon{width:1.5rem;height:1.5rem}@media screen and (min-width:679px){.mc-stepper-bottom-bar__button--icon.mc-button,.mc-button.stepper-bottom-bar__button--icon,.mc-stepper-bottom-bar__button--icon.button,.stepper-bottom-bar__button--icon.button{display:none}}.mc-stepper-bottom-bar__button--text.mc-button,.mc-button.stepper-bottom-bar__button--text,.mc-stepper-bottom-bar__button--text.button,.stepper-bottom-bar__button--text.button{display:none}@media screen and (min-width:679px){.mc-stepper-bottom-bar__button--text.mc-button,.mc-button.stepper-bottom-bar__button--text,.mc-stepper-bottom-bar__button--text.button,.stepper-bottom-bar__button--text.button{display:block}}.mc-stepper-bottom-bar__left,.stepper-bottom-bar__left{padding-left:1.25rem}@media screen and (min-width:679px){.mc-stepper-bottom-bar__left,.stepper-bottom-bar__left{padding-left:.5rem}}.mc-stepper-bottom-bar__right,.stepper-bottom-bar__right{margin-left:auto;padding:.25rem .5rem .25rem 0;display:flex;gap:.5rem}@media screen and (min-width:679px){.mc-stepper-bottom-bar__right,.stepper-bottom-bar__right{padding:.5rem 1rem .5rem 0}}.mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active,.button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label,.button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus,.button:focus{box-shadow:none;outline:none}.mc-button:focus-visible,.button: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-button--s,.button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label,.button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined,.button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover,.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active,.button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled,.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active,.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent,.button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover,.button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active,.button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled,.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard,.mc-button--standard.button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover,.mc-button--standard.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active,.mc-button--standard.button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled,.mc-button--standard.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent,.mc-button--accent.button--outlined,.mc-button--outlined.button--accent,.button--outlined.button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover,.mc-button--accent.button--outlined:hover,.mc-button--outlined.button--accent:hover,.button--outlined.button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active,.mc-button--accent.button--outlined:active,.mc-button--outlined.button--accent:active,.button--outlined.button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled,.mc-button--accent.button--outlined:disabled,.mc-button--outlined.button--accent:disabled,.button--outlined.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger,.mc-button--danger.button--outlined{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover,.mc-button--danger.button--outlined:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active,.mc-button--danger.button--outlined:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled,.mc-button--danger.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse,.mc-button--inverse.button--outlined{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover,.mc-button--inverse.button--outlined:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active,.mc-button--inverse.button--outlined:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled,.mc-button--inverse.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost,.mc-button--ghost.button--accent,.button--ghost.button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover,.mc-button--ghost.button--accent:hover,.button--ghost.button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active,.mc-button--ghost.button--accent:active,.button--ghost.button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled,.mc-button--ghost.button--accent:disabled,.button--ghost.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-divider{position:relative}.mc-divider-horizontal,.divider-horizontal{background:var(--divider-color-primary, #cccccc);height:.0625rem}.mc-divider-horizontal--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-horizontal--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-horizontal--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-horizontal--m{height:.25rem}.mc-divider-horizontal--l{height:.5rem}.mc-divider-vertical{background:var(--divider-color-primary, #cccccc);width:.0625rem}.mc-divider-vertical--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-vertical--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-vertical--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-vertical--m{height:.25rem}.mc-divider-vertical--l{height:.5rem}\n"] }]
|
|
4439
|
+
args: [{ selector: 'moz-stepper-bottom-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ArrowBack24, ArrowNext24], template: "<div class=\"stepper-bottom-bar\">\n <div class=\"divider-horizontal stepper-bottom-bar__divider\"></div>\n <div class=\"stepper-bottom-bar__left\">\n @if (hasCancel()) {\n <button\n type=\"button\"\n class=\"button button--ghost button--s stepper-bottom-bar__button--text\"\n [id]=\"cancelButtonId()\"\n (click)=\"handleCancel()\"\n >\n {{ cancelText() }}\n </button>\n\n <button\n type=\"button\"\n class=\"button button--ghost button--icon stepper-bottom-bar__button--icon\"\n [id]=\"cancelButtonIconId()\"\n [attr.aria-label]=\"cancelText()\"\n (click)=\"handleCancel()\"\n >\n {{ cancelText() }}\n </button>\n }\n <ng-content [select]=\"'custom-content-left'\"></ng-content>\n </div>\n\n <div class=\"stepper-bottom-bar__right\">\n <ng-content [select]=\"'custom-content-right'\"></ng-content>\n @if (step() !== 'start') {\n <button\n type=\"button\"\n class=\"button button--outlined button--s stepper-bottom-bar__button--text\"\n [id]=\"previousButtonId()\"\n (click)=\"handlePrevious()\"\n >\n {{ previousText() }}\n </button>\n\n <button\n type=\"button\"\n class=\"button button--outlined button--icon stepper-bottom-bar__button--icon\"\n [id]=\"previousButtonIconId()\"\n [attr.aria-label]=\"previousText()\"\n (click)=\"handlePrevious()\"\n >\n <ArrowBack24 class=\"stepper-bottom-bar__icon\" />\n </button>\n } @if (step() !== 'end') {\n <button\n type=\"button\"\n class=\"button button--accent button--s stepper-bottom-bar__button--text\"\n [id]=\"nextButtonId()\"\n [disabled]=\"disabledNext()\"\n (click)=\"handleNext()\"\n >\n {{ nextText() }}\n </button>\n <button\n type=\"button\"\n class=\"button button--accent button--icon stepper-bottom-bar__button--icon\"\n [id]=\"nextButtonIconId()\"\n [attr.aria-label]=\"nextText()\"\n [disabled]=\"disabledNext()\"\n (click)=\"handleNext()\"\n >\n <ArrowNext24 class=\"stepper-bottom-bar__icon\" />\n </button>\n } @if (step() === 'end') {\n <button\n type=\"button\"\n class=\"button button--accent button--s stepper-bottom-bar__button--text\"\n [id]=\"validateButtonId()\"\n (click)=\"handleValidate()\"\n [disabled]=\"disabledNext()\"\n >\n {{ validateText() }}\n </button>\n <button\n type=\"button\"\n class=\"button button--accent button--icon stepper-bottom-bar__button--icon\"\n [id]=\"validateButtonIconId()\"\n [attr.aria-label]=\"validateText()\"\n [disabled]=\"disabledNext()\"\n (click)=\"handleValidate()\"\n >\n {{ validateText() }}\n </button>\n }\n </div>\n</div>\n", styles: [".mc-stepper-bottom-bar,.stepper-bottom-bar{position:fixed;box-sizing:border-box;bottom:0;left:0;width:100%;height:4rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;background-color:var(--action-bottom-bar-color-background, #ffffff);z-index:var(--stepper-bottom-bar-z-index, 3)}.mc-stepper-bottom-bar__divider,.stepper-bottom-bar__divider{width:100%}.mc-stepper-bottom-bar__icon,.stepper-bottom-bar__icon{width:1.5rem;height:1.5rem}@media screen and (min-width:679px){.mc-stepper-bottom-bar__button--icon.mc-button,.mc-button.stepper-bottom-bar__button--icon,.mc-stepper-bottom-bar__button--icon.button,.stepper-bottom-bar__button--icon.button{display:none}}.mc-stepper-bottom-bar__button--text.mc-button,.mc-button.stepper-bottom-bar__button--text,.mc-stepper-bottom-bar__button--text.button,.stepper-bottom-bar__button--text.button{display:none}@media screen and (min-width:679px){.mc-stepper-bottom-bar__button--text.mc-button,.mc-button.stepper-bottom-bar__button--text,.mc-stepper-bottom-bar__button--text.button,.stepper-bottom-bar__button--text.button{display:block}}.mc-stepper-bottom-bar__left,.stepper-bottom-bar__left{padding-left:1.25rem}@media screen and (min-width:679px){.mc-stepper-bottom-bar__left,.stepper-bottom-bar__left{padding-left:.5rem}}.mc-stepper-bottom-bar__right,.stepper-bottom-bar__right{margin-left:auto;padding:.25rem .5rem .25rem 0;display:flex;gap:.5rem}@media screen and (min-width:679px){.mc-stepper-bottom-bar__right,.stepper-bottom-bar__right{padding:.5rem 1rem .5rem 0}}.mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c);color:var(--button-color-filled-standard-font, #ffffff)}.mc-button:active,.button:active{transform:scale(.95)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button .mc-button__label,.button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:background-color ease .2s,border-color ease .2s,color ease .2s,transform ease-out .15s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus,.button:focus{box-shadow:none;outline:none}.mc-button:focus-visible,.button: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-button--s,.button--s{padding:0 .625rem;min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, .25rem)}.mc-button--s .mc-button__label,.button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, .25rem)}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, .25rem)}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined,.button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover,.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined:active,.button--outlined:active{transform:scale(.95)}.mc-button--outlined:disabled,.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost:active,.button--ghost:active{transform:scale(.95)}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent,.button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover,.button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902);color:var(--button-color-filled-accent-font, #ffffff)}.mc-button--accent:active,.button--accent:active{transform:scale(.95)}.mc-button--accent:disabled,.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003);color:var(--button-color-filled-danger-font, #ffffff)}.mc-button--danger:active{transform:scale(.95)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);color:var(--button-color-filled-inverse-font, #242938)}.mc-button--inverse:active{transform:scale(.95)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard,.mc-button--standard.button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover,.mc-button--standard.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);color:var(--button-color-outlined-standard-font, #242938)}.mc-button--outlined.mc-button--standard:active,.mc-button--standard.button--outlined:active{transform:scale(.95)}.mc-button--outlined.mc-button--standard:disabled,.mc-button--standard.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent,.mc-button--accent.button--outlined,.mc-button--outlined.button--accent,.button--outlined.button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover,.mc-button--accent.button--outlined:hover,.mc-button--outlined.button--accent:hover,.button--outlined.button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);color:var(--button-color-outlined-accent-font, #117f03)}.mc-button--outlined.mc-button--accent:active,.mc-button--accent.button--outlined:active,.mc-button--outlined.button--accent:active,.button--outlined.button--accent:active{transform:scale(.95)}.mc-button--outlined.mc-button--accent:disabled,.mc-button--accent.button--outlined:disabled,.mc-button--outlined.button--accent:disabled,.button--outlined.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger,.mc-button--danger.button--outlined{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover,.mc-button--danger.button--outlined:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);color:var(--button-color-outlined-danger-font, #c61112)}.mc-button--outlined.mc-button--danger:active,.mc-button--danger.button--outlined:active{transform:scale(.95)}.mc-button--outlined.mc-button--danger:disabled,.mc-button--danger.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse,.mc-button--inverse.button--outlined{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover,.mc-button--inverse.button--outlined:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-outlined-inverse-font, #ffffff)}.mc-button--outlined.mc-button--inverse:active,.mc-button--inverse.button--outlined:active{transform:scale(.95)}.mc-button--outlined.mc-button--inverse:disabled,.mc-button--inverse.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1));color:var(--button-color-ghost-standard-font, #242938)}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost,.mc-button--ghost.button--accent,.button--ghost.button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover,.mc-button--ghost.button--accent:hover,.button--ghost.button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1));color:var(--button-color-ghost-accent-font, #117f03)}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active,.mc-button--ghost.button--accent:active,.button--ghost.button--accent:active{transform:scale(.95)}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled,.mc-button--ghost.button--accent:disabled,.button--ghost.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1));color:var(--button-color-ghost-danger-font, #c61112)}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1));color:var(--button-color-ghost-inverse-font, #ffffff)}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active{transform:scale(.95)}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-divider{position:relative}.mc-divider-horizontal,.divider-horizontal{background:var(--divider-color-primary, #cccccc);height:.0625rem}.mc-divider-horizontal--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-horizontal--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-horizontal--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-horizontal--m{height:.25rem}.mc-divider-horizontal--l{height:.5rem}.mc-divider-vertical{background:var(--divider-color-primary, #cccccc);width:.0625rem}.mc-divider-vertical--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-vertical--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-vertical--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-vertical--m{height:.25rem}.mc-divider-vertical--l{height:.5rem}\n"] }]
|
|
4440
4440
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], hasCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasCancel", required: false }] }], cancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelText", required: false }] }], previousText: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousText", required: false }] }], nextText: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextText", required: false }] }], validateText: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateText", required: false }] }], disabledNext: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledNext", required: false }] }], cancel: [{ type: i0.Output, args: ["cancel"] }], previous: [{ type: i0.Output, args: ["previous"] }], next: [{ type: i0.Output, args: ["next"] }], validate: [{ type: i0.Output, args: ["validate"] }] } });
|
|
4441
4441
|
|
|
4442
4442
|
class MozPageHeaderComponent {
|
|
@@ -4678,7 +4678,7 @@ class MozTileSelectableComponent {
|
|
|
4678
4678
|
useExisting: forwardRef(() => MozTileSelectableComponent),
|
|
4679
4679
|
multi: true,
|
|
4680
4680
|
},
|
|
4681
|
-
], ngImport: i0, template: "<label [class]=\"classes()\" [class.mc-tile--disabled]=\"disabled()\">\n <div class=\"mc-tile__header\">\n <div class=\"mc-tile__body\">\n <ng-content select=\"[body]\"></ng-content>\n </div>\n <div class=\"mc-tile__action\">\n @if (isCheckbox()) {\n <input\n type=\"checkbox\"\n class=\"mc-checkbox__input\"\n [name]=\"name()\"\n [value]=\"value()\"\n [checked]=\"isChecked()\"\n [disabled]=\"disabled()\"\n (change)=\"onTileChange($event)\"\n />\n } @else if (isRadio()) {\n <input\n type=\"radio\"\n class=\"mc-radio__input\"\n [name]=\"name()\"\n [value]=\"value()\"\n [checked]=\"isChecked()\"\n [disabled]=\"disabled()\"\n (change)=\"onTileChange($event)\"\n />\n }\n </div>\n </div>\n <div class=\"mc-tile__content\">\n <ng-content select=\"[segmented]\"></ng-content>\n </div>\n</label>\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}.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-color:var(--color-text-primary-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain}.mc-tile--inverse.mc-tile--open .mc-tile__action:after{background-color:var(--color-text-primary-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain}.mc-tile--inverse.mc-tile--external-link .mc-tile__action:after{background-color:var(--color-text-primary-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain}.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-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain}.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-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain}.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-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain}.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).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-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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\") no-repeat center/contain;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.mc-tile--selected{box-shadow:0 0 0 2px var(--color-brand, #78be20),0 0 0 4px var(--color-background-accent, #ebf5de)}.mc-tile--selectable.mc-tile--no-input .mc-tile__action{visibility:hidden;position:absolute}.mc-checkbox,.checkbox{align-items:center;display:flex;gap:.5rem;padding:.375rem}.mc-checkbox--indented,.checkbox--indented{margin-left:1.75rem}.mc-checkbox__label,.checkbox__label{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer}.mc-checkbox__input,.checkbox__input{appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, .125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;height:1.25rem;width:1.25rem;position:relative}.mc-checkbox__input:after,.checkbox__input:after{content:\"\";position:absolute;inset:0;background-color:var(--forms-color-icon-inverse, #ffffff);opacity:0;transform:scale(.6);transition:.15s ease}.mc-checkbox__input:hover,.checkbox__input:hover{border-color:var(--forms-color-border-hover, #4d4d4d)}.mc-checkbox__input:focus-visible,.checkbox__input: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-checkbox__input:checked:after,.checkbox__input:checked:after{opacity:1;transform:scale(1);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:indeterminate:after,.checkbox__input:indeterminate:after{opacity:1;transform:scale(1);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate{background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate,.mc-checkbox__input:disabled,.checkbox__input:disabled{border-color:transparent}.mc-checkbox__input:disabled,.checkbox__input:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed}.mc-checkbox__input:disabled:checked:after,.checkbox__input:disabled:checked:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled:indeterminate:after,.checkbox__input:disabled:indeterminate:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled+.mc-checkbox__label,.checkbox__input:disabled+.mc-checkbox__label,.mc-checkbox__input:disabled+.checkbox__label,.checkbox__input:disabled+.checkbox__label{color:var(--forms-color-text-disabled, #737373);cursor:not-allowed}.mc-checkbox__input:not(:disabled):checked:hover,.checkbox__input:not(:disabled):checked:hover,.mc-checkbox__input:not(:disabled):indeterminate:hover,.checkbox__input:not(:disabled):indeterminate:hover{background-color:var(--forms-color-background-checked-hover, #006902)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate),.is-invalid.checkbox__input:not(:checked,:indeterminate){border-color:var(--forms-color-border-invalid, #ea302d)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate):hover,.is-invalid.checkbox__input:not(:checked,:indeterminate):hover{border-color:var(--forms-color-border-invalid-hover, #c61112)}.mc-radio,.radio{align-items:center;display:flex;gap:.5rem;padding:.375rem}.mc-radio__label,.radio__label{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer}.mc-radio__input,.radio__input{appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, .125rem) solid var(--forms-color-border-default, #666666);border-radius:100%;transition:all ease .2s;height:1.25rem;width:1.25rem;position:relative}.mc-radio__input:before,.radio__input:before{border-radius:var(--border-radius-full, 100%);content:\"\";display:block;height:.5rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:.5rem}.mc-radio__input:hover,.radio__input:hover{border-color:var(--forms-color-border-hover, #4d4d4d)}.mc-radio__input:focus-visible,.radio__input: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-radio__input:checked,.radio__input:checked{background-color:var(--forms-color-background-checked, #117f03)}.mc-radio__input:checked:before,.radio__input:checked:before{background-color:var(--forms-color-background-default, #ffffff)}.mc-radio__input:checked,.radio__input:checked,.mc-radio__input:disabled,.radio__input:disabled{border-color:transparent}.mc-radio__input:disabled,.radio__input:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed}.mc-radio__input:disabled:checked:before,.radio__input:disabled:checked:before{background-color:var(--forms-color-icon-disabled, #737373)}.mc-radio__input:disabled+.mc-radio__label,.radio__input:disabled+.mc-radio__label,.mc-radio__input:disabled+.radio__label,.radio__input:disabled+.radio__label{color:var(--forms-color-text-disabled, #737373);cursor:not-allowed}.mc-radio__input:not(:disabled):checked:hover,.radio__input:not(:disabled):checked:hover{background-color:var(--forms-color-background-checked-hover, #006902)}.mc-radio__input.is-invalid:not(:checked),.is-invalid.radio__input:not(:checked){border-color:var(--forms-color-border-invalid, #ea302d)}.mc-radio__input.is-invalid:not(:checked):hover,.is-invalid.radio__input:not(:checked):hover{border-color:var(--forms-color-border-invalid-hover, #c61112)}.mc-tile__content:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4681
|
+
], ngImport: i0, template: "<label [class]=\"classes()\" [class.mc-tile--disabled]=\"disabled()\">\n <div class=\"mc-tile__header\">\n <div class=\"mc-tile__body\">\n <ng-content select=\"[body]\"></ng-content>\n </div>\n <div class=\"mc-tile__action\">\n @if (isCheckbox()) {\n <input\n type=\"checkbox\"\n class=\"mc-checkbox__input\"\n [name]=\"name()\"\n [value]=\"value()\"\n [checked]=\"isChecked()\"\n [disabled]=\"disabled()\"\n (change)=\"onTileChange($event)\"\n />\n } @else if (isRadio()) {\n <input\n type=\"radio\"\n class=\"mc-radio__input\"\n [name]=\"name()\"\n [value]=\"value()\"\n [checked]=\"isChecked()\"\n [disabled]=\"disabled()\"\n (change)=\"onTileChange($event)\"\n />\n }\n </div>\n </div>\n <div class=\"mc-tile__content\">\n <ng-content select=\"[segmented]\"></ng-content>\n </div>\n</label>\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}.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-color:var(--color-text-primary-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain}.mc-tile--inverse.mc-tile--open .mc-tile__action:after{background-color:var(--color-text-primary-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain}.mc-tile--inverse.mc-tile--external-link .mc-tile__action:after{background-color:var(--color-text-primary-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain}.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-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain}.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-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain}.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-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain}.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).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-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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\") no-repeat center/contain;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.mc-tile--selected{box-shadow:0 0 0 2px var(--color-brand, #78be20),0 0 0 4px var(--color-background-accent, #ebf5de)}.mc-tile--selectable.mc-tile--no-input .mc-tile__action{visibility:hidden;position:absolute}.mc-checkbox,.checkbox{align-items:center;display:flex;gap:.5rem;padding:.375rem}.mc-checkbox--indented,.checkbox--indented{margin-left:1.75rem}.mc-checkbox__label,.checkbox__label{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer}.mc-checkbox__input,.checkbox__input{appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, .125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;height:1.25rem;width:1.25rem;position:relative}.mc-checkbox__input:after,.checkbox__input:after{content:\"\";position:absolute;inset:0;background-color:var(--forms-color-icon-inverse, #ffffff);opacity:0;transform:scale(.6);transition:opacity .15s ease,transform .15s ease;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:hover,.checkbox__input:hover{border-color:var(--forms-color-border-hover, #4d4d4d)}.mc-checkbox__input:focus-visible,.checkbox__input: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-checkbox__input:checked:after,.checkbox__input:checked:after{opacity:1;transform:scale(1)}.mc-checkbox__input:indeterminate:after,.checkbox__input:indeterminate:after{opacity:1;transform:scale(1);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate{background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate,.mc-checkbox__input:disabled,.checkbox__input:disabled{border-color:transparent}.mc-checkbox__input:disabled,.checkbox__input:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed}.mc-checkbox__input:disabled:checked:after,.checkbox__input:disabled:checked:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled:indeterminate:after,.checkbox__input:disabled:indeterminate:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled+.mc-checkbox__label,.checkbox__input:disabled+.mc-checkbox__label,.mc-checkbox__input:disabled+.checkbox__label,.checkbox__input:disabled+.checkbox__label{color:var(--forms-color-text-disabled, #737373);cursor:not-allowed}.mc-checkbox__input:not(:disabled):checked:hover,.checkbox__input:not(:disabled):checked:hover,.mc-checkbox__input:not(:disabled):indeterminate:hover,.checkbox__input:not(:disabled):indeterminate:hover{background-color:var(--forms-color-background-checked-hover, #006902)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate),.is-invalid.checkbox__input:not(:checked,:indeterminate){border-color:var(--forms-color-border-invalid, #ea302d)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate):hover,.is-invalid.checkbox__input:not(:checked,:indeterminate):hover{border-color:var(--forms-color-border-invalid-hover, #c61112)}.mc-radio,.radio{align-items:center;display:flex;gap:.5rem;padding:.375rem}.mc-radio__label,.radio__label{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer}.mc-radio__input,.radio__input{appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, .125rem) solid var(--forms-color-border-default, #666666);border-radius:100%;transition:all ease .2s;height:1.25rem;width:1.25rem;position:relative}.mc-radio__input:before,.radio__input:before{border-radius:var(--border-radius-full, 100%);content:\"\";display:block;height:.5rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:.5rem}.mc-radio__input:hover,.radio__input:hover{border-color:var(--forms-color-border-hover, #4d4d4d)}.mc-radio__input:focus-visible,.radio__input: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-radio__input:checked,.radio__input:checked{background-color:var(--forms-color-background-checked, #117f03)}.mc-radio__input:checked:before,.radio__input:checked:before{background-color:var(--forms-color-background-default, #ffffff)}.mc-radio__input:checked,.radio__input:checked,.mc-radio__input:disabled,.radio__input:disabled{border-color:transparent}.mc-radio__input:disabled,.radio__input:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed}.mc-radio__input:disabled:checked:before,.radio__input:disabled:checked:before{background-color:var(--forms-color-icon-disabled, #737373)}.mc-radio__input:disabled+.mc-radio__label,.radio__input:disabled+.mc-radio__label,.mc-radio__input:disabled+.radio__label,.radio__input:disabled+.radio__label{color:var(--forms-color-text-disabled, #737373);cursor:not-allowed}.mc-radio__input:not(:disabled):checked:hover,.radio__input:not(:disabled):checked:hover{background-color:var(--forms-color-background-checked-hover, #006902)}.mc-radio__input.is-invalid:not(:checked),.is-invalid.radio__input:not(:checked){border-color:var(--forms-color-border-invalid, #ea302d)}.mc-radio__input.is-invalid:not(:checked):hover,.is-invalid.radio__input:not(:checked):hover{border-color:var(--forms-color-border-invalid-hover, #c61112)}.mc-tile__content:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4682
4682
|
}
|
|
4683
4683
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozTileSelectableComponent, decorators: [{
|
|
4684
4684
|
type: Component,
|
|
@@ -4688,7 +4688,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
4688
4688
|
useExisting: forwardRef(() => MozTileSelectableComponent),
|
|
4689
4689
|
multi: true,
|
|
4690
4690
|
},
|
|
4691
|
-
], template: "<label [class]=\"classes()\" [class.mc-tile--disabled]=\"disabled()\">\n <div class=\"mc-tile__header\">\n <div class=\"mc-tile__body\">\n <ng-content select=\"[body]\"></ng-content>\n </div>\n <div class=\"mc-tile__action\">\n @if (isCheckbox()) {\n <input\n type=\"checkbox\"\n class=\"mc-checkbox__input\"\n [name]=\"name()\"\n [value]=\"value()\"\n [checked]=\"isChecked()\"\n [disabled]=\"disabled()\"\n (change)=\"onTileChange($event)\"\n />\n } @else if (isRadio()) {\n <input\n type=\"radio\"\n class=\"mc-radio__input\"\n [name]=\"name()\"\n [value]=\"value()\"\n [checked]=\"isChecked()\"\n [disabled]=\"disabled()\"\n (change)=\"onTileChange($event)\"\n />\n }\n </div>\n </div>\n <div class=\"mc-tile__content\">\n <ng-content select=\"[segmented]\"></ng-content>\n </div>\n</label>\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}.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-color:var(--color-text-primary-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain}.mc-tile--inverse.mc-tile--open .mc-tile__action:after{background-color:var(--color-text-primary-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain}.mc-tile--inverse.mc-tile--external-link .mc-tile__action:after{background-color:var(--color-text-primary-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain}.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-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain}.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-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain}.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-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain}.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).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-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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\") no-repeat center/contain;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.mc-tile--selected{box-shadow:0 0 0 2px var(--color-brand, #78be20),0 0 0 4px var(--color-background-accent, #ebf5de)}.mc-tile--selectable.mc-tile--no-input .mc-tile__action{visibility:hidden;position:absolute}.mc-checkbox,.checkbox{align-items:center;display:flex;gap:.5rem;padding:.375rem}.mc-checkbox--indented,.checkbox--indented{margin-left:1.75rem}.mc-checkbox__label,.checkbox__label{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer}.mc-checkbox__input,.checkbox__input{appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, .125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;height:1.25rem;width:1.25rem;position:relative}.mc-checkbox__input:after,.checkbox__input:after{content:\"\";position:absolute;inset:0;background-color:var(--forms-color-icon-inverse, #ffffff);opacity:0;transform:scale(.6);transition:.15s ease}.mc-checkbox__input:hover,.checkbox__input:hover{border-color:var(--forms-color-border-hover, #4d4d4d)}.mc-checkbox__input:focus-visible,.checkbox__input: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-checkbox__input:checked:after,.checkbox__input:checked:after{opacity:1;transform:scale(1);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:indeterminate:after,.checkbox__input:indeterminate:after{opacity:1;transform:scale(1);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate{background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate,.mc-checkbox__input:disabled,.checkbox__input:disabled{border-color:transparent}.mc-checkbox__input:disabled,.checkbox__input:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed}.mc-checkbox__input:disabled:checked:after,.checkbox__input:disabled:checked:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled:indeterminate:after,.checkbox__input:disabled:indeterminate:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled+.mc-checkbox__label,.checkbox__input:disabled+.mc-checkbox__label,.mc-checkbox__input:disabled+.checkbox__label,.checkbox__input:disabled+.checkbox__label{color:var(--forms-color-text-disabled, #737373);cursor:not-allowed}.mc-checkbox__input:not(:disabled):checked:hover,.checkbox__input:not(:disabled):checked:hover,.mc-checkbox__input:not(:disabled):indeterminate:hover,.checkbox__input:not(:disabled):indeterminate:hover{background-color:var(--forms-color-background-checked-hover, #006902)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate),.is-invalid.checkbox__input:not(:checked,:indeterminate){border-color:var(--forms-color-border-invalid, #ea302d)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate):hover,.is-invalid.checkbox__input:not(:checked,:indeterminate):hover{border-color:var(--forms-color-border-invalid-hover, #c61112)}.mc-radio,.radio{align-items:center;display:flex;gap:.5rem;padding:.375rem}.mc-radio__label,.radio__label{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer}.mc-radio__input,.radio__input{appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, .125rem) solid var(--forms-color-border-default, #666666);border-radius:100%;transition:all ease .2s;height:1.25rem;width:1.25rem;position:relative}.mc-radio__input:before,.radio__input:before{border-radius:var(--border-radius-full, 100%);content:\"\";display:block;height:.5rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:.5rem}.mc-radio__input:hover,.radio__input:hover{border-color:var(--forms-color-border-hover, #4d4d4d)}.mc-radio__input:focus-visible,.radio__input: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-radio__input:checked,.radio__input:checked{background-color:var(--forms-color-background-checked, #117f03)}.mc-radio__input:checked:before,.radio__input:checked:before{background-color:var(--forms-color-background-default, #ffffff)}.mc-radio__input:checked,.radio__input:checked,.mc-radio__input:disabled,.radio__input:disabled{border-color:transparent}.mc-radio__input:disabled,.radio__input:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed}.mc-radio__input:disabled:checked:before,.radio__input:disabled:checked:before{background-color:var(--forms-color-icon-disabled, #737373)}.mc-radio__input:disabled+.mc-radio__label,.radio__input:disabled+.mc-radio__label,.mc-radio__input:disabled+.radio__label,.radio__input:disabled+.radio__label{color:var(--forms-color-text-disabled, #737373);cursor:not-allowed}.mc-radio__input:not(:disabled):checked:hover,.radio__input:not(:disabled):checked:hover{background-color:var(--forms-color-background-checked-hover, #006902)}.mc-radio__input.is-invalid:not(:checked),.is-invalid.radio__input:not(:checked){border-color:var(--forms-color-border-invalid, #ea302d)}.mc-radio__input.is-invalid:not(:checked):hover,.is-invalid.radio__input:not(:checked):hover{border-color:var(--forms-color-border-invalid-hover, #c61112)}.mc-tile__content:empty{display:none}\n"] }]
|
|
4691
|
+
], template: "<label [class]=\"classes()\" [class.mc-tile--disabled]=\"disabled()\">\n <div class=\"mc-tile__header\">\n <div class=\"mc-tile__body\">\n <ng-content select=\"[body]\"></ng-content>\n </div>\n <div class=\"mc-tile__action\">\n @if (isCheckbox()) {\n <input\n type=\"checkbox\"\n class=\"mc-checkbox__input\"\n [name]=\"name()\"\n [value]=\"value()\"\n [checked]=\"isChecked()\"\n [disabled]=\"disabled()\"\n (change)=\"onTileChange($event)\"\n />\n } @else if (isRadio()) {\n <input\n type=\"radio\"\n class=\"mc-radio__input\"\n [name]=\"name()\"\n [value]=\"value()\"\n [checked]=\"isChecked()\"\n [disabled]=\"disabled()\"\n (change)=\"onTileChange($event)\"\n />\n }\n </div>\n </div>\n <div class=\"mc-tile__content\">\n <ng-content select=\"[segmented]\"></ng-content>\n </div>\n</label>\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}.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-color:var(--color-text-primary-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain}.mc-tile--inverse.mc-tile--open .mc-tile__action:after{background-color:var(--color-text-primary-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain}.mc-tile--inverse.mc-tile--external-link .mc-tile__action:after{background-color:var(--color-text-primary-inverse, #ffffff);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain}.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-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain}.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-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain}.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-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' 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\") no-repeat center/contain}.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).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-color:var(--button-color-filled-inverse-font, #242938);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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\") no-repeat center/contain;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.mc-tile--selected{box-shadow:0 0 0 2px var(--color-brand, #78be20),0 0 0 4px var(--color-background-accent, #ebf5de)}.mc-tile--selectable.mc-tile--no-input .mc-tile__action{visibility:hidden;position:absolute}.mc-checkbox,.checkbox{align-items:center;display:flex;gap:.5rem;padding:.375rem}.mc-checkbox--indented,.checkbox--indented{margin-left:1.75rem}.mc-checkbox__label,.checkbox__label{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer}.mc-checkbox__input,.checkbox__input{appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, .125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;height:1.25rem;width:1.25rem;position:relative}.mc-checkbox__input:after,.checkbox__input:after{content:\"\";position:absolute;inset:0;background-color:var(--forms-color-icon-inverse, #ffffff);opacity:0;transform:scale(.6);transition:opacity .15s ease,transform .15s ease;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:hover,.checkbox__input:hover{border-color:var(--forms-color-border-hover, #4d4d4d)}.mc-checkbox__input:focus-visible,.checkbox__input: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-checkbox__input:checked:after,.checkbox__input:checked:after{opacity:1;transform:scale(1)}.mc-checkbox__input:indeterminate:after,.checkbox__input:indeterminate:after{opacity:1;transform:scale(1);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate{background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate,.mc-checkbox__input:disabled,.checkbox__input:disabled{border-color:transparent}.mc-checkbox__input:disabled,.checkbox__input:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed}.mc-checkbox__input:disabled:checked:after,.checkbox__input:disabled:checked:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled:indeterminate:after,.checkbox__input:disabled:indeterminate:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled+.mc-checkbox__label,.checkbox__input:disabled+.mc-checkbox__label,.mc-checkbox__input:disabled+.checkbox__label,.checkbox__input:disabled+.checkbox__label{color:var(--forms-color-text-disabled, #737373);cursor:not-allowed}.mc-checkbox__input:not(:disabled):checked:hover,.checkbox__input:not(:disabled):checked:hover,.mc-checkbox__input:not(:disabled):indeterminate:hover,.checkbox__input:not(:disabled):indeterminate:hover{background-color:var(--forms-color-background-checked-hover, #006902)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate),.is-invalid.checkbox__input:not(:checked,:indeterminate){border-color:var(--forms-color-border-invalid, #ea302d)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate):hover,.is-invalid.checkbox__input:not(:checked,:indeterminate):hover{border-color:var(--forms-color-border-invalid-hover, #c61112)}.mc-radio,.radio{align-items:center;display:flex;gap:.5rem;padding:.375rem}.mc-radio__label,.radio__label{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer}.mc-radio__input,.radio__input{appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, .125rem) solid var(--forms-color-border-default, #666666);border-radius:100%;transition:all ease .2s;height:1.25rem;width:1.25rem;position:relative}.mc-radio__input:before,.radio__input:before{border-radius:var(--border-radius-full, 100%);content:\"\";display:block;height:.5rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:.5rem}.mc-radio__input:hover,.radio__input:hover{border-color:var(--forms-color-border-hover, #4d4d4d)}.mc-radio__input:focus-visible,.radio__input: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-radio__input:checked,.radio__input:checked{background-color:var(--forms-color-background-checked, #117f03)}.mc-radio__input:checked:before,.radio__input:checked:before{background-color:var(--forms-color-background-default, #ffffff)}.mc-radio__input:checked,.radio__input:checked,.mc-radio__input:disabled,.radio__input:disabled{border-color:transparent}.mc-radio__input:disabled,.radio__input:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed}.mc-radio__input:disabled:checked:before,.radio__input:disabled:checked:before{background-color:var(--forms-color-icon-disabled, #737373)}.mc-radio__input:disabled+.mc-radio__label,.radio__input:disabled+.mc-radio__label,.mc-radio__input:disabled+.radio__label,.radio__input:disabled+.radio__label{color:var(--forms-color-text-disabled, #737373);cursor:not-allowed}.mc-radio__input:not(:disabled):checked:hover,.radio__input:not(:disabled):checked:hover{background-color:var(--forms-color-background-checked-hover, #006902)}.mc-radio__input.is-invalid:not(:checked),.is-invalid.radio__input:not(:checked){border-color:var(--forms-color-border-invalid, #ea302d)}.mc-radio__input.is-invalid:not(:checked):hover,.is-invalid.radio__input:not(:checked):hover{border-color:var(--forms-color-border-invalid-hover, #c61112)}.mc-tile__content:empty{display:none}\n"] }]
|
|
4692
4692
|
}], ctorParameters: () => [], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputVerticalPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputVerticalPosition", required: false }] }], inputPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputPosition", required: false }] }], inputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputType", required: false }] }] } });
|
|
4693
4693
|
|
|
4694
4694
|
class MozTileExpandableComponent {
|
|
@@ -4819,11 +4819,11 @@ class DrawerContainerComponent {
|
|
|
4819
4819
|
}
|
|
4820
4820
|
}
|
|
4821
4821
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4822
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: DrawerContainerComponent, isStandalone: true, selector: "moz-drawer-container", host: { listeners: { "keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n class=\"mc-drawer\"\n [class.is-open]=\"drawerRef.isOpen()\"\n [class.mc-drawer--extend]=\"drawerRef.extended()\"\n [class.mc-drawer--left]=\"drawerRef.position() === 'left'\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!drawerRef.isOpen()\"\n>\n <div class=\"mc-drawer__dialog\" [class]=\"drawerRef.panelClass()\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (drawerRef.back()) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (activated)=\"onBackClick()\"\n [id]=\"'drawer-back-button'\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ drawerRef.title() }}</h2>\n\n <moz-icon-button\n class=\"mc-drawer__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (activated)=\"drawerRef.close()\"\n [id]=\"'drawer-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n </div>\n\n <div class=\"mc-drawer__body\">\n <div class=\"mc-drawer__content\" tabindex=\"0\">\n @if (drawerRef.contentTitle()) {\n <h2 class=\"mc-drawer__content__title\">\n {{ drawerRef.contentTitle() }}\n </h2>\n }\n\n <ng-template cdkPortalOutlet />\n </div>\n </div>\n\n @if (footerTpl) {\n <div class=\"mc-drawer__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl\" />\n </div>\n }\n </div>\n\n @if (drawerRef.isOpen()) {\n <div class=\"mc-overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\"></div>\n }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:.5rem;justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:1rem}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 5);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:4rem}.mc-drawer__icon{height:1.5rem;margin-right:.75rem;width:1.5rem}.mc-drawer__title{font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--drawer-color-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1}.mc-drawer__title:first-child{padding-left:4rem}.mc-drawer__back,.mc-drawer__close{margin:.5rem}.mc-drawer__body{flex:1 1;overflow:scroll}.mc-drawer__body:last-child{margin-bottom:1.5rem;padding-bottom:1.5rem}.mc-drawer__content{height:100%;overflow:hidden auto;padding:.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:.5rem 1.5rem 0}}.mc-drawer__content__title{font-size:var(--font-title-m, 1.5rem);margin:0 0 .5rem}.mc-drawer__footer{display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["hostClass"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["hostClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4822
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: DrawerContainerComponent, isStandalone: true, selector: "moz-drawer-container", host: { listeners: { "keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n class=\"mc-drawer\"\n [class.is-open]=\"drawerRef.isOpen()\"\n [class.mc-drawer--extend]=\"drawerRef.extended()\"\n [class.mc-drawer--left]=\"drawerRef.position() === 'left'\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!drawerRef.isOpen()\"\n>\n <div class=\"mc-drawer__dialog\" [class]=\"drawerRef.panelClass()\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (drawerRef.back()) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (activated)=\"onBackClick()\"\n [id]=\"'drawer-back-button'\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ drawerRef.title() }}</h2>\n\n <moz-icon-button\n class=\"mc-drawer__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (activated)=\"drawerRef.close()\"\n [id]=\"'drawer-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n </div>\n\n <div class=\"mc-drawer__body\">\n <div class=\"mc-drawer__content\" tabindex=\"0\">\n @if (drawerRef.contentTitle()) {\n <h2 class=\"mc-drawer__content__title\">\n {{ drawerRef.contentTitle() }}\n </h2>\n }\n\n <ng-template cdkPortalOutlet />\n </div>\n </div>\n\n @if (footerTpl) {\n <div class=\"mc-drawer__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl\" />\n </div>\n }\n </div>\n\n @if (drawerRef.isOpen()) {\n <div class=\"mc-overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\"></div>\n }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:.5rem;justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:1rem}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 5);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:4rem}.mc-drawer__icon{height:1.5rem;margin-right:.75rem;width:1.5rem}.mc-drawer__title{font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--drawer-color-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;outline:none}.mc-drawer__title:first-child{padding-left:4rem}.mc-drawer__back,.mc-drawer__close{margin:.5rem}.mc-drawer__body{flex:1 1;overflow:scroll}.mc-drawer__body:last-child{margin-bottom:1.5rem;padding-bottom:1.5rem}.mc-drawer__content{height:100%;overflow:hidden auto;padding:.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:.5rem 1.5rem 0}}.mc-drawer__content__title{font-size:var(--font-title-m, 1.5rem);margin:0 0 .5rem}.mc-drawer__footer{display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["hostClass"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["hostClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4823
4823
|
}
|
|
4824
4824
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DrawerContainerComponent, decorators: [{
|
|
4825
4825
|
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:.5rem;justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:1rem}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 5);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:4rem}.mc-drawer__icon{height:1.5rem;margin-right:.75rem;width:1.5rem}.mc-drawer__title{font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--drawer-color-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1}.mc-drawer__title:first-child{padding-left:4rem}.mc-drawer__back,.mc-drawer__close{margin:.5rem}.mc-drawer__body{flex:1 1;overflow:scroll}.mc-drawer__body:last-child{margin-bottom:1.5rem;padding-bottom:1.5rem}.mc-drawer__content{height:100%;overflow:hidden auto;padding:.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:.5rem 1.5rem 0}}.mc-drawer__content__title{font-size:var(--font-title-m, 1.5rem);margin:0 0 .5rem}.mc-drawer__footer{display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}\n"] }]
|
|
4826
|
+
args: [{ selector: 'moz-drawer-container', imports: [MozIconButtonComponent, ArrowBack24, Cross24, NgTemplateOutlet, CdkPortalOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n class=\"mc-drawer\"\n [class.is-open]=\"drawerRef.isOpen()\"\n [class.mc-drawer--extend]=\"drawerRef.extended()\"\n [class.mc-drawer--left]=\"drawerRef.position() === 'left'\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!drawerRef.isOpen()\"\n>\n <div class=\"mc-drawer__dialog\" [class]=\"drawerRef.panelClass()\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (drawerRef.back()) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (activated)=\"onBackClick()\"\n [id]=\"'drawer-back-button'\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ drawerRef.title() }}</h2>\n\n <moz-icon-button\n class=\"mc-drawer__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (activated)=\"drawerRef.close()\"\n [id]=\"'drawer-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n </div>\n\n <div class=\"mc-drawer__body\">\n <div class=\"mc-drawer__content\" tabindex=\"0\">\n @if (drawerRef.contentTitle()) {\n <h2 class=\"mc-drawer__content__title\">\n {{ drawerRef.contentTitle() }}\n </h2>\n }\n\n <ng-template cdkPortalOutlet />\n </div>\n </div>\n\n @if (footerTpl) {\n <div class=\"mc-drawer__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl\" />\n </div>\n }\n </div>\n\n @if (drawerRef.isOpen()) {\n <div class=\"mc-overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\"></div>\n }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:.5rem;justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:1rem}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 5);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:4rem}.mc-drawer__icon{height:1.5rem;margin-right:.75rem;width:1.5rem}.mc-drawer__title{font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--drawer-color-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;outline:none}.mc-drawer__title:first-child{padding-left:4rem}.mc-drawer__back,.mc-drawer__close{margin:.5rem}.mc-drawer__body{flex:1 1;overflow:scroll}.mc-drawer__body:last-child{margin-bottom:1.5rem;padding-bottom:1.5rem}.mc-drawer__content{height:100%;overflow:hidden auto;padding:.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:.5rem 1.5rem 0}}.mc-drawer__content__title{font-size:var(--font-title-m, 1.5rem);margin:0 0 .5rem}.mc-drawer__footer{display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}\n"] }]
|
|
4827
4827
|
}], propDecorators: { portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }], onEscape: [{
|
|
4828
4828
|
type: HostListener,
|
|
4829
4829
|
args: ['keydown.escape']
|
|
@@ -4979,11 +4979,11 @@ class MozDrawerComponent {
|
|
|
4979
4979
|
this.close();
|
|
4980
4980
|
}
|
|
4981
4981
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4982
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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:.5rem;justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:1rem}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 5);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:4rem}.mc-drawer__icon{height:1.5rem;margin-right:.75rem;width:1.5rem}.mc-drawer__title{font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--drawer-color-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1}.mc-drawer__title:first-child{padding-left:4rem}.mc-drawer__back,.mc-drawer__close{margin:.5rem}.mc-drawer__body{flex:1 1;overflow:scroll}.mc-drawer__body:last-child{margin-bottom:1.5rem;padding-bottom:1.5rem}.mc-drawer__content{height:100%;overflow:hidden auto;padding:.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:.5rem 1.5rem 0}}.mc-drawer__content__title{font-size:var(--font-title-m, 1.5rem);margin:0 0 .5rem}.mc-drawer__footer{display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["hostClass"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["hostClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4982
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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:.5rem;justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:1rem}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 5);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:4rem}.mc-drawer__icon{height:1.5rem;margin-right:.75rem;width:1.5rem}.mc-drawer__title{font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--drawer-color-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;outline:none}.mc-drawer__title:first-child{padding-left:4rem}.mc-drawer__back,.mc-drawer__close{margin:.5rem}.mc-drawer__body{flex:1 1;overflow:scroll}.mc-drawer__body:last-child{margin-bottom:1.5rem;padding-bottom:1.5rem}.mc-drawer__content{height:100%;overflow:hidden auto;padding:.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:.5rem 1.5rem 0}}.mc-drawer__content__title{font-size:var(--font-title-m, 1.5rem);margin:0 0 .5rem}.mc-drawer__footer{display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["hostClass"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["hostClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4983
4983
|
}
|
|
4984
4984
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozDrawerComponent, decorators: [{
|
|
4985
4985
|
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:.5rem;justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:1rem}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 5);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:4rem}.mc-drawer__icon{height:1.5rem;margin-right:.75rem;width:1.5rem}.mc-drawer__title{font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--drawer-color-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1}.mc-drawer__title:first-child{padding-left:4rem}.mc-drawer__back,.mc-drawer__close{margin:.5rem}.mc-drawer__body{flex:1 1;overflow:scroll}.mc-drawer__body:last-child{margin-bottom:1.5rem;padding-bottom:1.5rem}.mc-drawer__content{height:100%;overflow:hidden auto;padding:.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:.5rem 1.5rem 0}}.mc-drawer__content__title{font-size:var(--font-title-m, 1.5rem);margin:0 0 .5rem}.mc-drawer__footer{display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}\n"] }]
|
|
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:.5rem;justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:1rem}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 5);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:4rem}.mc-drawer__icon{height:1.5rem;margin-right:.75rem;width:1.5rem}.mc-drawer__title{font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--drawer-color-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;outline:none}.mc-drawer__title:first-child{padding-left:4rem}.mc-drawer__back,.mc-drawer__close{margin:.5rem}.mc-drawer__body{flex:1 1;overflow:scroll}.mc-drawer__body:last-child{margin-bottom:1.5rem;padding-bottom:1.5rem}.mc-drawer__content{height:100%;overflow:hidden auto;padding:.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:.5rem 1.5rem 0}}.mc-drawer__content__title{font-size:var(--font-title-m, 1.5rem);margin:0 0 .5rem}.mc-drawer__footer{display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}\n"] }]
|
|
4987
4987
|
}], 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
4988
|
type: HostListener,
|
|
4989
4989
|
args: ['keydown.escape']
|
|
@@ -6355,7 +6355,7 @@ class MozComboboxComponent {
|
|
|
6355
6355
|
useExisting: forwardRef(() => MozComboboxComponent),
|
|
6356
6356
|
multi: true,
|
|
6357
6357
|
},
|
|
6358
|
-
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }, { propertyName: "viewportEl", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- ====================================================================== -->\n<!-- TRIGGER -->\n<!-- ====================================================================== -->\n<div [class]=\"wrapperClasses()\">\n <div class=\"mc-combobox__input\">\n <button\n #triggerBtn\n [id]=\"comboboxId + '-trigger'\"\n type=\"button\"\n class=\"mc-combobox__control\"\n role=\"combobox\"\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n \"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n >\n @if (displayValue()) {\n <span class=\"mc-combobox__value\">{{ displayValue() }}</span>\n } @else {\n <span class=\"mc-combobox__placeholder\">{{ placeholder() }}</span>\n }\n </button>\n\n <!-- Counter (compact + multiple) -->\n @if (multiple() && compact() && selectedCount() > 0) {\n <span [id]=\"comboboxId + '-counter'\" class=\"mc-combobox__counter\" aria-live=\"polite\">\n {{ selectedCount() }} {{ selectedSuffix() }}\n </span>\n }\n\n <!-- Clear button -->\n @if (showClear()) {\n <button\n [id]=\"comboboxId + '-clear'\"\n type=\"button\"\n class=\"mc-combobox__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n (click)=\"onClear($event)\"\n >\n <CrossCircleFilled24 />\n </button>\n }\n\n <!-- Trigger loader -->\n @if (loading()) {\n <moz-loader\n [id]=\"comboboxId + '-trigger-loader'\"\n size=\"s\"\n [appearance]=\"'accent'\"\n class=\"mc-combobox__loader\"\n />\n }\n\n <!-- Chevron -->\n <button\n [id]=\"comboboxId + '-chevron'\"\n type=\"button\"\n class=\"mc-combobox__icon\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (click)=\"toggle()\"\n >\n <ChevronDown24 />\n </button>\n </div>\n</div>\n\n<!-- ====================================================================== -->\n<!-- OVERLAY / DROPDOWN -->\n<!-- ====================================================================== -->\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayWidth]=\"triggerWidth()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"mc-combobox-backdrop\"\n (backdropClick)=\"onOverlayOutsideClick()\"\n (attach)=\"onOverlayAttached()\"\n>\n <div\n [id]=\"comboboxId + '-panel'\"\n class=\"mc-option-listbox mc-listbox__content mc-combobox__listbox\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n <!-- Search -->\n @if (searchable()) {\n <div [id]=\"comboboxId + '-search'\" class=\"mc-option-listbox__search\">\n <Search24 icon />\n <input\n #searchInput\n [id]=\"comboboxId + '-search-input'\"\n moz-text-input\n type=\"text\"\n [placeholder]=\"searchPlaceholder()\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"listboxId\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n [size]=\"'s'\"\n />\n </div>\n <hr class=\"mc-option-listbox__separator\" />\n }\n\n <!-- Actions (multiple only) -->\n @if (showActions() && multiple()) {\n <div [id]=\"comboboxId + '-actions'\" class=\"mc-option-listbox__actions\">\n <button\n [id]=\"comboboxId + '-select-all'\"\n moz-button\n type=\"button\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n [appearance]=\"'accent'\"\n (click)=\"selectAll()\"\n >\n {{ selectAllText() }}\n </button>\n <button\n [id]=\"comboboxId + '-clear-selection'\"\n moz-button\n type=\"button\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n (click)=\"clearSelection()\"\n >\n {{ clearText() }}\n </button>\n </div>\n <hr class=\"mc-option-listbox__separator\" />\n }\n\n <!-- Listbox with virtual scroll -->\n <div\n #listbox\n role=\"listbox\"\n [id]=\"listboxId\"\n class=\"mc-option-listbox__list mc-combobox__virtual-host\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n [attr.aria-label]=\"ariaLabel() ?? 'Options'\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n \"\n tabindex=\"-1\"\n >\n @if (loading()) {\n <div [id]=\"comboboxId + '-loading'\" class=\"mc-combobox__loading\" role=\"status\">\n <moz-loader size=\"s\" [appearance]=\"'accent'\" [text]=\"loadingText()\" />\n </div>\n } @else if (filteredItems().length === 0 && showNoResultText() && searchQuery().length > 0) {\n <div\n [id]=\"comboboxId + '-empty'\"\n class=\"mc-option-listbox__empty\"\n role=\"presentation\"\n aria-live=\"polite\"\n >\n {{ noResultsText() }}\n </div>\n } @else {\n <cdk-virtual-scroll-viewport\n #viewport\n [id]=\"comboboxId + '-viewport'\"\n [itemSize]=\"itemSizePx\"\n [minBufferPx]=\"minBufferPx\"\n [maxBufferPx]=\"maxBufferPx\"\n [style.height.px]=\"viewportHeight()\"\n class=\"mc-combobox__viewport\"\n (scroll)=\"onViewportScroll(viewport)\"\n >\n <ng-container\n *cdkVirtualFor=\"let item of filteredItems(); let i = index; trackBy: trackByFlatItem\"\n >\n <!-- Section header -->\n @if (isFlatSection(item)) {\n <div\n [id]=\"comboboxId + '-section-' + i\"\n class=\"mc-option-listbox__item mc-option-listbox__item--section\"\n [class.mc-option-listbox__item--selectable]=\"\n item.checkable && multiple() && !item.disabled\n \"\n [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n [class.mc-option-listbox__item--selected]=\"\n item.checkable &&\n multiple() &&\n (isSectionFullySelected(item.title) || isSectionPartiallySelected(item.title))\n \"\n role=\"presentation\"\n (click)=\"\n item.checkable && multiple() && !item.disabled ? toggleSection(item.title) : null\n \"\n >\n <div class=\"mc-option-listbox__label\">\n <div class=\"mc-option-listbox__content\">\n <span class=\"mc-option-listbox__section-title\">{{ item.title }}</span>\n </div>\n <div class=\"mc-option-listbox__spacer\"></div>\n @if (item.checkable && multiple()) {\n <moz-checkbox\n class=\"mc-option-listbox__checkbox\"\n [id]=\"comboboxId + '-section-cb-' + i\"\n [ngModel]=\"isSectionFullySelected(item.title)\"\n [indeterminate]=\"isSectionPartiallySelected(item.title)\"\n [disabled]=\"!!item.disabled\"\n />\n }\n </div>\n </div>\n }\n\n <!-- Option -->\n @if (isFlatOption(item)) {\n <div\n role=\"option\"\n [id]=\"comboboxId + '-opt-' + i\"\n [attr.aria-selected]=\"isOptionSelected($any(item.value))\"\n [attr.aria-disabled]=\"item.disabled || null\"\n class=\"mc-option-listbox__item\"\n [class.mc-option-listbox__item--selectable]=\"!item.disabled\"\n [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n [class.mc-option-listbox__item--selected]=\"isOptionSelected($any(item.value))\"\n [class.mc-option-listbox__item--active]=\"focusedIndex() === i\"\n (click)=\"!item.disabled && selectOption($any(item.value))\"\n (mouseenter)=\"focusedIndex.set(i)\"\n >\n <div class=\"mc-option-listbox__label\">\n @if (item.icon) {\n <div class=\"mc-option-listbox__prepend\">\n <span class=\"mc-option-listbox__icon\">{{ item.icon }}</span>\n </div>\n }\n <div class=\"mc-option-listbox__content\">\n <span class=\"mc-option-listbox__text\">{{ item.label }}</span>\n @if (item.content) {\n <span class=\"mc-option-listbox__additional\">{{ item.content }}</span>\n }\n </div>\n <div class=\"mc-option-listbox__spacer\"></div>\n\n <!-- Selection indicator -->\n @if (multiple()) {\n <moz-checkbox\n class=\"mc-option-listbox__checkbox\"\n [id]=\"comboboxId + '-cb-' + i\"\n [ngModel]=\"isOptionSelected($any(item.value))\"\n [disabled]=\"!!item.disabled\"\n />\n } @else {\n <CheckCircle24 class=\"mc-option-listbox__selection-icon\" />\n }\n </div>\n </div>\n }\n </ng-container>\n </cdk-virtual-scroll-viewport>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".mc-combobox{position:relative;width:100%}.mc-combobox__input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-combobox__input:focus-within{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-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-combobox__input:has(.mc-combobox__control:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox__input .mc-combobox__control{text-align:left;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);background-color:transparent;border:none;padding-left:.75rem;padding-right:0;flex-grow:1;height:3rem;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-combobox__input .mc-combobox__control:focus-within{outline:none}.mc-combobox__icon{border:none;display:flex;align-items:center;cursor:pointer;padding-right:.75rem;background:none;color:var(--forms-color-icon-interactive, #000000);fill:currentcolor}.mc-combobox__clear{padding:0;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--forms-color-icon-clear, #666666);fill:currentcolor}.mc-combobox__counter{height:1.5rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0 .5rem;border-radius:var(--border-radius-l, 1rem);background-color:var(--forms-color-selection-counter-background, #464e63);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-selection-counter-text, #ffffff)}.mc-combobox__listbox{width:100%;position:absolute;left:0;top:calc(100% + .25rem);visibility:hidden;opacity:0;z-index:var(--combobox-listbox-z-index, 10)}.mc-combobox--open .mc-combobox__listbox{visibility:visible;opacity:1}.mc-combobox--s .mc-combobox__control{height:2rem;font-size:var(--font-size-100, .875rem);padding-left:.5rem}.mc-combobox--s .mc-combobox__icon{padding-right:.5rem}.mc-combobox--s .mc-combobox__clear{width:1.25rem;height:1.25rem}.mc-combobox--invalid .mc-combobox__input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-combobox--invalid .mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-combobox--disabled .mc-combobox__input{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox--disabled .mc-combobox__control{color:var(--forms-color-text-disabled, #737373)}.mc-combobox--disabled .mc-combobox__icon{color:var(--forms-color-icon-disabled, #737373)}.mc-combobox--readonly .mc-combobox__input{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-option-listbox{width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%));border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem)}@media(width>=680px){.mc-option-listbox{min-width:18.75rem}}.mc-option-listbox__list{overflow:auto;display:flex;flex-direction:column;gap:.125rem;margin:0;padding:.5rem;max-height:18.75rem}.mc-option-listbox__item{display:block;border-radius:var(--border-radius-s, .25rem)}.mc-option-listbox__item--disabled{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__label{pointer-events:none;color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__additional{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-disabled, #d9d9d9)}.mc-option-listbox__item--readonly .mc-option-listbox__label{pointer-events:none}.mc-option-listbox__item--selected:not(.mc-option-listbox__item--section){background-color:var(--option-listbox-color-background-checked, #ebf5de)}.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{opacity:1;color:var(--option-listbox-color-selection-indicator-default, #117f03);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-checked, #117f03);color:var(--forms-color-icon-inverse, #ffffff);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox svg{display:block}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected{background-color:var(--option-listbox-color-background-checked-read-only, #eff1f6)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:2px solid var(--forms-color-border-read-only, #cccccc);background-color:var(--forms-color-background-default, #ffffff);color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--selectable{cursor:pointer}.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled):hover,.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled).mc-option-listbox__item--active{background-color:var(--option-listbox-color-background-hover, rgba(0, 0, 0, .05))}.mc-option-listbox__content{display:flex;flex-direction:column;gap:.125rem}.mc-option-listbox__additional{font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);color:var(--option-listbox-color-text-information, #666666)}.mc-option-listbox__label{display:flex;align-items:center;gap:.5rem;height:3rem;padding:.5rem;border-radius:var(--border-radius-s, .25rem);line-height:var(--line-height-s, 1.3);box-sizing:border-box}.mc-option-listbox__checkbox{flex-shrink:0;display:flex;align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border:.125rem solid var(--forms-color-border-default, #666666);border-radius:.25rem;box-sizing:border-box}.mc-option-listbox__checkbox svg{display:none}.mc-option-listbox__spacer{flex-grow:1}.mc-option-listbox__selection-icon{opacity:0}.mc-option-listbox__section-title{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;color:var(--option-listbox-color-text-section-title, #666666)}.mc-option-listbox__search{margin:.5rem;width:unset}.mc-option-listbox__separator{display:block;height:1px;border:0;border-top:1px solid var(--color-border-primary, #cccccc);margin:0;padding:0}.mc-option-listbox__actions{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem}.mc-combobox__virtual-host{overflow:hidden;max-height:none;padding:0}.mc-combobox__viewport,.mc-combobox__viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mc-combobox__loader{display:flex;align-items:center;padding-inline:4px}.mc-combobox__loading,.mc-option-listbox__empty{display:flex;align-items:center;justify-content:center;padding:24px 16px}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: MozLoaderComponent, selector: "moz-loader", inputs: ["appearance", "size", "text"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "component", type: CrossCircleFilled24, selector: "CrossCircleFilled24", inputs: ["hostClass"] }, { kind: "component", type: ChevronDown24, selector: "ChevronDown24", inputs: ["hostClass"] }, { kind: "component", type: Search24, selector: "Search24", inputs: ["hostClass"] }, { kind: "component", type: MozTextInput, selector: "input[moz-text-input]", inputs: ["isInvalid", "disabled", "readonly", "size", "clearable", "clearLabel", "prefix", "suffix"] }, { kind: "component", type: MozCheckboxComponent, selector: "moz-checkbox", inputs: ["id", "name", "label", "indeterminate", "isInvalid", "disabled", "indented"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CheckCircle24, selector: "CheckCircle24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6358
|
+
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }, { propertyName: "viewportEl", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- ====================================================================== -->\n<!-- TRIGGER -->\n<!-- ====================================================================== -->\n<div [class]=\"wrapperClasses()\">\n <div class=\"mc-combobox__input\">\n <button\n #triggerBtn\n [id]=\"comboboxId + '-trigger'\"\n type=\"button\"\n class=\"mc-combobox__control\"\n role=\"combobox\"\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n \"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n >\n @if (displayValue()) {\n <span class=\"mc-combobox__value\">{{ displayValue() }}</span>\n } @else {\n <span class=\"mc-combobox__placeholder\">{{ placeholder() }}</span>\n }\n </button>\n\n <!-- Counter (compact + multiple) -->\n @if (multiple() && compact() && selectedCount() > 0) {\n <span [id]=\"comboboxId + '-counter'\" class=\"mc-combobox__counter\" aria-live=\"polite\">\n {{ selectedCount() }} {{ selectedSuffix() }}\n </span>\n }\n\n <!-- Clear button -->\n @if (showClear()) {\n <button\n [id]=\"comboboxId + '-clear'\"\n type=\"button\"\n class=\"mc-combobox__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n (click)=\"onClear($event)\"\n >\n <CrossCircleFilled24 />\n </button>\n }\n\n <!-- Trigger loader -->\n @if (loading()) {\n <moz-loader\n [id]=\"comboboxId + '-trigger-loader'\"\n size=\"s\"\n [appearance]=\"'accent'\"\n class=\"mc-combobox__loader\"\n />\n }\n\n <!-- Chevron -->\n <button\n [id]=\"comboboxId + '-chevron'\"\n type=\"button\"\n class=\"mc-combobox__icon\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (click)=\"toggle()\"\n >\n <ChevronDown24 />\n </button>\n </div>\n</div>\n\n<!-- ====================================================================== -->\n<!-- OVERLAY / DROPDOWN -->\n<!-- ====================================================================== -->\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayWidth]=\"triggerWidth()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"mc-combobox-backdrop\"\n (backdropClick)=\"onOverlayOutsideClick()\"\n (attach)=\"onOverlayAttached()\"\n>\n <div\n [id]=\"comboboxId + '-panel'\"\n class=\"mc-option-listbox mc-listbox__content mc-combobox__listbox\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n <!-- Search -->\n @if (searchable()) {\n <div [id]=\"comboboxId + '-search'\" class=\"mc-option-listbox__search\">\n <Search24 icon />\n <input\n #searchInput\n [id]=\"comboboxId + '-search-input'\"\n moz-text-input\n type=\"text\"\n [placeholder]=\"searchPlaceholder()\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"listboxId\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n [size]=\"'s'\"\n />\n </div>\n <hr class=\"mc-option-listbox__separator\" />\n }\n\n <!-- Actions (multiple only) -->\n @if (showActions() && multiple()) {\n <div [id]=\"comboboxId + '-actions'\" class=\"mc-option-listbox__actions\">\n <button\n [id]=\"comboboxId + '-select-all'\"\n moz-button\n type=\"button\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n [appearance]=\"'accent'\"\n (click)=\"selectAll()\"\n >\n {{ selectAllText() }}\n </button>\n <button\n [id]=\"comboboxId + '-clear-selection'\"\n moz-button\n type=\"button\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n (click)=\"clearSelection()\"\n >\n {{ clearText() }}\n </button>\n </div>\n <hr class=\"mc-option-listbox__separator\" />\n }\n\n <!-- Listbox with virtual scroll -->\n <div\n #listbox\n role=\"listbox\"\n [id]=\"listboxId\"\n class=\"mc-option-listbox__list mc-combobox__virtual-host\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n [attr.aria-label]=\"ariaLabel() ?? 'Options'\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n \"\n tabindex=\"-1\"\n >\n @if (loading()) {\n <div [id]=\"comboboxId + '-loading'\" class=\"mc-combobox__loading\" role=\"status\">\n <moz-loader size=\"s\" [appearance]=\"'accent'\" [text]=\"loadingText()\" />\n </div>\n } @else if (filteredItems().length === 0 && showNoResultText() && searchQuery().length > 0) {\n <div\n [id]=\"comboboxId + '-empty'\"\n class=\"mc-option-listbox__empty\"\n role=\"presentation\"\n aria-live=\"polite\"\n >\n {{ noResultsText() }}\n </div>\n } @else {\n <cdk-virtual-scroll-viewport\n #viewport\n [id]=\"comboboxId + '-viewport'\"\n [itemSize]=\"itemSizePx\"\n [minBufferPx]=\"minBufferPx\"\n [maxBufferPx]=\"maxBufferPx\"\n [style.height.px]=\"viewportHeight()\"\n class=\"mc-combobox__viewport\"\n (scroll)=\"onViewportScroll(viewport)\"\n >\n <ng-container\n *cdkVirtualFor=\"let item of filteredItems(); let i = index; trackBy: trackByFlatItem\"\n >\n <!-- Section header -->\n @if (isFlatSection(item)) {\n <div\n [id]=\"comboboxId + '-section-' + i\"\n class=\"mc-option-listbox__item mc-option-listbox__item--section\"\n [class.mc-option-listbox__item--selectable]=\"\n item.checkable && multiple() && !item.disabled\n \"\n [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n [class.mc-option-listbox__item--selected]=\"\n item.checkable &&\n multiple() &&\n (isSectionFullySelected(item.title) || isSectionPartiallySelected(item.title))\n \"\n role=\"presentation\"\n (click)=\"\n item.checkable && multiple() && !item.disabled ? toggleSection(item.title) : null\n \"\n >\n <div class=\"mc-option-listbox__label\">\n <div class=\"mc-option-listbox__content\">\n <span class=\"mc-option-listbox__section-title\">{{ item.title }}</span>\n </div>\n <div class=\"mc-option-listbox__spacer\"></div>\n @if (item.checkable && multiple()) {\n <moz-checkbox\n class=\"mc-option-listbox__checkbox\"\n [id]=\"comboboxId + '-section-cb-' + i\"\n [ngModel]=\"isSectionFullySelected(item.title)\"\n [indeterminate]=\"isSectionPartiallySelected(item.title)\"\n [disabled]=\"!!item.disabled\"\n />\n }\n </div>\n </div>\n }\n\n <!-- Option -->\n @if (isFlatOption(item)) {\n <div\n role=\"option\"\n [id]=\"comboboxId + '-opt-' + i\"\n [attr.aria-selected]=\"isOptionSelected($any(item.value))\"\n [attr.aria-disabled]=\"item.disabled || null\"\n class=\"mc-option-listbox__item\"\n [class.mc-option-listbox__item--selectable]=\"!item.disabled\"\n [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n [class.mc-option-listbox__item--selected]=\"isOptionSelected($any(item.value))\"\n [class.mc-option-listbox__item--active]=\"focusedIndex() === i\"\n (click)=\"!item.disabled && selectOption($any(item.value))\"\n (mouseenter)=\"focusedIndex.set(i)\"\n >\n <div class=\"mc-option-listbox__label\">\n @if (item.icon) {\n <div class=\"mc-option-listbox__prepend\">\n <span class=\"mc-option-listbox__icon\">{{ item.icon }}</span>\n </div>\n }\n <div class=\"mc-option-listbox__content\">\n <span class=\"mc-option-listbox__text\">{{ item.label }}</span>\n @if (item.content) {\n <span class=\"mc-option-listbox__additional\">{{ item.content }}</span>\n }\n </div>\n <div class=\"mc-option-listbox__spacer\"></div>\n\n <!-- Selection indicator -->\n @if (multiple()) {\n <moz-checkbox\n class=\"mc-option-listbox__checkbox\"\n [id]=\"comboboxId + '-cb-' + i\"\n [ngModel]=\"isOptionSelected($any(item.value))\"\n [disabled]=\"!!item.disabled\"\n />\n } @else {\n <CheckCircle24 class=\"mc-option-listbox__selection-icon\" />\n }\n </div>\n </div>\n }\n </ng-container>\n </cdk-virtual-scroll-viewport>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".mc-combobox{position:relative;width:100%}.mc-combobox__input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-combobox__input:focus-within{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-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-combobox__input:has(.mc-combobox__control:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox__input .mc-combobox__control{text-align:left;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);background-color:transparent;border:none;padding-left:.75rem;padding-right:0;flex-grow:1;height:3rem;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-combobox__input .mc-combobox__control:focus-within{outline:none}.mc-combobox__icon{border:none;display:flex;align-items:center;cursor:pointer;padding-right:.75rem;background:none;color:var(--forms-color-icon-interactive, #000000);fill:currentcolor}.mc-combobox__clear{padding:0;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--forms-color-icon-clear, #666666);fill:currentcolor}.mc-combobox__counter{height:1.5rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0 .5rem;border-radius:var(--border-radius-l, 1rem);background-color:var(--forms-color-selection-counter-background, #464e63);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-selection-counter-text, #ffffff)}.mc-combobox__listbox{width:100%;position:absolute;left:0;top:calc(100% + .25rem);visibility:hidden;opacity:0;z-index:var(--combobox-listbox-z-index, 10)}.mc-combobox--open .mc-combobox__listbox{visibility:visible;opacity:1}.mc-combobox--s .mc-combobox__control{height:2rem;font-size:var(--font-size-100, .875rem);padding-left:.5rem}.mc-combobox--s .mc-combobox__icon{padding-right:.5rem}.mc-combobox--s .mc-combobox__clear{width:1.25rem;height:1.25rem}.mc-combobox--invalid .mc-combobox__input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-combobox--invalid .mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-combobox--disabled .mc-combobox__input{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox--disabled .mc-combobox__control{color:var(--forms-color-text-disabled, #737373)}.mc-combobox--disabled .mc-combobox__icon{color:var(--forms-color-icon-disabled, #737373)}.mc-combobox--readonly .mc-combobox__input{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-option-listbox{width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%));border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);overflow:hidden}@media(width>=680px){.mc-option-listbox{min-width:18.75rem}}.mc-option-listbox__list{overflow:auto;display:flex;flex-direction:column;gap:.125rem;margin:0;padding:.5rem;max-height:18.75rem}.mc-option-listbox__item{display:block;border-radius:var(--border-radius-s, .25rem)}.mc-option-listbox__item--disabled{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__label{pointer-events:none;color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__additional{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-disabled, #d9d9d9)}.mc-option-listbox__item--readonly .mc-option-listbox__label{pointer-events:none}.mc-option-listbox__item--selected:not(.mc-option-listbox__item--section){background-color:var(--option-listbox-color-background-checked, #ebf5de)}.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{opacity:1;color:var(--option-listbox-color-selection-indicator-default, #117f03);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-checked, #117f03);color:var(--forms-color-icon-inverse, #ffffff);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox svg{display:block}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected{background-color:var(--option-listbox-color-background-checked-read-only, #eff1f6)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:2px solid var(--forms-color-border-read-only, #cccccc);background-color:var(--forms-color-background-default, #ffffff);color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--selectable{cursor:pointer}.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled):hover,.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled).mc-option-listbox__item--active{background-color:var(--option-listbox-color-background-hover, rgba(0, 0, 0, .05))}.mc-option-listbox__content{display:flex;flex-direction:column;gap:.125rem}.mc-option-listbox__additional{font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);color:var(--option-listbox-color-text-information, #666666)}.mc-option-listbox__label{display:flex;align-items:center;gap:.5rem;height:3rem;padding:.5rem;border-radius:var(--border-radius-s, .25rem);line-height:var(--line-height-s, 1.3);box-sizing:border-box}.mc-option-listbox__checkbox{flex-shrink:0;display:flex;align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border:.125rem solid var(--forms-color-border-default, #666666);border-radius:.25rem;box-sizing:border-box}.mc-option-listbox__checkbox svg{display:none}.mc-option-listbox__spacer{flex-grow:1}.mc-option-listbox__selection-icon{opacity:0}.mc-option-listbox__section-title{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;color:var(--option-listbox-color-text-section-title, #666666)}.mc-option-listbox__search{margin:.5rem;width:unset}.mc-option-listbox__separator{display:block;height:1px;border:0;border-top:1px solid var(--color-border-primary, #cccccc);margin:0;padding:0}.mc-option-listbox__actions{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem}.mc-combobox__virtual-host{overflow:hidden;max-height:none;padding:0}.mc-combobox__viewport,.mc-combobox__viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mc-combobox__loader{display:flex;align-items:center;padding-inline:4px}.mc-combobox__loading,.mc-option-listbox__empty{display:flex;align-items:center;justify-content:center;padding:24px 16px}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: MozLoaderComponent, selector: "moz-loader", inputs: ["appearance", "size", "text"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "component", type: CrossCircleFilled24, selector: "CrossCircleFilled24", inputs: ["hostClass"] }, { kind: "component", type: ChevronDown24, selector: "ChevronDown24", inputs: ["hostClass"] }, { kind: "component", type: Search24, selector: "Search24", inputs: ["hostClass"] }, { kind: "component", type: MozTextInput, selector: "input[moz-text-input]", inputs: ["isInvalid", "disabled", "readonly", "size", "clearable", "clearLabel", "prefix", "suffix"] }, { kind: "component", type: MozCheckboxComponent, selector: "moz-checkbox", inputs: ["id", "name", "label", "indeterminate", "isInvalid", "disabled", "indented"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CheckCircle24, selector: "CheckCircle24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6359
6359
|
}
|
|
6360
6360
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozComboboxComponent, decorators: [{
|
|
6361
6361
|
type: Component,
|
|
@@ -6378,7 +6378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
6378
6378
|
useExisting: forwardRef(() => MozComboboxComponent),
|
|
6379
6379
|
multi: true,
|
|
6380
6380
|
},
|
|
6381
|
-
], template: "<!-- ====================================================================== -->\n<!-- TRIGGER -->\n<!-- ====================================================================== -->\n<div [class]=\"wrapperClasses()\">\n <div class=\"mc-combobox__input\">\n <button\n #triggerBtn\n [id]=\"comboboxId + '-trigger'\"\n type=\"button\"\n class=\"mc-combobox__control\"\n role=\"combobox\"\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n \"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n >\n @if (displayValue()) {\n <span class=\"mc-combobox__value\">{{ displayValue() }}</span>\n } @else {\n <span class=\"mc-combobox__placeholder\">{{ placeholder() }}</span>\n }\n </button>\n\n <!-- Counter (compact + multiple) -->\n @if (multiple() && compact() && selectedCount() > 0) {\n <span [id]=\"comboboxId + '-counter'\" class=\"mc-combobox__counter\" aria-live=\"polite\">\n {{ selectedCount() }} {{ selectedSuffix() }}\n </span>\n }\n\n <!-- Clear button -->\n @if (showClear()) {\n <button\n [id]=\"comboboxId + '-clear'\"\n type=\"button\"\n class=\"mc-combobox__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n (click)=\"onClear($event)\"\n >\n <CrossCircleFilled24 />\n </button>\n }\n\n <!-- Trigger loader -->\n @if (loading()) {\n <moz-loader\n [id]=\"comboboxId + '-trigger-loader'\"\n size=\"s\"\n [appearance]=\"'accent'\"\n class=\"mc-combobox__loader\"\n />\n }\n\n <!-- Chevron -->\n <button\n [id]=\"comboboxId + '-chevron'\"\n type=\"button\"\n class=\"mc-combobox__icon\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (click)=\"toggle()\"\n >\n <ChevronDown24 />\n </button>\n </div>\n</div>\n\n<!-- ====================================================================== -->\n<!-- OVERLAY / DROPDOWN -->\n<!-- ====================================================================== -->\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayWidth]=\"triggerWidth()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"mc-combobox-backdrop\"\n (backdropClick)=\"onOverlayOutsideClick()\"\n (attach)=\"onOverlayAttached()\"\n>\n <div\n [id]=\"comboboxId + '-panel'\"\n class=\"mc-option-listbox mc-listbox__content mc-combobox__listbox\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n <!-- Search -->\n @if (searchable()) {\n <div [id]=\"comboboxId + '-search'\" class=\"mc-option-listbox__search\">\n <Search24 icon />\n <input\n #searchInput\n [id]=\"comboboxId + '-search-input'\"\n moz-text-input\n type=\"text\"\n [placeholder]=\"searchPlaceholder()\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"listboxId\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n [size]=\"'s'\"\n />\n </div>\n <hr class=\"mc-option-listbox__separator\" />\n }\n\n <!-- Actions (multiple only) -->\n @if (showActions() && multiple()) {\n <div [id]=\"comboboxId + '-actions'\" class=\"mc-option-listbox__actions\">\n <button\n [id]=\"comboboxId + '-select-all'\"\n moz-button\n type=\"button\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n [appearance]=\"'accent'\"\n (click)=\"selectAll()\"\n >\n {{ selectAllText() }}\n </button>\n <button\n [id]=\"comboboxId + '-clear-selection'\"\n moz-button\n type=\"button\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n (click)=\"clearSelection()\"\n >\n {{ clearText() }}\n </button>\n </div>\n <hr class=\"mc-option-listbox__separator\" />\n }\n\n <!-- Listbox with virtual scroll -->\n <div\n #listbox\n role=\"listbox\"\n [id]=\"listboxId\"\n class=\"mc-option-listbox__list mc-combobox__virtual-host\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n [attr.aria-label]=\"ariaLabel() ?? 'Options'\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n \"\n tabindex=\"-1\"\n >\n @if (loading()) {\n <div [id]=\"comboboxId + '-loading'\" class=\"mc-combobox__loading\" role=\"status\">\n <moz-loader size=\"s\" [appearance]=\"'accent'\" [text]=\"loadingText()\" />\n </div>\n } @else if (filteredItems().length === 0 && showNoResultText() && searchQuery().length > 0) {\n <div\n [id]=\"comboboxId + '-empty'\"\n class=\"mc-option-listbox__empty\"\n role=\"presentation\"\n aria-live=\"polite\"\n >\n {{ noResultsText() }}\n </div>\n } @else {\n <cdk-virtual-scroll-viewport\n #viewport\n [id]=\"comboboxId + '-viewport'\"\n [itemSize]=\"itemSizePx\"\n [minBufferPx]=\"minBufferPx\"\n [maxBufferPx]=\"maxBufferPx\"\n [style.height.px]=\"viewportHeight()\"\n class=\"mc-combobox__viewport\"\n (scroll)=\"onViewportScroll(viewport)\"\n >\n <ng-container\n *cdkVirtualFor=\"let item of filteredItems(); let i = index; trackBy: trackByFlatItem\"\n >\n <!-- Section header -->\n @if (isFlatSection(item)) {\n <div\n [id]=\"comboboxId + '-section-' + i\"\n class=\"mc-option-listbox__item mc-option-listbox__item--section\"\n [class.mc-option-listbox__item--selectable]=\"\n item.checkable && multiple() && !item.disabled\n \"\n [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n [class.mc-option-listbox__item--selected]=\"\n item.checkable &&\n multiple() &&\n (isSectionFullySelected(item.title) || isSectionPartiallySelected(item.title))\n \"\n role=\"presentation\"\n (click)=\"\n item.checkable && multiple() && !item.disabled ? toggleSection(item.title) : null\n \"\n >\n <div class=\"mc-option-listbox__label\">\n <div class=\"mc-option-listbox__content\">\n <span class=\"mc-option-listbox__section-title\">{{ item.title }}</span>\n </div>\n <div class=\"mc-option-listbox__spacer\"></div>\n @if (item.checkable && multiple()) {\n <moz-checkbox\n class=\"mc-option-listbox__checkbox\"\n [id]=\"comboboxId + '-section-cb-' + i\"\n [ngModel]=\"isSectionFullySelected(item.title)\"\n [indeterminate]=\"isSectionPartiallySelected(item.title)\"\n [disabled]=\"!!item.disabled\"\n />\n }\n </div>\n </div>\n }\n\n <!-- Option -->\n @if (isFlatOption(item)) {\n <div\n role=\"option\"\n [id]=\"comboboxId + '-opt-' + i\"\n [attr.aria-selected]=\"isOptionSelected($any(item.value))\"\n [attr.aria-disabled]=\"item.disabled || null\"\n class=\"mc-option-listbox__item\"\n [class.mc-option-listbox__item--selectable]=\"!item.disabled\"\n [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n [class.mc-option-listbox__item--selected]=\"isOptionSelected($any(item.value))\"\n [class.mc-option-listbox__item--active]=\"focusedIndex() === i\"\n (click)=\"!item.disabled && selectOption($any(item.value))\"\n (mouseenter)=\"focusedIndex.set(i)\"\n >\n <div class=\"mc-option-listbox__label\">\n @if (item.icon) {\n <div class=\"mc-option-listbox__prepend\">\n <span class=\"mc-option-listbox__icon\">{{ item.icon }}</span>\n </div>\n }\n <div class=\"mc-option-listbox__content\">\n <span class=\"mc-option-listbox__text\">{{ item.label }}</span>\n @if (item.content) {\n <span class=\"mc-option-listbox__additional\">{{ item.content }}</span>\n }\n </div>\n <div class=\"mc-option-listbox__spacer\"></div>\n\n <!-- Selection indicator -->\n @if (multiple()) {\n <moz-checkbox\n class=\"mc-option-listbox__checkbox\"\n [id]=\"comboboxId + '-cb-' + i\"\n [ngModel]=\"isOptionSelected($any(item.value))\"\n [disabled]=\"!!item.disabled\"\n />\n } @else {\n <CheckCircle24 class=\"mc-option-listbox__selection-icon\" />\n }\n </div>\n </div>\n }\n </ng-container>\n </cdk-virtual-scroll-viewport>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".mc-combobox{position:relative;width:100%}.mc-combobox__input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-combobox__input:focus-within{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-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-combobox__input:has(.mc-combobox__control:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox__input .mc-combobox__control{text-align:left;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);background-color:transparent;border:none;padding-left:.75rem;padding-right:0;flex-grow:1;height:3rem;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-combobox__input .mc-combobox__control:focus-within{outline:none}.mc-combobox__icon{border:none;display:flex;align-items:center;cursor:pointer;padding-right:.75rem;background:none;color:var(--forms-color-icon-interactive, #000000);fill:currentcolor}.mc-combobox__clear{padding:0;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--forms-color-icon-clear, #666666);fill:currentcolor}.mc-combobox__counter{height:1.5rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0 .5rem;border-radius:var(--border-radius-l, 1rem);background-color:var(--forms-color-selection-counter-background, #464e63);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-selection-counter-text, #ffffff)}.mc-combobox__listbox{width:100%;position:absolute;left:0;top:calc(100% + .25rem);visibility:hidden;opacity:0;z-index:var(--combobox-listbox-z-index, 10)}.mc-combobox--open .mc-combobox__listbox{visibility:visible;opacity:1}.mc-combobox--s .mc-combobox__control{height:2rem;font-size:var(--font-size-100, .875rem);padding-left:.5rem}.mc-combobox--s .mc-combobox__icon{padding-right:.5rem}.mc-combobox--s .mc-combobox__clear{width:1.25rem;height:1.25rem}.mc-combobox--invalid .mc-combobox__input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-combobox--invalid .mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-combobox--disabled .mc-combobox__input{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox--disabled .mc-combobox__control{color:var(--forms-color-text-disabled, #737373)}.mc-combobox--disabled .mc-combobox__icon{color:var(--forms-color-icon-disabled, #737373)}.mc-combobox--readonly .mc-combobox__input{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-option-listbox{width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%));border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem)}@media(width>=680px){.mc-option-listbox{min-width:18.75rem}}.mc-option-listbox__list{overflow:auto;display:flex;flex-direction:column;gap:.125rem;margin:0;padding:.5rem;max-height:18.75rem}.mc-option-listbox__item{display:block;border-radius:var(--border-radius-s, .25rem)}.mc-option-listbox__item--disabled{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__label{pointer-events:none;color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__additional{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-disabled, #d9d9d9)}.mc-option-listbox__item--readonly .mc-option-listbox__label{pointer-events:none}.mc-option-listbox__item--selected:not(.mc-option-listbox__item--section){background-color:var(--option-listbox-color-background-checked, #ebf5de)}.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{opacity:1;color:var(--option-listbox-color-selection-indicator-default, #117f03);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-checked, #117f03);color:var(--forms-color-icon-inverse, #ffffff);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox svg{display:block}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected{background-color:var(--option-listbox-color-background-checked-read-only, #eff1f6)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:2px solid var(--forms-color-border-read-only, #cccccc);background-color:var(--forms-color-background-default, #ffffff);color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--selectable{cursor:pointer}.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled):hover,.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled).mc-option-listbox__item--active{background-color:var(--option-listbox-color-background-hover, rgba(0, 0, 0, .05))}.mc-option-listbox__content{display:flex;flex-direction:column;gap:.125rem}.mc-option-listbox__additional{font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);color:var(--option-listbox-color-text-information, #666666)}.mc-option-listbox__label{display:flex;align-items:center;gap:.5rem;height:3rem;padding:.5rem;border-radius:var(--border-radius-s, .25rem);line-height:var(--line-height-s, 1.3);box-sizing:border-box}.mc-option-listbox__checkbox{flex-shrink:0;display:flex;align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border:.125rem solid var(--forms-color-border-default, #666666);border-radius:.25rem;box-sizing:border-box}.mc-option-listbox__checkbox svg{display:none}.mc-option-listbox__spacer{flex-grow:1}.mc-option-listbox__selection-icon{opacity:0}.mc-option-listbox__section-title{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;color:var(--option-listbox-color-text-section-title, #666666)}.mc-option-listbox__search{margin:.5rem;width:unset}.mc-option-listbox__separator{display:block;height:1px;border:0;border-top:1px solid var(--color-border-primary, #cccccc);margin:0;padding:0}.mc-option-listbox__actions{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem}.mc-combobox__virtual-host{overflow:hidden;max-height:none;padding:0}.mc-combobox__viewport,.mc-combobox__viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mc-combobox__loader{display:flex;align-items:center;padding-inline:4px}.mc-combobox__loading,.mc-option-listbox__empty{display:flex;align-items:center;justify-content:center;padding:24px 16px}\n"] }]
|
|
6381
|
+
], template: "<!-- ====================================================================== -->\n<!-- TRIGGER -->\n<!-- ====================================================================== -->\n<div [class]=\"wrapperClasses()\">\n <div class=\"mc-combobox__input\">\n <button\n #triggerBtn\n [id]=\"comboboxId + '-trigger'\"\n type=\"button\"\n class=\"mc-combobox__control\"\n role=\"combobox\"\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n \"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n >\n @if (displayValue()) {\n <span class=\"mc-combobox__value\">{{ displayValue() }}</span>\n } @else {\n <span class=\"mc-combobox__placeholder\">{{ placeholder() }}</span>\n }\n </button>\n\n <!-- Counter (compact + multiple) -->\n @if (multiple() && compact() && selectedCount() > 0) {\n <span [id]=\"comboboxId + '-counter'\" class=\"mc-combobox__counter\" aria-live=\"polite\">\n {{ selectedCount() }} {{ selectedSuffix() }}\n </span>\n }\n\n <!-- Clear button -->\n @if (showClear()) {\n <button\n [id]=\"comboboxId + '-clear'\"\n type=\"button\"\n class=\"mc-combobox__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n (click)=\"onClear($event)\"\n >\n <CrossCircleFilled24 />\n </button>\n }\n\n <!-- Trigger loader -->\n @if (loading()) {\n <moz-loader\n [id]=\"comboboxId + '-trigger-loader'\"\n size=\"s\"\n [appearance]=\"'accent'\"\n class=\"mc-combobox__loader\"\n />\n }\n\n <!-- Chevron -->\n <button\n [id]=\"comboboxId + '-chevron'\"\n type=\"button\"\n class=\"mc-combobox__icon\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (click)=\"toggle()\"\n >\n <ChevronDown24 />\n </button>\n </div>\n</div>\n\n<!-- ====================================================================== -->\n<!-- OVERLAY / DROPDOWN -->\n<!-- ====================================================================== -->\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayWidth]=\"triggerWidth()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"mc-combobox-backdrop\"\n (backdropClick)=\"onOverlayOutsideClick()\"\n (attach)=\"onOverlayAttached()\"\n>\n <div\n [id]=\"comboboxId + '-panel'\"\n class=\"mc-option-listbox mc-listbox__content mc-combobox__listbox\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n <!-- Search -->\n @if (searchable()) {\n <div [id]=\"comboboxId + '-search'\" class=\"mc-option-listbox__search\">\n <Search24 icon />\n <input\n #searchInput\n [id]=\"comboboxId + '-search-input'\"\n moz-text-input\n type=\"text\"\n [placeholder]=\"searchPlaceholder()\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"listboxId\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n [size]=\"'s'\"\n />\n </div>\n <hr class=\"mc-option-listbox__separator\" />\n }\n\n <!-- Actions (multiple only) -->\n @if (showActions() && multiple()) {\n <div [id]=\"comboboxId + '-actions'\" class=\"mc-option-listbox__actions\">\n <button\n [id]=\"comboboxId + '-select-all'\"\n moz-button\n type=\"button\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n [appearance]=\"'accent'\"\n (click)=\"selectAll()\"\n >\n {{ selectAllText() }}\n </button>\n <button\n [id]=\"comboboxId + '-clear-selection'\"\n moz-button\n type=\"button\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n (click)=\"clearSelection()\"\n >\n {{ clearText() }}\n </button>\n </div>\n <hr class=\"mc-option-listbox__separator\" />\n }\n\n <!-- Listbox with virtual scroll -->\n <div\n #listbox\n role=\"listbox\"\n [id]=\"listboxId\"\n class=\"mc-option-listbox__list mc-combobox__virtual-host\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n [attr.aria-label]=\"ariaLabel() ?? 'Options'\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n \"\n tabindex=\"-1\"\n >\n @if (loading()) {\n <div [id]=\"comboboxId + '-loading'\" class=\"mc-combobox__loading\" role=\"status\">\n <moz-loader size=\"s\" [appearance]=\"'accent'\" [text]=\"loadingText()\" />\n </div>\n } @else if (filteredItems().length === 0 && showNoResultText() && searchQuery().length > 0) {\n <div\n [id]=\"comboboxId + '-empty'\"\n class=\"mc-option-listbox__empty\"\n role=\"presentation\"\n aria-live=\"polite\"\n >\n {{ noResultsText() }}\n </div>\n } @else {\n <cdk-virtual-scroll-viewport\n #viewport\n [id]=\"comboboxId + '-viewport'\"\n [itemSize]=\"itemSizePx\"\n [minBufferPx]=\"minBufferPx\"\n [maxBufferPx]=\"maxBufferPx\"\n [style.height.px]=\"viewportHeight()\"\n class=\"mc-combobox__viewport\"\n (scroll)=\"onViewportScroll(viewport)\"\n >\n <ng-container\n *cdkVirtualFor=\"let item of filteredItems(); let i = index; trackBy: trackByFlatItem\"\n >\n <!-- Section header -->\n @if (isFlatSection(item)) {\n <div\n [id]=\"comboboxId + '-section-' + i\"\n class=\"mc-option-listbox__item mc-option-listbox__item--section\"\n [class.mc-option-listbox__item--selectable]=\"\n item.checkable && multiple() && !item.disabled\n \"\n [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n [class.mc-option-listbox__item--selected]=\"\n item.checkable &&\n multiple() &&\n (isSectionFullySelected(item.title) || isSectionPartiallySelected(item.title))\n \"\n role=\"presentation\"\n (click)=\"\n item.checkable && multiple() && !item.disabled ? toggleSection(item.title) : null\n \"\n >\n <div class=\"mc-option-listbox__label\">\n <div class=\"mc-option-listbox__content\">\n <span class=\"mc-option-listbox__section-title\">{{ item.title }}</span>\n </div>\n <div class=\"mc-option-listbox__spacer\"></div>\n @if (item.checkable && multiple()) {\n <moz-checkbox\n class=\"mc-option-listbox__checkbox\"\n [id]=\"comboboxId + '-section-cb-' + i\"\n [ngModel]=\"isSectionFullySelected(item.title)\"\n [indeterminate]=\"isSectionPartiallySelected(item.title)\"\n [disabled]=\"!!item.disabled\"\n />\n }\n </div>\n </div>\n }\n\n <!-- Option -->\n @if (isFlatOption(item)) {\n <div\n role=\"option\"\n [id]=\"comboboxId + '-opt-' + i\"\n [attr.aria-selected]=\"isOptionSelected($any(item.value))\"\n [attr.aria-disabled]=\"item.disabled || null\"\n class=\"mc-option-listbox__item\"\n [class.mc-option-listbox__item--selectable]=\"!item.disabled\"\n [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n [class.mc-option-listbox__item--selected]=\"isOptionSelected($any(item.value))\"\n [class.mc-option-listbox__item--active]=\"focusedIndex() === i\"\n (click)=\"!item.disabled && selectOption($any(item.value))\"\n (mouseenter)=\"focusedIndex.set(i)\"\n >\n <div class=\"mc-option-listbox__label\">\n @if (item.icon) {\n <div class=\"mc-option-listbox__prepend\">\n <span class=\"mc-option-listbox__icon\">{{ item.icon }}</span>\n </div>\n }\n <div class=\"mc-option-listbox__content\">\n <span class=\"mc-option-listbox__text\">{{ item.label }}</span>\n @if (item.content) {\n <span class=\"mc-option-listbox__additional\">{{ item.content }}</span>\n }\n </div>\n <div class=\"mc-option-listbox__spacer\"></div>\n\n <!-- Selection indicator -->\n @if (multiple()) {\n <moz-checkbox\n class=\"mc-option-listbox__checkbox\"\n [id]=\"comboboxId + '-cb-' + i\"\n [ngModel]=\"isOptionSelected($any(item.value))\"\n [disabled]=\"!!item.disabled\"\n />\n } @else {\n <CheckCircle24 class=\"mc-option-listbox__selection-icon\" />\n }\n </div>\n </div>\n }\n </ng-container>\n </cdk-virtual-scroll-viewport>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".mc-combobox{position:relative;width:100%}.mc-combobox__input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-combobox__input:focus-within{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-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-combobox__input:has(.mc-combobox__control:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox__input .mc-combobox__control{text-align:left;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);background-color:transparent;border:none;padding-left:.75rem;padding-right:0;flex-grow:1;height:3rem;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-combobox__input .mc-combobox__control:focus-within{outline:none}.mc-combobox__icon{border:none;display:flex;align-items:center;cursor:pointer;padding-right:.75rem;background:none;color:var(--forms-color-icon-interactive, #000000);fill:currentcolor}.mc-combobox__clear{padding:0;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--forms-color-icon-clear, #666666);fill:currentcolor}.mc-combobox__counter{height:1.5rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0 .5rem;border-radius:var(--border-radius-l, 1rem);background-color:var(--forms-color-selection-counter-background, #464e63);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-selection-counter-text, #ffffff)}.mc-combobox__listbox{width:100%;position:absolute;left:0;top:calc(100% + .25rem);visibility:hidden;opacity:0;z-index:var(--combobox-listbox-z-index, 10)}.mc-combobox--open .mc-combobox__listbox{visibility:visible;opacity:1}.mc-combobox--s .mc-combobox__control{height:2rem;font-size:var(--font-size-100, .875rem);padding-left:.5rem}.mc-combobox--s .mc-combobox__icon{padding-right:.5rem}.mc-combobox--s .mc-combobox__clear{width:1.25rem;height:1.25rem}.mc-combobox--invalid .mc-combobox__input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-combobox--invalid .mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-combobox--disabled .mc-combobox__input{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox--disabled .mc-combobox__control{color:var(--forms-color-text-disabled, #737373)}.mc-combobox--disabled .mc-combobox__icon{color:var(--forms-color-icon-disabled, #737373)}.mc-combobox--readonly .mc-combobox__input{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-option-listbox{width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%));border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);overflow:hidden}@media(width>=680px){.mc-option-listbox{min-width:18.75rem}}.mc-option-listbox__list{overflow:auto;display:flex;flex-direction:column;gap:.125rem;margin:0;padding:.5rem;max-height:18.75rem}.mc-option-listbox__item{display:block;border-radius:var(--border-radius-s, .25rem)}.mc-option-listbox__item--disabled{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__label{pointer-events:none;color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__additional{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-disabled, #d9d9d9)}.mc-option-listbox__item--readonly .mc-option-listbox__label{pointer-events:none}.mc-option-listbox__item--selected:not(.mc-option-listbox__item--section){background-color:var(--option-listbox-color-background-checked, #ebf5de)}.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{opacity:1;color:var(--option-listbox-color-selection-indicator-default, #117f03);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-checked, #117f03);color:var(--forms-color-icon-inverse, #ffffff);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox svg{display:block}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected{background-color:var(--option-listbox-color-background-checked-read-only, #eff1f6)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:2px solid var(--forms-color-border-read-only, #cccccc);background-color:var(--forms-color-background-default, #ffffff);color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--selectable{cursor:pointer}.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled):hover,.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled).mc-option-listbox__item--active{background-color:var(--option-listbox-color-background-hover, rgba(0, 0, 0, .05))}.mc-option-listbox__content{display:flex;flex-direction:column;gap:.125rem}.mc-option-listbox__additional{font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);color:var(--option-listbox-color-text-information, #666666)}.mc-option-listbox__label{display:flex;align-items:center;gap:.5rem;height:3rem;padding:.5rem;border-radius:var(--border-radius-s, .25rem);line-height:var(--line-height-s, 1.3);box-sizing:border-box}.mc-option-listbox__checkbox{flex-shrink:0;display:flex;align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border:.125rem solid var(--forms-color-border-default, #666666);border-radius:.25rem;box-sizing:border-box}.mc-option-listbox__checkbox svg{display:none}.mc-option-listbox__spacer{flex-grow:1}.mc-option-listbox__selection-icon{opacity:0}.mc-option-listbox__section-title{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;color:var(--option-listbox-color-text-section-title, #666666)}.mc-option-listbox__search{margin:.5rem;width:unset}.mc-option-listbox__separator{display:block;height:1px;border:0;border-top:1px solid var(--color-border-primary, #cccccc);margin:0;padding:0}.mc-option-listbox__actions{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem}.mc-combobox__virtual-host{overflow:hidden;max-height:none;padding:0}.mc-combobox__viewport,.mc-combobox__viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mc-combobox__loader{display:flex;align-items:center;padding-inline:4px}.mc-combobox__loading,.mc-option-listbox__empty{display:flex;align-items:center;justify-content:center;padding:24px 16px}\n"] }]
|
|
6382
6382
|
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], multiSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSearch", required: false }] }], serverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverSide", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], canSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSelectAll", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], selectAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllText", required: false }] }], clearText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearText", required: false }] }], selectedSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedSuffix", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], showNoResultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNoResultText", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], searched: [{ type: i0.Output, args: ["searched"] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerBtn', { isSignal: true }] }], viewportEl: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }] } });
|
|
6383
6383
|
|
|
6384
6384
|
/**
|
|
@@ -8686,7 +8686,7 @@ class MozDataTableComponent {
|
|
|
8686
8686
|
return dataKeyExpand ? (rowData[dataKeyExpand] ?? rowIndex) : rowIndex;
|
|
8687
8687
|
}
|
|
8688
8688
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8689
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozDataTableComponent, isStandalone: true, selector: "moz-datatable", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, indexKey: { classPropertyName: "indexKey", publicName: "indexKey", isSignal: true, isRequired: false, transformFunction: null }, pageable: { classPropertyName: "pageable", publicName: "pageable", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageOptions: { classPropertyName: "itemsPerPageOptions", publicName: "itemsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageLabel: { classPropertyName: "itemsPerPageLabel", publicName: "itemsPerPageLabel", isSignal: true, isRequired: false, transformFunction: null }, countLabel: { classPropertyName: "countLabel", publicName: "countLabel", isSignal: true, isRequired: false, transformFunction: null }, infoLabelItems: { classPropertyName: "infoLabelItems", publicName: "infoLabelItems", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, sortMultiple: { classPropertyName: "sortMultiple", publicName: "sortMultiple", isSignal: true, isRequired: false, transformFunction: null }, sortMode: { classPropertyName: "sortMode", publicName: "sortMode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hidePageCount: { classPropertyName: "hidePageCount", publicName: "hidePageCount", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, fixedHeader: { classPropertyName: "fixedHeader", publicName: "fixedHeader", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectionbar: { classPropertyName: "selectionbar", publicName: "selectionbar", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, labelButtonClearSelection: { classPropertyName: "labelButtonClearSelection", publicName: "labelButtonClearSelection", isSignal: true, isRequired: false, transformFunction: null }, selectPage: { classPropertyName: "selectPage", publicName: "selectPage", isSignal: true, isRequired: false, transformFunction: null }, labelPageSelected: { classPropertyName: "labelPageSelected", publicName: "labelPageSelected", isSignal: true, isRequired: false, transformFunction: null }, labelAllItemsSelected: { classPropertyName: "labelAllItemsSelected", publicName: "labelAllItemsSelected", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, labelButtonSelectAll: { classPropertyName: "labelButtonSelectAll", publicName: "labelButtonSelectAll", isSignal: true, isRequired: false, transformFunction: null }, clickableRows: { classPropertyName: "clickableRows", publicName: "clickableRows", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expanderAccessibleLabel: { classPropertyName: "expanderAccessibleLabel", publicName: "expanderAccessibleLabel", isSignal: true, isRequired: false, transformFunction: null }, expandableList: { classPropertyName: "expandableList", publicName: "expandableList", isSignal: true, isRequired: false, transformFunction: null }, dataKeyExpand: { classPropertyName: "dataKeyExpand", publicName: "dataKeyExpand", isSignal: true, isRequired: false, transformFunction: null }, showExpandableContent: { classPropertyName: "showExpandableContent", publicName: "showExpandableContent", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, accessibilityLabels: { classPropertyName: "accessibilityLabels", publicName: "accessibilityLabels", isSignal: true, isRequired: false, transformFunction: null }, e2eSelector: { classPropertyName: "e2eSelector", publicName: "e2eSelector", isSignal: true, isRequired: false, transformFunction: null }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", sortMultipleChange: "sortMultipleChange", currentPageChange: "currentPageChange", itemsPerPageChange: "itemsPerPageChange", changed: "changed", clickRow: "clickRow", selectRow: "selectRow", unselectRow: "unselectRow", selectAllRows: "selectAllRows", unselectAllRows: "unselectAllRows", selectMultipleRows: "selectMultipleRows", unselectMultipleRows: "unselectMultipleRows", selectPageChange: "selectPageChange", selectAllChange: "selectAllChange", selectionChange: "selectionChange", expandRow: "expandRow", retractRow: "retractRow" }, host: { properties: { "class": "hostClasses()", "style.--datatable-head-z-index": "zIndex()" } }, queries: [{ propertyName: "columns", predicate: MozDataTableColumnComponent, descendants: true, isSignal: true }, { propertyName: "cellTemplates", predicate: MozDataTableCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "headerTemplates", predicate: MozDataTableHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "expandTemplate", first: true, predicate: MozDataTableExpandTemplateDirective, descendants: true, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: MozDataTableNoDataTemplateDirective, descendants: true, isSignal: true }, { propertyName: "headersTemplate", first: true, predicate: MozDataTableHeadersTemplateDirective, descendants: true, isSignal: true }, { propertyName: "bodyTemplate", first: true, predicate: MozDataTableBodyTemplateDirective, descendants: true, isSignal: true }, { propertyName: "customSelectionbar", first: true, predicate: MozDataTableSelectionbarDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Topbar -->\n<ng-content select=\"moz-datatable-top, [mozDataTableTopbar]\" />\n\n<!-- Selection bar -->\n<ng-content select=\"[mozDataTableSelectionbar]\" />\n@if (!customSelectionbar() && selectionbar() && multiSelectionPage()) {\n <moz-datatable-selection-bar\n [selectAll]=\"getSelectAll()\"\n [labelPageSelected]=\"getLabelSelectedPage()\"\n [labelAllItemsSelected]=\"getLabelAllItemsSelected()\"\n [labelButtonSelectAll]=\"getLabelButtonSelectAll()\"\n [labelButtonClearSelection]=\"labelButtonClearSelection()\"\n (selectAllRows)=\"onSelectAllFromBar()\"\n (clearAllRows)=\"clearAll()\"\n />\n}\n\n<div class=\"mc-datatable__container\">\n <!-- MAIN -->\n <div class=\"mc-datatable__main\" [style.max-height]=\"maxHeight()\">\n @if (items().length === 0 && !loading()) {\n <moz-datatable-empty>\n @if (noDataTemplate(); as noData) {\n <ng-container [ngTemplateOutlet]=\"noData.template\" />\n }\n </moz-datatable-empty>\n } @else {\n <table [class]=\"!nested() ? 'mc-datatable__table' : 'mc-datatable__subtable'\">\n <thead>\n <tr>\n @if (headersTemplate(); as customHeaders) {\n <ng-container [ngTemplateOutlet]=\"customHeaders.template\" />\n } @else {\n <!-- Selectable -->\n @if (selectable()) {\n <th moz-datatable-header [selectable]=\"true\">\n <div class=\"checkbox\">\n <input\n id=\"masterCheckbox\"\n type=\"checkbox\"\n class=\"checkbox__input\"\n aria-label=\"Select all rows\"\n [checked]=\"pageState()\"\n [indeterminate]=\"isPageIndeterminate()\"\n [disabled]=\"!items().length || (loading() ?? false)\"\n (change)=\"onClickMasterCheckbox($event)\"\n />\n </div>\n </th>\n }\n\n <!-- Expandable -->\n @if (expandable()) {\n <th moz-datatable-header [expandable]=\"true\"></th>\n }\n\n <!-- Headers from configuration -->\n @for (header of getHeaders(); track $index) {\n <th\n moz-datatable-header\n [label]=\"header.label\"\n [value]=\"header.value\"\n [sortable]=\"header.sortable ?? false\"\n [sortDirection]=\"getSortDirection(header.value)\"\n [additionalProps]=\"header.additionalProps\"\n [labelTemplate]=\"headerTemplateFor(header.value)?.template ?? null\"\n [headerConfig]=\"header\"\n (updateSortDirection)=\"updateSort($event)\"\n ></th>\n }\n }\n </tr>\n </thead>\n <tbody>\n @if (bodyTemplate(); as customBody) {\n <ng-container [ngTemplateOutlet]=\"customBody.template\" />\n } @else {\n @if (!items().length && loading()) {\n <!-- Loading skeleton -->\n @for (n of skeletonRows(); track n) {\n <tr moz-datatable-row>\n @if (selectable()) {\n <td moz-datatable-cell type=\"checkbox\">\n <span class=\"skeleton-cell\"> </span>\n </td>\n }\n @if (expandable()) {\n <td moz-datatable-cell type=\"expand\">\n <span class=\"skeleton-cell\"> </span>\n </td>\n }\n @for (header of getHeaders(); track $index) {\n <td><span class=\"skeleton-cell\"> </span></td>\n }\n </tr>\n }\n } @else {\n @for (item of items(); track trackRow($index, item); let rowIndex = $index) {\n <tr\n moz-datatable-row\n [selected]=\"isSelected(item)\"\n [class]=\"rowClass()\"\n [clickable]=\"getClickable()\"\n [expandable]=\"expandable()\"\n [expanded]=\"isRowExpanded(item, rowIndex)\"\n [attr.tabindex]=\"getClickable() ? 0 : null\"\n (keyup.enter)=\"getClickable() && onClickRow(item, rowIndex)\"\n >\n <!-- Cell (Selectable) -->\n @if (selectable()) {\n <td moz-datatable-cell type=\"checkbox\">\n <div class=\"checkbox\">\n <input\n type=\"checkbox\"\n class=\"checkbox__input\"\n [attr.aria-label]=\"'Select rows n\u00B0' + rowIndex\"\n [checked]=\"isSelected(item)\"\n [disabled]=\"loading() ?? false\"\n (click)=\"onSelectRowWithShift($event, item, rowIndex)\"\n />\n </div>\n </td>\n }\n\n <!-- Cell (Expandable) -->\n @if (expandable()) {\n <td moz-datatable-cell type=\"expand\">\n @if (displayExpandButton(rowIndex)) {\n <button\n moz-datatable-expand-button\n [label]=\"accessibilityLabels()?.expandButtonLabel\"\n [expanded]=\"isRowExpanded(item, rowIndex)\"\n [disabled]=\"loading() ?? false\"\n (click)=\"onClickExpandButton(item, rowIndex)\"\n ></button>\n }\n </td>\n }\n\n <!-- Cells from data -->\n @for (header of getHeaders(); track $index) {\n <td\n moz-datatable-cell\n [class]=\"header.class\"\n [value]=\"header.value\"\n [type]=\"header.type\"\n (click)=\"getClickable() && onClickRow(item, rowIndex)\"\n >\n @if (loading()) {\n <span class=\"skeleton-cell\"> </span>\n } @else if (cellTemplateFor(header.value); as cellTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"cellTemplate.template\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n item: item,\n index: rowIndex,\n rowIndex: rowIndex,\n }\"\n />\n } @else {\n {{ displayValue(item, header.value) }}\n }\n </td>\n }\n </tr>\n\n <!-- Expand row -->\n @if (isRowExpanded(item, rowIndex)) {\n <tr\n moz-datatable-row-expand\n [headers]=\"getHeaders().length\"\n [expandable]=\"expandable()\"\n [selectable]=\"selectable()\"\n >\n @if (expandTemplate(); as expand) {\n <ng-container\n [ngTemplateOutlet]=\"expand.template\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n item: item,\n index: rowIndex,\n rowIndex: rowIndex,\n }\"\n />\n }\n </tr>\n }\n }\n }\n }\n </tbody>\n </table>\n }\n </div>\n\n <!-- FOOTER -->\n @if (pageable()) {\n <div class=\"mc-datatable__footer\">\n <!-- DataTable Rows Per Page Selector -->\n <moz-datatable-rows-per-page\n [label]=\"itemsPerPageLabel()\"\n [value]=\"getItemsPerPage()\"\n [loading]=\"loading() ?? false\"\n [options]=\"getItemsPerPageOptions()\"\n (updateValue)=\"updatePageSize($event)\"\n />\n\n <!-- DataTable Info (count) -->\n @if (!hidePageCount()) {\n <moz-datatable-info\n [label]=\"countLabel()\"\n [labelItems]=\"infoLabelItems()\"\n [start]=\"getPageCountInfos().start\"\n [end]=\"getPageCountInfos().end\"\n [total]=\"getPageCountInfos().total\"\n />\n }\n\n <!-- DataTable Pagination -->\n <div class=\"mc-datatable__pagination\">\n <moz-pagination\n [id]=\"accessibilityLabels()?.paginationAriaLabel ?? 'datatable-pagination'\"\n [selectLabel]=\"accessibilityLabels()?.paginationAriaLabel ?? 'Select page'\"\n [options]=\"getOptions()\"\n [value]=\"getCurrentPage()\"\n buttonSize=\"s\"\n (updateValue)=\"updateCurrentPage($event)\"\n />\n </div>\n </div>\n }\n</div>\n", styles: [".mc-checkbox,.checkbox{align-items:center;display:flex;gap:.5rem;padding:.375rem}.mc-checkbox--indented{margin-left:1.75rem}.mc-checkbox__label{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer}.mc-checkbox__input,.checkbox__input{appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, .125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;height:1.25rem;width:1.25rem;position:relative}.mc-checkbox__input:after,.checkbox__input:after{content:\"\";position:absolute;inset:0;background-color:var(--forms-color-icon-inverse, #ffffff);opacity:0;transform:scale(.6);transition:.15s ease}.mc-checkbox__input:hover,.checkbox__input:hover{border-color:var(--forms-color-border-hover, #4d4d4d)}.mc-checkbox__input:focus-visible,.checkbox__input: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-checkbox__input:checked:after,.checkbox__input:checked:after{opacity:1;transform:scale(1);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:indeterminate:after,.checkbox__input:indeterminate:after{opacity:1;transform:scale(1);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate{background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate,.mc-checkbox__input:disabled,.checkbox__input:disabled{border-color:transparent}.mc-checkbox__input:disabled,.checkbox__input:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed}.mc-checkbox__input:disabled:checked:after,.checkbox__input:disabled:checked:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled:indeterminate:after,.checkbox__input:disabled:indeterminate:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled+.mc-checkbox__label,.checkbox__input:disabled+.mc-checkbox__label{color:var(--forms-color-text-disabled, #737373);cursor:not-allowed}.mc-checkbox__input:not(:disabled):checked:hover,.checkbox__input:not(:disabled):checked:hover,.mc-checkbox__input:not(:disabled):indeterminate:hover,.checkbox__input:not(:disabled):indeterminate:hover{background-color:var(--forms-color-background-checked-hover, #006902)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate),.is-invalid.checkbox__input:not(:checked,:indeterminate){border-color:var(--forms-color-border-invalid, #ea302d)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate):hover,.is-invalid.checkbox__input:not(:checked,:indeterminate):hover{border-color:var(--forms-color-border-invalid-hover, #c61112)}.mc-datatable{display:block;font-family:LeroyMerlin,sans-serif;box-sizing:border-box}.mc-datatable *,.mc-datatable :after,.mc-datatable :before{box-sizing:inherit}.mc-datatable__container{border-radius:4px;border:1px solid #cdd4d8;background-color:var(--color-datatable-container-background, #e6e6e6);overflow:hidden}.mc-datatable__main{scrollbar-color:var(--color-grey-600, #666666) var(--color-grey-100, #e6e6e6);scrollbar-width:thin;overflow:auto;overflow-y:auto}.mc-datatable__main::-webkit-scrollbar{background-color:var(--color-grey-100, #e6e6e6);height:.5rem;width:.5rem}.mc-datatable__main::-webkit-scrollbar-track{background:var(--color-grey-100, #e6e6e6)}.mc-datatable__main::-webkit-scrollbar-thumb{background:var(--color-grey-600, #666666)}.mc-datatable__table tr,.mc-datatable thead th,.mc-datatable thead td{height:2.9375rem}.mc-datatable__table{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%}.mc-datatable__table>thead,.mc-datatable__table>tbody{background-color:var(--color-grey-000, #ffffff)}.mc-datatable__table th,.mc-datatable__table td{border-bottom:1px solid var(--color-grey-300, #b3b3b3);text-align:left;vertical-align:middle;padding-right:1rem;padding-left:1rem}.mc-datatable thead th,.mc-datatable thead td{font-weight:600;font-size:.75rem;line-height:1.3333333333;color:var(--color-datatable-thead-font, #191919);text-transform:uppercase}.mc-datatable__head small,.mc-datatable__cell small{font-size:.6815rem;line-height:1.2839325018;color:var(--color-grey-700, #4d4d4d);display:block;font-weight:400;text-transform:none}.mc-datatable tbody tr.selected{background-color:var(--color-datatable-cell-background-selected, var(--color-background-accent, #ebf5de))}.mc-datatable tbody th,.mc-datatable tbody td{font-size:.875rem;line-height:1.2857142857;color:var(--color-datatable-cell-font, #191919)}.mc-datatable__row--clickable{cursor:pointer}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable{height:0}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable .mc-datatable__row-inner{overflow:hidden;max-height:0}.mc-datatable__row-parent.mc-datatable__row-parent--expanded+.mc-datatable__row-expandable .mc-datatable__row-inner{max-height:100%}.mc-datatable__row-expandable>td{padding:0;border-bottom:0}.mc-datatable__row-expandable--offset-1 table th:first-child,.mc-datatable__row-expandable--offset-1 table td:first-child{padding-left:4.25rem}.mc-datatable__row-expandable--offset-2 table th:first-child,.mc-datatable__row-expandable--offset-2 table td:first-child{padding-left:7.75rem}.mc-datatable__cell-checkbox{width:3.25rem}.mc-datatable__cell-button{width:3.5rem}.mc-datatable__cell-field{min-width:9.375rem}td.mc-datatable__cell-number{text-align:right}.mc-datatable--s .mc-datatable__table tr,.mc-datatable--s .mc-datatable thead th,.mc-datatable--s .mc-datatable thead td{height:2.4375rem}.mc-datatable--l .mc-datatable__table tr,.mc-datatable--l .mc-datatable thead th,.mc-datatable--l .mc-datatable thead td{height:3.4375rem}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky-header .mc-datatable__table>thead{box-shadow:0 4px 20px #19191933;top:0;z-index:var(--datatable-head-z-index, 11)}.mc-datatable--sticky .mc-datatable__table>tbody>tr:last-child>th,.mc-datatable--sticky .mc-datatable__table>tbody>tr:last-child>td,.mc-datatable--sticky-header .mc-datatable__table>tbody>tr:last-child>th,.mc-datatable--sticky-header .mc-datatable__table>tbody>tr:last-child>td{border-bottom:transparent}.mc-datatable--sticky .mc-datatable__footer,.mc-datatable--sticky-header .mc-datatable__footer{border-top:1px solid var(--color-grey-300, #b3b3b3);position:relative;z-index:var(--datatable-sticky-footer-z-index, 3)}.mc-datatable--sticky-header .mc-datatable__main{overflow-y:auto}.mc-datatable--sticky-header .mc-datatable__table>thead{position:sticky}.mc-datatable--overflow-visible .mc-datatable__container,.mc-datatable--overflow-visible .mc-datatable__main{overflow:visible}.mc-datatable__btn{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;position:relative;isolation:isolate;align-items:center;background-color:transparent;display:flex}.mc-datatable__btn:after{border-radius:4px;box-shadow:0 0 0 0 transparent;content:\"\";display:block;pointer-events:none;position:absolute;inset:0;z-index:-1;transition:box-shadow .2s ease}.mc-datatable__btn-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__btn:focus{outline:none}.mc-datatable__btn:focus:after{box-shadow:0 0 0 .125rem var(--color-focus-gap, #ffffff),0 0 0 .25rem var(--color-focus-border, #0b96cc)}.mc-datatable__btn:disabled .mc-datatable__btn-icon{border-color:transparent;fill:var(--color-button-bordered-disabled-font, #666666);cursor:not-allowed}.mc-datatable__sort{padding:.25rem;font-weight:600;font-size:.75rem;line-height:1.3333333333;color:var(--color-datatable-thead-font, #191919);text-transform:uppercase;align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.mc-datatable__sort-arrow{align-items:center;display:flex;flex-direction:column;justify-content:space-around;margin-left:.5rem;fill:#666}.mc-datatable__options{width:1.5rem;height:1.5rem}.mc-datatable .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__footer{align-items:center;background-color:var(--color-grey-000, #ffffff);display:flex;padding:.75rem 1rem;gap:1rem}@media screen and (max-width:679px){.mc-datatable__footer{flex-direction:column}}.mc-datatable__select{display:flex;align-items:center;gap:.5rem}.mc-datatable__select-label{font-size:.875rem;line-height:1.2857142857;color:var(--color-grey-800, #333333);flex-shrink:0}.mc-datatable__count{font-size:.75rem;line-height:1.3333333333;color:var(--color-grey-600, #666666)}.mc-datatable__pagination{margin-left:auto}.mc-datatable__subtable{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%;background-color:var(--color-datatable-subtable-background, #e6e6e6)}.mc-datatable__subtable th,.mc-datatable__subtable td{border-bottom-color:var(--color-datatable-subtable-border, #b3b3b3)}.mc-datatable__subtable thead th,.mc-datatable__subtable thead td{font-size:.75rem;line-height:1.3333333333;color:var(--color-datatable-subtable-font, #000000)}.mc-datatable__subtable tbody th,.mc-datatable__subtable tbody td{color:var(--color-datatable-subtable-font, #000000)}.mc-datatable__empty{font-size:1rem;line-height:1.375;align-items:center;background-color:var(--color-datatable-empty-background, #e6e6e6);color:var(--color-datatable-empty-color, #666666);display:flex;flex-direction:column;gap:1rem;height:18.1875rem;justify-content:center;text-align:center}.mc-datatable__empty p{margin:0 auto}.mc-datatable__empty strong{font-size:1.125rem;line-height:1.3333333333}.mc-datatable__header{display:block}.mc-datatable__topbar,.mc-datatable__filters{padding-bottom:1rem}.mc-datatable__topbar{justify-content:space-between}.mc-datatable__topbar,.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{display:flex;gap:1rem}.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{flex-wrap:wrap}.mc-datatable__topbar-edition{flex-shrink:0;gap:.25rem}.mc-datatable__topbar-actions{align-items:center;justify-content:flex-end;margin-left:auto;gap:.5rem}.mc-datatable__filters{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.mc-datatable__selection{display:flex;align-items:center;gap:.5rem;padding-bottom:1rem;font-size:.875rem;line-height:1.2857142857;color:var(--color-grey-800, #333333)}.mc-datatable__selection-btn{background:none;border:none;padding:0;cursor:pointer;font-family:inherit;font-size:.875rem;color:var(--link-color-text-accent, #117f03);text-decoration:underline}.skeleton-cell{background-color:#cdd4d8;border-radius:4px;display:inline-block;height:var(--skeleton-height, 1.25rem);overflow:hidden;position:relative;width:var(--skeleton-width, 100%)}.skeleton-cell:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,#fff0 0,#fff3 20%,#ffffff80 60%,#fff0);animation:skeleton-animation 2s infinite;content:\"\"}@keyframes skeleton-animation{to{transform:translate(100%)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MozPaginationComponent, selector: "moz-pagination", inputs: ["id", "compact", "options", "selectLabel", "buttonAppearance", "buttonSize", "value"], outputs: ["updateValue"] }, { kind: "component", type: MozDataTableHeaderComponent, selector: "th[moz-datatable-header]", inputs: ["label", "value", "sortable", "sortDirection", "sortDirectionDefault", "additionalProps", "selectable", "expandable", "e2eSelector", "labelTemplate", "headerConfig"], outputs: ["updateSortDirection"] }, { kind: "component", type: MozDataTableRowComponent, selector: "tr[moz-datatable-row]", inputs: ["clickable", "expandable", "expanded", "selected"] }, { kind: "component", type: MozDataTableRowExpandComponent, selector: "tr[moz-datatable-row-expand]", inputs: ["headers", "expandable", "selectable"] }, { kind: "component", type: MozDataTableExpandButtonComponent, selector: "button[moz-datatable-expand-button]", inputs: ["label", "expanded"] }, { kind: "component", type: MozDataTableCellComponent, selector: "td[moz-datatable-cell], th[moz-datatable-cell]", inputs: ["type", "value"] }, { kind: "component", type: MozDataTableEmptyComponent, selector: "moz-datatable-empty" }, { kind: "component", type: MozDataTableInfoComponent, selector: "moz-datatable-info", inputs: ["label", "labelItems", "start", "end", "total"] }, { kind: "component", type: MozDataTableRowsPerPageComponent, selector: "moz-datatable-rows-per-page", inputs: ["label", "loading", "options", "value"], outputs: ["updateValue"] }, { kind: "component", type: MozDataTableSelectionBarComponent, selector: "moz-datatable-selection-bar", inputs: ["selectAll", "labelPageSelected", "labelAllItemsSelected", "labelButtonSelectAll", "labelButtonClearSelection"], outputs: ["selectAllRows", "clearAllRows"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8689
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozDataTableComponent, isStandalone: true, selector: "moz-datatable", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, indexKey: { classPropertyName: "indexKey", publicName: "indexKey", isSignal: true, isRequired: false, transformFunction: null }, pageable: { classPropertyName: "pageable", publicName: "pageable", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageOptions: { classPropertyName: "itemsPerPageOptions", publicName: "itemsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageLabel: { classPropertyName: "itemsPerPageLabel", publicName: "itemsPerPageLabel", isSignal: true, isRequired: false, transformFunction: null }, countLabel: { classPropertyName: "countLabel", publicName: "countLabel", isSignal: true, isRequired: false, transformFunction: null }, infoLabelItems: { classPropertyName: "infoLabelItems", publicName: "infoLabelItems", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, sortMultiple: { classPropertyName: "sortMultiple", publicName: "sortMultiple", isSignal: true, isRequired: false, transformFunction: null }, sortMode: { classPropertyName: "sortMode", publicName: "sortMode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hidePageCount: { classPropertyName: "hidePageCount", publicName: "hidePageCount", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, fixedHeader: { classPropertyName: "fixedHeader", publicName: "fixedHeader", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectionbar: { classPropertyName: "selectionbar", publicName: "selectionbar", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, labelButtonClearSelection: { classPropertyName: "labelButtonClearSelection", publicName: "labelButtonClearSelection", isSignal: true, isRequired: false, transformFunction: null }, selectPage: { classPropertyName: "selectPage", publicName: "selectPage", isSignal: true, isRequired: false, transformFunction: null }, labelPageSelected: { classPropertyName: "labelPageSelected", publicName: "labelPageSelected", isSignal: true, isRequired: false, transformFunction: null }, labelAllItemsSelected: { classPropertyName: "labelAllItemsSelected", publicName: "labelAllItemsSelected", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, labelButtonSelectAll: { classPropertyName: "labelButtonSelectAll", publicName: "labelButtonSelectAll", isSignal: true, isRequired: false, transformFunction: null }, clickableRows: { classPropertyName: "clickableRows", publicName: "clickableRows", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expanderAccessibleLabel: { classPropertyName: "expanderAccessibleLabel", publicName: "expanderAccessibleLabel", isSignal: true, isRequired: false, transformFunction: null }, expandableList: { classPropertyName: "expandableList", publicName: "expandableList", isSignal: true, isRequired: false, transformFunction: null }, dataKeyExpand: { classPropertyName: "dataKeyExpand", publicName: "dataKeyExpand", isSignal: true, isRequired: false, transformFunction: null }, showExpandableContent: { classPropertyName: "showExpandableContent", publicName: "showExpandableContent", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, accessibilityLabels: { classPropertyName: "accessibilityLabels", publicName: "accessibilityLabels", isSignal: true, isRequired: false, transformFunction: null }, e2eSelector: { classPropertyName: "e2eSelector", publicName: "e2eSelector", isSignal: true, isRequired: false, transformFunction: null }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", sortMultipleChange: "sortMultipleChange", currentPageChange: "currentPageChange", itemsPerPageChange: "itemsPerPageChange", changed: "changed", clickRow: "clickRow", selectRow: "selectRow", unselectRow: "unselectRow", selectAllRows: "selectAllRows", unselectAllRows: "unselectAllRows", selectMultipleRows: "selectMultipleRows", unselectMultipleRows: "unselectMultipleRows", selectPageChange: "selectPageChange", selectAllChange: "selectAllChange", selectionChange: "selectionChange", expandRow: "expandRow", retractRow: "retractRow" }, host: { properties: { "class": "hostClasses()", "style.--datatable-head-z-index": "zIndex()" } }, queries: [{ propertyName: "columns", predicate: MozDataTableColumnComponent, descendants: true, isSignal: true }, { propertyName: "cellTemplates", predicate: MozDataTableCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "headerTemplates", predicate: MozDataTableHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "expandTemplate", first: true, predicate: MozDataTableExpandTemplateDirective, descendants: true, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: MozDataTableNoDataTemplateDirective, descendants: true, isSignal: true }, { propertyName: "headersTemplate", first: true, predicate: MozDataTableHeadersTemplateDirective, descendants: true, isSignal: true }, { propertyName: "bodyTemplate", first: true, predicate: MozDataTableBodyTemplateDirective, descendants: true, isSignal: true }, { propertyName: "customSelectionbar", first: true, predicate: MozDataTableSelectionbarDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Topbar -->\n<ng-content select=\"moz-datatable-top, [mozDataTableTopbar]\" />\n\n<!-- Selection bar -->\n<ng-content select=\"[mozDataTableSelectionbar]\" />\n@if (!customSelectionbar() && selectionbar() && multiSelectionPage()) {\n <moz-datatable-selection-bar\n [selectAll]=\"getSelectAll()\"\n [labelPageSelected]=\"getLabelSelectedPage()\"\n [labelAllItemsSelected]=\"getLabelAllItemsSelected()\"\n [labelButtonSelectAll]=\"getLabelButtonSelectAll()\"\n [labelButtonClearSelection]=\"labelButtonClearSelection()\"\n (selectAllRows)=\"onSelectAllFromBar()\"\n (clearAllRows)=\"clearAll()\"\n />\n}\n\n<div class=\"mc-datatable__container\">\n <!-- MAIN -->\n <div class=\"mc-datatable__main\" [style.max-height]=\"maxHeight()\">\n @if (items().length === 0 && !loading()) {\n <moz-datatable-empty>\n @if (noDataTemplate(); as noData) {\n <ng-container [ngTemplateOutlet]=\"noData.template\" />\n }\n </moz-datatable-empty>\n } @else {\n <table [class]=\"!nested() ? 'mc-datatable__table' : 'mc-datatable__subtable'\">\n <thead>\n <tr>\n @if (headersTemplate(); as customHeaders) {\n <ng-container [ngTemplateOutlet]=\"customHeaders.template\" />\n } @else {\n <!-- Selectable -->\n @if (selectable()) {\n <th moz-datatable-header [selectable]=\"true\">\n <div class=\"checkbox\">\n <input\n id=\"masterCheckbox\"\n type=\"checkbox\"\n class=\"checkbox__input\"\n aria-label=\"Select all rows\"\n [checked]=\"pageState()\"\n [indeterminate]=\"isPageIndeterminate()\"\n [disabled]=\"!items().length || (loading() ?? false)\"\n (change)=\"onClickMasterCheckbox($event)\"\n />\n </div>\n </th>\n }\n\n <!-- Expandable -->\n @if (expandable()) {\n <th moz-datatable-header [expandable]=\"true\"></th>\n }\n\n <!-- Headers from configuration -->\n @for (header of getHeaders(); track $index) {\n <th\n moz-datatable-header\n [label]=\"header.label\"\n [value]=\"header.value\"\n [sortable]=\"header.sortable ?? false\"\n [sortDirection]=\"getSortDirection(header.value)\"\n [additionalProps]=\"header.additionalProps\"\n [labelTemplate]=\"headerTemplateFor(header.value)?.template ?? null\"\n [headerConfig]=\"header\"\n (updateSortDirection)=\"updateSort($event)\"\n ></th>\n }\n }\n </tr>\n </thead>\n <tbody>\n @if (bodyTemplate(); as customBody) {\n <ng-container [ngTemplateOutlet]=\"customBody.template\" />\n } @else {\n @if (!items().length && loading()) {\n <!-- Loading skeleton -->\n @for (n of skeletonRows(); track n) {\n <tr moz-datatable-row>\n @if (selectable()) {\n <td moz-datatable-cell type=\"checkbox\">\n <span class=\"skeleton-cell\"> </span>\n </td>\n }\n @if (expandable()) {\n <td moz-datatable-cell type=\"expand\">\n <span class=\"skeleton-cell\"> </span>\n </td>\n }\n @for (header of getHeaders(); track $index) {\n <td><span class=\"skeleton-cell\"> </span></td>\n }\n </tr>\n }\n } @else {\n @for (item of items(); track trackRow($index, item); let rowIndex = $index) {\n <tr\n moz-datatable-row\n [selected]=\"isSelected(item)\"\n [class]=\"rowClass()\"\n [clickable]=\"getClickable()\"\n [expandable]=\"expandable()\"\n [expanded]=\"isRowExpanded(item, rowIndex)\"\n [attr.tabindex]=\"getClickable() ? 0 : null\"\n (keyup.enter)=\"getClickable() && onClickRow(item, rowIndex)\"\n >\n <!-- Cell (Selectable) -->\n @if (selectable()) {\n <td moz-datatable-cell type=\"checkbox\">\n <div class=\"checkbox\">\n <input\n type=\"checkbox\"\n class=\"checkbox__input\"\n [attr.aria-label]=\"'Select rows n\u00B0' + rowIndex\"\n [checked]=\"isSelected(item)\"\n [disabled]=\"loading() ?? false\"\n (click)=\"onSelectRowWithShift($event, item, rowIndex)\"\n />\n </div>\n </td>\n }\n\n <!-- Cell (Expandable) -->\n @if (expandable()) {\n <td moz-datatable-cell type=\"expand\">\n @if (displayExpandButton(rowIndex)) {\n <button\n moz-datatable-expand-button\n [label]=\"accessibilityLabels()?.expandButtonLabel\"\n [expanded]=\"isRowExpanded(item, rowIndex)\"\n [disabled]=\"loading() ?? false\"\n (click)=\"onClickExpandButton(item, rowIndex)\"\n ></button>\n }\n </td>\n }\n\n <!-- Cells from data -->\n @for (header of getHeaders(); track $index) {\n <td\n moz-datatable-cell\n [class]=\"header.class\"\n [value]=\"header.value\"\n [type]=\"header.type\"\n (click)=\"getClickable() && onClickRow(item, rowIndex)\"\n >\n @if (loading()) {\n <span class=\"skeleton-cell\"> </span>\n } @else if (cellTemplateFor(header.value); as cellTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"cellTemplate.template\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n item: item,\n index: rowIndex,\n rowIndex: rowIndex,\n }\"\n />\n } @else {\n {{ displayValue(item, header.value) }}\n }\n </td>\n }\n </tr>\n\n <!-- Expand row -->\n @if (isRowExpanded(item, rowIndex)) {\n <tr\n moz-datatable-row-expand\n [headers]=\"getHeaders().length\"\n [expandable]=\"expandable()\"\n [selectable]=\"selectable()\"\n >\n @if (expandTemplate(); as expand) {\n <ng-container\n [ngTemplateOutlet]=\"expand.template\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n item: item,\n index: rowIndex,\n rowIndex: rowIndex,\n }\"\n />\n }\n </tr>\n }\n }\n }\n }\n </tbody>\n </table>\n }\n </div>\n\n <!-- FOOTER -->\n @if (pageable()) {\n <div class=\"mc-datatable__footer\">\n <!-- DataTable Rows Per Page Selector -->\n <moz-datatable-rows-per-page\n [label]=\"itemsPerPageLabel()\"\n [value]=\"getItemsPerPage()\"\n [loading]=\"loading() ?? false\"\n [options]=\"getItemsPerPageOptions()\"\n (updateValue)=\"updatePageSize($event)\"\n />\n\n <!-- DataTable Info (count) -->\n @if (!hidePageCount()) {\n <moz-datatable-info\n [label]=\"countLabel()\"\n [labelItems]=\"infoLabelItems()\"\n [start]=\"getPageCountInfos().start\"\n [end]=\"getPageCountInfos().end\"\n [total]=\"getPageCountInfos().total\"\n />\n }\n\n <!-- DataTable Pagination -->\n <div class=\"mc-datatable__pagination\">\n <moz-pagination\n [id]=\"accessibilityLabels()?.paginationAriaLabel ?? 'datatable-pagination'\"\n [selectLabel]=\"accessibilityLabels()?.paginationAriaLabel ?? 'Select page'\"\n [options]=\"getOptions()\"\n [value]=\"getCurrentPage()\"\n buttonSize=\"s\"\n (updateValue)=\"updateCurrentPage($event)\"\n />\n </div>\n </div>\n }\n</div>\n", styles: [".mc-checkbox,.checkbox{align-items:center;display:flex;gap:.5rem;padding:.375rem}.mc-checkbox--indented{margin-left:1.75rem}.mc-checkbox__label{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer}.mc-checkbox__input,.checkbox__input{appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, .125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;height:1.25rem;width:1.25rem;position:relative}.mc-checkbox__input:after,.checkbox__input:after{content:\"\";position:absolute;inset:0;background-color:var(--forms-color-icon-inverse, #ffffff);opacity:0;transform:scale(.6);transition:opacity .15s ease,transform .15s ease;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:hover,.checkbox__input:hover{border-color:var(--forms-color-border-hover, #4d4d4d)}.mc-checkbox__input:focus-visible,.checkbox__input: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-checkbox__input:checked:after,.checkbox__input:checked:after{opacity:1;transform:scale(1)}.mc-checkbox__input:indeterminate:after,.checkbox__input:indeterminate:after{opacity:1;transform:scale(1);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate{background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate,.mc-checkbox__input:disabled,.checkbox__input:disabled{border-color:transparent}.mc-checkbox__input:disabled,.checkbox__input:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed}.mc-checkbox__input:disabled:checked:after,.checkbox__input:disabled:checked:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled:indeterminate:after,.checkbox__input:disabled:indeterminate:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled+.mc-checkbox__label,.checkbox__input:disabled+.mc-checkbox__label{color:var(--forms-color-text-disabled, #737373);cursor:not-allowed}.mc-checkbox__input:not(:disabled):checked:hover,.checkbox__input:not(:disabled):checked:hover,.mc-checkbox__input:not(:disabled):indeterminate:hover,.checkbox__input:not(:disabled):indeterminate:hover{background-color:var(--forms-color-background-checked-hover, #006902)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate),.is-invalid.checkbox__input:not(:checked,:indeterminate){border-color:var(--forms-color-border-invalid, #ea302d)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate):hover,.is-invalid.checkbox__input:not(:checked,:indeterminate):hover{border-color:var(--forms-color-border-invalid-hover, #c61112)}.mc-datatable{display:block;font-family:LeroyMerlin,sans-serif;box-sizing:border-box}.mc-datatable *,.mc-datatable :after,.mc-datatable :before{box-sizing:inherit}.mc-datatable__container{border-radius:4px;border:1px solid #cdd4d8;background-color:var(--color-datatable-container-background, #e6e6e6);overflow:hidden}.mc-datatable__main{scrollbar-color:var(--color-grey-600, #666666) var(--color-grey-100, #e6e6e6);scrollbar-width:thin;overflow:auto;overflow-y:auto}.mc-datatable__main::-webkit-scrollbar{background-color:var(--color-grey-100, #e6e6e6);height:.5rem;width:.5rem}.mc-datatable__main::-webkit-scrollbar-track{background:var(--color-grey-100, #e6e6e6)}.mc-datatable__main::-webkit-scrollbar-thumb{background:var(--color-grey-600, #666666)}.mc-datatable__table tr,.mc-datatable thead th,.mc-datatable thead td{height:2.9375rem}.mc-datatable__table{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%}.mc-datatable__table>thead,.mc-datatable__table>tbody{background-color:var(--color-grey-000, #ffffff)}.mc-datatable__table th,.mc-datatable__table td{border-bottom:1px solid var(--color-grey-300, #b3b3b3);text-align:left;vertical-align:middle;padding-right:1rem;padding-left:1rem}.mc-datatable thead th,.mc-datatable thead td{font-weight:600;font-size:.75rem;line-height:1.3333333333;color:var(--color-datatable-thead-font, #191919);text-transform:uppercase}.mc-datatable__head small,.mc-datatable__cell small{font-size:.6815rem;line-height:1.2839325018;color:var(--color-grey-700, #4d4d4d);display:block;font-weight:400;text-transform:none}.mc-datatable tbody tr.selected{background-color:var(--color-datatable-cell-background-selected, var(--color-background-accent, #ebf5de))}.mc-datatable tbody th,.mc-datatable tbody td{font-size:.875rem;line-height:1.2857142857;color:var(--color-datatable-cell-font, #191919)}.mc-datatable__row--clickable{cursor:pointer}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable{height:0}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable .mc-datatable__row-inner{overflow:hidden;max-height:0}.mc-datatable__row-parent.mc-datatable__row-parent--expanded+.mc-datatable__row-expandable .mc-datatable__row-inner{max-height:100%}.mc-datatable__row-expandable>td{padding:0;border-bottom:0}.mc-datatable__row-expandable--offset-1 table th:first-child,.mc-datatable__row-expandable--offset-1 table td:first-child{padding-left:4.25rem}.mc-datatable__row-expandable--offset-2 table th:first-child,.mc-datatable__row-expandable--offset-2 table td:first-child{padding-left:7.75rem}.mc-datatable__cell-checkbox{width:3.25rem}.mc-datatable__cell-button{width:3.5rem}.mc-datatable__cell-field{min-width:9.375rem}td.mc-datatable__cell-number{text-align:right}.mc-datatable--s .mc-datatable__table tr,.mc-datatable--s .mc-datatable thead th,.mc-datatable--s .mc-datatable thead td{height:2.4375rem}.mc-datatable--l .mc-datatable__table tr,.mc-datatable--l .mc-datatable thead th,.mc-datatable--l .mc-datatable thead td{height:3.4375rem}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky-header .mc-datatable__table>thead{box-shadow:0 4px 20px #19191933;top:0;z-index:var(--datatable-head-z-index, 11)}.mc-datatable--sticky .mc-datatable__table>tbody>tr:last-child>th,.mc-datatable--sticky .mc-datatable__table>tbody>tr:last-child>td,.mc-datatable--sticky-header .mc-datatable__table>tbody>tr:last-child>th,.mc-datatable--sticky-header .mc-datatable__table>tbody>tr:last-child>td{border-bottom:transparent}.mc-datatable--sticky .mc-datatable__footer,.mc-datatable--sticky-header .mc-datatable__footer{border-top:1px solid var(--color-grey-300, #b3b3b3);position:relative;z-index:var(--datatable-sticky-footer-z-index, 3)}.mc-datatable--sticky-header .mc-datatable__main{overflow-y:auto}.mc-datatable--sticky-header .mc-datatable__table>thead{position:sticky}.mc-datatable--overflow-visible .mc-datatable__container,.mc-datatable--overflow-visible .mc-datatable__main{overflow:visible}.mc-datatable__btn{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;position:relative;isolation:isolate;align-items:center;background-color:transparent;display:flex}.mc-datatable__btn:after{border-radius:4px;box-shadow:0 0 0 0 transparent;content:\"\";display:block;pointer-events:none;position:absolute;inset:0;z-index:-1;transition:box-shadow .2s ease}.mc-datatable__btn-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__btn:focus{outline:none}.mc-datatable__btn:focus:after{box-shadow:0 0 0 .125rem var(--color-focus-gap, #ffffff),0 0 0 .25rem var(--color-focus-border, #0b96cc)}.mc-datatable__btn:disabled .mc-datatable__btn-icon{border-color:transparent;fill:var(--color-button-bordered-disabled-font, #666666);cursor:not-allowed}.mc-datatable__sort{padding:.25rem;font-weight:600;font-size:.75rem;line-height:1.3333333333;color:var(--color-datatable-thead-font, #191919);text-transform:uppercase;align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.mc-datatable__sort-arrow{align-items:center;display:flex;flex-direction:column;justify-content:space-around;margin-left:.5rem;fill:#666}.mc-datatable__options{width:1.5rem;height:1.5rem}.mc-datatable .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__footer{align-items:center;background-color:var(--color-grey-000, #ffffff);display:flex;padding:.75rem 1rem;gap:1rem}@media screen and (max-width:679px){.mc-datatable__footer{flex-direction:column}}.mc-datatable__select{display:flex;align-items:center;gap:.5rem}.mc-datatable__select-label{font-size:.875rem;line-height:1.2857142857;color:var(--color-grey-800, #333333);flex-shrink:0}.mc-datatable__count{font-size:.75rem;line-height:1.3333333333;color:var(--color-grey-600, #666666)}.mc-datatable__pagination{margin-left:auto}.mc-datatable__subtable{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%;background-color:var(--color-datatable-subtable-background, #e6e6e6)}.mc-datatable__subtable th,.mc-datatable__subtable td{border-bottom-color:var(--color-datatable-subtable-border, #b3b3b3)}.mc-datatable__subtable thead th,.mc-datatable__subtable thead td{font-size:.75rem;line-height:1.3333333333;color:var(--color-datatable-subtable-font, #000000)}.mc-datatable__subtable tbody th,.mc-datatable__subtable tbody td{color:var(--color-datatable-subtable-font, #000000)}.mc-datatable__empty{font-size:1rem;line-height:1.375;align-items:center;background-color:var(--color-datatable-empty-background, #e6e6e6);color:var(--color-datatable-empty-color, #666666);display:flex;flex-direction:column;gap:1rem;height:18.1875rem;justify-content:center;text-align:center}.mc-datatable__empty p{margin:0 auto}.mc-datatable__empty strong{font-size:1.125rem;line-height:1.3333333333}.mc-datatable__header{display:block}.mc-datatable__topbar,.mc-datatable__filters{padding-bottom:1rem}.mc-datatable__topbar{justify-content:space-between}.mc-datatable__topbar,.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{display:flex;gap:1rem}.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{flex-wrap:wrap}.mc-datatable__topbar-edition{flex-shrink:0;gap:.25rem}.mc-datatable__topbar-actions{align-items:center;justify-content:flex-end;margin-left:auto;gap:.5rem}.mc-datatable__filters{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.mc-datatable__selection{display:flex;align-items:center;gap:.5rem;padding-bottom:1rem;font-size:.875rem;line-height:1.2857142857;color:var(--color-grey-800, #333333)}.mc-datatable__selection-btn{background:none;border:none;padding:0;cursor:pointer;font-family:inherit;font-size:.875rem;color:var(--link-color-text-accent, #117f03);text-decoration:underline}.skeleton-cell{background-color:#cdd4d8;border-radius:4px;display:inline-block;height:var(--skeleton-height, 1.25rem);overflow:hidden;position:relative;width:var(--skeleton-width, 100%)}.skeleton-cell:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,#fff0 0,#fff3 20%,#ffffff80 60%,#fff0);animation:skeleton-animation 2s infinite;content:\"\"}@keyframes skeleton-animation{to{transform:translate(100%)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MozPaginationComponent, selector: "moz-pagination", inputs: ["id", "compact", "options", "selectLabel", "buttonAppearance", "buttonSize", "value"], outputs: ["updateValue"] }, { kind: "component", type: MozDataTableHeaderComponent, selector: "th[moz-datatable-header]", inputs: ["label", "value", "sortable", "sortDirection", "sortDirectionDefault", "additionalProps", "selectable", "expandable", "e2eSelector", "labelTemplate", "headerConfig"], outputs: ["updateSortDirection"] }, { kind: "component", type: MozDataTableRowComponent, selector: "tr[moz-datatable-row]", inputs: ["clickable", "expandable", "expanded", "selected"] }, { kind: "component", type: MozDataTableRowExpandComponent, selector: "tr[moz-datatable-row-expand]", inputs: ["headers", "expandable", "selectable"] }, { kind: "component", type: MozDataTableExpandButtonComponent, selector: "button[moz-datatable-expand-button]", inputs: ["label", "expanded"] }, { kind: "component", type: MozDataTableCellComponent, selector: "td[moz-datatable-cell], th[moz-datatable-cell]", inputs: ["type", "value"] }, { kind: "component", type: MozDataTableEmptyComponent, selector: "moz-datatable-empty" }, { kind: "component", type: MozDataTableInfoComponent, selector: "moz-datatable-info", inputs: ["label", "labelItems", "start", "end", "total"] }, { kind: "component", type: MozDataTableRowsPerPageComponent, selector: "moz-datatable-rows-per-page", inputs: ["label", "loading", "options", "value"], outputs: ["updateValue"] }, { kind: "component", type: MozDataTableSelectionBarComponent, selector: "moz-datatable-selection-bar", inputs: ["selectAll", "labelPageSelected", "labelAllItemsSelected", "labelButtonSelectAll", "labelButtonClearSelection"], outputs: ["selectAllRows", "clearAllRows"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8690
8690
|
}
|
|
8691
8691
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozDataTableComponent, decorators: [{
|
|
8692
8692
|
type: Component,
|
|
@@ -8705,7 +8705,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
8705
8705
|
], host: {
|
|
8706
8706
|
'[class]': 'hostClasses()',
|
|
8707
8707
|
'[style.--datatable-head-z-index]': 'zIndex()',
|
|
8708
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- Topbar -->\n<ng-content select=\"moz-datatable-top, [mozDataTableTopbar]\" />\n\n<!-- Selection bar -->\n<ng-content select=\"[mozDataTableSelectionbar]\" />\n@if (!customSelectionbar() && selectionbar() && multiSelectionPage()) {\n <moz-datatable-selection-bar\n [selectAll]=\"getSelectAll()\"\n [labelPageSelected]=\"getLabelSelectedPage()\"\n [labelAllItemsSelected]=\"getLabelAllItemsSelected()\"\n [labelButtonSelectAll]=\"getLabelButtonSelectAll()\"\n [labelButtonClearSelection]=\"labelButtonClearSelection()\"\n (selectAllRows)=\"onSelectAllFromBar()\"\n (clearAllRows)=\"clearAll()\"\n />\n}\n\n<div class=\"mc-datatable__container\">\n <!-- MAIN -->\n <div class=\"mc-datatable__main\" [style.max-height]=\"maxHeight()\">\n @if (items().length === 0 && !loading()) {\n <moz-datatable-empty>\n @if (noDataTemplate(); as noData) {\n <ng-container [ngTemplateOutlet]=\"noData.template\" />\n }\n </moz-datatable-empty>\n } @else {\n <table [class]=\"!nested() ? 'mc-datatable__table' : 'mc-datatable__subtable'\">\n <thead>\n <tr>\n @if (headersTemplate(); as customHeaders) {\n <ng-container [ngTemplateOutlet]=\"customHeaders.template\" />\n } @else {\n <!-- Selectable -->\n @if (selectable()) {\n <th moz-datatable-header [selectable]=\"true\">\n <div class=\"checkbox\">\n <input\n id=\"masterCheckbox\"\n type=\"checkbox\"\n class=\"checkbox__input\"\n aria-label=\"Select all rows\"\n [checked]=\"pageState()\"\n [indeterminate]=\"isPageIndeterminate()\"\n [disabled]=\"!items().length || (loading() ?? false)\"\n (change)=\"onClickMasterCheckbox($event)\"\n />\n </div>\n </th>\n }\n\n <!-- Expandable -->\n @if (expandable()) {\n <th moz-datatable-header [expandable]=\"true\"></th>\n }\n\n <!-- Headers from configuration -->\n @for (header of getHeaders(); track $index) {\n <th\n moz-datatable-header\n [label]=\"header.label\"\n [value]=\"header.value\"\n [sortable]=\"header.sortable ?? false\"\n [sortDirection]=\"getSortDirection(header.value)\"\n [additionalProps]=\"header.additionalProps\"\n [labelTemplate]=\"headerTemplateFor(header.value)?.template ?? null\"\n [headerConfig]=\"header\"\n (updateSortDirection)=\"updateSort($event)\"\n ></th>\n }\n }\n </tr>\n </thead>\n <tbody>\n @if (bodyTemplate(); as customBody) {\n <ng-container [ngTemplateOutlet]=\"customBody.template\" />\n } @else {\n @if (!items().length && loading()) {\n <!-- Loading skeleton -->\n @for (n of skeletonRows(); track n) {\n <tr moz-datatable-row>\n @if (selectable()) {\n <td moz-datatable-cell type=\"checkbox\">\n <span class=\"skeleton-cell\"> </span>\n </td>\n }\n @if (expandable()) {\n <td moz-datatable-cell type=\"expand\">\n <span class=\"skeleton-cell\"> </span>\n </td>\n }\n @for (header of getHeaders(); track $index) {\n <td><span class=\"skeleton-cell\"> </span></td>\n }\n </tr>\n }\n } @else {\n @for (item of items(); track trackRow($index, item); let rowIndex = $index) {\n <tr\n moz-datatable-row\n [selected]=\"isSelected(item)\"\n [class]=\"rowClass()\"\n [clickable]=\"getClickable()\"\n [expandable]=\"expandable()\"\n [expanded]=\"isRowExpanded(item, rowIndex)\"\n [attr.tabindex]=\"getClickable() ? 0 : null\"\n (keyup.enter)=\"getClickable() && onClickRow(item, rowIndex)\"\n >\n <!-- Cell (Selectable) -->\n @if (selectable()) {\n <td moz-datatable-cell type=\"checkbox\">\n <div class=\"checkbox\">\n <input\n type=\"checkbox\"\n class=\"checkbox__input\"\n [attr.aria-label]=\"'Select rows n\u00B0' + rowIndex\"\n [checked]=\"isSelected(item)\"\n [disabled]=\"loading() ?? false\"\n (click)=\"onSelectRowWithShift($event, item, rowIndex)\"\n />\n </div>\n </td>\n }\n\n <!-- Cell (Expandable) -->\n @if (expandable()) {\n <td moz-datatable-cell type=\"expand\">\n @if (displayExpandButton(rowIndex)) {\n <button\n moz-datatable-expand-button\n [label]=\"accessibilityLabels()?.expandButtonLabel\"\n [expanded]=\"isRowExpanded(item, rowIndex)\"\n [disabled]=\"loading() ?? false\"\n (click)=\"onClickExpandButton(item, rowIndex)\"\n ></button>\n }\n </td>\n }\n\n <!-- Cells from data -->\n @for (header of getHeaders(); track $index) {\n <td\n moz-datatable-cell\n [class]=\"header.class\"\n [value]=\"header.value\"\n [type]=\"header.type\"\n (click)=\"getClickable() && onClickRow(item, rowIndex)\"\n >\n @if (loading()) {\n <span class=\"skeleton-cell\"> </span>\n } @else if (cellTemplateFor(header.value); as cellTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"cellTemplate.template\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n item: item,\n index: rowIndex,\n rowIndex: rowIndex,\n }\"\n />\n } @else {\n {{ displayValue(item, header.value) }}\n }\n </td>\n }\n </tr>\n\n <!-- Expand row -->\n @if (isRowExpanded(item, rowIndex)) {\n <tr\n moz-datatable-row-expand\n [headers]=\"getHeaders().length\"\n [expandable]=\"expandable()\"\n [selectable]=\"selectable()\"\n >\n @if (expandTemplate(); as expand) {\n <ng-container\n [ngTemplateOutlet]=\"expand.template\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n item: item,\n index: rowIndex,\n rowIndex: rowIndex,\n }\"\n />\n }\n </tr>\n }\n }\n }\n }\n </tbody>\n </table>\n }\n </div>\n\n <!-- FOOTER -->\n @if (pageable()) {\n <div class=\"mc-datatable__footer\">\n <!-- DataTable Rows Per Page Selector -->\n <moz-datatable-rows-per-page\n [label]=\"itemsPerPageLabel()\"\n [value]=\"getItemsPerPage()\"\n [loading]=\"loading() ?? false\"\n [options]=\"getItemsPerPageOptions()\"\n (updateValue)=\"updatePageSize($event)\"\n />\n\n <!-- DataTable Info (count) -->\n @if (!hidePageCount()) {\n <moz-datatable-info\n [label]=\"countLabel()\"\n [labelItems]=\"infoLabelItems()\"\n [start]=\"getPageCountInfos().start\"\n [end]=\"getPageCountInfos().end\"\n [total]=\"getPageCountInfos().total\"\n />\n }\n\n <!-- DataTable Pagination -->\n <div class=\"mc-datatable__pagination\">\n <moz-pagination\n [id]=\"accessibilityLabels()?.paginationAriaLabel ?? 'datatable-pagination'\"\n [selectLabel]=\"accessibilityLabels()?.paginationAriaLabel ?? 'Select page'\"\n [options]=\"getOptions()\"\n [value]=\"getCurrentPage()\"\n buttonSize=\"s\"\n (updateValue)=\"updateCurrentPage($event)\"\n />\n </div>\n </div>\n }\n</div>\n", styles: [".mc-checkbox,.checkbox{align-items:center;display:flex;gap:.5rem;padding:.375rem}.mc-checkbox--indented{margin-left:1.75rem}.mc-checkbox__label{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer}.mc-checkbox__input,.checkbox__input{appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, .125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;height:1.25rem;width:1.25rem;position:relative}.mc-checkbox__input:after,.checkbox__input:after{content:\"\";position:absolute;inset:0;background-color:var(--forms-color-icon-inverse, #ffffff);opacity:0;transform:scale(.6);transition:.15s ease}.mc-checkbox__input:hover,.checkbox__input:hover{border-color:var(--forms-color-border-hover, #4d4d4d)}.mc-checkbox__input:focus-visible,.checkbox__input: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-checkbox__input:checked:after,.checkbox__input:checked:after{opacity:1;transform:scale(1);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:indeterminate:after,.checkbox__input:indeterminate:after{opacity:1;transform:scale(1);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate{background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate,.mc-checkbox__input:disabled,.checkbox__input:disabled{border-color:transparent}.mc-checkbox__input:disabled,.checkbox__input:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed}.mc-checkbox__input:disabled:checked:after,.checkbox__input:disabled:checked:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled:indeterminate:after,.checkbox__input:disabled:indeterminate:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled+.mc-checkbox__label,.checkbox__input:disabled+.mc-checkbox__label{color:var(--forms-color-text-disabled, #737373);cursor:not-allowed}.mc-checkbox__input:not(:disabled):checked:hover,.checkbox__input:not(:disabled):checked:hover,.mc-checkbox__input:not(:disabled):indeterminate:hover,.checkbox__input:not(:disabled):indeterminate:hover{background-color:var(--forms-color-background-checked-hover, #006902)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate),.is-invalid.checkbox__input:not(:checked,:indeterminate){border-color:var(--forms-color-border-invalid, #ea302d)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate):hover,.is-invalid.checkbox__input:not(:checked,:indeterminate):hover{border-color:var(--forms-color-border-invalid-hover, #c61112)}.mc-datatable{display:block;font-family:LeroyMerlin,sans-serif;box-sizing:border-box}.mc-datatable *,.mc-datatable :after,.mc-datatable :before{box-sizing:inherit}.mc-datatable__container{border-radius:4px;border:1px solid #cdd4d8;background-color:var(--color-datatable-container-background, #e6e6e6);overflow:hidden}.mc-datatable__main{scrollbar-color:var(--color-grey-600, #666666) var(--color-grey-100, #e6e6e6);scrollbar-width:thin;overflow:auto;overflow-y:auto}.mc-datatable__main::-webkit-scrollbar{background-color:var(--color-grey-100, #e6e6e6);height:.5rem;width:.5rem}.mc-datatable__main::-webkit-scrollbar-track{background:var(--color-grey-100, #e6e6e6)}.mc-datatable__main::-webkit-scrollbar-thumb{background:var(--color-grey-600, #666666)}.mc-datatable__table tr,.mc-datatable thead th,.mc-datatable thead td{height:2.9375rem}.mc-datatable__table{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%}.mc-datatable__table>thead,.mc-datatable__table>tbody{background-color:var(--color-grey-000, #ffffff)}.mc-datatable__table th,.mc-datatable__table td{border-bottom:1px solid var(--color-grey-300, #b3b3b3);text-align:left;vertical-align:middle;padding-right:1rem;padding-left:1rem}.mc-datatable thead th,.mc-datatable thead td{font-weight:600;font-size:.75rem;line-height:1.3333333333;color:var(--color-datatable-thead-font, #191919);text-transform:uppercase}.mc-datatable__head small,.mc-datatable__cell small{font-size:.6815rem;line-height:1.2839325018;color:var(--color-grey-700, #4d4d4d);display:block;font-weight:400;text-transform:none}.mc-datatable tbody tr.selected{background-color:var(--color-datatable-cell-background-selected, var(--color-background-accent, #ebf5de))}.mc-datatable tbody th,.mc-datatable tbody td{font-size:.875rem;line-height:1.2857142857;color:var(--color-datatable-cell-font, #191919)}.mc-datatable__row--clickable{cursor:pointer}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable{height:0}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable .mc-datatable__row-inner{overflow:hidden;max-height:0}.mc-datatable__row-parent.mc-datatable__row-parent--expanded+.mc-datatable__row-expandable .mc-datatable__row-inner{max-height:100%}.mc-datatable__row-expandable>td{padding:0;border-bottom:0}.mc-datatable__row-expandable--offset-1 table th:first-child,.mc-datatable__row-expandable--offset-1 table td:first-child{padding-left:4.25rem}.mc-datatable__row-expandable--offset-2 table th:first-child,.mc-datatable__row-expandable--offset-2 table td:first-child{padding-left:7.75rem}.mc-datatable__cell-checkbox{width:3.25rem}.mc-datatable__cell-button{width:3.5rem}.mc-datatable__cell-field{min-width:9.375rem}td.mc-datatable__cell-number{text-align:right}.mc-datatable--s .mc-datatable__table tr,.mc-datatable--s .mc-datatable thead th,.mc-datatable--s .mc-datatable thead td{height:2.4375rem}.mc-datatable--l .mc-datatable__table tr,.mc-datatable--l .mc-datatable thead th,.mc-datatable--l .mc-datatable thead td{height:3.4375rem}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky-header .mc-datatable__table>thead{box-shadow:0 4px 20px #19191933;top:0;z-index:var(--datatable-head-z-index, 11)}.mc-datatable--sticky .mc-datatable__table>tbody>tr:last-child>th,.mc-datatable--sticky .mc-datatable__table>tbody>tr:last-child>td,.mc-datatable--sticky-header .mc-datatable__table>tbody>tr:last-child>th,.mc-datatable--sticky-header .mc-datatable__table>tbody>tr:last-child>td{border-bottom:transparent}.mc-datatable--sticky .mc-datatable__footer,.mc-datatable--sticky-header .mc-datatable__footer{border-top:1px solid var(--color-grey-300, #b3b3b3);position:relative;z-index:var(--datatable-sticky-footer-z-index, 3)}.mc-datatable--sticky-header .mc-datatable__main{overflow-y:auto}.mc-datatable--sticky-header .mc-datatable__table>thead{position:sticky}.mc-datatable--overflow-visible .mc-datatable__container,.mc-datatable--overflow-visible .mc-datatable__main{overflow:visible}.mc-datatable__btn{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;position:relative;isolation:isolate;align-items:center;background-color:transparent;display:flex}.mc-datatable__btn:after{border-radius:4px;box-shadow:0 0 0 0 transparent;content:\"\";display:block;pointer-events:none;position:absolute;inset:0;z-index:-1;transition:box-shadow .2s ease}.mc-datatable__btn-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__btn:focus{outline:none}.mc-datatable__btn:focus:after{box-shadow:0 0 0 .125rem var(--color-focus-gap, #ffffff),0 0 0 .25rem var(--color-focus-border, #0b96cc)}.mc-datatable__btn:disabled .mc-datatable__btn-icon{border-color:transparent;fill:var(--color-button-bordered-disabled-font, #666666);cursor:not-allowed}.mc-datatable__sort{padding:.25rem;font-weight:600;font-size:.75rem;line-height:1.3333333333;color:var(--color-datatable-thead-font, #191919);text-transform:uppercase;align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.mc-datatable__sort-arrow{align-items:center;display:flex;flex-direction:column;justify-content:space-around;margin-left:.5rem;fill:#666}.mc-datatable__options{width:1.5rem;height:1.5rem}.mc-datatable .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__footer{align-items:center;background-color:var(--color-grey-000, #ffffff);display:flex;padding:.75rem 1rem;gap:1rem}@media screen and (max-width:679px){.mc-datatable__footer{flex-direction:column}}.mc-datatable__select{display:flex;align-items:center;gap:.5rem}.mc-datatable__select-label{font-size:.875rem;line-height:1.2857142857;color:var(--color-grey-800, #333333);flex-shrink:0}.mc-datatable__count{font-size:.75rem;line-height:1.3333333333;color:var(--color-grey-600, #666666)}.mc-datatable__pagination{margin-left:auto}.mc-datatable__subtable{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%;background-color:var(--color-datatable-subtable-background, #e6e6e6)}.mc-datatable__subtable th,.mc-datatable__subtable td{border-bottom-color:var(--color-datatable-subtable-border, #b3b3b3)}.mc-datatable__subtable thead th,.mc-datatable__subtable thead td{font-size:.75rem;line-height:1.3333333333;color:var(--color-datatable-subtable-font, #000000)}.mc-datatable__subtable tbody th,.mc-datatable__subtable tbody td{color:var(--color-datatable-subtable-font, #000000)}.mc-datatable__empty{font-size:1rem;line-height:1.375;align-items:center;background-color:var(--color-datatable-empty-background, #e6e6e6);color:var(--color-datatable-empty-color, #666666);display:flex;flex-direction:column;gap:1rem;height:18.1875rem;justify-content:center;text-align:center}.mc-datatable__empty p{margin:0 auto}.mc-datatable__empty strong{font-size:1.125rem;line-height:1.3333333333}.mc-datatable__header{display:block}.mc-datatable__topbar,.mc-datatable__filters{padding-bottom:1rem}.mc-datatable__topbar{justify-content:space-between}.mc-datatable__topbar,.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{display:flex;gap:1rem}.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{flex-wrap:wrap}.mc-datatable__topbar-edition{flex-shrink:0;gap:.25rem}.mc-datatable__topbar-actions{align-items:center;justify-content:flex-end;margin-left:auto;gap:.5rem}.mc-datatable__filters{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.mc-datatable__selection{display:flex;align-items:center;gap:.5rem;padding-bottom:1rem;font-size:.875rem;line-height:1.2857142857;color:var(--color-grey-800, #333333)}.mc-datatable__selection-btn{background:none;border:none;padding:0;cursor:pointer;font-family:inherit;font-size:.875rem;color:var(--link-color-text-accent, #117f03);text-decoration:underline}.skeleton-cell{background-color:#cdd4d8;border-radius:4px;display:inline-block;height:var(--skeleton-height, 1.25rem);overflow:hidden;position:relative;width:var(--skeleton-width, 100%)}.skeleton-cell:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,#fff0 0,#fff3 20%,#ffffff80 60%,#fff0);animation:skeleton-animation 2s infinite;content:\"\"}@keyframes skeleton-animation{to{transform:translate(100%)}}\n"] }]
|
|
8708
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- Topbar -->\n<ng-content select=\"moz-datatable-top, [mozDataTableTopbar]\" />\n\n<!-- Selection bar -->\n<ng-content select=\"[mozDataTableSelectionbar]\" />\n@if (!customSelectionbar() && selectionbar() && multiSelectionPage()) {\n <moz-datatable-selection-bar\n [selectAll]=\"getSelectAll()\"\n [labelPageSelected]=\"getLabelSelectedPage()\"\n [labelAllItemsSelected]=\"getLabelAllItemsSelected()\"\n [labelButtonSelectAll]=\"getLabelButtonSelectAll()\"\n [labelButtonClearSelection]=\"labelButtonClearSelection()\"\n (selectAllRows)=\"onSelectAllFromBar()\"\n (clearAllRows)=\"clearAll()\"\n />\n}\n\n<div class=\"mc-datatable__container\">\n <!-- MAIN -->\n <div class=\"mc-datatable__main\" [style.max-height]=\"maxHeight()\">\n @if (items().length === 0 && !loading()) {\n <moz-datatable-empty>\n @if (noDataTemplate(); as noData) {\n <ng-container [ngTemplateOutlet]=\"noData.template\" />\n }\n </moz-datatable-empty>\n } @else {\n <table [class]=\"!nested() ? 'mc-datatable__table' : 'mc-datatable__subtable'\">\n <thead>\n <tr>\n @if (headersTemplate(); as customHeaders) {\n <ng-container [ngTemplateOutlet]=\"customHeaders.template\" />\n } @else {\n <!-- Selectable -->\n @if (selectable()) {\n <th moz-datatable-header [selectable]=\"true\">\n <div class=\"checkbox\">\n <input\n id=\"masterCheckbox\"\n type=\"checkbox\"\n class=\"checkbox__input\"\n aria-label=\"Select all rows\"\n [checked]=\"pageState()\"\n [indeterminate]=\"isPageIndeterminate()\"\n [disabled]=\"!items().length || (loading() ?? false)\"\n (change)=\"onClickMasterCheckbox($event)\"\n />\n </div>\n </th>\n }\n\n <!-- Expandable -->\n @if (expandable()) {\n <th moz-datatable-header [expandable]=\"true\"></th>\n }\n\n <!-- Headers from configuration -->\n @for (header of getHeaders(); track $index) {\n <th\n moz-datatable-header\n [label]=\"header.label\"\n [value]=\"header.value\"\n [sortable]=\"header.sortable ?? false\"\n [sortDirection]=\"getSortDirection(header.value)\"\n [additionalProps]=\"header.additionalProps\"\n [labelTemplate]=\"headerTemplateFor(header.value)?.template ?? null\"\n [headerConfig]=\"header\"\n (updateSortDirection)=\"updateSort($event)\"\n ></th>\n }\n }\n </tr>\n </thead>\n <tbody>\n @if (bodyTemplate(); as customBody) {\n <ng-container [ngTemplateOutlet]=\"customBody.template\" />\n } @else {\n @if (!items().length && loading()) {\n <!-- Loading skeleton -->\n @for (n of skeletonRows(); track n) {\n <tr moz-datatable-row>\n @if (selectable()) {\n <td moz-datatable-cell type=\"checkbox\">\n <span class=\"skeleton-cell\"> </span>\n </td>\n }\n @if (expandable()) {\n <td moz-datatable-cell type=\"expand\">\n <span class=\"skeleton-cell\"> </span>\n </td>\n }\n @for (header of getHeaders(); track $index) {\n <td><span class=\"skeleton-cell\"> </span></td>\n }\n </tr>\n }\n } @else {\n @for (item of items(); track trackRow($index, item); let rowIndex = $index) {\n <tr\n moz-datatable-row\n [selected]=\"isSelected(item)\"\n [class]=\"rowClass()\"\n [clickable]=\"getClickable()\"\n [expandable]=\"expandable()\"\n [expanded]=\"isRowExpanded(item, rowIndex)\"\n [attr.tabindex]=\"getClickable() ? 0 : null\"\n (keyup.enter)=\"getClickable() && onClickRow(item, rowIndex)\"\n >\n <!-- Cell (Selectable) -->\n @if (selectable()) {\n <td moz-datatable-cell type=\"checkbox\">\n <div class=\"checkbox\">\n <input\n type=\"checkbox\"\n class=\"checkbox__input\"\n [attr.aria-label]=\"'Select rows n\u00B0' + rowIndex\"\n [checked]=\"isSelected(item)\"\n [disabled]=\"loading() ?? false\"\n (click)=\"onSelectRowWithShift($event, item, rowIndex)\"\n />\n </div>\n </td>\n }\n\n <!-- Cell (Expandable) -->\n @if (expandable()) {\n <td moz-datatable-cell type=\"expand\">\n @if (displayExpandButton(rowIndex)) {\n <button\n moz-datatable-expand-button\n [label]=\"accessibilityLabels()?.expandButtonLabel\"\n [expanded]=\"isRowExpanded(item, rowIndex)\"\n [disabled]=\"loading() ?? false\"\n (click)=\"onClickExpandButton(item, rowIndex)\"\n ></button>\n }\n </td>\n }\n\n <!-- Cells from data -->\n @for (header of getHeaders(); track $index) {\n <td\n moz-datatable-cell\n [class]=\"header.class\"\n [value]=\"header.value\"\n [type]=\"header.type\"\n (click)=\"getClickable() && onClickRow(item, rowIndex)\"\n >\n @if (loading()) {\n <span class=\"skeleton-cell\"> </span>\n } @else if (cellTemplateFor(header.value); as cellTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"cellTemplate.template\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n item: item,\n index: rowIndex,\n rowIndex: rowIndex,\n }\"\n />\n } @else {\n {{ displayValue(item, header.value) }}\n }\n </td>\n }\n </tr>\n\n <!-- Expand row -->\n @if (isRowExpanded(item, rowIndex)) {\n <tr\n moz-datatable-row-expand\n [headers]=\"getHeaders().length\"\n [expandable]=\"expandable()\"\n [selectable]=\"selectable()\"\n >\n @if (expandTemplate(); as expand) {\n <ng-container\n [ngTemplateOutlet]=\"expand.template\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n item: item,\n index: rowIndex,\n rowIndex: rowIndex,\n }\"\n />\n }\n </tr>\n }\n }\n }\n }\n </tbody>\n </table>\n }\n </div>\n\n <!-- FOOTER -->\n @if (pageable()) {\n <div class=\"mc-datatable__footer\">\n <!-- DataTable Rows Per Page Selector -->\n <moz-datatable-rows-per-page\n [label]=\"itemsPerPageLabel()\"\n [value]=\"getItemsPerPage()\"\n [loading]=\"loading() ?? false\"\n [options]=\"getItemsPerPageOptions()\"\n (updateValue)=\"updatePageSize($event)\"\n />\n\n <!-- DataTable Info (count) -->\n @if (!hidePageCount()) {\n <moz-datatable-info\n [label]=\"countLabel()\"\n [labelItems]=\"infoLabelItems()\"\n [start]=\"getPageCountInfos().start\"\n [end]=\"getPageCountInfos().end\"\n [total]=\"getPageCountInfos().total\"\n />\n }\n\n <!-- DataTable Pagination -->\n <div class=\"mc-datatable__pagination\">\n <moz-pagination\n [id]=\"accessibilityLabels()?.paginationAriaLabel ?? 'datatable-pagination'\"\n [selectLabel]=\"accessibilityLabels()?.paginationAriaLabel ?? 'Select page'\"\n [options]=\"getOptions()\"\n [value]=\"getCurrentPage()\"\n buttonSize=\"s\"\n (updateValue)=\"updateCurrentPage($event)\"\n />\n </div>\n </div>\n }\n</div>\n", styles: [".mc-checkbox,.checkbox{align-items:center;display:flex;gap:.5rem;padding:.375rem}.mc-checkbox--indented{margin-left:1.75rem}.mc-checkbox__label{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer}.mc-checkbox__input,.checkbox__input{appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, .125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;height:1.25rem;width:1.25rem;position:relative}.mc-checkbox__input:after,.checkbox__input:after{content:\"\";position:absolute;inset:0;background-color:var(--forms-color-icon-inverse, #ffffff);opacity:0;transform:scale(.6);transition:opacity .15s ease,transform .15s ease;-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:hover,.checkbox__input:hover{border-color:var(--forms-color-border-hover, #4d4d4d)}.mc-checkbox__input:focus-visible,.checkbox__input: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-checkbox__input:checked:after,.checkbox__input:checked:after{opacity:1;transform:scale(1)}.mc-checkbox__input:indeterminate:after,.checkbox__input:indeterminate:after{opacity:1;transform:scale(1);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\") no-repeat center/contain}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate{background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center}.mc-checkbox__input:checked,.checkbox__input:checked,.mc-checkbox__input:indeterminate,.checkbox__input:indeterminate,.mc-checkbox__input:disabled,.checkbox__input:disabled{border-color:transparent}.mc-checkbox__input:disabled,.checkbox__input:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed}.mc-checkbox__input:disabled:checked:after,.checkbox__input:disabled:checked:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled:indeterminate:after,.checkbox__input:disabled:indeterminate:after{background-color:var(--forms-color-icon-disabled, #737373)}.mc-checkbox__input:disabled+.mc-checkbox__label,.checkbox__input:disabled+.mc-checkbox__label{color:var(--forms-color-text-disabled, #737373);cursor:not-allowed}.mc-checkbox__input:not(:disabled):checked:hover,.checkbox__input:not(:disabled):checked:hover,.mc-checkbox__input:not(:disabled):indeterminate:hover,.checkbox__input:not(:disabled):indeterminate:hover{background-color:var(--forms-color-background-checked-hover, #006902)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate),.is-invalid.checkbox__input:not(:checked,:indeterminate){border-color:var(--forms-color-border-invalid, #ea302d)}.mc-checkbox__input.is-invalid:not(:checked,:indeterminate):hover,.is-invalid.checkbox__input:not(:checked,:indeterminate):hover{border-color:var(--forms-color-border-invalid-hover, #c61112)}.mc-datatable{display:block;font-family:LeroyMerlin,sans-serif;box-sizing:border-box}.mc-datatable *,.mc-datatable :after,.mc-datatable :before{box-sizing:inherit}.mc-datatable__container{border-radius:4px;border:1px solid #cdd4d8;background-color:var(--color-datatable-container-background, #e6e6e6);overflow:hidden}.mc-datatable__main{scrollbar-color:var(--color-grey-600, #666666) var(--color-grey-100, #e6e6e6);scrollbar-width:thin;overflow:auto;overflow-y:auto}.mc-datatable__main::-webkit-scrollbar{background-color:var(--color-grey-100, #e6e6e6);height:.5rem;width:.5rem}.mc-datatable__main::-webkit-scrollbar-track{background:var(--color-grey-100, #e6e6e6)}.mc-datatable__main::-webkit-scrollbar-thumb{background:var(--color-grey-600, #666666)}.mc-datatable__table tr,.mc-datatable thead th,.mc-datatable thead td{height:2.9375rem}.mc-datatable__table{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%}.mc-datatable__table>thead,.mc-datatable__table>tbody{background-color:var(--color-grey-000, #ffffff)}.mc-datatable__table th,.mc-datatable__table td{border-bottom:1px solid var(--color-grey-300, #b3b3b3);text-align:left;vertical-align:middle;padding-right:1rem;padding-left:1rem}.mc-datatable thead th,.mc-datatable thead td{font-weight:600;font-size:.75rem;line-height:1.3333333333;color:var(--color-datatable-thead-font, #191919);text-transform:uppercase}.mc-datatable__head small,.mc-datatable__cell small{font-size:.6815rem;line-height:1.2839325018;color:var(--color-grey-700, #4d4d4d);display:block;font-weight:400;text-transform:none}.mc-datatable tbody tr.selected{background-color:var(--color-datatable-cell-background-selected, var(--color-background-accent, #ebf5de))}.mc-datatable tbody th,.mc-datatable tbody td{font-size:.875rem;line-height:1.2857142857;color:var(--color-datatable-cell-font, #191919)}.mc-datatable__row--clickable{cursor:pointer}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable{height:0}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable .mc-datatable__row-inner{overflow:hidden;max-height:0}.mc-datatable__row-parent.mc-datatable__row-parent--expanded+.mc-datatable__row-expandable .mc-datatable__row-inner{max-height:100%}.mc-datatable__row-expandable>td{padding:0;border-bottom:0}.mc-datatable__row-expandable--offset-1 table th:first-child,.mc-datatable__row-expandable--offset-1 table td:first-child{padding-left:4.25rem}.mc-datatable__row-expandable--offset-2 table th:first-child,.mc-datatable__row-expandable--offset-2 table td:first-child{padding-left:7.75rem}.mc-datatable__cell-checkbox{width:3.25rem}.mc-datatable__cell-button{width:3.5rem}.mc-datatable__cell-field{min-width:9.375rem}td.mc-datatable__cell-number{text-align:right}.mc-datatable--s .mc-datatable__table tr,.mc-datatable--s .mc-datatable thead th,.mc-datatable--s .mc-datatable thead td{height:2.4375rem}.mc-datatable--l .mc-datatable__table tr,.mc-datatable--l .mc-datatable thead th,.mc-datatable--l .mc-datatable thead td{height:3.4375rem}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky-header .mc-datatable__table>thead{box-shadow:0 4px 20px #19191933;top:0;z-index:var(--datatable-head-z-index, 11)}.mc-datatable--sticky .mc-datatable__table>tbody>tr:last-child>th,.mc-datatable--sticky .mc-datatable__table>tbody>tr:last-child>td,.mc-datatable--sticky-header .mc-datatable__table>tbody>tr:last-child>th,.mc-datatable--sticky-header .mc-datatable__table>tbody>tr:last-child>td{border-bottom:transparent}.mc-datatable--sticky .mc-datatable__footer,.mc-datatable--sticky-header .mc-datatable__footer{border-top:1px solid var(--color-grey-300, #b3b3b3);position:relative;z-index:var(--datatable-sticky-footer-z-index, 3)}.mc-datatable--sticky-header .mc-datatable__main{overflow-y:auto}.mc-datatable--sticky-header .mc-datatable__table>thead{position:sticky}.mc-datatable--overflow-visible .mc-datatable__container,.mc-datatable--overflow-visible .mc-datatable__main{overflow:visible}.mc-datatable__btn{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;position:relative;isolation:isolate;align-items:center;background-color:transparent;display:flex}.mc-datatable__btn:after{border-radius:4px;box-shadow:0 0 0 0 transparent;content:\"\";display:block;pointer-events:none;position:absolute;inset:0;z-index:-1;transition:box-shadow .2s ease}.mc-datatable__btn-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__btn:focus{outline:none}.mc-datatable__btn:focus:after{box-shadow:0 0 0 .125rem var(--color-focus-gap, #ffffff),0 0 0 .25rem var(--color-focus-border, #0b96cc)}.mc-datatable__btn:disabled .mc-datatable__btn-icon{border-color:transparent;fill:var(--color-button-bordered-disabled-font, #666666);cursor:not-allowed}.mc-datatable__sort{padding:.25rem;font-weight:600;font-size:.75rem;line-height:1.3333333333;color:var(--color-datatable-thead-font, #191919);text-transform:uppercase;align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.mc-datatable__sort-arrow{align-items:center;display:flex;flex-direction:column;justify-content:space-around;margin-left:.5rem;fill:#666}.mc-datatable__options{width:1.5rem;height:1.5rem}.mc-datatable .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__footer{align-items:center;background-color:var(--color-grey-000, #ffffff);display:flex;padding:.75rem 1rem;gap:1rem}@media screen and (max-width:679px){.mc-datatable__footer{flex-direction:column}}.mc-datatable__select{display:flex;align-items:center;gap:.5rem}.mc-datatable__select-label{font-size:.875rem;line-height:1.2857142857;color:var(--color-grey-800, #333333);flex-shrink:0}.mc-datatable__count{font-size:.75rem;line-height:1.3333333333;color:var(--color-grey-600, #666666)}.mc-datatable__pagination{margin-left:auto}.mc-datatable__subtable{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%;background-color:var(--color-datatable-subtable-background, #e6e6e6)}.mc-datatable__subtable th,.mc-datatable__subtable td{border-bottom-color:var(--color-datatable-subtable-border, #b3b3b3)}.mc-datatable__subtable thead th,.mc-datatable__subtable thead td{font-size:.75rem;line-height:1.3333333333;color:var(--color-datatable-subtable-font, #000000)}.mc-datatable__subtable tbody th,.mc-datatable__subtable tbody td{color:var(--color-datatable-subtable-font, #000000)}.mc-datatable__empty{font-size:1rem;line-height:1.375;align-items:center;background-color:var(--color-datatable-empty-background, #e6e6e6);color:var(--color-datatable-empty-color, #666666);display:flex;flex-direction:column;gap:1rem;height:18.1875rem;justify-content:center;text-align:center}.mc-datatable__empty p{margin:0 auto}.mc-datatable__empty strong{font-size:1.125rem;line-height:1.3333333333}.mc-datatable__header{display:block}.mc-datatable__topbar,.mc-datatable__filters{padding-bottom:1rem}.mc-datatable__topbar{justify-content:space-between}.mc-datatable__topbar,.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{display:flex;gap:1rem}.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{flex-wrap:wrap}.mc-datatable__topbar-edition{flex-shrink:0;gap:.25rem}.mc-datatable__topbar-actions{align-items:center;justify-content:flex-end;margin-left:auto;gap:.5rem}.mc-datatable__filters{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.mc-datatable__selection{display:flex;align-items:center;gap:.5rem;padding-bottom:1rem;font-size:.875rem;line-height:1.2857142857;color:var(--color-grey-800, #333333)}.mc-datatable__selection-btn{background:none;border:none;padding:0;cursor:pointer;font-family:inherit;font-size:.875rem;color:var(--link-color-text-accent, #117f03);text-decoration:underline}.skeleton-cell{background-color:#cdd4d8;border-radius:4px;display:inline-block;height:var(--skeleton-height, 1.25rem);overflow:hidden;position:relative;width:var(--skeleton-width, 100%)}.skeleton-cell:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,#fff0 0,#fff3 20%,#ffffff80 60%,#fff0);animation:skeleton-animation 2s infinite;content:\"\"}@keyframes skeleton-animation{to{transform:translate(100%)}}\n"] }]
|
|
8709
8709
|
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], headers: [{ type: i0.Input, args: [{ isSignal: true, alias: "headers", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], indexKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "indexKey", required: false }] }], pageable: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageable", required: false }] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }], itemsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPageOptions", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], itemsPerPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPageLabel", required: false }] }], countLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "countLabel", required: false }] }], infoLabelItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "infoLabelItems", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], sortMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortMultiple", required: false }] }], sortMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortMode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hidePageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePageCount", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], fixedHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedHeader", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selectionbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionbar", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], labelButtonClearSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelButtonClearSelection", required: false }] }], selectPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectPage", required: false }] }], labelPageSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPageSelected", required: false }] }], labelAllItemsSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelAllItemsSelected", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], labelButtonSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelButtonSelectAll", required: false }] }], clickableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickableRows", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], expanderAccessibleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanderAccessibleLabel", required: false }] }], expandableList: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandableList", required: false }] }], dataKeyExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKeyExpand", required: false }] }], showExpandableContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpandableContent", required: false }] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], accessibilityLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityLabels", required: false }] }], e2eSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eSelector", required: false }] }], nested: [{ type: i0.Input, args: [{ isSignal: true, alias: "nested", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], sortMultipleChange: [{ type: i0.Output, args: ["sortMultipleChange"] }], currentPageChange: [{ type: i0.Output, args: ["currentPageChange"] }], itemsPerPageChange: [{ type: i0.Output, args: ["itemsPerPageChange"] }], changed: [{ type: i0.Output, args: ["changed"] }], clickRow: [{ type: i0.Output, args: ["clickRow"] }], selectRow: [{ type: i0.Output, args: ["selectRow"] }], unselectRow: [{ type: i0.Output, args: ["unselectRow"] }], selectAllRows: [{ type: i0.Output, args: ["selectAllRows"] }], unselectAllRows: [{ type: i0.Output, args: ["unselectAllRows"] }], selectMultipleRows: [{ type: i0.Output, args: ["selectMultipleRows"] }], unselectMultipleRows: [{ type: i0.Output, args: ["unselectMultipleRows"] }], selectPageChange: [{ type: i0.Output, args: ["selectPageChange"] }], selectAllChange: [{ type: i0.Output, args: ["selectAllChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], expandRow: [{ type: i0.Output, args: ["expandRow"] }], retractRow: [{ type: i0.Output, args: ["retractRow"] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MozDataTableColumnComponent), { ...{
|
|
8710
8710
|
descendants: true,
|
|
8711
8711
|
}, isSignal: true }] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MozDataTableCellTemplateDirective), { ...{
|
|
@@ -8796,9 +8796,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
8796
8796
|
}]
|
|
8797
8797
|
}], propDecorators: { edition: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MozDataTableTopEditionDirective), { isSignal: true }] }], actions: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MozDataTableTopActionsDirective), { isSignal: true }] }], filters: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MozDataTableTopFiltersDirective), { isSignal: true }] }] } });
|
|
8798
8798
|
|
|
8799
|
+
/**
|
|
8800
|
+
* The bottom bar is the primary navigation of a mobile interface. It is pinned to the bottom
|
|
8801
|
+
* of the viewport and exposes a short list of destinations, each one made of an icon and a
|
|
8802
|
+
* label. Only one destination can be selected at a time.
|
|
8803
|
+
*/
|
|
8804
|
+
class MozBottomBarComponent {
|
|
8805
|
+
/** Navigation entries displayed by the bottom bar. */
|
|
8806
|
+
items = input([], /* @ts-ignore */
|
|
8807
|
+
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
8808
|
+
/** Accessible name of the navigation landmark. */
|
|
8809
|
+
ariaLabel = input('Bottom navigation', /* @ts-ignore */
|
|
8810
|
+
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
8811
|
+
/** Displays a divider above the list of triggers. */
|
|
8812
|
+
divider = input(false, /* @ts-ignore */
|
|
8813
|
+
...(ngDevMode ? [{ debugName: "divider" }] : /* istanbul ignore next */ []));
|
|
8814
|
+
/** Identifier of the currently selected item. Two-way bindable. */
|
|
8815
|
+
selectedId = model(null, /* @ts-ignore */
|
|
8816
|
+
...(ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []));
|
|
8817
|
+
/** Emitted whenever an enabled item is activated. */
|
|
8818
|
+
itemSelected = output();
|
|
8819
|
+
isSelected(item) {
|
|
8820
|
+
return this.selectedId() === item.id;
|
|
8821
|
+
}
|
|
8822
|
+
triggerClasses(item) {
|
|
8823
|
+
return {
|
|
8824
|
+
'bottom-bar__trigger': true,
|
|
8825
|
+
'bottom-bar__trigger--selected': this.isSelected(item),
|
|
8826
|
+
};
|
|
8827
|
+
}
|
|
8828
|
+
onSelect(item, event) {
|
|
8829
|
+
if (item.disabled) {
|
|
8830
|
+
event.preventDefault();
|
|
8831
|
+
return;
|
|
8832
|
+
}
|
|
8833
|
+
if (!this.isSelected(item)) {
|
|
8834
|
+
this.selectedId.set(item.id);
|
|
8835
|
+
}
|
|
8836
|
+
this.itemSelected.emit(item);
|
|
8837
|
+
}
|
|
8838
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozBottomBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8839
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozBottomBarComponent, isStandalone: true, selector: "moz-bottom-bar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedId: "selectedIdChange", itemSelected: "itemSelected" }, ngImport: i0, template: "<ng-template #triggerContent let-item>\n @if (item.icon) {\n <span class=\"bottom-bar__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"item.icon\"></ng-container>\n </span>\n }\n <span class=\"bottom-bar__label\">{{ item.label }}</span>\n</ng-template>\n\n<nav class=\"bottom-bar\" [attr.aria-label]=\"ariaLabel()\">\n @if (divider()) {\n <moz-divider></moz-divider>\n }\n\n <ul class=\"bottom-bar__list\">\n @for (item of items(); track item.id) {\n <li class=\"bottom-bar__item\">\n @if (item.routerLink) {\n <a\n [class]=\"triggerClasses(item)\"\n [routerLink]=\"item.routerLink\"\n [attr.aria-current]=\"isSelected(item) ? 'page' : null\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n (click)=\"onSelect(item, $event)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"triggerContent\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n />\n </a>\n } @else if (item.href) {\n <a\n [class]=\"triggerClasses(item)\"\n [attr.href]=\"item.href\"\n [attr.target]=\"item.target ?? null\"\n [attr.rel]=\"item.target === '_blank' ? 'noopener noreferrer' : null\"\n [attr.aria-current]=\"isSelected(item) ? 'page' : null\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n (click)=\"onSelect(item, $event)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"triggerContent\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n />\n </a>\n } @else {\n <button\n type=\"button\"\n [class]=\"triggerClasses(item)\"\n [disabled]=\"!!item.disabled\"\n [attr.aria-current]=\"isSelected(item) ? 'page' : null\"\n (click)=\"onSelect(item, $event)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"triggerContent\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n />\n </button>\n }\n </li>\n }\n </ul>\n</nav>\n", styles: [".mc-bottom-bar,.bottom-bar{background-color:var(--bottom-bar-color-background-default, #ffffff);bottom:0;box-sizing:border-box;position:fixed;inset-inline:0;z-index:var(--bottom-bar-z-index, 3)}.mc-bottom-bar__list,.bottom-bar__list{list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;justify-content:space-around;padding-inline:.5rem}.mc-bottom-bar__trigger,.bottom-bar__trigger{place-items:center center;justify-content:center;font-size:var(--font-size-25, .625rem);background:none;border:none;color:var(--bottom-bar-color-text-default, #404040);cursor:pointer;display:flex;flex-direction:column;gap:.5rem;text-decoration:none;width:4.5rem;height:4.5rem}.mc-bottom-bar__trigger:focus-visible,.bottom-bar__trigger: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-bottom-bar__trigger--selected,.bottom-bar__trigger--selected{color:var(--bottom-bar-color-text-selected, #006902);gap:.25rem;margin-top:-.125rem;font-weight:var(--font-weight-semi-bold, 600)}.mc-bottom-bar__trigger--selected .mc-bottom-bar__icon,.bottom-bar__trigger--selected .mc-bottom-bar__icon,.mc-bottom-bar__trigger--selected .bottom-bar__icon,.bottom-bar__trigger--selected .bottom-bar__icon{padding:.25rem .75rem;background-color:var(--bottom-bar-color-background-selected, #ebf5de)}.mc-bottom-bar__icon,.bottom-bar__icon{border-radius:var(--border-radius-m, .5rem);padding:0 .75rem}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: MozDividerComponent, selector: "moz-divider", inputs: ["orientation", "appearance", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8840
|
+
}
|
|
8841
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozBottomBarComponent, decorators: [{
|
|
8842
|
+
type: Component,
|
|
8843
|
+
args: [{ selector: 'moz-bottom-bar', imports: [NgComponentOutlet, NgTemplateOutlet, RouterLink, MozDividerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #triggerContent let-item>\n @if (item.icon) {\n <span class=\"bottom-bar__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"item.icon\"></ng-container>\n </span>\n }\n <span class=\"bottom-bar__label\">{{ item.label }}</span>\n</ng-template>\n\n<nav class=\"bottom-bar\" [attr.aria-label]=\"ariaLabel()\">\n @if (divider()) {\n <moz-divider></moz-divider>\n }\n\n <ul class=\"bottom-bar__list\">\n @for (item of items(); track item.id) {\n <li class=\"bottom-bar__item\">\n @if (item.routerLink) {\n <a\n [class]=\"triggerClasses(item)\"\n [routerLink]=\"item.routerLink\"\n [attr.aria-current]=\"isSelected(item) ? 'page' : null\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n (click)=\"onSelect(item, $event)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"triggerContent\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n />\n </a>\n } @else if (item.href) {\n <a\n [class]=\"triggerClasses(item)\"\n [attr.href]=\"item.href\"\n [attr.target]=\"item.target ?? null\"\n [attr.rel]=\"item.target === '_blank' ? 'noopener noreferrer' : null\"\n [attr.aria-current]=\"isSelected(item) ? 'page' : null\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n (click)=\"onSelect(item, $event)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"triggerContent\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n />\n </a>\n } @else {\n <button\n type=\"button\"\n [class]=\"triggerClasses(item)\"\n [disabled]=\"!!item.disabled\"\n [attr.aria-current]=\"isSelected(item) ? 'page' : null\"\n (click)=\"onSelect(item, $event)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"triggerContent\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n />\n </button>\n }\n </li>\n }\n </ul>\n</nav>\n", styles: [".mc-bottom-bar,.bottom-bar{background-color:var(--bottom-bar-color-background-default, #ffffff);bottom:0;box-sizing:border-box;position:fixed;inset-inline:0;z-index:var(--bottom-bar-z-index, 3)}.mc-bottom-bar__list,.bottom-bar__list{list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;justify-content:space-around;padding-inline:.5rem}.mc-bottom-bar__trigger,.bottom-bar__trigger{place-items:center center;justify-content:center;font-size:var(--font-size-25, .625rem);background:none;border:none;color:var(--bottom-bar-color-text-default, #404040);cursor:pointer;display:flex;flex-direction:column;gap:.5rem;text-decoration:none;width:4.5rem;height:4.5rem}.mc-bottom-bar__trigger:focus-visible,.bottom-bar__trigger: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-bottom-bar__trigger--selected,.bottom-bar__trigger--selected{color:var(--bottom-bar-color-text-selected, #006902);gap:.25rem;margin-top:-.125rem;font-weight:var(--font-weight-semi-bold, 600)}.mc-bottom-bar__trigger--selected .mc-bottom-bar__icon,.bottom-bar__trigger--selected .mc-bottom-bar__icon,.mc-bottom-bar__trigger--selected .bottom-bar__icon,.bottom-bar__trigger--selected .bottom-bar__icon{padding:.25rem .75rem;background-color:var(--bottom-bar-color-background-selected, #ebf5de)}.mc-bottom-bar__icon,.bottom-bar__icon{border-radius:var(--border-radius-m, .5rem);padding:0 .75rem}\n"] }]
|
|
8844
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], selectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedId", required: false }] }, { type: i0.Output, args: ["selectedIdChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
|
|
8845
|
+
|
|
8846
|
+
/**
|
|
8847
|
+
* An empty state explains why a zone of the interface holds no content yet — a search
|
|
8848
|
+
* without result, a list not fed, a feature not set up — and points the user to the next
|
|
8849
|
+
* step. It is made of an illustrative icon, a title, a description and optional actions
|
|
8850
|
+
* projected through the `actions` slot.
|
|
8851
|
+
*/
|
|
8852
|
+
class MozEmptyStateComponent {
|
|
8853
|
+
/** Icon component illustrating the empty state. */
|
|
8854
|
+
icon = input(null, /* @ts-ignore */
|
|
8855
|
+
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
8856
|
+
/** Background of the icon container. */
|
|
8857
|
+
appearance = input('primary', /* @ts-ignore */
|
|
8858
|
+
...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
8859
|
+
/** Short sentence naming what is missing. */
|
|
8860
|
+
title = input.required(/* @ts-ignore */
|
|
8861
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
8862
|
+
/** Complementary text explaining how to fill the void. */
|
|
8863
|
+
description = input(null, /* @ts-ignore */
|
|
8864
|
+
...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
8865
|
+
/** Heading level reported to assistive technologies for the title. */
|
|
8866
|
+
headingLevel = input(2, /* @ts-ignore */
|
|
8867
|
+
...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
|
|
8868
|
+
iconClasses = computed(() => ({
|
|
8869
|
+
'empty-state__icon': true,
|
|
8870
|
+
'empty-state__icon--secondary': this.appearance() === 'secondary',
|
|
8871
|
+
}), /* @ts-ignore */
|
|
8872
|
+
...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
|
|
8873
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8874
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MozEmptyStateComponent, isStandalone: true, selector: "moz-empty-state", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"empty-state\">\n @if (icon()) {\n <div [class]=\"iconClasses()\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"icon()\"></ng-container>\n </div>\n }\n\n <p class=\"empty-state__title\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">\n {{ title() }}\n </p>\n\n @if (description()) {\n <p class=\"empty-state__description\">{{ description() }}</p>\n }\n\n <div class=\"empty-state__actions\">\n <ng-content select=\"[actions]\" />\n </div>\n</div>\n", styles: [".mc-empty-state,.empty-state{width:20.5rem;margin:1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1rem}.mc-empty-state__icon,.empty-state__icon{padding:1rem;display:flex;align-items:center;justify-content:center;background-color:var(--color-background-primary, #ffffff);border-radius:var(--border-radius-full, 100%)}.mc-empty-state__icon--secondary,.empty-state__icon--secondary{background-color:var(--color-background-secondary, #eff1f6)}.mc-empty-state__icon svg,.empty-state__icon svg{height:4rem;width:4rem;color:var(--color-text-tertiary, #666666);fill:currentcolor}.mc-empty-state__title,.empty-state__title{margin:0;color:var(--color-text-primary, #000000);font-size:var(--font-title-s, 1.125rem);font-weight:var(--font-weight-bold, 700)}.mc-empty-state__description,.empty-state__description{margin:0;color:var(--color-text-secondary, #404040);font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-regular, 400)}.mc-empty-state__actions,.empty-state__actions{display:flex;align-items:center;justify-content:center;gap:1rem}.empty-state__actions:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8875
|
+
}
|
|
8876
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MozEmptyStateComponent, decorators: [{
|
|
8877
|
+
type: Component,
|
|
8878
|
+
args: [{ selector: 'moz-empty-state', imports: [NgComponentOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"empty-state\">\n @if (icon()) {\n <div [class]=\"iconClasses()\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"icon()\"></ng-container>\n </div>\n }\n\n <p class=\"empty-state__title\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">\n {{ title() }}\n </p>\n\n @if (description()) {\n <p class=\"empty-state__description\">{{ description() }}</p>\n }\n\n <div class=\"empty-state__actions\">\n <ng-content select=\"[actions]\" />\n </div>\n</div>\n", styles: [".mc-empty-state,.empty-state{width:20.5rem;margin:1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1rem}.mc-empty-state__icon,.empty-state__icon{padding:1rem;display:flex;align-items:center;justify-content:center;background-color:var(--color-background-primary, #ffffff);border-radius:var(--border-radius-full, 100%)}.mc-empty-state__icon--secondary,.empty-state__icon--secondary{background-color:var(--color-background-secondary, #eff1f6)}.mc-empty-state__icon svg,.empty-state__icon svg{height:4rem;width:4rem;color:var(--color-text-tertiary, #666666);fill:currentcolor}.mc-empty-state__title,.empty-state__title{margin:0;color:var(--color-text-primary, #000000);font-size:var(--font-title-s, 1.125rem);font-weight:var(--font-weight-bold, 700)}.mc-empty-state__description,.empty-state__description{margin:0;color:var(--color-text-secondary, #404040);font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-regular, 400)}.mc-empty-state__actions,.empty-state__actions{display:flex;align-items:center;justify-content:center;gap:1rem}.empty-state__actions:empty{display:none}\n"] }]
|
|
8879
|
+
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }] } });
|
|
8880
|
+
|
|
8799
8881
|
/**
|
|
8800
8882
|
* Generated bundle index. Do not edit.
|
|
8801
8883
|
*/
|
|
8802
8884
|
|
|
8803
|
-
export { ACTION_LISTBOX_CONFIG, ActionListboxContainerComponent, ActionListboxRef, BuiltInMenuComponent, DEFAULT_ACTION_LISTBOX_CONFIG, DEFAULT_MODAL_CONFIG, DEFAULT_TOASTER_CONFIG, DRAWER_CONFIG, DRAWER_DATA, DrawerContainerComponent, MODAL_CONFIG, MODAL_DATA, MOZ_DATATABLE_DEFAULT_PAGE_SIZES, MozAccordionComponent, MozAccordionContentComponent, MozAccordionHeaderComponent, MozAccordionPanelComponent, MozActionBottomBarComponent, MozActionListboxComponent, MozActionListboxTriggerDirective, MozAvatarComponent, MozBreadcrumbComponent, MozButtonComponent, MozCalloutComponent, MozCarouselComponent, MozCheckListMenuComponent, MozCheckboxComponent, MozCheckboxGroupComponent, MozCircularProgressBarComponent, MozComboboxComponent, MozComboboxHarness, MozComboboxOptionHarness, MozDataTableBodyTemplateDirective, MozDataTableCellComponent, MozDataTableCellTemplateDirective, MozDataTableColumnComponent, MozDataTableComponent, MozDataTableExpandTemplateDirective, MozDataTableHeaderComponent, MozDataTableHeaderTemplateDirective, MozDataTableHeadersTemplateDirective, MozDataTableNoDataTemplateDirective, MozDataTableRowComponent, MozDataTableSelectionbarDirective, MozDataTableTopActionsDirective, MozDataTableTopComponent, MozDataTableTopEditionDirective, MozDataTableTopFiltersDirective, MozDatepickerComponent, MozDividerComponent, MozDrawerComponent, MozDrawerFooterDirective, MozDrawerRef, MozDrawerService, MozFieldComponent, MozFieldGroupComponent, MozFileUploaderComponent, MozFileUploaderItemComponent, MozFlagComponent, MozIconButtonComponent, MozKpiComponent, MozLinearProgressBarBufferComponent, MozLinearProgressBarPercentageComponent, MozLinkComponent, MozLoaderComponent, MozLoadingOverlayComponent, MozModalComponent, MozModalFooterDirective, MozModalRef, MozModalService, MozNavigationIndicatorComponent, MozNumberBadgeComponent, MozOverlayComponent, MozPageHeaderComponent, MozPaginationComponent, MozPasswordInputDirective, MozPhoneNumberComponent, MozPincodeInputComponent, MozPopoverComponent, MozPopoverFooterDirective, MozPopoverTriggerDirective, MozQuantitySelectorComponent, MozRadioComponent, MozRadioGroupComponent, MozSegmentedControlComponent, MozSelectComponent, MozSidebarComponent, MozStarRatingComponent, MozStatusBadgeComponent, MozStatusDotComponent, MozStatusMessageComponent, MozStatusNotificationComponent, MozStepperBottomBarComponent, MozStepperCompactComponent, MozStepperInlineComponent, MozStepperStackedComponent, MozTabComponent, MozTabsComponent, MozTagComponent, MozTextInput, MozTextarea, MozTileComponent, MozTileExpandableComponent, MozTileSelectableComponent, MozToasterComponent, MozToasterRef, MozToasterService, MozToggleComponent, MozTooltipComponent, MozTooltipDirective, MozTreeComponent, MozTreeNodeComponent, MozTreeNodeTemplateDirective, POPOVER_CONFIG, POPOVER_DATA, PopoverContainerComponent, PopoverRef, PopoverService, TOASTER_CONFIG, TreeKeyboardService, TreeSelectionService, TreeStateService, isSection };
|
|
8885
|
+
export { ACTION_LISTBOX_CONFIG, ActionListboxContainerComponent, ActionListboxRef, BuiltInMenuComponent, DEFAULT_ACTION_LISTBOX_CONFIG, DEFAULT_MODAL_CONFIG, DEFAULT_TOASTER_CONFIG, DRAWER_CONFIG, DRAWER_DATA, DrawerContainerComponent, MODAL_CONFIG, MODAL_DATA, MOZ_DATATABLE_DEFAULT_PAGE_SIZES, MozAccordionComponent, MozAccordionContentComponent, MozAccordionHeaderComponent, MozAccordionPanelComponent, MozActionBottomBarComponent, MozActionListboxComponent, MozActionListboxTriggerDirective, MozAvatarComponent, MozBottomBarComponent, MozBreadcrumbComponent, MozButtonComponent, MozCalloutComponent, MozCarouselComponent, MozCheckListMenuComponent, MozCheckboxComponent, MozCheckboxGroupComponent, MozCircularProgressBarComponent, MozComboboxComponent, MozComboboxHarness, MozComboboxOptionHarness, MozDataTableBodyTemplateDirective, MozDataTableCellComponent, MozDataTableCellTemplateDirective, MozDataTableColumnComponent, MozDataTableComponent, MozDataTableExpandTemplateDirective, MozDataTableHeaderComponent, MozDataTableHeaderTemplateDirective, MozDataTableHeadersTemplateDirective, MozDataTableNoDataTemplateDirective, MozDataTableRowComponent, MozDataTableSelectionbarDirective, MozDataTableTopActionsDirective, MozDataTableTopComponent, MozDataTableTopEditionDirective, MozDataTableTopFiltersDirective, MozDatepickerComponent, MozDividerComponent, MozDrawerComponent, MozDrawerFooterDirective, MozDrawerRef, MozDrawerService, MozEmptyStateComponent, MozFieldComponent, MozFieldGroupComponent, MozFileUploaderComponent, MozFileUploaderItemComponent, MozFlagComponent, MozIconButtonComponent, MozKpiComponent, MozLinearProgressBarBufferComponent, MozLinearProgressBarPercentageComponent, MozLinkComponent, MozLoaderComponent, MozLoadingOverlayComponent, MozModalComponent, MozModalFooterDirective, MozModalRef, MozModalService, MozNavigationIndicatorComponent, MozNumberBadgeComponent, MozOverlayComponent, MozPageHeaderComponent, MozPaginationComponent, MozPasswordInputDirective, MozPhoneNumberComponent, MozPincodeInputComponent, MozPopoverComponent, MozPopoverFooterDirective, MozPopoverTriggerDirective, MozQuantitySelectorComponent, MozRadioComponent, MozRadioGroupComponent, MozSegmentedControlComponent, MozSelectComponent, MozSidebarComponent, MozStarRatingComponent, MozStatusBadgeComponent, MozStatusDotComponent, MozStatusMessageComponent, MozStatusNotificationComponent, MozStepperBottomBarComponent, MozStepperCompactComponent, MozStepperInlineComponent, MozStepperStackedComponent, MozTabComponent, MozTabsComponent, MozTagComponent, MozTextInput, MozTextarea, MozTileComponent, MozTileExpandableComponent, MozTileSelectableComponent, MozToasterComponent, MozToasterRef, MozToasterService, MozToggleComponent, MozTooltipComponent, MozTooltipDirective, MozTreeComponent, MozTreeNodeComponent, MozTreeNodeTemplateDirective, POPOVER_CONFIG, POPOVER_DATA, PopoverContainerComponent, PopoverRef, PopoverService, TOASTER_CONFIG, TreeKeyboardService, TreeSelectionService, TreeStateService, isSection };
|
|
8804
8886
|
//# sourceMappingURL=mozaic-ds-angular.mjs.map
|