@mozaic-ds/angular 2.0.0-beta.8 → 2.0.0-beta.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, contentChild, signal, forwardRef, output, ContentChild, viewChild, inject, effect, afterNextRender, TemplateRef, Injector, Injectable, linkedSignal, EnvironmentInjector, createComponent, ChangeDetectorRef, NgZone, viewChildren, model, EventEmitter, Output, ElementRef, HostListener, Input, Directive, booleanAttribute, contentChildren } from '@angular/core';
|
|
3
|
-
import
|
|
4
|
-
import { RouterLink, RouterLinkActive, RouterLinkWithHref, RouterModule } from '@angular/router';
|
|
3
|
+
import { RouterLink, RouterLinkActive, RouterLinkWithHref } from '@angular/router';
|
|
5
4
|
import { NgTemplateOutlet, NgComponentOutlet, NgClass } from '@angular/common';
|
|
6
|
-
import * as i1
|
|
5
|
+
import * as i1 from '@angular/forms';
|
|
7
6
|
import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
8
7
|
import { WarningCircle32, Uploading32, CheckCircle32, CrossCircleFilled20, Refresh32, Refresh20, Eye20, Upload24, Cross24, ExternalLink24, ChevronLeft24, ChevronRight24, CrossCircleFilled24, More24, Less24, InfoCircle32, CrossCircle32, Cross20, CrossCircle24, ImageAlt32, ChevronDown24, CheckCircleFilled32, WarningCircleFilled32, CrossCircleFilled32, InfoCircleFilled32, SidebarExpand24, ChevronDown20, ChevronLeft20, ChevronRight20, InfoCircleFilled24, WarningCircleFilled24, CheckCircleFilled24, ArrowBottomRight24, ArrowTopRight24, StarHalf32, StarFilled32, Star32, StarHalf24, StarFilled24, Star24, StarHalf20, StarFilled20, Star20, Check20, Check24, ArrowBack24, ArrowNext24, HelpCircle24, Menu24, Notification24, Search24 } from '@mozaic-ds/icons-angular';
|
|
9
8
|
import { DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
|
|
@@ -552,11 +551,11 @@ class MozLinkComponent {
|
|
|
552
551
|
};
|
|
553
552
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
554
553
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
555
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 [class]=\"classes()\"\n [attr.target]=\"target()\"\n [attr.aria-current]=\"ariaCurrent()\"\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=\"mc-link__icon\" aria-hidden=\"true\">\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n </span>\n }\n\n <span class=\"mc-link__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n </span>\n\n @if(iconPosition() === 'right'){\n <span class=\"mc-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{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{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) .mc-link__label{text-decoration:underline}.mc-link: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-link--m{min-height:2rem;font-size:1rem}.mc-link--secondary{color:var(--link-color-text-secondary, #666666)}.mc-link--accent{color:var(--link-color-text-accent, #117f03)}.mc-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{border-bottom:var(--border-width-s, .0625rem) solid currentColor}.mc-link--stand-alone:hover .mc-link__label{border-color:transparent}.mc-link--inline{font-weight:inherit;text-decoration:underline}.mc-link--inline .mc-link__label{line-height:1}.mc-link--inline:hover{text-decoration:none}.mc-link__icon:empty{display:none}\n"], dependencies: [{ kind: "
|
|
554
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 [class]=\"classes()\"\n [attr.target]=\"target()\"\n [attr.aria-current]=\"ariaCurrent()\"\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=\"mc-link__icon\" aria-hidden=\"true\">\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n </span>\n }\n\n <span class=\"mc-link__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n </span>\n\n @if(iconPosition() === 'right'){\n <span class=\"mc-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{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{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) .mc-link__label{text-decoration:underline}.mc-link: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-link--m{min-height:2rem;font-size:1rem}.mc-link--secondary{color:var(--link-color-text-secondary, #666666)}.mc-link--accent{color:var(--link-color-text-accent, #117f03)}.mc-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{border-bottom:var(--border-width-s, .0625rem) solid currentColor}.mc-link--stand-alone:hover .mc-link__label{border-color:transparent}.mc-link--inline{font-weight:inherit;text-decoration:underline}.mc-link--inline .mc-link__label{line-height:1}.mc-link--inline:hover{text-decoration:none}.mc-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", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ExperimentalIsolatedShadowDom });
|
|
556
555
|
}
|
|
557
556
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozLinkComponent, decorators: [{
|
|
558
557
|
type: Component,
|
|
559
|
-
args: [{ selector: 'moz-link', imports: [
|
|
558
|
+
args: [{ selector: 'moz-link', imports: [NgTemplateOutlet, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ExperimentalIsolatedShadowDom, template: "@if (router()) {\n<a\n [routerLink]=\"href()\"\n [class]=\"classes()\"\n [attr.target]=\"target()\"\n [attr.aria-current]=\"ariaCurrent()\"\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=\"mc-link__icon\" aria-hidden=\"true\">\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n </span>\n }\n\n <span class=\"mc-link__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n </span>\n\n @if(iconPosition() === 'right'){\n <span class=\"mc-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{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{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) .mc-link__label{text-decoration:underline}.mc-link: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-link--m{min-height:2rem;font-size:1rem}.mc-link--secondary{color:var(--link-color-text-secondary, #666666)}.mc-link--accent{color:var(--link-color-text-accent, #117f03)}.mc-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{border-bottom:var(--border-width-s, .0625rem) solid currentColor}.mc-link--stand-alone:hover .mc-link__label{border-color:transparent}.mc-link--inline{font-weight:inherit;text-decoration:underline}.mc-link--inline .mc-link__label{line-height:1}.mc-link--inline:hover{text-decoration:none}.mc-link__icon:empty{display:none}\n"] }]
|
|
560
559
|
}], 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 }] }] } });
|
|
561
560
|
|
|
562
561
|
class MozLoaderComponent {
|
|
@@ -992,7 +991,7 @@ class MozSelectComponent {
|
|
|
992
991
|
useExisting: forwardRef(() => MozSelectComponent),
|
|
993
992
|
multi: true,
|
|
994
993
|
},
|
|
995
|
-
], ngImport: i0, template: "<select\n [id]=\"id()\"\n [class]=\"classes()\"\n [name]=\"name()\"\n [disabled]=\"disabled() || readonly()\"\n (change)=\"handleChange($event)\"\n>\n <option value=\"\" [selected]=\"!_value()\" disabled>\n {{ placeholder() || 'Select an option' }}\n </option>\n @for (option of options(); track $index) {\n <option\n [value]=\"option.value\"\n [selected]=\"_value() === option.value\"\n [disabled]=\"option.disabled\"\n [attr.data-id]=\"option.id\"\n [attr.*]=\"option.attributes\"\n >\n {{ option.text }}\n </option>\n }\n</select>\n", styles: [".mc-select{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;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-interactive, %23000000)' 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\");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;background-repeat:no-repeat;background-size:1rem;border-radius:var(--border-radius-s, .25rem)}.mc-select: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: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:disabled{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' 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\");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--readonly{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-select.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.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{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}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1
|
|
994
|
+
], ngImport: i0, template: "<select\n [id]=\"id()\"\n [class]=\"classes()\"\n [name]=\"name()\"\n [disabled]=\"disabled() || readonly()\"\n (change)=\"handleChange($event)\"\n>\n <option value=\"\" [selected]=\"!_value()\" disabled>\n {{ placeholder() || 'Select an option' }}\n </option>\n @for (option of options(); track $index) {\n <option\n [value]=\"option.value\"\n [selected]=\"_value() === option.value\"\n [disabled]=\"option.disabled\"\n [attr.data-id]=\"option.id\"\n [attr.*]=\"option.attributes\"\n >\n {{ option.text }}\n </option>\n }\n</select>\n", styles: [".mc-select{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;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-interactive, %23000000)' 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\");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;background-repeat:no-repeat;background-size:1rem;border-radius:var(--border-radius-s, .25rem)}.mc-select: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: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:disabled{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' 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\");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--readonly{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-select.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.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{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}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ExperimentalIsolatedShadowDom });
|
|
996
995
|
}
|
|
997
996
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozSelectComponent, decorators: [{
|
|
998
997
|
type: Component,
|
|
@@ -1038,7 +1037,7 @@ class MozPaginationComponent {
|
|
|
1038
1037
|
this.updateValue.emit(+value);
|
|
1039
1038
|
}
|
|
1040
1039
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1041
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateValue: "updateValue" }, ngImport: i0, template: "<nav class=\"mc-pagination\" role=\"navigation\">\n @if (!compact()) {\n <moz-button\n iconPosition=\"only\"\n aria-label=\"Previous page\"\n [disabled]=\"isFirstPage()\"\n (click)=\"previous()\"\n >\n <ChevronLeft24 icon />\n </moz-button>\n } @else {\n <moz-icon-button aria-label=\"Previous page\" [disabled]=\"isFirstPage()\" (click)=\"previous()\">\n <ChevronLeft24 icon />\n </moz-icon-button>\n } @if (!compact()) {\n <div class=\"mc-pagination__field\">\n <moz-select\n class=\"mc-pagination__select\"\n [id]=\"id()\"\n [name]=\"id()\"\n [options]=\"options()\"\n [ngModel]=\"_currentValue()\"\n (ngModelChange)=\"onSelectChange($event)\"\n [ariaLabel]=\"selectLabel()\"\n />\n </div>\n } @else {\n <span class=\"mc-pagination__label\" aria-current=\"page\">\n {{ currentPageText() }}\n </span>\n } @if (!compact()) {\n <moz-button\n iconPosition=\"only\"\n aria-label=\"Next page\"\n [disabled]=\"isLastPage()\"\n (click)=\"next()\"\n >\n <ChevronRight24 icon />\n </moz-button>\n } @else {\n <moz-icon-button aria-label=\"Next page\" [disabled]=\"isLastPage()\" (click)=\"next()\">\n <ChevronRight24 icon />\n </moz-icon-button>\n }\n</nav>\n", styles: [".mc-pagination{align-items:center;display:flex;justify-content:center;gap:.5rem}.mc-pagination__label{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozButtonComponent, selector: "moz-button", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "component", type: ChevronLeft24, selector: "ChevronLeft24", inputs: ["color", "hostClass"] }, { kind: "component", type: ChevronRight24, selector: "ChevronRight24", inputs: ["color", "hostClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1
|
|
1040
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateValue: "updateValue" }, ngImport: i0, template: "<nav class=\"mc-pagination\" role=\"navigation\">\n @if (!compact()) {\n <moz-button\n iconPosition=\"only\"\n aria-label=\"Previous page\"\n [disabled]=\"isFirstPage()\"\n (click)=\"previous()\"\n >\n <ChevronLeft24 icon />\n </moz-button>\n } @else {\n <moz-icon-button aria-label=\"Previous page\" [disabled]=\"isFirstPage()\" (click)=\"previous()\">\n <ChevronLeft24 icon />\n </moz-icon-button>\n } @if (!compact()) {\n <div class=\"mc-pagination__field\">\n <moz-select\n class=\"mc-pagination__select\"\n [id]=\"id()\"\n [name]=\"id()\"\n [options]=\"options()\"\n [ngModel]=\"_currentValue()\"\n (ngModelChange)=\"onSelectChange($event)\"\n [ariaLabel]=\"selectLabel()\"\n />\n </div>\n } @else {\n <span class=\"mc-pagination__label\" aria-current=\"page\">\n {{ currentPageText() }}\n </span>\n } @if (!compact()) {\n <moz-button\n iconPosition=\"only\"\n aria-label=\"Next page\"\n [disabled]=\"isLastPage()\"\n (click)=\"next()\"\n >\n <ChevronRight24 icon />\n </moz-button>\n } @else {\n <moz-icon-button aria-label=\"Next page\" [disabled]=\"isLastPage()\" (click)=\"next()\">\n <ChevronRight24 icon />\n </moz-icon-button>\n }\n</nav>\n", styles: [".mc-pagination{align-items:center;display:flex;justify-content:center;gap:.5rem}.mc-pagination__label{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozButtonComponent, selector: "moz-button", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "component", type: ChevronLeft24, selector: "ChevronLeft24", inputs: ["color", "hostClass"] }, { kind: "component", type: ChevronRight24, selector: "ChevronRight24", inputs: ["color", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ExperimentalIsolatedShadowDom });
|
|
1042
1041
|
}
|
|
1043
1042
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozPaginationComponent, decorators: [{
|
|
1044
1043
|
type: Component,
|
|
@@ -1513,7 +1512,7 @@ class MozRadioGroupComponent {
|
|
|
1513
1512
|
useExisting: forwardRef(() => MozRadioGroupComponent),
|
|
1514
1513
|
multi: true,
|
|
1515
1514
|
},
|
|
1516
|
-
], ngImport: i0, template: "<fieldset class=\"mc-field mc-field--group\">\n <div [class]=\"classes()\">\n @for (option of options(); track $index) {\n <moz-radio\n [id]=\"option.id\"\n [label]=\"option.label\"\n [name]=\"name()\"\n [ngModel]=\"_value() === option.value\"\n [disabled]=\"option.disabled ?? false\"\n [isInvalid]=\"isInvalid()\"\n (change)=\"select(option.value)\"\n ></moz-radio>\n }\n </div>\n</fieldset>\n", styles: [".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__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-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' 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\")}.mc-field__validation-message.is-invalid{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' 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\")}.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{display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-field--group .mc-field__content:where(.mc-field__content--inline){flex-flow:row wrap;gap:.25rem 1rem}\n"], dependencies: [{ kind: "component", type: MozRadioComponent, selector: "moz-radio", inputs: ["id", "name", "label", "isInvalid", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1
|
|
1515
|
+
], ngImport: i0, template: "<fieldset class=\"mc-field mc-field--group\">\n <div [class]=\"classes()\">\n @for (option of options(); track $index) {\n <moz-radio\n [id]=\"option.id\"\n [label]=\"option.label\"\n [name]=\"name()\"\n [ngModel]=\"_value() === option.value\"\n [disabled]=\"option.disabled ?? false\"\n [isInvalid]=\"isInvalid()\"\n (change)=\"select(option.value)\"\n ></moz-radio>\n }\n </div>\n</fieldset>\n", styles: [".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__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-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' 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\")}.mc-field__validation-message.is-invalid{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' 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\")}.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{display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-field--group .mc-field__content:where(.mc-field__content--inline){flex-flow:row wrap;gap:.25rem 1rem}\n"], dependencies: [{ kind: "component", type: MozRadioComponent, selector: "moz-radio", inputs: ["id", "name", "label", "isInvalid", "disabled"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1517
1516
|
}
|
|
1518
1517
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozRadioGroupComponent, decorators: [{
|
|
1519
1518
|
type: Component,
|
|
@@ -1627,11 +1626,11 @@ class MozTabsComponent {
|
|
|
1627
1626
|
}
|
|
1628
1627
|
}
|
|
1629
1628
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1630
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozTabsComponent, isStandalone: true, selector: "moz-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, 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 } }, outputs: { selectedIndex: "selectedIndexChange", selectedIndexChange: "selectedIndexChange" }, ngImport: i0, template: "<nav [class]=\"classes()\" aria-label=\"Tabs\">\n <ul class=\"mc-tabs__list\" role=\"tablist\" [attr.aria-label]=\"description()\">\n @for (tab of tabs(); let index = $index; track index) {\n <li class=\"mc-tabs__item\" role=\"presentation\">\n @if (tab.routerLink) {\n <button\n type=\"button\"\n role=\"tab\"\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=\"mc-tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"mc-tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n </button>\n } @else {\n <button\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabClasses(index)()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon) {\n <span class=\"mc-tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"mc-tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n </button>\n }\n </li>\n }\n </ul>\n\n @if (divider()) {\n <moz-divider></moz-divider>\n }\n</nav>\n", styles: [".mc-tabs{background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem}.mc-tabs__list{list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:.5rem;padding:var(--tabs-list-padding, .5rem .25rem)}.mc-tabs__tab{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);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;height:2.5rem;justify-content:center;outline:none;padding-left:.75rem;padding-right:.75rem;position:relative;text-decoration:none}.mc-tabs__tab:hover{background-color:var(--tabs-color-background-hover, rgba(0, 0, 0, .05))}.mc-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{color:var(--tabs-color-text-selected, #006902);background-color:var(--tabs-color-background-selected, #ebf5de)}.mc-tabs__tab--selected:hover{background-color:var(--tabs-color-background-selected-hover, #c5e39e)}.mc-tabs__tab--disabled{color:var(--tabs-color-text-disabled, #b3b3b3);cursor:not-allowed}.mc-tabs__tab--disabled:hover{background:none}.mc-tabs__label{pointer-events:none}.mc-tabs__icon{fill:currentcolor;height:1.5rem;width:1.5rem}.mc-tabs--centered .mc-tabs__list{justify-content:center}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "
|
|
1629
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozTabsComponent, isStandalone: true, selector: "moz-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, 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 } }, outputs: { selectedIndex: "selectedIndexChange", selectedIndexChange: "selectedIndexChange" }, ngImport: i0, template: "<nav [class]=\"classes()\" aria-label=\"Tabs\">\n <ul class=\"mc-tabs__list\" role=\"tablist\" [attr.aria-label]=\"description()\">\n @for (tab of tabs(); let index = $index; track index) {\n <li class=\"mc-tabs__item\" role=\"presentation\">\n @if (tab.routerLink) {\n <button\n type=\"button\"\n role=\"tab\"\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=\"mc-tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"mc-tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n </button>\n } @else {\n <button\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabClasses(index)()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon) {\n <span class=\"mc-tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"mc-tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n </button>\n }\n </li>\n }\n </ul>\n\n @if (divider()) {\n <moz-divider></moz-divider>\n }\n</nav>\n", styles: [".mc-tabs{background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem}.mc-tabs__list{list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:.5rem;padding:var(--tabs-list-padding, .5rem .25rem)}.mc-tabs__tab{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);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;height:2.5rem;justify-content:center;outline:none;padding-left:.75rem;padding-right:.75rem;position:relative;text-decoration:none}.mc-tabs__tab:hover{background-color:var(--tabs-color-background-hover, rgba(0, 0, 0, .05))}.mc-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{color:var(--tabs-color-text-selected, #006902);background-color:var(--tabs-color-background-selected, #ebf5de)}.mc-tabs__tab--selected:hover{background-color:var(--tabs-color-background-selected-hover, #c5e39e)}.mc-tabs__tab--disabled{color:var(--tabs-color-text-disabled, #b3b3b3);cursor:not-allowed}.mc-tabs__tab--disabled:hover{background:none}.mc-tabs__label{pointer-events:none}.mc-tabs__icon{fill:currentcolor;height:1.5rem;width:1.5rem}.mc-tabs--centered .mc-tabs__list{justify-content:center}\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", "routerLink"] }, { kind: "component", type: MozDividerComponent, selector: "moz-divider", inputs: ["orientation", "appearance", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ExperimentalIsolatedShadowDom });
|
|
1631
1630
|
}
|
|
1632
1631
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozTabsComponent, decorators: [{
|
|
1633
1632
|
type: Component,
|
|
1634
|
-
args: [{ selector: 'moz-tabs', imports: [NgComponentOutlet,
|
|
1633
|
+
args: [{ selector: 'moz-tabs', imports: [NgComponentOutlet, RouterLink, MozDividerComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ExperimentalIsolatedShadowDom, template: "<nav [class]=\"classes()\" aria-label=\"Tabs\">\n <ul class=\"mc-tabs__list\" role=\"tablist\" [attr.aria-label]=\"description()\">\n @for (tab of tabs(); let index = $index; track index) {\n <li class=\"mc-tabs__item\" role=\"presentation\">\n @if (tab.routerLink) {\n <button\n type=\"button\"\n role=\"tab\"\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=\"mc-tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"mc-tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n </button>\n } @else {\n <button\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabClasses(index)()\"\n [attr.aria-selected]=\"isTabSelected(index)\"\n (click)=\"onClickTab(index)\"\n >\n @if (tab.icon) {\n <span class=\"mc-tabs__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n </span>\n }\n <div class=\"mc-tabs__label\">\n <span>{{ tab.label }}</span>\n </div>\n </button>\n }\n </li>\n }\n </ul>\n\n @if (divider()) {\n <moz-divider></moz-divider>\n }\n</nav>\n", styles: [".mc-tabs{background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem}.mc-tabs__list{list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:.5rem;padding:var(--tabs-list-padding, .5rem .25rem)}.mc-tabs__tab{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);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;height:2.5rem;justify-content:center;outline:none;padding-left:.75rem;padding-right:.75rem;position:relative;text-decoration:none}.mc-tabs__tab:hover{background-color:var(--tabs-color-background-hover, rgba(0, 0, 0, .05))}.mc-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{color:var(--tabs-color-text-selected, #006902);background-color:var(--tabs-color-background-selected, #ebf5de)}.mc-tabs__tab--selected:hover{background-color:var(--tabs-color-background-selected-hover, #c5e39e)}.mc-tabs__tab--disabled{color:var(--tabs-color-text-disabled, #b3b3b3);cursor:not-allowed}.mc-tabs__tab--disabled:hover{background:none}.mc-tabs__label{pointer-events:none}.mc-tabs__icon{fill:currentcolor;height:1.5rem;width:1.5rem}.mc-tabs--centered .mc-tabs__list{justify-content:center}\n"] }]
|
|
1635
1634
|
}], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], centered: [{ type: i0.Input, args: [{ isSignal: true, alias: "centered", required: false }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], selectedIndexChange: [{
|
|
1636
1635
|
type: Output
|
|
1637
1636
|
}] } });
|
|
@@ -1641,7 +1640,7 @@ class MozTagComponent {
|
|
|
1641
1640
|
size = input('m', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
1642
1641
|
id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
1643
1642
|
name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
|
|
1644
|
-
label = input
|
|
1643
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1645
1644
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1646
1645
|
contextualisedNumber = input(99, ...(ngDevMode ? [{ debugName: "contextualisedNumber" }] : []));
|
|
1647
1646
|
removableLabel = input('Remove', ...(ngDevMode ? [{ debugName: "removableLabel" }] : []));
|
|
@@ -1672,24 +1671,24 @@ class MozTagComponent {
|
|
|
1672
1671
|
this.removeTag.emit(this.id());
|
|
1673
1672
|
}
|
|
1674
1673
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1675
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozTagComponent, isStandalone: true, selector: "moz-tag", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired:
|
|
1674
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozTagComponent, isStandalone: true, selector: "moz-tag", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, contextualisedNumber: { classPropertyName: "contextualisedNumber", publicName: "contextualisedNumber", isSignal: true, isRequired: false, transformFunction: null }, removableLabel: { classPropertyName: "removableLabel", publicName: "removableLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeTag: "removeTag" }, providers: [
|
|
1676
1675
|
{
|
|
1677
1676
|
provide: NG_VALUE_ACCESSOR,
|
|
1678
1677
|
useExisting: forwardRef(() => MozTagComponent),
|
|
1679
1678
|
multi: true,
|
|
1680
1679
|
},
|
|
1681
|
-
], ngImport: i0, template: "<!-- Selectable -->\n@if (type() === 'selectable') {\n<label class=\"mc-tag\" [class]=\"classes()\" [attr.for]=\"id()\">\n
|
|
1680
|
+
], ngImport: i0, template: "<ng-template #labelTemplate>\n <ng-content />\n</ng-template>\n\n<!-- Selectable -->\n@if (type() === 'selectable') {\n<label class=\"mc-tag\" [class]=\"classes()\" [attr.for]=\"id()\">\n <input\n type=\"checkbox\"\n class=\"mc-tag__input\"\n [id]=\"id()\"\n [name]=\"name()\"\n [checked]=\"_value()\"\n [disabled]=\"disabled()\"\n (change)=\"onCheckboxChange($event)\"\n />\n <span class=\"mc-tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</label>\n}\n<!-- Interactive -->\n@if (type() === 'interactive') {\n<button type=\"button\" class=\"mc-tag\" [class]=\"classes()\" [disabled]=\"disabled()\">\n <span class=\"mc-tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</button>\n}\n<!-- Contextualised -->\n@if (type() === 'contextualised') {\n<button type=\"button\" class=\"mc-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=\"mc-tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</button>\n}\n<!-- Removable -->\n@if (type() === 'removable') {\n<span class=\"mc-tag\" [class]=\"classes()\">\n <span class=\"mc-tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n <button class=\"mc-tag-removable__remove\" type=\"button\" (click)=\"onRemove()\">\n <CrossCircleFilled24 class=\"mc-tag-removable__icon\" aria-hidden=\"true\" />\n <span class=\"mc-tag-removable__text\">{{ removableLabel() }}</span>\n </button>\n</span>\n}\n<!-- Informative -->\n@if (type() === 'informative') {\n<span class=\"mc-tag\" [class]=\"classes()\">\n <span class=\"mc-tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</span>\n}\n", styles: [".mc-tag{font-size:var(--font-size-100, .875rem);border-radius:2rem;height:2rem;padding-inline:.75rem;box-sizing:border-box;display:inline-flex;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, #999999)}.mc-tag--s{font-size:var(--font-size-50, .75rem);border-radius:1.5rem;height:1.5rem;padding-inline:.5rem}.mc-tag--l{font-size:var(--font-size-100, .875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem}.mc-tag.is-disabled,.mc-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,.mc-tag:disabled .mc-badge{color:currentColor}.mc-tag-interactive{text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600)}.mc-tag-interactive:not(:disabled):hover{box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--tag-color-border, #999999)}.mc-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{gap:.25rem;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{background:var(--tag-color-background-selected-hover, #006902)}.mc-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{padding-inline-end:.5rem;padding-inline-start:.25rem}.mc-tag-removable{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{width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;margin:0 0 0 .125rem;padding:.25rem;display:block;cursor:pointer;border-radius:var(--border-radius-full, 100%)}.mc-tag-removable__remove:hover{background:var(--tag-color-background-inverse-hover, #343b4c)}.mc-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{fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem}.mc-tag-removable__text{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}.mc-tag-removable.mc-tag--s{padding:0 0 0 .5rem}.mc-tag-removable.mc-tag--s .mc-tag-removable__remove{width:1.5rem;height:1.5rem;padding:.125rem}.mc-tag-removable.mc-tag--s .mc-tag-removable__icon{width:1.25rem;height:1.25rem}.mc-tag-removable.mc-tag--l .mc-tag-removable__remove{width:2.5rem;height:2.5rem}.mc-tag-removable.mc-tag--l .mc-tag-removable__icon{width:2rem;height:2rem}.mc-tag-selectable{gap:.25rem;white-space:nowrap;cursor:pointer;padding-inline-start:.5rem;font-weight:var(--font-weight-semi-bold, 600)}.mc-tag-selectable:hover{box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--tag-color-border, #999999)}.mc-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){background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none}.mc-tag-selectable:has(:checked):before{display:inline-block;content:\"\";height:1.25rem;width:1.25rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--tag-color-text-inverse, %23ffffff)' 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\")}.mc-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){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{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--color-text-disabled, %23737373)' 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\")}.mc-tag-selectable .mc-tag__input{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}.mc-tag-selectable .mc-tag__label{-webkit-user-select:none;user-select:none}.mc-tag-selectable.mc-tag--s{padding-inline-start:.25rem;gap:.125rem}.mc-tag-selectable.mc-tag--l{padding-inline-start:.75rem}\n"], dependencies: [{ kind: "component", type: CrossCircleFilled24, selector: "CrossCircleFilled24", inputs: ["color", "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, encapsulation: i0.ViewEncapsulation.ExperimentalIsolatedShadowDom });
|
|
1682
1681
|
}
|
|
1683
1682
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozTagComponent, decorators: [{
|
|
1684
1683
|
type: Component,
|
|
1685
|
-
args: [{ selector: 'moz-tag', imports: [CrossCircleFilled24, MozNumberBadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
1684
|
+
args: [{ selector: 'moz-tag', imports: [CrossCircleFilled24, MozNumberBadgeComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
1686
1685
|
{
|
|
1687
1686
|
provide: NG_VALUE_ACCESSOR,
|
|
1688
1687
|
useExisting: forwardRef(() => MozTagComponent),
|
|
1689
1688
|
multi: true,
|
|
1690
1689
|
},
|
|
1691
|
-
], encapsulation: ViewEncapsulation.ExperimentalIsolatedShadowDom, template: "<!-- Selectable -->\n@if (type() === 'selectable') {\n<label class=\"mc-tag\" [class]=\"classes()\" [attr.for]=\"id()\">\n
|
|
1692
|
-
}], 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 }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required:
|
|
1690
|
+
], encapsulation: ViewEncapsulation.ExperimentalIsolatedShadowDom, template: "<ng-template #labelTemplate>\n <ng-content />\n</ng-template>\n\n<!-- Selectable -->\n@if (type() === 'selectable') {\n<label class=\"mc-tag\" [class]=\"classes()\" [attr.for]=\"id()\">\n <input\n type=\"checkbox\"\n class=\"mc-tag__input\"\n [id]=\"id()\"\n [name]=\"name()\"\n [checked]=\"_value()\"\n [disabled]=\"disabled()\"\n (change)=\"onCheckboxChange($event)\"\n />\n <span class=\"mc-tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</label>\n}\n<!-- Interactive -->\n@if (type() === 'interactive') {\n<button type=\"button\" class=\"mc-tag\" [class]=\"classes()\" [disabled]=\"disabled()\">\n <span class=\"mc-tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</button>\n}\n<!-- Contextualised -->\n@if (type() === 'contextualised') {\n<button type=\"button\" class=\"mc-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=\"mc-tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</button>\n}\n<!-- Removable -->\n@if (type() === 'removable') {\n<span class=\"mc-tag\" [class]=\"classes()\">\n <span class=\"mc-tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n <button class=\"mc-tag-removable__remove\" type=\"button\" (click)=\"onRemove()\">\n <CrossCircleFilled24 class=\"mc-tag-removable__icon\" aria-hidden=\"true\" />\n <span class=\"mc-tag-removable__text\">{{ removableLabel() }}</span>\n </button>\n</span>\n}\n<!-- Informative -->\n@if (type() === 'informative') {\n<span class=\"mc-tag\" [class]=\"classes()\">\n <span class=\"mc-tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</span>\n}\n", styles: [".mc-tag{font-size:var(--font-size-100, .875rem);border-radius:2rem;height:2rem;padding-inline:.75rem;box-sizing:border-box;display:inline-flex;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, #999999)}.mc-tag--s{font-size:var(--font-size-50, .75rem);border-radius:1.5rem;height:1.5rem;padding-inline:.5rem}.mc-tag--l{font-size:var(--font-size-100, .875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem}.mc-tag.is-disabled,.mc-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,.mc-tag:disabled .mc-badge{color:currentColor}.mc-tag-interactive{text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600)}.mc-tag-interactive:not(:disabled):hover{box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--tag-color-border, #999999)}.mc-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{gap:.25rem;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{background:var(--tag-color-background-selected-hover, #006902)}.mc-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{padding-inline-end:.5rem;padding-inline-start:.25rem}.mc-tag-removable{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{width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;margin:0 0 0 .125rem;padding:.25rem;display:block;cursor:pointer;border-radius:var(--border-radius-full, 100%)}.mc-tag-removable__remove:hover{background:var(--tag-color-background-inverse-hover, #343b4c)}.mc-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{fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem}.mc-tag-removable__text{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}.mc-tag-removable.mc-tag--s{padding:0 0 0 .5rem}.mc-tag-removable.mc-tag--s .mc-tag-removable__remove{width:1.5rem;height:1.5rem;padding:.125rem}.mc-tag-removable.mc-tag--s .mc-tag-removable__icon{width:1.25rem;height:1.25rem}.mc-tag-removable.mc-tag--l .mc-tag-removable__remove{width:2.5rem;height:2.5rem}.mc-tag-removable.mc-tag--l .mc-tag-removable__icon{width:2rem;height:2rem}.mc-tag-selectable{gap:.25rem;white-space:nowrap;cursor:pointer;padding-inline-start:.5rem;font-weight:var(--font-weight-semi-bold, 600)}.mc-tag-selectable:hover{box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--tag-color-border, #999999)}.mc-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){background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none}.mc-tag-selectable:has(:checked):before{display:inline-block;content:\"\";height:1.25rem;width:1.25rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--tag-color-text-inverse, %23ffffff)' 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\")}.mc-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){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{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--color-text-disabled, %23737373)' 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\")}.mc-tag-selectable .mc-tag__input{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}.mc-tag-selectable .mc-tag__label{-webkit-user-select:none;user-select:none}.mc-tag-selectable.mc-tag--s{padding-inline-start:.25rem;gap:.125rem}.mc-tag-selectable.mc-tag--l{padding-inline-start:.75rem}\n"] }]
|
|
1691
|
+
}], 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 }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", 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"] }] } });
|
|
1693
1692
|
|
|
1694
1693
|
/**
|
|
1695
1694
|
* Directive that transforms a simple textarea into a styled textarea.
|
|
@@ -2581,7 +2580,7 @@ class MozPhoneNumberComponent {
|
|
|
2581
2580
|
useExisting: forwardRef(() => MozPhoneNumberComponent),
|
|
2582
2581
|
multi: true,
|
|
2583
2582
|
},
|
|
2584
|
-
], ngImport: i0, template: "<div\n class=\"mc-field\"\n [class.is-disabled]=\"disabled()\"\n [class.is-readonly]=\"readonly()\"\n>\n <legend class=\"mc-field__legend\">\n {{ label() }} @if (showRequirement() && requirementText()) {\n <span class=\"mc-field__requirement\">{{ requirementText() }}</span>\n }\n </legend>\n\n @if (helpText()) {\n <span [id]=\"helpId\" class=\"mc-field__help\">{{ helpText() }}</span>\n }\n\n <div class=\"mc-field__content\">\n <div id=\"mc-phone-number-input\" class=\"mc-phone-number-input\">\n <!-- Select pays + flag -->\n <div\n class=\"mc-phone-number-input__select-wrapper\"\n [class.mc-phone-number-input__select-wrapper--hidden]=\"\n !showCountrySelect()\n \"\n >\n <select\n [id]=\"selectId\"\n [name]=\"selectName()\"\n class=\"mc-select mc-phone-number-input__select\"\n [class.mc-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=\"mc-phone-number-input__select-display\">\n <div class=\"mc-phone-number-input__flag\">\n <img\n class=\"mc-phone-number-input__flag-image\"\n [id]=\"flagImgId\"\n [src]=\"selectedFlagUrl()\"\n [alt]=\"selectedCountryName()\"\n width=\"20\"\n />\n </div>\n <ChevronDown24 class=\"mc-phone-number-input__chevron\" />\n </div>\n }\n </div>\n\n <!-- Input num\u00E9ro -->\n <div\n class=\"mc-text-input mc-phone-number-input__input\"\n [class.mc-text-input--s]=\"size() === 's'\"\n [class.is-invalid]=\"isInvalid()\"\n >\n @if (showCountryCode()) {\n <span [id]=\"ccId\" class=\"mc-phone-number-input__country-code\"\n >{{ selectedDialCode() }}</span\n >\n }\n\n <input\n type=\"tel\"\n [id]=\"inputId\"\n class=\"mc-phone-number-input__control mc-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=\"mc-field__validation-message is-invalid\">\n {{ errorToShow() }}\n </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;box-sizing:border-box;display:flex;align-items:center;gap:.5rem}.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);flex-grow:1}.mc-text-input__control::placeholder{color:var(--forms-color-placeholder, #666666)}.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){padding-inline-start:.6875rem}.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control{padding-inline-start:0}.mc-text-input:has(.mc-controls-options){padding-inline-end:.6875rem}.mc-text-input:has(.mc-controls-options) .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-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)}.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}.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;border-radius:var(--button-border-radius-s, .25rem);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-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}.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}.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}.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)}.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))}.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)}.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)}.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)}.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 .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)}.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)}.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)}.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))}.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))}.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))}.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))}.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))}.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{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, 2)}.mc-listbox.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-listbox{opacity:1}@media(width>=680px){.mc-listbox{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{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}.mc-select{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;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-interactive, %23000000)' 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\");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;background-repeat:no-repeat;background-size:1rem;border-radius:var(--border-radius-s, .25rem)}.mc-select: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: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:disabled{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' 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\");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--readonly{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-select.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.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{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{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__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-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' 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\")}.mc-field__validation-message.is-invalid{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' 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\")}.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{display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-field--group .mc-field__content:where(.mc-field__content--inline){flex-flow:row wrap;gap:.25rem 1rem}.mc-phone-number-input{font-family:var(--font-family, LeroyMerlin),sans-serif;display:flex;position:relative;gap:.25rem}.mc-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{width:1.5rem;height:1.125rem;margin-left:auto;display:flex;align-items:center}.mc-phone-number-input__flag-image{width:24px;max-height:18px;border-radius:var(--border-radius-xs, .125rem)}.mc-phone-number-input__chevron{width:1.5rem;height:1.5rem;margin:.75rem}.mc-phone-number-input__select-wrapper{position:relative}.mc-phone-number-input__select-wrapper--hidden{display:none}.mc-phone-number-input__select{width:5.75rem;padding:0;z-index:2;opacity:0;position:relative}.mc-phone-number-input__select:hover+.mc-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__select :read-only .mc-phone-number-input__chevron{display:none}.mc-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{gap:0}.mc-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$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: ["color", "hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2583
|
+
], ngImport: i0, template: "<div\n class=\"mc-field\"\n [class.is-disabled]=\"disabled()\"\n [class.is-readonly]=\"readonly()\"\n>\n <legend class=\"mc-field__legend\">\n {{ label() }} @if (showRequirement() && requirementText()) {\n <span class=\"mc-field__requirement\">{{ requirementText() }}</span>\n }\n </legend>\n\n @if (helpText()) {\n <span [id]=\"helpId\" class=\"mc-field__help\">{{ helpText() }}</span>\n }\n\n <div class=\"mc-field__content\">\n <div id=\"mc-phone-number-input\" class=\"mc-phone-number-input\">\n <!-- Select pays + flag -->\n <div\n class=\"mc-phone-number-input__select-wrapper\"\n [class.mc-phone-number-input__select-wrapper--hidden]=\"\n !showCountrySelect()\n \"\n >\n <select\n [id]=\"selectId\"\n [name]=\"selectName()\"\n class=\"mc-select mc-phone-number-input__select\"\n [class.mc-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=\"mc-phone-number-input__select-display\">\n <div class=\"mc-phone-number-input__flag\">\n <img\n class=\"mc-phone-number-input__flag-image\"\n [id]=\"flagImgId\"\n [src]=\"selectedFlagUrl()\"\n [alt]=\"selectedCountryName()\"\n width=\"20\"\n />\n </div>\n <ChevronDown24 class=\"mc-phone-number-input__chevron\" />\n </div>\n }\n </div>\n\n <!-- Input num\u00E9ro -->\n <div\n class=\"mc-text-input mc-phone-number-input__input\"\n [class.mc-text-input--s]=\"size() === 's'\"\n [class.is-invalid]=\"isInvalid()\"\n >\n @if (showCountryCode()) {\n <span [id]=\"ccId\" class=\"mc-phone-number-input__country-code\"\n >{{ selectedDialCode() }}</span\n >\n }\n\n <input\n type=\"tel\"\n [id]=\"inputId\"\n class=\"mc-phone-number-input__control mc-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=\"mc-field__validation-message is-invalid\">\n {{ errorToShow() }}\n </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;box-sizing:border-box;display:flex;align-items:center;gap:.5rem}.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);flex-grow:1}.mc-text-input__control::placeholder{color:var(--forms-color-placeholder, #666666)}.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){padding-inline-start:.6875rem}.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control{padding-inline-start:0}.mc-text-input:has(.mc-controls-options){padding-inline-end:.6875rem}.mc-text-input:has(.mc-controls-options) .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-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)}.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}.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;border-radius:var(--button-border-radius-s, .25rem);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-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}.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}.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}.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)}.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))}.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)}.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)}.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)}.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 .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)}.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)}.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)}.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))}.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))}.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))}.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))}.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))}.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{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, 2)}.mc-listbox.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-listbox{opacity:1}@media(width>=680px){.mc-listbox{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{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}.mc-select{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;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-interactive, %23000000)' 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\");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;background-repeat:no-repeat;background-size:1rem;border-radius:var(--border-radius-s, .25rem)}.mc-select: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: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:disabled{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' 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\");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--readonly{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-select.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.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{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{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__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-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' 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\")}.mc-field__validation-message.is-invalid{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' 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\")}.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{display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-field--group .mc-field__content:where(.mc-field__content--inline){flex-flow:row wrap;gap:.25rem 1rem}.mc-phone-number-input{font-family:var(--font-family, LeroyMerlin),sans-serif;display:flex;position:relative;gap:.25rem}.mc-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{width:1.5rem;height:1.125rem;margin-left:auto;display:flex;align-items:center}.mc-phone-number-input__flag-image{width:24px;max-height:18px;border-radius:var(--border-radius-xs, .125rem)}.mc-phone-number-input__chevron{width:1.5rem;height:1.5rem;margin:.75rem}.mc-phone-number-input__select-wrapper{position:relative}.mc-phone-number-input__select-wrapper--hidden{display:none}.mc-phone-number-input__select{width:5.75rem;padding:0;z-index:2;opacity:0;position:relative}.mc-phone-number-input__select:hover+.mc-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__select :read-only .mc-phone-number-input__chevron{display:none}.mc-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{gap:0}.mc-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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[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: ["color", "hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2585
2584
|
}
|
|
2586
2585
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozPhoneNumberComponent, decorators: [{
|
|
2587
2586
|
type: Component,
|
|
@@ -3309,11 +3308,11 @@ class BuiltInMenuComponent {
|
|
|
3309
3308
|
}
|
|
3310
3309
|
}
|
|
3311
3310
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BuiltInMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3312
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BuiltInMenuComponent, isStandalone: true, selector: "moz-built-in-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange" }, ngImport: i0, template: "<nav [class]=\"hostClasses()\" role=\"navigation\" [attr.aria-label]=\"ariaLabel()\">\n <ul class=\"mc-built-in-menu__list\">\n @for (item of items(); let index = $index; track index) {\n <li\n class=\"mc-built-in-menu__item\"\n [class.mc-built-in-menu__item--selected]=\"isSelected(index)\"\n [attr.aria-current]=\"isSelected(index) ? 'true' : null\"\n >\n @if (item.href) {\n <a\n class=\"mc-built-in-menu__link\"\n [attr.href]=\"item.href\"\n [attr.target]=\"item.target || '_self'\"\n (click)=\"onItemClick(index, $event)\"\n >\n @if (item.icon) {\n <span class=\"mc-built-in-menu__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"item.icon\"></ng-container>\n </span>\n }\n\n <span class=\"mc-built-in-menu__label\">{{ item.label }}</span>\n\n <ChevronRight20 class=\"mc-built-in-menu__icon\" />\n </a>\n } @else if (item.routerLink) {\n <a\n class=\"mc-built-in-menu__link\"\n [routerLink]=\"item.routerLink\"\n [attr.target]=\"item.target || '_self'\"\n (click)=\"onItemClick(index, $event)\"\n >\n @if (item.icon) {\n <span class=\"mc-built-in-menu__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"item.icon\"></ng-container>\n </span>\n }\n\n <span class=\"mc-built-in-menu__label\">{{ item.label }}</span>\n\n <ChevronRight20 class=\"mc-built-in-menu__icon\" />\n </a>\n } @else {\n <button type=\"button\" class=\"mc-built-in-menu__button\" (click)=\"onItemClick(index, $event)\">\n @if (item.icon) {\n <span class=\"mc-built-in-menu__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"item.icon\"></ng-container>\n </span>\n }\n\n <span class=\"mc-built-in-menu__label\">{{ item.label }}</span>\n\n <ChevronRight20 class=\"mc-built-in-menu__icon\" />\n </button>\n }\n </li>\n }\n </ul>\n</nav>\n", styles: [".mc-built-in-menu{display:inline-block;width:15rem;padding:.5rem;background-color:var(--built-in-menu-color-background-default, #ffffff);border-radius:var(--border-radius-s, .25rem)}.mc-built-in-menu--outlined{border:1px solid var(--color-border-primary, #cccccc)}.mc-built-in-menu__list{list-style:none;margin:0;padding:0}.mc-built-in-menu__item{display:flex;align-items:center;height:3.5rem;border-bottom:1px solid var(--divider-color-primary, #cccccc)}.mc-built-in-menu__item--selected .mc-built-in-menu__button,.mc-built-in-menu__item--selected .mc-built-in-menu__link{background-color:var(--built-in-menu-color-background-selected, #ebf5de)}.mc-built-in-menu__item--selected .mc-built-in-menu__label{color:var(--built-in-menu-color-text-selected, #006902);font-weight:var(--font-weight-semi-bold, 600)}.mc-built-in-menu__item--selected .mc-built-in-menu__icon{fill:var(--built-in-menu-color-text-selected, #006902)}.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected):hover .mc-built-in-menu__button,.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected):hover .mc-built-in-menu__link,.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected) .mc-built-in-menu__button:focus-visible,.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected) .mc-built-in-menu__link:focus-visible{background-color:var(--built-in-menu-color-background-hover, rgba(0, 0, 0, .05))}.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected) .mc-built-in-menu__label{color:var(--built-in-menu-color-text-default, #404040)}.mc-built-in-menu__item--selected,.mc-built-in-menu__item:has(+.mc-built-in-menu__item--selected),.mc-built-in-menu__item:last-child,.mc-built-in-menu__item:hover,.mc-built-in-menu__item:has(+.mc-built-in-menu__item:hover){border-bottom:1px solid transparent}.mc-built-in-menu__icon{flex:0 0 auto}.mc-built-in-menu__button{width:100%;height:100%;border-radius:var(--border-radius-s, .25rem);background-color:var(--built-in-menu-color-background-default, #ffffff);padding:0 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;overflow:hidden;border:none;cursor:pointer}.mc-built-in-menu__link{width:100%;height:100%;border-radius:var(--border-radius-s, .25rem);background-color:var(--built-in-menu-color-background-default, #ffffff);padding:0 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;overflow:hidden;text-decoration:none}.mc-built-in-menu__label{flex:1 1 auto;margin-left:.5rem;margin-right:1rem;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);color:var(--built-in-menu-color-text-default, #404040);overflow:hidden;display:-webkit-box;text-align:left;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}\n"], dependencies: [{ kind: "
|
|
3311
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BuiltInMenuComponent, isStandalone: true, selector: "moz-built-in-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange" }, ngImport: i0, template: "<nav [class]=\"hostClasses()\" role=\"navigation\" [attr.aria-label]=\"ariaLabel()\">\n <ul class=\"mc-built-in-menu__list\">\n @for (item of items(); let index = $index; track index) {\n <li\n class=\"mc-built-in-menu__item\"\n [class.mc-built-in-menu__item--selected]=\"isSelected(index)\"\n [attr.aria-current]=\"isSelected(index) ? 'true' : null\"\n >\n @if (item.href) {\n <a\n class=\"mc-built-in-menu__link\"\n [attr.href]=\"item.href\"\n [attr.target]=\"item.target || '_self'\"\n (click)=\"onItemClick(index, $event)\"\n >\n @if (item.icon) {\n <span class=\"mc-built-in-menu__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"item.icon\"></ng-container>\n </span>\n }\n\n <span class=\"mc-built-in-menu__label\">{{ item.label }}</span>\n\n <ChevronRight20 class=\"mc-built-in-menu__icon\" />\n </a>\n } @else if (item.routerLink) {\n <a\n class=\"mc-built-in-menu__link\"\n [routerLink]=\"item.routerLink\"\n [attr.target]=\"item.target || '_self'\"\n (click)=\"onItemClick(index, $event)\"\n >\n @if (item.icon) {\n <span class=\"mc-built-in-menu__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"item.icon\"></ng-container>\n </span>\n }\n\n <span class=\"mc-built-in-menu__label\">{{ item.label }}</span>\n\n <ChevronRight20 class=\"mc-built-in-menu__icon\" />\n </a>\n } @else {\n <button type=\"button\" class=\"mc-built-in-menu__button\" (click)=\"onItemClick(index, $event)\">\n @if (item.icon) {\n <span class=\"mc-built-in-menu__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"item.icon\"></ng-container>\n </span>\n }\n\n <span class=\"mc-built-in-menu__label\">{{ item.label }}</span>\n\n <ChevronRight20 class=\"mc-built-in-menu__icon\" />\n </button>\n }\n </li>\n }\n </ul>\n</nav>\n", styles: [".mc-built-in-menu{display:inline-block;width:15rem;padding:.5rem;background-color:var(--built-in-menu-color-background-default, #ffffff);border-radius:var(--border-radius-s, .25rem)}.mc-built-in-menu--outlined{border:1px solid var(--color-border-primary, #cccccc)}.mc-built-in-menu__list{list-style:none;margin:0;padding:0}.mc-built-in-menu__item{display:flex;align-items:center;height:3.5rem;border-bottom:1px solid var(--divider-color-primary, #cccccc)}.mc-built-in-menu__item--selected .mc-built-in-menu__button,.mc-built-in-menu__item--selected .mc-built-in-menu__link{background-color:var(--built-in-menu-color-background-selected, #ebf5de)}.mc-built-in-menu__item--selected .mc-built-in-menu__label{color:var(--built-in-menu-color-text-selected, #006902);font-weight:var(--font-weight-semi-bold, 600)}.mc-built-in-menu__item--selected .mc-built-in-menu__icon{fill:var(--built-in-menu-color-text-selected, #006902)}.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected):hover .mc-built-in-menu__button,.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected):hover .mc-built-in-menu__link,.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected) .mc-built-in-menu__button:focus-visible,.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected) .mc-built-in-menu__link:focus-visible{background-color:var(--built-in-menu-color-background-hover, rgba(0, 0, 0, .05))}.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected) .mc-built-in-menu__label{color:var(--built-in-menu-color-text-default, #404040)}.mc-built-in-menu__item--selected,.mc-built-in-menu__item:has(+.mc-built-in-menu__item--selected),.mc-built-in-menu__item:last-child,.mc-built-in-menu__item:hover,.mc-built-in-menu__item:has(+.mc-built-in-menu__item:hover){border-bottom:1px solid transparent}.mc-built-in-menu__icon{flex:0 0 auto}.mc-built-in-menu__button{width:100%;height:100%;border-radius:var(--border-radius-s, .25rem);background-color:var(--built-in-menu-color-background-default, #ffffff);padding:0 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;overflow:hidden;border:none;cursor:pointer}.mc-built-in-menu__link{width:100%;height:100%;border-radius:var(--border-radius-s, .25rem);background-color:var(--built-in-menu-color-background-default, #ffffff);padding:0 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;overflow:hidden;text-decoration:none}.mc-built-in-menu__label{flex:1 1 auto;margin-left:.5rem;margin-right:1rem;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);color:var(--built-in-menu-color-text-default, #404040);overflow:hidden;display:-webkit-box;text-align:left;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: ChevronRight20, selector: "ChevronRight20", inputs: ["color", "hostClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ExperimentalIsolatedShadowDom });
|
|
3313
3312
|
}
|
|
3314
3313
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BuiltInMenuComponent, decorators: [{
|
|
3315
3314
|
type: Component,
|
|
3316
|
-
args: [{ selector: 'moz-built-in-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3315
|
+
args: [{ selector: 'moz-built-in-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgComponentOutlet, ChevronRight20, RouterLink], encapsulation: ViewEncapsulation.ExperimentalIsolatedShadowDom, template: "<nav [class]=\"hostClasses()\" role=\"navigation\" [attr.aria-label]=\"ariaLabel()\">\n <ul class=\"mc-built-in-menu__list\">\n @for (item of items(); let index = $index; track index) {\n <li\n class=\"mc-built-in-menu__item\"\n [class.mc-built-in-menu__item--selected]=\"isSelected(index)\"\n [attr.aria-current]=\"isSelected(index) ? 'true' : null\"\n >\n @if (item.href) {\n <a\n class=\"mc-built-in-menu__link\"\n [attr.href]=\"item.href\"\n [attr.target]=\"item.target || '_self'\"\n (click)=\"onItemClick(index, $event)\"\n >\n @if (item.icon) {\n <span class=\"mc-built-in-menu__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"item.icon\"></ng-container>\n </span>\n }\n\n <span class=\"mc-built-in-menu__label\">{{ item.label }}</span>\n\n <ChevronRight20 class=\"mc-built-in-menu__icon\" />\n </a>\n } @else if (item.routerLink) {\n <a\n class=\"mc-built-in-menu__link\"\n [routerLink]=\"item.routerLink\"\n [attr.target]=\"item.target || '_self'\"\n (click)=\"onItemClick(index, $event)\"\n >\n @if (item.icon) {\n <span class=\"mc-built-in-menu__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"item.icon\"></ng-container>\n </span>\n }\n\n <span class=\"mc-built-in-menu__label\">{{ item.label }}</span>\n\n <ChevronRight20 class=\"mc-built-in-menu__icon\" />\n </a>\n } @else {\n <button type=\"button\" class=\"mc-built-in-menu__button\" (click)=\"onItemClick(index, $event)\">\n @if (item.icon) {\n <span class=\"mc-built-in-menu__icon\" aria-hidden=\"true\">\n <ng-container [ngComponentOutlet]=\"item.icon\"></ng-container>\n </span>\n }\n\n <span class=\"mc-built-in-menu__label\">{{ item.label }}</span>\n\n <ChevronRight20 class=\"mc-built-in-menu__icon\" />\n </button>\n }\n </li>\n }\n </ul>\n</nav>\n", styles: [".mc-built-in-menu{display:inline-block;width:15rem;padding:.5rem;background-color:var(--built-in-menu-color-background-default, #ffffff);border-radius:var(--border-radius-s, .25rem)}.mc-built-in-menu--outlined{border:1px solid var(--color-border-primary, #cccccc)}.mc-built-in-menu__list{list-style:none;margin:0;padding:0}.mc-built-in-menu__item{display:flex;align-items:center;height:3.5rem;border-bottom:1px solid var(--divider-color-primary, #cccccc)}.mc-built-in-menu__item--selected .mc-built-in-menu__button,.mc-built-in-menu__item--selected .mc-built-in-menu__link{background-color:var(--built-in-menu-color-background-selected, #ebf5de)}.mc-built-in-menu__item--selected .mc-built-in-menu__label{color:var(--built-in-menu-color-text-selected, #006902);font-weight:var(--font-weight-semi-bold, 600)}.mc-built-in-menu__item--selected .mc-built-in-menu__icon{fill:var(--built-in-menu-color-text-selected, #006902)}.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected):hover .mc-built-in-menu__button,.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected):hover .mc-built-in-menu__link,.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected) .mc-built-in-menu__button:focus-visible,.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected) .mc-built-in-menu__link:focus-visible{background-color:var(--built-in-menu-color-background-hover, rgba(0, 0, 0, .05))}.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected) .mc-built-in-menu__label{color:var(--built-in-menu-color-text-default, #404040)}.mc-built-in-menu__item--selected,.mc-built-in-menu__item:has(+.mc-built-in-menu__item--selected),.mc-built-in-menu__item:last-child,.mc-built-in-menu__item:hover,.mc-built-in-menu__item:has(+.mc-built-in-menu__item:hover){border-bottom:1px solid transparent}.mc-built-in-menu__icon{flex:0 0 auto}.mc-built-in-menu__button{width:100%;height:100%;border-radius:var(--border-radius-s, .25rem);background-color:var(--built-in-menu-color-background-default, #ffffff);padding:0 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;overflow:hidden;border:none;cursor:pointer}.mc-built-in-menu__link{width:100%;height:100%;border-radius:var(--border-radius-s, .25rem);background-color:var(--built-in-menu-color-background-default, #ffffff);padding:0 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;overflow:hidden;text-decoration:none}.mc-built-in-menu__label{flex:1 1 auto;margin-left:.5rem;margin-right:1rem;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);color:var(--built-in-menu-color-text-default, #404040);overflow:hidden;display:-webkit-box;text-align:left;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}\n"] }]
|
|
3317
3316
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
3318
3317
|
|
|
3319
3318
|
class MozCheckListMenuComponent {
|
|
@@ -3556,7 +3555,7 @@ class MozPageHeaderComponent {
|
|
|
3556
3555
|
this.activeTabChange.emit(index);
|
|
3557
3556
|
}
|
|
3558
3557
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3559
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozPageHeaderComponent, isStandalone: true, selector: "moz-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, backButton: { classPropertyName: "backButton", publicName: "backButton", isSignal: true, isRequired: false, transformFunction: null }, searchButton: { classPropertyName: "searchButton", publicName: "searchButton", isSignal: true, isRequired: false, transformFunction: null }, helpButton: { classPropertyName: "helpButton", publicName: "helpButton", isSignal: true, isRequired: false, transformFunction: null }, notificationButton: { classPropertyName: "notificationButton", publicName: "notificationButton", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusLabel: { classPropertyName: "statusLabel", publicName: "statusLabel", isSignal: true, isRequired: false, transformFunction: null }, extraInfo: { classPropertyName: "extraInfo", publicName: "extraInfo", isSignal: true, isRequired: false, transformFunction: null }, scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, scopeValue: { classPropertyName: "scopeValue", publicName: "scopeValue", isSignal: true, isRequired: false, transformFunction: null }, scopePlaceholder: { classPropertyName: "scopePlaceholder", publicName: "scopePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange", back: "back", search: "search", help: "help", notification: "notification", toggleMenu: "toggleMenu", toggleScope: "toggleScope", scopeValueChange: "scopeValueChange", activeTabChange: "activeTabChange" }, ngImport: i0, template: "<div [class]=\"classes()\">\n <div class=\"mc-page-header__top-wrapper\">\n <div class=\"mc-page-header__top-content\">\n @if (backButton()) {\n <moz-icon-button [ghost]=\"true\" ariaLabel=\"Back button\" (click)=\"onBack()\">\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <div class=\"mc-page-header__content-wrapper\">\n <span class=\"mc-page-header__title\">\n {{ title() }}\n </span>\n\n @if (hasStatusOrExtraInfo()) {\n <div class=\"mc-page-header__info-wrapper\">\n @if (hasStatusBadge()) {\n <moz-status-badge [label]=\"statusLabel()!\" [status]=\"status()!\" />\n } @if (extraInfo()) {\n <span class=\"mc-page-header__extra-info\">\n {{ extraInfo() }}\n </span>\n }\n </div>\n }\n\n <ng-content select=\"[content]\" />\n </div>\n </div>\n\n <div class=\"mc-page-header__actions-wrapper\">\n <moz-icon-button\n class=\"mc-page-header__burger-menu\"\n [ghost]=\"true\"\n ariaLabel=\"Burger menu\"\n (click)=\"onToggleMenu()\"\n >\n <Menu24 icon />\n </moz-icon-button>\n\n <ng-content select=\"[actions]\">\n <div class=\"mc-page-header__actions-content\">\n @if (hasIconButtons()) {\n <div class=\"mc-page-header__icons\">\n @if (searchButton()) {\n <moz-icon-button [ghost]=\"true\" ariaLabel=\"Search button\" (click)=\"onSearch()\">\n <Search24 icon />\n </moz-icon-button>\n } @if (helpButton()) {\n <moz-icon-button [ghost]=\"true\" ariaLabel=\"Help button\" (click)=\"onHelp()\">\n <HelpCircle24 icon />\n </moz-icon-button>\n } @if (notificationButton()) {\n <moz-icon-button\n [ghost]=\"true\"\n ariaLabel=\"Notification button\"\n (click)=\"onNotification()\"\n >\n <Notification24 icon />\n </moz-icon-button>\n }\n </div>\n } @if (isScopeString() && isScopeValueBoolean()) {\n <moz-tag\n type=\"interactive\"\n [id]=\"'scope-tag'\"\n [label]=\"$any(scope())\"\n (click)=\"onScopeTagClick()\"\n />\n } @if (isScopeArray() && isScopeValueNotBoolean()) {\n <div class=\"mc-page-header__scope--select\">\n <moz-select\n [name]=\"'scope-select'\"\n id=\"scope-select\"\n size=\"s\"\n [options]=\"scopeAsArray()\"\n [placeholder]=\"scopePlaceholder()\"\n [ngModel]=\"scopeValue()\"\n (ngModelChange)=\"onScopeSelectChange($event)\"\n />\n </div>\n\n <div class=\"mc-page-header__scope--tag\">\n <moz-tag\n type=\"interactive\"\n [id]=\"'mobile-scope-tag'\"\n [label]=\"mobileTagLabel()\"\n (click)=\"onToggleScope()\"\n />\n </div>\n }\n </div>\n </ng-content>\n </div>\n </div>\n\n @if (tabs() && tabs()!.length > 0) {\n <div class=\"mc-page-header__tabs\">\n <moz-tabs\n [tabs]=\"tabs()!\"\n [(selectedIndex)]=\"activeTab\"\n (selectedIndexChange)=\"onActiveTabChange($event)\"\n />\n </div>\n }\n</div>\n", styles: [".mc-page-header,.mc-page-header :host{--tabs-list-padding: .5rem 1rem}@media screen and (min-width:680px){.mc-page-header,.mc-page-header :host{--tabs-list-padding: .5rem 2.5rem}}.mc-page-header--with-shadow{box-shadow:var(--shadow-bottom-xs-x, 0px) var(--shadow-bottom-xs-y, 3px) var(--shadow-bottom-xs-blur, 5px) var(--shadow-bottom-xs-spread, -2px) rgba(0,0,0,var(--shadow-bottom-xs-opacity, 15%))}.mc-page-header__top-wrapper{padding:0 0 .75rem;display:flex;flex-direction:column-reverse;justify-content:space-between;background-color:var(--page-header-color-background, #ffffff)}@media screen and (min-width:680px){.mc-page-header__top-wrapper{padding:.75rem 2.5rem;flex-direction:row;gap:2rem}}.mc-page-header__top-content{padding:.5rem 0 0;display:flex;gap:.25rem;align-items:center}@media screen and (min-width:680px){.mc-page-header__top-content{padding:.5rem 0;gap:.75rem}}.mc-page-header__content-wrapper{display:flex;flex-direction:column;gap:.5rem}.mc-page-header__title{font-size:var(--font-size-200, 1.125rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--page-header-color-text-title, #000000)}@media screen and (min-width:680px){.mc-page-header__title{font-size:var(--font-size-300, 1.5rem)}}.mc-page-header__info-wrapper{display:flex;align-items:center;gap:.5rem}.mc-page-header__extra-info{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--page-header-color-text-extra-info, #404040)}.mc-page-header__actions-wrapper{display:flex;align-items:start;justify-content:space-between;border-bottom:1px solid var(--divider-color-primary, #cccccc);padding-right:1rem}@media screen and (min-width:680px){.mc-page-header__actions-wrapper{border-bottom:none;padding-right:0}}.mc-page-header__actions-wrapper .mc-page-header__burger-menu{display:inline-flex}@media screen and (min-width:680px){.mc-page-header__actions-wrapper .mc-page-header__burger-menu{display:none}}.mc-page-header__actions-content{display:flex;align-items:center}@media screen and (min-width:680px){.mc-page-header__actions-content{gap:1rem}}.mc-page-header__scope--tag{display:block}@media screen and (min-width:680px){.mc-page-header__scope--tag{display:none}}.mc-page-header__scope--select{display:none}@media screen and (min-width:680px){.mc-page-header__scope--select{display:block}}.mc-page-header__icons{display:flex;align-items:center}.mc-page-header__tabs{border-top:1px solid var(--divider-color-primary, #cccccc)}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { kind: "component", type: MozTagComponent, selector: "moz-tag", inputs: ["type", "size", "id", "name", "label", "disabled", "contextualisedNumber", "removableLabel"], outputs: ["removeTag"] }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozStatusBadgeComponent, selector: "moz-status-badge", inputs: ["label", "status"] }, { kind: "component", type: MozTabsComponent, selector: "moz-tabs", inputs: ["tabs", "description", "divider", "centered", "selectedIndex"], outputs: ["selectedIndexChange"] }, { kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["color", "hostClass"] }, { kind: "component", type: HelpCircle24, selector: "HelpCircle24", inputs: ["color", "hostClass"] }, { kind: "component", type: Menu24, selector: "Menu24", inputs: ["color", "hostClass"] }, { kind: "component", type: Notification24, selector: "Notification24", inputs: ["color", "hostClass"] }, { kind: "component", type: Search24, selector: "Search24", inputs: ["color", "hostClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3558
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozPageHeaderComponent, isStandalone: true, selector: "moz-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, backButton: { classPropertyName: "backButton", publicName: "backButton", isSignal: true, isRequired: false, transformFunction: null }, searchButton: { classPropertyName: "searchButton", publicName: "searchButton", isSignal: true, isRequired: false, transformFunction: null }, helpButton: { classPropertyName: "helpButton", publicName: "helpButton", isSignal: true, isRequired: false, transformFunction: null }, notificationButton: { classPropertyName: "notificationButton", publicName: "notificationButton", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusLabel: { classPropertyName: "statusLabel", publicName: "statusLabel", isSignal: true, isRequired: false, transformFunction: null }, extraInfo: { classPropertyName: "extraInfo", publicName: "extraInfo", isSignal: true, isRequired: false, transformFunction: null }, scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, scopeValue: { classPropertyName: "scopeValue", publicName: "scopeValue", isSignal: true, isRequired: false, transformFunction: null }, scopePlaceholder: { classPropertyName: "scopePlaceholder", publicName: "scopePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange", back: "back", search: "search", help: "help", notification: "notification", toggleMenu: "toggleMenu", toggleScope: "toggleScope", scopeValueChange: "scopeValueChange", activeTabChange: "activeTabChange" }, ngImport: i0, template: "<div [class]=\"classes()\">\n <div class=\"mc-page-header__top-wrapper\">\n <div class=\"mc-page-header__top-content\">\n @if (backButton()) {\n <moz-icon-button [ghost]=\"true\" ariaLabel=\"Back button\" (click)=\"onBack()\">\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <div class=\"mc-page-header__content-wrapper\">\n <span class=\"mc-page-header__title\">\n {{ title() }}\n </span>\n\n @if (hasStatusOrExtraInfo()) {\n <div class=\"mc-page-header__info-wrapper\">\n @if (hasStatusBadge()) {\n <moz-status-badge [label]=\"statusLabel()!\" [status]=\"status()!\" />\n } @if (extraInfo()) {\n <span class=\"mc-page-header__extra-info\">\n {{ extraInfo() }}\n </span>\n }\n </div>\n }\n\n <ng-content select=\"[content]\" />\n </div>\n </div>\n\n <div class=\"mc-page-header__actions-wrapper\">\n <moz-icon-button\n class=\"mc-page-header__burger-menu\"\n [ghost]=\"true\"\n ariaLabel=\"Burger menu\"\n (click)=\"onToggleMenu()\"\n >\n <Menu24 icon />\n </moz-icon-button>\n\n <ng-content select=\"[actions]\">\n <div class=\"mc-page-header__actions-content\">\n @if (hasIconButtons()) {\n <div class=\"mc-page-header__icons\">\n @if (searchButton()) {\n <moz-icon-button [ghost]=\"true\" ariaLabel=\"Search button\" (click)=\"onSearch()\">\n <Search24 icon />\n </moz-icon-button>\n } @if (helpButton()) {\n <moz-icon-button [ghost]=\"true\" ariaLabel=\"Help button\" (click)=\"onHelp()\">\n <HelpCircle24 icon />\n </moz-icon-button>\n } @if (notificationButton()) {\n <moz-icon-button\n [ghost]=\"true\"\n ariaLabel=\"Notification button\"\n (click)=\"onNotification()\"\n >\n <Notification24 icon />\n </moz-icon-button>\n }\n </div>\n } @if (isScopeString() && isScopeValueBoolean()) {\n <moz-tag\n type=\"interactive\"\n [id]=\"'scope-tag'\"\n [label]=\"$any(scope())\"\n (click)=\"onScopeTagClick()\"\n />\n } @if (isScopeArray() && isScopeValueNotBoolean()) {\n <div class=\"mc-page-header__scope--select\">\n <moz-select\n [name]=\"'scope-select'\"\n id=\"scope-select\"\n size=\"s\"\n [options]=\"scopeAsArray()\"\n [placeholder]=\"scopePlaceholder()\"\n [ngModel]=\"scopeValue()\"\n (ngModelChange)=\"onScopeSelectChange($event)\"\n />\n </div>\n\n <div class=\"mc-page-header__scope--tag\">\n <moz-tag\n type=\"interactive\"\n [id]=\"'mobile-scope-tag'\"\n [label]=\"mobileTagLabel()\"\n (click)=\"onToggleScope()\"\n />\n </div>\n }\n </div>\n </ng-content>\n </div>\n </div>\n\n @if (tabs() && tabs()!.length > 0) {\n <div class=\"mc-page-header__tabs\">\n <moz-tabs\n [tabs]=\"tabs()!\"\n [(selectedIndex)]=\"activeTab\"\n (selectedIndexChange)=\"onActiveTabChange($event)\"\n />\n </div>\n }\n</div>\n", styles: [".mc-page-header,.mc-page-header :host{--tabs-list-padding: .5rem 1rem}@media screen and (min-width:680px){.mc-page-header,.mc-page-header :host{--tabs-list-padding: .5rem 2.5rem}}.mc-page-header--with-shadow{box-shadow:var(--shadow-bottom-xs-x, 0px) var(--shadow-bottom-xs-y, 3px) var(--shadow-bottom-xs-blur, 5px) var(--shadow-bottom-xs-spread, -2px) rgba(0,0,0,var(--shadow-bottom-xs-opacity, 15%))}.mc-page-header__top-wrapper{padding:0 0 .75rem;display:flex;flex-direction:column-reverse;justify-content:space-between;background-color:var(--page-header-color-background, #ffffff)}@media screen and (min-width:680px){.mc-page-header__top-wrapper{padding:.75rem 2.5rem;flex-direction:row;gap:2rem}}.mc-page-header__top-content{padding:.5rem 0 0;display:flex;gap:.25rem;align-items:center}@media screen and (min-width:680px){.mc-page-header__top-content{padding:.5rem 0;gap:.75rem}}.mc-page-header__content-wrapper{display:flex;flex-direction:column;gap:.5rem}.mc-page-header__title{font-size:var(--font-size-200, 1.125rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--page-header-color-text-title, #000000)}@media screen and (min-width:680px){.mc-page-header__title{font-size:var(--font-size-300, 1.5rem)}}.mc-page-header__info-wrapper{display:flex;align-items:center;gap:.5rem}.mc-page-header__extra-info{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--page-header-color-text-extra-info, #404040)}.mc-page-header__actions-wrapper{display:flex;align-items:start;justify-content:space-between;border-bottom:1px solid var(--divider-color-primary, #cccccc);padding-right:1rem}@media screen and (min-width:680px){.mc-page-header__actions-wrapper{border-bottom:none;padding-right:0}}.mc-page-header__actions-wrapper .mc-page-header__burger-menu{display:inline-flex}@media screen and (min-width:680px){.mc-page-header__actions-wrapper .mc-page-header__burger-menu{display:none}}.mc-page-header__actions-content{display:flex;align-items:center}@media screen and (min-width:680px){.mc-page-header__actions-content{gap:1rem}}.mc-page-header__scope--tag{display:block}@media screen and (min-width:680px){.mc-page-header__scope--tag{display:none}}.mc-page-header__scope--select{display:none}@media screen and (min-width:680px){.mc-page-header__scope--select{display:block}}.mc-page-header__icons{display:flex;align-items:center}.mc-page-header__tabs{border-top:1px solid var(--divider-color-primary, #cccccc)}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { kind: "component", type: MozTagComponent, selector: "moz-tag", inputs: ["type", "size", "id", "name", "label", "disabled", "contextualisedNumber", "removableLabel"], outputs: ["removeTag"] }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozStatusBadgeComponent, selector: "moz-status-badge", inputs: ["label", "status"] }, { kind: "component", type: MozTabsComponent, selector: "moz-tabs", inputs: ["tabs", "description", "divider", "centered", "selectedIndex"], outputs: ["selectedIndexChange"] }, { kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["color", "hostClass"] }, { kind: "component", type: HelpCircle24, selector: "HelpCircle24", inputs: ["color", "hostClass"] }, { kind: "component", type: Menu24, selector: "Menu24", inputs: ["color", "hostClass"] }, { kind: "component", type: Notification24, selector: "Notification24", inputs: ["color", "hostClass"] }, { kind: "component", type: Search24, selector: "Search24", inputs: ["color", "hostClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3560
3559
|
}
|
|
3561
3560
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozPageHeaderComponent, decorators: [{
|
|
3562
3561
|
type: Component,
|