@mozaic-ds/angular 2.0.0-beta.15 → 2.0.0-beta.16
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,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, computed, ChangeDetectionStrategy, Component, contentChild, signal, forwardRef,
|
|
2
|
+
import { input, computed, ChangeDetectionStrategy, Component, contentChild, ViewEncapsulation, signal, forwardRef, output, ContentChild, viewChild, inject, effect, afterNextRender, TemplateRef, Injector, Injectable, linkedSignal, EnvironmentInjector, createComponent, ChangeDetectorRef, NgZone, viewChildren, model, EventEmitter, Output, ContentChildren, ElementRef, HostListener, Input, Directive, booleanAttribute, contentChildren } from '@angular/core';
|
|
3
3
|
import { RouterLink, RouterLinkActive, RouterLinkWithHref } from '@angular/router';
|
|
4
4
|
import { NgTemplateOutlet, NgComponentOutlet, NgClass } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
@@ -69,13 +69,15 @@ class MozButtonComponent {
|
|
|
69
69
|
return classes.join(' ');
|
|
70
70
|
}, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
|
|
71
71
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
72
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozButtonComponent, isStandalone: true, selector: "button[moz-button]", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ghost: { classPropertyName: "ghost", publicName: "ghost", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.disabled": "disabled() ? \"\" : null" } }, queries: [{ propertyName: "iconTpl", first: true, predicate: ["icon"], isSignal: true }], ngImport: i0, template: "<button [class]=\"hostClasses()\" [type]=\"type()\" [disabled]=\"disabled()\">\n @if (isLoading()) {\n <div class=\"loader loader--s button__loader\">\n <span class=\"loader__spinner\">\n <svg\n class=\"loader__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n aria-hidden=\"true\"\n >\n <circle class=\"loader__path\" cx=\"50%\" cy=\"50%\" r=\"6\"></circle>\n </svg>\n </span>\n </div>\n } @if ((iconPosition() === 'left' || iconPosition() === 'only') && !isLoading()) {\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n } @if (iconPosition() !== 'only') {\n <span class=\"button__label\">\n <ng-content></ng-content>\n </span>\n } @if (iconPosition() === 'right' && !isLoading()) {\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n }\n</button>\n<ng-template #iconTemplate>\n <ng-content select=\"[icon]\"></ng-content>\n</ng-template>\n", styles: [".mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c)}.mc-button:active,.button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button .mc-button__label,.button .mc-button__label,.mc-button .button__label,.button .button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;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,.button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus-visible,.button:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-button--s,.button--s{padding:0 .625rem;min-height:2rem;min-width:2rem}.mc-button--s .mc-button__label,.button--s .mc-button__label,.mc-button--s .button__label,.button--s .button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m,.button--m{padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button--m .mc-button__label,.button--m .mc-button__label,.mc-button--m .button__label,.button--m .button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon,.button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child,.button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l,.button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem}.mc-button--l .mc-button__label,.button--l .mc-button__label,.mc-button--l .button__label,.button--l .button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon,.button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child,.button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only,.button--icon-only{padding:.25rem}.mc-button--outlined,.button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover,.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined:active,.button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled,.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost:active,.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent,.button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover,.button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902)}.mc-button--accent:active,.button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled,.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger,.button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover,.button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003)}.mc-button--danger:active,.button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled,.button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse,.button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover,.button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6)}.mc-button--inverse:active,.button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled,.button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading .mc-button__loader,.button--loading .mc-button__loader,.mc-button--loading .button__loader,.button--loading .button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.button--loading .mc-button__label,.mc-button--loading .button__label,.button--loading .button__label,.mc-button--loading .mc-button__icon,.button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard,.mc-button--standard.button--outlined,.mc-button--outlined.button--standard,.button--outlined.button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover,.mc-button--standard.button--outlined:hover,.mc-button--outlined.button--standard:hover,.button--outlined.button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined.mc-button--standard:active,.mc-button--standard.button--outlined:active,.mc-button--outlined.button--standard:active,.button--outlined.button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled,.mc-button--standard.button--outlined:disabled,.mc-button--outlined.button--standard:disabled,.button--outlined.button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent,.mc-button--accent.button--outlined,.mc-button--outlined.button--accent,.button--outlined.button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover,.mc-button--accent.button--outlined:hover,.mc-button--outlined.button--accent:hover,.button--outlined.button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de)}.mc-button--outlined.mc-button--accent:active,.mc-button--accent.button--outlined:active,.mc-button--outlined.button--accent:active,.button--outlined.button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled,.mc-button--accent.button--outlined:disabled,.mc-button--outlined.button--accent:disabled,.button--outlined.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger,.mc-button--danger.button--outlined,.mc-button--outlined.button--danger,.button--outlined.button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover,.mc-button--danger.button--outlined:hover,.mc-button--outlined.button--danger:hover,.button--outlined.button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea)}.mc-button--outlined.mc-button--danger:active,.mc-button--danger.button--outlined:active,.mc-button--outlined.button--danger:active,.button--outlined.button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled,.mc-button--danger.button--outlined:disabled,.mc-button--outlined.button--danger:disabled,.button--outlined.button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse,.mc-button--inverse.button--outlined,.mc-button--outlined.button--inverse,.button--outlined.button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover,.mc-button--inverse.button--outlined:hover,.mc-button--outlined.button--inverse:hover,.button--outlined.button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--outlined.mc-button--inverse:active,.mc-button--inverse.button--outlined:active,.mc-button--outlined.button--inverse:active,.button--outlined.button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled,.mc-button--inverse.button--outlined:disabled,.mc-button--outlined.button--inverse:disabled,.button--outlined.button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost,.mc-button--ghost.button--standard,.button--ghost.button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover,.mc-button--ghost.button--standard:hover,.button--ghost.button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active,.mc-button--ghost.button--standard:active,.button--ghost.button--standard:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled,.mc-button--ghost.button--standard:disabled,.button--ghost.button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost,.mc-button--ghost.button--accent,.button--ghost.button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover,.mc-button--ghost.button--accent:hover,.button--ghost.button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1))}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active,.mc-button--ghost.button--accent:active,.button--ghost.button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled,.mc-button--ghost.button--accent:disabled,.button--ghost.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost,.mc-button--ghost.button--danger,.button--ghost.button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover,.mc-button--ghost.button--danger:hover,.button--ghost.button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1))}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active,.mc-button--ghost.button--danger:active,.button--ghost.button--danger:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled,.mc-button--ghost.button--danger:disabled,.button--ghost.button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost,.mc-button--ghost.button--inverse,.button--ghost.button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover,.mc-button--ghost.button--inverse:hover,.button--ghost.button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active,.mc-button--ghost.button--inverse:active,.button--ghost.button--inverse:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled,.mc-button--ghost.button--inverse:disabled,.button--ghost.button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-loader .mc-loader__spinner,.loader .mc-loader__spinner,.mc-loader .loader__spinner,.loader .loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path,.loader .mc-loader__path,.mc-loader .loader__path,.loader .loader__path{stroke-width:4}.mc-loader,.loader{color:var(--loader-color-standard, #464e63)}.mc-loader .mc-loader__path,.loader .mc-loader__path,.mc-loader .loader__path,.loader .loader__path{stroke:currentColor}.mc-loader,.loader{align-items:center;display:inline-flex;flex-direction:column}.mc-loader__spinner:not(:only-child),.loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon,.loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path,.loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:var(--font-size-150, 1rem);color:currentcolor}.mc-loader:not(.mc-loader--text-visible) .mc-loader__text,.loader:not(.mc-loader--text-visible) .mc-loader__text{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}.mc-loader--xs .mc-loader__spinner,.mc-loader--xs .loader__spinner{height:1.25rem;width:1.25rem}.mc-loader--xs .mc-loader__path,.mc-loader--xs .loader__path{stroke-width:2}.mc-loader--s .mc-loader__spinner,.loader--s .mc-loader__spinner,.mc-loader--s .loader__spinner,.loader--s .loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path,.loader--s .mc-loader__path,.mc-loader--s .loader__path,.loader--s .loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner,.mc-loader--l .loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path,.mc-loader--l .loader__path{stroke-width:8}.mc-loader--accent{color:var(--loader-color-accent, #117f03)}.mc-loader--accent .mc-loader__path,.mc-loader--accent .loader__path{stroke:currentColor}.mc-loader--inverse{color:var(--loader-color-inverse, #ffffff)}.mc-loader--inverse .mc-loader__path,.mc-loader--inverse .loader__path{stroke:currentColor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
72
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozButtonComponent, isStandalone: true, selector: "button[moz-button]", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ghost: { classPropertyName: "ghost", publicName: "ghost", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.disabled": "disabled() ? \"\" : null", "attr.type": "type()" } }, queries: [{ propertyName: "iconTpl", first: true, predicate: ["icon"], isSignal: true }], ngImport: i0, template: "@if (isLoading()) {\n<div class=\"loader loader--s button__loader\">\n <span class=\"loader__spinner\">\n <svg\n class=\"loader__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n aria-hidden=\"true\"\n >\n <circle class=\"loader__path\" cx=\"50%\" cy=\"50%\" r=\"6\"></circle>\n </svg>\n </span>\n</div>\n} @if ((iconPosition() === 'left' || iconPosition() === 'only') && !isLoading()) {\n<ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n} @if (iconPosition() !== 'only') {\n<span class=\"button__label\">\n <ng-content></ng-content>\n</span>\n} @if (iconPosition() === 'right' && !isLoading()) {\n<ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n}\n<ng-template #iconTemplate>\n <ng-content select=\"[icon]\"></ng-content>\n</ng-template>\n", styles: [".mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c)}.mc-button:active,.button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button .mc-button__label,.button .mc-button__label,.mc-button .button__label,.button .button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;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,.button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus-visible,.button:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-button--s,.button--s{padding:0 .625rem;min-height:2rem;min-width:2rem}.mc-button--s .mc-button__label,.button--s .mc-button__label,.mc-button--s .button__label,.button--s .button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m,.button--m{padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button--m .mc-button__label,.button--m .mc-button__label,.mc-button--m .button__label,.button--m .button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon,.button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child,.button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l,.button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem}.mc-button--l .mc-button__label,.button--l .mc-button__label,.mc-button--l .button__label,.button--l .button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon,.button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child,.button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only,.button--icon-only{padding:.25rem}.mc-button--outlined,.button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover,.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined:active,.button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled,.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost:active,.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent,.button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover,.button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902)}.mc-button--accent:active,.button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled,.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger,.button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover,.button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003)}.mc-button--danger:active,.button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled,.button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse,.button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover,.button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6)}.mc-button--inverse:active,.button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled,.button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading .mc-button__loader,.button--loading .mc-button__loader,.mc-button--loading .button__loader,.button--loading .button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.button--loading .mc-button__label,.mc-button--loading .button__label,.button--loading .button__label,.mc-button--loading .mc-button__icon,.button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard,.mc-button--standard.button--outlined,.mc-button--outlined.button--standard,.button--outlined.button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover,.mc-button--standard.button--outlined:hover,.mc-button--outlined.button--standard:hover,.button--outlined.button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined.mc-button--standard:active,.mc-button--standard.button--outlined:active,.mc-button--outlined.button--standard:active,.button--outlined.button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled,.mc-button--standard.button--outlined:disabled,.mc-button--outlined.button--standard:disabled,.button--outlined.button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent,.mc-button--accent.button--outlined,.mc-button--outlined.button--accent,.button--outlined.button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover,.mc-button--accent.button--outlined:hover,.mc-button--outlined.button--accent:hover,.button--outlined.button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de)}.mc-button--outlined.mc-button--accent:active,.mc-button--accent.button--outlined:active,.mc-button--outlined.button--accent:active,.button--outlined.button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled,.mc-button--accent.button--outlined:disabled,.mc-button--outlined.button--accent:disabled,.button--outlined.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger,.mc-button--danger.button--outlined,.mc-button--outlined.button--danger,.button--outlined.button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover,.mc-button--danger.button--outlined:hover,.mc-button--outlined.button--danger:hover,.button--outlined.button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea)}.mc-button--outlined.mc-button--danger:active,.mc-button--danger.button--outlined:active,.mc-button--outlined.button--danger:active,.button--outlined.button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled,.mc-button--danger.button--outlined:disabled,.mc-button--outlined.button--danger:disabled,.button--outlined.button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse,.mc-button--inverse.button--outlined,.mc-button--outlined.button--inverse,.button--outlined.button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover,.mc-button--inverse.button--outlined:hover,.mc-button--outlined.button--inverse:hover,.button--outlined.button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--outlined.mc-button--inverse:active,.mc-button--inverse.button--outlined:active,.mc-button--outlined.button--inverse:active,.button--outlined.button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled,.mc-button--inverse.button--outlined:disabled,.mc-button--outlined.button--inverse:disabled,.button--outlined.button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost,.mc-button--ghost.button--standard,.button--ghost.button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover,.mc-button--ghost.button--standard:hover,.button--ghost.button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active,.mc-button--ghost.button--standard:active,.button--ghost.button--standard:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled,.mc-button--ghost.button--standard:disabled,.button--ghost.button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost,.mc-button--ghost.button--accent,.button--ghost.button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover,.mc-button--ghost.button--accent:hover,.button--ghost.button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1))}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active,.mc-button--ghost.button--accent:active,.button--ghost.button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled,.mc-button--ghost.button--accent:disabled,.button--ghost.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost,.mc-button--ghost.button--danger,.button--ghost.button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover,.mc-button--ghost.button--danger:hover,.button--ghost.button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1))}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active,.mc-button--ghost.button--danger:active,.button--ghost.button--danger:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled,.mc-button--ghost.button--danger:disabled,.button--ghost.button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost,.mc-button--ghost.button--inverse,.button--ghost.button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover,.mc-button--ghost.button--inverse:hover,.button--ghost.button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active,.mc-button--ghost.button--inverse:active,.button--ghost.button--inverse:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled,.mc-button--ghost.button--inverse:disabled,.button--ghost.button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-loader .mc-loader__spinner,.loader .mc-loader__spinner,.mc-loader .loader__spinner,.loader .loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path,.loader .mc-loader__path,.mc-loader .loader__path,.loader .loader__path{stroke-width:4}.mc-loader,.loader{color:var(--loader-color-standard, #464e63)}.mc-loader .mc-loader__path,.loader .mc-loader__path,.mc-loader .loader__path,.loader .loader__path{stroke:currentColor}.mc-loader,.loader{align-items:center;display:inline-flex;flex-direction:column}.mc-loader__spinner:not(:only-child),.loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon,.loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path,.loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:var(--font-size-150, 1rem);color:currentcolor}.mc-loader:not(.mc-loader--text-visible) .mc-loader__text,.loader:not(.mc-loader--text-visible) .mc-loader__text{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}.mc-loader--xs .mc-loader__spinner,.mc-loader--xs .loader__spinner{height:1.25rem;width:1.25rem}.mc-loader--xs .mc-loader__path,.mc-loader--xs .loader__path{stroke-width:2}.mc-loader--s .mc-loader__spinner,.loader--s .mc-loader__spinner,.mc-loader--s .loader__spinner,.loader--s .loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path,.loader--s .mc-loader__path,.mc-loader--s .loader__path,.loader--s .loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner,.mc-loader--l .loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path,.mc-loader--l .loader__path{stroke-width:8}.mc-loader--accent{color:var(--loader-color-accent, #117f03)}.mc-loader--accent .mc-loader__path,.mc-loader--accent .loader__path{stroke:currentColor}.mc-loader--inverse{color:var(--loader-color-inverse, #ffffff)}.mc-loader--inverse .mc-loader__path,.mc-loader--inverse .loader__path{stroke:currentColor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
73
73
|
}
|
|
74
74
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozButtonComponent, decorators: [{
|
|
75
75
|
type: Component,
|
|
76
76
|
args: [{ selector: 'button[moz-button]', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
77
|
+
'[class]': 'hostClasses()',
|
|
77
78
|
'[attr.disabled]': 'disabled() ? "" : null',
|
|
78
|
-
}, template: "<button [class]=\"hostClasses()\" [type]=\"type()\" [disabled]=\"disabled()\">\n @if (isLoading()) {\n <div class=\"loader loader--s button__loader\">\n <span class=\"loader__spinner\">\n <svg\n class=\"loader__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n aria-hidden=\"true\"\n >\n <circle class=\"loader__path\" cx=\"50%\" cy=\"50%\" r=\"6\"></circle>\n </svg>\n </span>\n </div>\n } @if ((iconPosition() === 'left' || iconPosition() === 'only') && !isLoading()) {\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n } @if (iconPosition() !== 'only') {\n <span class=\"button__label\">\n <ng-content></ng-content>\n </span>\n } @if (iconPosition() === 'right' && !isLoading()) {\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n }\n</button>\n<ng-template #iconTemplate>\n <ng-content select=\"[icon]\"></ng-content>\n</ng-template>\n", styles: [".mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c)}.mc-button:active,.button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button .mc-button__label,.button .mc-button__label,.mc-button .button__label,.button .button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;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,.button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus-visible,.button:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-button--s,.button--s{padding:0 .625rem;min-height:2rem;min-width:2rem}.mc-button--s .mc-button__label,.button--s .mc-button__label,.mc-button--s .button__label,.button--s .button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m,.button--m{padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button--m .mc-button__label,.button--m .mc-button__label,.mc-button--m .button__label,.button--m .button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon,.button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child,.button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l,.button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem}.mc-button--l .mc-button__label,.button--l .mc-button__label,.mc-button--l .button__label,.button--l .button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon,.button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child,.button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only,.button--icon-only{padding:.25rem}.mc-button--outlined,.button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover,.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined:active,.button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled,.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost:active,.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent,.button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover,.button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902)}.mc-button--accent:active,.button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled,.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger,.button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover,.button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003)}.mc-button--danger:active,.button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled,.button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse,.button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover,.button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6)}.mc-button--inverse:active,.button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled,.button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading .mc-button__loader,.button--loading .mc-button__loader,.mc-button--loading .button__loader,.button--loading .button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.button--loading .mc-button__label,.mc-button--loading .button__label,.button--loading .button__label,.mc-button--loading .mc-button__icon,.button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard,.mc-button--standard.button--outlined,.mc-button--outlined.button--standard,.button--outlined.button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover,.mc-button--standard.button--outlined:hover,.mc-button--outlined.button--standard:hover,.button--outlined.button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined.mc-button--standard:active,.mc-button--standard.button--outlined:active,.mc-button--outlined.button--standard:active,.button--outlined.button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled,.mc-button--standard.button--outlined:disabled,.mc-button--outlined.button--standard:disabled,.button--outlined.button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent,.mc-button--accent.button--outlined,.mc-button--outlined.button--accent,.button--outlined.button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover,.mc-button--accent.button--outlined:hover,.mc-button--outlined.button--accent:hover,.button--outlined.button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de)}.mc-button--outlined.mc-button--accent:active,.mc-button--accent.button--outlined:active,.mc-button--outlined.button--accent:active,.button--outlined.button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled,.mc-button--accent.button--outlined:disabled,.mc-button--outlined.button--accent:disabled,.button--outlined.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger,.mc-button--danger.button--outlined,.mc-button--outlined.button--danger,.button--outlined.button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover,.mc-button--danger.button--outlined:hover,.mc-button--outlined.button--danger:hover,.button--outlined.button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea)}.mc-button--outlined.mc-button--danger:active,.mc-button--danger.button--outlined:active,.mc-button--outlined.button--danger:active,.button--outlined.button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled,.mc-button--danger.button--outlined:disabled,.mc-button--outlined.button--danger:disabled,.button--outlined.button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse,.mc-button--inverse.button--outlined,.mc-button--outlined.button--inverse,.button--outlined.button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover,.mc-button--inverse.button--outlined:hover,.mc-button--outlined.button--inverse:hover,.button--outlined.button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--outlined.mc-button--inverse:active,.mc-button--inverse.button--outlined:active,.mc-button--outlined.button--inverse:active,.button--outlined.button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled,.mc-button--inverse.button--outlined:disabled,.mc-button--outlined.button--inverse:disabled,.button--outlined.button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost,.mc-button--ghost.button--standard,.button--ghost.button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover,.mc-button--ghost.button--standard:hover,.button--ghost.button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active,.mc-button--ghost.button--standard:active,.button--ghost.button--standard:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled,.mc-button--ghost.button--standard:disabled,.button--ghost.button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost,.mc-button--ghost.button--accent,.button--ghost.button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover,.mc-button--ghost.button--accent:hover,.button--ghost.button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1))}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active,.mc-button--ghost.button--accent:active,.button--ghost.button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled,.mc-button--ghost.button--accent:disabled,.button--ghost.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost,.mc-button--ghost.button--danger,.button--ghost.button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover,.mc-button--ghost.button--danger:hover,.button--ghost.button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1))}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active,.mc-button--ghost.button--danger:active,.button--ghost.button--danger:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled,.mc-button--ghost.button--danger:disabled,.button--ghost.button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost,.mc-button--ghost.button--inverse,.button--ghost.button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover,.mc-button--ghost.button--inverse:hover,.button--ghost.button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active,.mc-button--ghost.button--inverse:active,.button--ghost.button--inverse:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled,.mc-button--ghost.button--inverse:disabled,.button--ghost.button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-loader .mc-loader__spinner,.loader .mc-loader__spinner,.mc-loader .loader__spinner,.loader .loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path,.loader .mc-loader__path,.mc-loader .loader__path,.loader .loader__path{stroke-width:4}.mc-loader,.loader{color:var(--loader-color-standard, #464e63)}.mc-loader .mc-loader__path,.loader .mc-loader__path,.mc-loader .loader__path,.loader .loader__path{stroke:currentColor}.mc-loader,.loader{align-items:center;display:inline-flex;flex-direction:column}.mc-loader__spinner:not(:only-child),.loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon,.loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path,.loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:var(--font-size-150, 1rem);color:currentcolor}.mc-loader:not(.mc-loader--text-visible) .mc-loader__text,.loader:not(.mc-loader--text-visible) .mc-loader__text{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}.mc-loader--xs .mc-loader__spinner,.mc-loader--xs .loader__spinner{height:1.25rem;width:1.25rem}.mc-loader--xs .mc-loader__path,.mc-loader--xs .loader__path{stroke-width:2}.mc-loader--s .mc-loader__spinner,.loader--s .mc-loader__spinner,.mc-loader--s .loader__spinner,.loader--s .loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path,.loader--s .mc-loader__path,.mc-loader--s .loader__path,.loader--s .loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner,.mc-loader--l .loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path,.mc-loader--l .loader__path{stroke-width:8}.mc-loader--accent{color:var(--loader-color-accent, #117f03)}.mc-loader--accent .mc-loader__path,.mc-loader--accent .loader__path{stroke:currentColor}.mc-loader--inverse{color:var(--loader-color-inverse, #ffffff)}.mc-loader--inverse .mc-loader__path,.mc-loader--inverse .loader__path{stroke:currentColor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}\n"] }]
|
|
79
|
+
'[attr.type]': 'type()',
|
|
80
|
+
}, encapsulation: ViewEncapsulation.None, template: "@if (isLoading()) {\n<div class=\"loader loader--s button__loader\">\n <span class=\"loader__spinner\">\n <svg\n class=\"loader__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n aria-hidden=\"true\"\n >\n <circle class=\"loader__path\" cx=\"50%\" cy=\"50%\" r=\"6\"></circle>\n </svg>\n </span>\n</div>\n} @if ((iconPosition() === 'left' || iconPosition() === 'only') && !isLoading()) {\n<ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n} @if (iconPosition() !== 'only') {\n<span class=\"button__label\">\n <ng-content></ng-content>\n</span>\n} @if (iconPosition() === 'right' && !isLoading()) {\n<ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n}\n<ng-template #iconTemplate>\n <ng-content select=\"[icon]\"></ng-content>\n</ng-template>\n", styles: [".mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c)}.mc-button:active,.button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button .mc-button__label,.button .mc-button__label,.mc-button .button__label,.button .button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;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,.button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus-visible,.button:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-button--s,.button--s{padding:0 .625rem;min-height:2rem;min-width:2rem}.mc-button--s .mc-button__label,.button--s .mc-button__label,.mc-button--s .button__label,.button--s .button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon,.button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child,.button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m,.button--m{padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button--m .mc-button__label,.button--m .mc-button__label,.mc-button--m .button__label,.button--m .button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon,.button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child,.button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l,.button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem}.mc-button--l .mc-button__label,.button--l .mc-button__label,.mc-button--l .button__label,.button--l .button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon,.button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child,.button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only,.button--icon-only{padding:.25rem}.mc-button--outlined,.button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover,.button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined:active,.button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled,.button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost:active,.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent,.button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover,.button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902)}.mc-button--accent:active,.button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled,.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger,.button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover,.button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003)}.mc-button--danger:active,.button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled,.button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse,.button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover,.button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6)}.mc-button--inverse:active,.button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled,.button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading .mc-button__loader,.button--loading .mc-button__loader,.mc-button--loading .button__loader,.button--loading .button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.button--loading .mc-button__label,.mc-button--loading .button__label,.button--loading .button__label,.mc-button--loading .mc-button__icon,.button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard,.mc-button--standard.button--outlined,.mc-button--outlined.button--standard,.button--outlined.button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover,.mc-button--standard.button--outlined:hover,.mc-button--outlined.button--standard:hover,.button--outlined.button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined.mc-button--standard:active,.mc-button--standard.button--outlined:active,.mc-button--outlined.button--standard:active,.button--outlined.button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled,.mc-button--standard.button--outlined:disabled,.mc-button--outlined.button--standard:disabled,.button--outlined.button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent,.mc-button--accent.button--outlined,.mc-button--outlined.button--accent,.button--outlined.button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover,.mc-button--accent.button--outlined:hover,.mc-button--outlined.button--accent:hover,.button--outlined.button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de)}.mc-button--outlined.mc-button--accent:active,.mc-button--accent.button--outlined:active,.mc-button--outlined.button--accent:active,.button--outlined.button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled,.mc-button--accent.button--outlined:disabled,.mc-button--outlined.button--accent:disabled,.button--outlined.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger,.mc-button--danger.button--outlined,.mc-button--outlined.button--danger,.button--outlined.button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover,.mc-button--danger.button--outlined:hover,.mc-button--outlined.button--danger:hover,.button--outlined.button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea)}.mc-button--outlined.mc-button--danger:active,.mc-button--danger.button--outlined:active,.mc-button--outlined.button--danger:active,.button--outlined.button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled,.mc-button--danger.button--outlined:disabled,.mc-button--outlined.button--danger:disabled,.button--outlined.button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse,.mc-button--inverse.button--outlined,.mc-button--outlined.button--inverse,.button--outlined.button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover,.mc-button--inverse.button--outlined:hover,.mc-button--outlined.button--inverse:hover,.button--outlined.button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--outlined.mc-button--inverse:active,.mc-button--inverse.button--outlined:active,.mc-button--outlined.button--inverse:active,.button--outlined.button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled,.mc-button--inverse.button--outlined:disabled,.mc-button--outlined.button--inverse:disabled,.button--outlined.button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost,.mc-button--ghost.button--standard,.button--ghost.button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover,.mc-button--ghost.button--standard:hover,.button--ghost.button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active,.mc-button--ghost.button--standard:active,.button--ghost.button--standard:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled,.mc-button--ghost.button--standard:disabled,.button--ghost.button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost,.mc-button--ghost.button--accent,.button--ghost.button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover,.mc-button--ghost.button--accent:hover,.button--ghost.button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1))}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active,.mc-button--ghost.button--accent:active,.button--ghost.button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled,.mc-button--ghost.button--accent:disabled,.button--ghost.button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost,.mc-button--ghost.button--danger,.button--ghost.button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover,.mc-button--ghost.button--danger:hover,.button--ghost.button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1))}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active,.mc-button--ghost.button--danger:active,.button--ghost.button--danger:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled,.mc-button--ghost.button--danger:disabled,.button--ghost.button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost,.mc-button--ghost.button--inverse,.button--ghost.button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover,.mc-button--ghost.button--inverse:hover,.button--ghost.button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active,.mc-button--ghost.button--inverse:active,.button--ghost.button--inverse:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled,.mc-button--ghost.button--inverse:disabled,.button--ghost.button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-loader .mc-loader__spinner,.loader .mc-loader__spinner,.mc-loader .loader__spinner,.loader .loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path,.loader .mc-loader__path,.mc-loader .loader__path,.loader .loader__path{stroke-width:4}.mc-loader,.loader{color:var(--loader-color-standard, #464e63)}.mc-loader .mc-loader__path,.loader .mc-loader__path,.mc-loader .loader__path,.loader .loader__path{stroke:currentColor}.mc-loader,.loader{align-items:center;display:inline-flex;flex-direction:column}.mc-loader__spinner:not(:only-child),.loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon,.loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path,.loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:var(--font-size-150, 1rem);color:currentcolor}.mc-loader:not(.mc-loader--text-visible) .mc-loader__text,.loader:not(.mc-loader--text-visible) .mc-loader__text{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}.mc-loader--xs .mc-loader__spinner,.mc-loader--xs .loader__spinner{height:1.25rem;width:1.25rem}.mc-loader--xs .mc-loader__path,.mc-loader--xs .loader__path{stroke-width:2}.mc-loader--s .mc-loader__spinner,.loader--s .mc-loader__spinner,.mc-loader--s .loader__spinner,.loader--s .loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path,.loader--s .mc-loader__path,.mc-loader--s .loader__path,.loader--s .loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner,.mc-loader--l .loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path,.mc-loader--l .loader__path{stroke-width:8}.mc-loader--accent{color:var(--loader-color-accent, #117f03)}.mc-loader--accent .mc-loader__path,.mc-loader--accent .loader__path{stroke:currentColor}.mc-loader--inverse{color:var(--loader-color-inverse, #ffffff)}.mc-loader--inverse .mc-loader__path,.mc-loader--inverse .loader__path{stroke:currentColor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}\n"] }]
|
|
79
81
|
}], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ghost: [{ type: i0.Input, args: [{ isSignal: true, alias: "ghost", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], iconTpl: [{ type: i0.ContentChild, args: ['icon', { ...{ descendants: false }, isSignal: true }] }] } });
|
|
80
82
|
|
|
81
83
|
class MozCheckboxComponent {
|
|
@@ -1735,7 +1737,7 @@ class MozTagComponent {
|
|
|
1735
1737
|
useExisting: forwardRef(() => MozTagComponent),
|
|
1736
1738
|
multi: true,
|
|
1737
1739
|
},
|
|
1738
|
-
], ngImport: i0, template: "<ng-template #labelTemplate>\n <ng-content />\n</ng-template>\n\n<!-- Selectable -->\n@if (type() === 'selectable') {\n<label class=\"tag\" [class]=\"classes()\" [attr.for]=\"id()\">\n <input\n type=\"checkbox\"\n class=\"tag__input\"\n [id]=\"id()\"\n [name]=\"name()\"\n [checked]=\"_value()\"\n [disabled]=\"disabled()\"\n (change)=\"onCheckboxChange($event)\"\n />\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</label>\n}\n<!-- Interactive -->\n@if (type() === 'interactive') {\n<button type=\"button\" class=\"tag\" [class]=\"classes()\" [disabled]=\"disabled()\">\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</button>\n}\n<!-- Contextualised -->\n@if (type() === 'contextualised') {\n<button type=\"button\" class=\"tag\" [class]=\"classes()\" [disabled]=\"disabled()\">\n <moz-number-badge\n appearance=\"inverse\"\n [label]=\"contextualisedNumber()\"\n [size]=\"size() === 'l' ? 'm' : 's'\"\n />\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</button>\n}\n<!-- Removable -->\n@if (type() === 'removable') {\n<span class=\"tag\" [class]=\"classes()\">\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n <button class=\"tag-removable__remove\" type=\"button\" (click)=\"onRemove()\">\n <CrossCircleFilled24 class=\"tag-removable__icon\" aria-hidden=\"true\" />\n <span class=\"tag-removable__text\">{{ removableLabel() }}</span>\n </button>\n</span>\n}\n<!-- Informative -->\n@if (type() === 'informative') {\n<span class=\"tag\" [class]=\"classes()\">\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</span>\n}\n", styles: [".mc-tag,.tag{font-size:var(--font-size-100, .875rem);border-radius:2rem;height:2rem;padding-inline:.75rem;box-sizing:border-box;display:inline-flex;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,.tag--s{font-size:var(--font-size-50, .75rem);border-radius:1.5rem;height:1.5rem;padding-inline:.5rem}.mc-tag--l,.tag--l{font-size:var(--font-size-100, .875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem}.mc-tag.is-disabled,.is-disabled.tag,.mc-tag:disabled,.tag:disabled{cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none}.mc-tag.is-disabled .mc-badge,.is-disabled.tag .mc-badge,.mc-tag:disabled .mc-badge,.tag:disabled .mc-badge{color:currentColor}.mc-tag-interactive,.tag--interactive{text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600)}.mc-tag-interactive:not(:disabled):hover,.tag--interactive:not(:disabled):hover{box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--tag-color-border, #999999)}.mc-tag-interactive:focus-visible,.tag--interactive:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-tag-contextualised,.tag--contextualised{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,.tag--contextualised:not(:disabled):hover{background:var(--tag-color-background-selected-hover, #006902)}.mc-tag-contextualised:focus-visible,.tag--contextualised:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-tag-contextualised.mc-tag--s,.mc-tag--s.tag--contextualised,.mc-tag-contextualised.tag--s,.tag--contextualised.tag--s{padding-inline-end:.5rem;padding-inline-start:.25rem}.mc-tag-removable,.tag--removable{padding:0 0 0 1rem;background:var(--tag-color-background-inverse, #242938);color:var(--tag-color-text-inverse, #ffffff);border:none}.mc-tag-removable__remove,.tag-removable__remove{width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;margin:0 0 0 .125rem;padding:.25rem;display:block;cursor:pointer;border-radius:var(--border-radius-full, 100%)}.mc-tag-removable__remove:hover,.tag-removable__remove:hover{background:var(--tag-color-background-inverse-hover, #343b4c)}.mc-tag-removable__remove:focus-visible,.tag-removable__remove:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-tag-removable__icon,.tag-removable__icon{fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem}.mc-tag-removable__text,.tag-removable__text{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,.mc-tag--s.tag--removable,.mc-tag-removable.tag--s,.tag--removable.tag--s{padding:0 0 0 .5rem}.mc-tag-removable.mc-tag--s .mc-tag-removable__remove,.mc-tag--s.tag--removable .mc-tag-removable__remove,.mc-tag-removable.tag--s .mc-tag-removable__remove,.tag--removable.tag--s .mc-tag-removable__remove,.mc-tag-removable.mc-tag--s .tag-removable__remove,.mc-tag--s.tag--removable .tag-removable__remove,.mc-tag-removable.tag--s .tag-removable__remove,.tag--removable.tag--s .tag-removable__remove{width:1.5rem;height:1.5rem;padding:.125rem}.mc-tag-removable.mc-tag--s .mc-tag-removable__icon,.mc-tag--s.tag--removable .mc-tag-removable__icon,.mc-tag-removable.tag--s .mc-tag-removable__icon,.tag--removable.tag--s .mc-tag-removable__icon,.mc-tag-removable.mc-tag--s .tag-removable__icon,.mc-tag--s.tag--removable .tag-removable__icon,.mc-tag-removable.tag--s .tag-removable__icon,.tag--removable.tag--s .tag-removable__icon{width:1.25rem;height:1.25rem}.mc-tag-removable.mc-tag--l .mc-tag-removable__remove,.mc-tag--l.tag--removable .mc-tag-removable__remove,.mc-tag-removable.tag--l .mc-tag-removable__remove,.tag--removable.tag--l .mc-tag-removable__remove,.mc-tag-removable.mc-tag--l .tag-removable__remove,.mc-tag--l.tag--removable .tag-removable__remove,.mc-tag-removable.tag--l .tag-removable__remove,.tag--removable.tag--l .tag-removable__remove{width:2.5rem;height:2.5rem}.mc-tag-removable.mc-tag--l .mc-tag-removable__icon,.mc-tag--l.tag--removable .mc-tag-removable__icon,.mc-tag-removable.tag--l .mc-tag-removable__icon,.tag--removable.tag--l .mc-tag-removable__icon,.mc-tag-removable.mc-tag--l .tag-removable__icon,.mc-tag--l.tag--removable .tag-removable__icon,.mc-tag-removable.tag--l .tag-removable__icon,.tag--removable.tag--l .tag-removable__icon{width:2rem;height:2rem}.mc-tag-selectable,.tag--selectable{gap:.25rem;white-space:nowrap;cursor:pointer;padding-inline-start:.5rem;font-weight:var(--font-weight-semi-bold, 600)}.mc-tag-selectable:hover,.tag--selectable:hover{box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--tag-color-border, #999999)}.mc-tag-selectable:has(:focus-visible),.tag--selectable:has(:focus-visible){box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-tag-selectable:has(:checked),.tag--selectable:has(:checked){background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none}.mc-tag-selectable:has(:checked):before,.tag--selectable:has(:checked):before{display:inline-block;content:\"\";height:1.25rem;width:1.25rem;background-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,.tag--selectable:has(:checked):not(:has(:disabled)):hover{background:var(--tag-color-background-selected-hover, #006902);border-color:var(--tag-color-background-selected-hover, #006902);box-shadow:none}.mc-tag-selectable:has(:disabled),.tag--selectable:has(:disabled){cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none}.mc-tag-selectable:has(:disabled):before,.tag--selectable:has(:disabled):before{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,.tag--selectable .mc-tag__input,.mc-tag-selectable .tag__input,.tag--selectable .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,.tag--selectable .mc-tag__label,.mc-tag-selectable .tag__label,.tag--selectable .tag__label{-webkit-user-select:none;user-select:none}.mc-tag-selectable.mc-tag--s,.mc-tag--s.tag--selectable,.mc-tag-selectable.tag--s,.tag--selectable.tag--s{padding-inline-start:.25rem;gap:.125rem}.mc-tag-selectable.mc-tag--l,.mc-tag--l.tag--selectable,.mc-tag-selectable.tag--l,.tag--selectable.tag--l{padding-inline-start:.75rem}\n"], dependencies: [{ kind: "component", type: CrossCircleFilled24, selector: "CrossCircleFilled24", inputs: ["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 });
|
|
1740
|
+
], ngImport: i0, template: "<ng-template #labelTemplate>\n <ng-content />\n</ng-template>\n\n<!-- Selectable -->\n@if (type() === 'selectable') {\n<label class=\"tag\" [class]=\"classes()\" [attr.for]=\"id()\">\n <input\n type=\"checkbox\"\n class=\"tag__input\"\n [id]=\"id()\"\n [name]=\"name()\"\n [checked]=\"_value()\"\n [disabled]=\"disabled()\"\n (change)=\"onCheckboxChange($event)\"\n />\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</label>\n}\n<!-- Interactive -->\n@if (type() === 'interactive') {\n<button type=\"button\" class=\"tag\" [class]=\"classes()\" [disabled]=\"disabled()\">\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</button>\n}\n<!-- Contextualised -->\n@if (type() === 'contextualised') {\n<button type=\"button\" class=\"tag\" [class]=\"classes()\" [disabled]=\"disabled()\">\n <moz-number-badge\n appearance=\"inverse\"\n [label]=\"contextualisedNumber()\"\n [size]=\"size() === 'l' ? 'm' : 's'\"\n />\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</button>\n}\n<!-- Removable -->\n@if (type() === 'removable') {\n<span class=\"tag\" [class]=\"classes()\">\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n <button class=\"tag-removable__remove\" type=\"button\" (click)=\"onRemove()\">\n <CrossCircleFilled24 class=\"tag-removable__icon\" aria-hidden=\"true\" />\n <span class=\"tag-removable__text\">{{ removableLabel() }}</span>\n </button>\n</span>\n}\n<!-- Informative -->\n@if (type() === 'informative') {\n<span class=\"tag\" [class]=\"classes()\">\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</span>\n}\n", styles: [".mc-tag,.tag{font-size:var(--font-size-100, .875rem);border-radius:2rem;height:2rem;padding-inline:.75rem;box-sizing:border-box;display:inline-flex;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,.tag--s{font-size:var(--font-size-50, .75rem);border-radius:1.5rem;height:1.5rem;padding-inline:.5rem}.mc-tag--l,.tag--l{font-size:var(--font-size-100, .875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem}.mc-tag.is-disabled,.is-disabled.tag,.mc-tag:disabled,.tag:disabled{cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none}.mc-tag.is-disabled .mc-badge,.is-disabled.tag .mc-badge,.mc-tag:disabled .mc-badge,.tag:disabled .mc-badge{color:currentColor}.mc-tag-interactive,.tag-interactive{text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600)}.mc-tag-interactive:not(:disabled):hover,.tag-interactive:not(:disabled):hover{box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--tag-color-border, #999999)}.mc-tag-interactive:focus-visible,.tag-interactive:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-tag-contextualised,.tag-contextualised{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,.tag-contextualised:not(:disabled):hover{background:var(--tag-color-background-selected-hover, #006902)}.mc-tag-contextualised:focus-visible,.tag-contextualised:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-tag-contextualised.mc-tag--s,.mc-tag--s.tag-contextualised,.mc-tag-contextualised.tag--s,.tag-contextualised.tag--s{padding-inline-end:.5rem;padding-inline-start:.25rem}.mc-tag-removable,.tag-removable{padding:0 0 0 1rem;background:var(--tag-color-background-inverse, #242938);color:var(--tag-color-text-inverse, #ffffff);border:none}.mc-tag-removable__remove,.tag-removable__remove{width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;margin:0 0 0 .125rem;padding:.25rem;display:block;cursor:pointer;border-radius:var(--border-radius-full, 100%)}.mc-tag-removable__remove:hover,.tag-removable__remove:hover{background:var(--tag-color-background-inverse-hover, #343b4c)}.mc-tag-removable__remove:focus-visible,.tag-removable__remove:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-tag-removable__icon,.tag-removable__icon{fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem}.mc-tag-removable__text,.tag-removable__text{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,.mc-tag--s.tag-removable,.mc-tag-removable.tag--s,.tag-removable.tag--s{padding:0 0 0 .5rem}.mc-tag-removable.mc-tag--s .mc-tag-removable__remove,.mc-tag--s.tag-removable .mc-tag-removable__remove,.mc-tag-removable.tag--s .mc-tag-removable__remove,.tag-removable.tag--s .mc-tag-removable__remove,.mc-tag-removable.mc-tag--s .tag-removable__remove,.mc-tag--s.tag-removable .tag-removable__remove,.mc-tag-removable.tag--s .tag-removable__remove,.tag-removable.tag--s .tag-removable__remove{width:1.5rem;height:1.5rem;padding:.125rem}.mc-tag-removable.mc-tag--s .mc-tag-removable__icon,.mc-tag--s.tag-removable .mc-tag-removable__icon,.mc-tag-removable.tag--s .mc-tag-removable__icon,.tag-removable.tag--s .mc-tag-removable__icon,.mc-tag-removable.mc-tag--s .tag-removable__icon,.mc-tag--s.tag-removable .tag-removable__icon,.mc-tag-removable.tag--s .tag-removable__icon,.tag-removable.tag--s .tag-removable__icon{width:1.25rem;height:1.25rem}.mc-tag-removable.mc-tag--l .mc-tag-removable__remove,.mc-tag--l.tag-removable .mc-tag-removable__remove,.mc-tag-removable.tag--l .mc-tag-removable__remove,.tag-removable.tag--l .mc-tag-removable__remove,.mc-tag-removable.mc-tag--l .tag-removable__remove,.mc-tag--l.tag-removable .tag-removable__remove,.mc-tag-removable.tag--l .tag-removable__remove,.tag-removable.tag--l .tag-removable__remove{width:2.5rem;height:2.5rem}.mc-tag-removable.mc-tag--l .mc-tag-removable__icon,.mc-tag--l.tag-removable .mc-tag-removable__icon,.mc-tag-removable.tag--l .mc-tag-removable__icon,.tag-removable.tag--l .mc-tag-removable__icon,.mc-tag-removable.mc-tag--l .tag-removable__icon,.mc-tag--l.tag-removable .tag-removable__icon,.mc-tag-removable.tag--l .tag-removable__icon,.tag-removable.tag--l .tag-removable__icon{width:2rem;height:2rem}.mc-tag-selectable,.tag-selectable{gap:.25rem;white-space:nowrap;cursor:pointer;padding-inline-start:.5rem;font-weight:var(--font-weight-semi-bold, 600)}.mc-tag-selectable:hover,.tag-selectable:hover{box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--tag-color-border, #999999)}.mc-tag-selectable:has(:focus-visible),.tag-selectable:has(:focus-visible){box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-tag-selectable:has(:checked),.tag-selectable:has(:checked){background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none}.mc-tag-selectable:has(:checked):before,.tag-selectable:has(:checked):before{display:inline-block;content:\"\";height:1.25rem;width:1.25rem;background-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,.tag-selectable:has(:checked):not(:has(:disabled)):hover{background:var(--tag-color-background-selected-hover, #006902);border-color:var(--tag-color-background-selected-hover, #006902);box-shadow:none}.mc-tag-selectable:has(:disabled),.tag-selectable:has(:disabled){cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none}.mc-tag-selectable:has(:disabled):before,.tag-selectable:has(:disabled):before{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,.tag-selectable .mc-tag__input,.mc-tag-selectable .tag__input,.tag-selectable .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,.tag-selectable .mc-tag__label,.mc-tag-selectable .tag__label,.tag-selectable .tag__label{-webkit-user-select:none;user-select:none}.mc-tag-selectable.mc-tag--s,.mc-tag--s.tag-selectable,.mc-tag-selectable.tag--s,.tag-selectable.tag--s{padding-inline-start:.25rem;gap:.125rem}.mc-tag-selectable.mc-tag--l,.mc-tag--l.tag-selectable,.mc-tag-selectable.tag--l,.tag-selectable.tag--l{padding-inline-start:.75rem}\n"], dependencies: [{ kind: "component", type: CrossCircleFilled24, selector: "CrossCircleFilled24", inputs: ["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 });
|
|
1739
1741
|
}
|
|
1740
1742
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozTagComponent, decorators: [{
|
|
1741
1743
|
type: Component,
|
|
@@ -1745,7 +1747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
1745
1747
|
useExisting: forwardRef(() => MozTagComponent),
|
|
1746
1748
|
multi: true,
|
|
1747
1749
|
},
|
|
1748
|
-
], template: "<ng-template #labelTemplate>\n <ng-content />\n</ng-template>\n\n<!-- Selectable -->\n@if (type() === 'selectable') {\n<label class=\"tag\" [class]=\"classes()\" [attr.for]=\"id()\">\n <input\n type=\"checkbox\"\n class=\"tag__input\"\n [id]=\"id()\"\n [name]=\"name()\"\n [checked]=\"_value()\"\n [disabled]=\"disabled()\"\n (change)=\"onCheckboxChange($event)\"\n />\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</label>\n}\n<!-- Interactive -->\n@if (type() === 'interactive') {\n<button type=\"button\" class=\"tag\" [class]=\"classes()\" [disabled]=\"disabled()\">\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</button>\n}\n<!-- Contextualised -->\n@if (type() === 'contextualised') {\n<button type=\"button\" class=\"tag\" [class]=\"classes()\" [disabled]=\"disabled()\">\n <moz-number-badge\n appearance=\"inverse\"\n [label]=\"contextualisedNumber()\"\n [size]=\"size() === 'l' ? 'm' : 's'\"\n />\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</button>\n}\n<!-- Removable -->\n@if (type() === 'removable') {\n<span class=\"tag\" [class]=\"classes()\">\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n <button class=\"tag-removable__remove\" type=\"button\" (click)=\"onRemove()\">\n <CrossCircleFilled24 class=\"tag-removable__icon\" aria-hidden=\"true\" />\n <span class=\"tag-removable__text\">{{ removableLabel() }}</span>\n </button>\n</span>\n}\n<!-- Informative -->\n@if (type() === 'informative') {\n<span class=\"tag\" [class]=\"classes()\">\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</span>\n}\n", styles: [".mc-tag,.tag{font-size:var(--font-size-100, .875rem);border-radius:2rem;height:2rem;padding-inline:.75rem;box-sizing:border-box;display:inline-flex;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,.tag--s{font-size:var(--font-size-50, .75rem);border-radius:1.5rem;height:1.5rem;padding-inline:.5rem}.mc-tag--l,.tag--l{font-size:var(--font-size-100, .875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem}.mc-tag.is-disabled,.is-disabled.tag,.mc-tag:disabled,.tag:disabled{cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none}.mc-tag.is-disabled .mc-badge,.is-disabled.tag .mc-badge,.mc-tag:disabled .mc-badge,.tag:disabled .mc-badge{color:currentColor}.mc-tag-interactive,.tag--interactive{text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600)}.mc-tag-interactive:not(:disabled):hover,.tag--interactive:not(:disabled):hover{box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--tag-color-border, #999999)}.mc-tag-interactive:focus-visible,.tag--interactive:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-tag-contextualised,.tag--contextualised{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,.tag--contextualised:not(:disabled):hover{background:var(--tag-color-background-selected-hover, #006902)}.mc-tag-contextualised:focus-visible,.tag--contextualised:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-tag-contextualised.mc-tag--s,.mc-tag--s.tag--contextualised,.mc-tag-contextualised.tag--s,.tag--contextualised.tag--s{padding-inline-end:.5rem;padding-inline-start:.25rem}.mc-tag-removable,.tag--removable{padding:0 0 0 1rem;background:var(--tag-color-background-inverse, #242938);color:var(--tag-color-text-inverse, #ffffff);border:none}.mc-tag-removable__remove,.tag-removable__remove{width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;margin:0 0 0 .125rem;padding:.25rem;display:block;cursor:pointer;border-radius:var(--border-radius-full, 100%)}.mc-tag-removable__remove:hover,.tag-removable__remove:hover{background:var(--tag-color-background-inverse-hover, #343b4c)}.mc-tag-removable__remove:focus-visible,.tag-removable__remove:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-tag-removable__icon,.tag-removable__icon{fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem}.mc-tag-removable__text,.tag-removable__text{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,.mc-tag--s.tag--removable,.mc-tag-removable.tag--s,.tag--removable.tag--s{padding:0 0 0 .5rem}.mc-tag-removable.mc-tag--s .mc-tag-removable__remove,.mc-tag--s.tag--removable .mc-tag-removable__remove,.mc-tag-removable.tag--s .mc-tag-removable__remove,.tag--removable.tag--s .mc-tag-removable__remove,.mc-tag-removable.mc-tag--s .tag-removable__remove,.mc-tag--s.tag--removable .tag-removable__remove,.mc-tag-removable.tag--s .tag-removable__remove,.tag--removable.tag--s .tag-removable__remove{width:1.5rem;height:1.5rem;padding:.125rem}.mc-tag-removable.mc-tag--s .mc-tag-removable__icon,.mc-tag--s.tag--removable .mc-tag-removable__icon,.mc-tag-removable.tag--s .mc-tag-removable__icon,.tag--removable.tag--s .mc-tag-removable__icon,.mc-tag-removable.mc-tag--s .tag-removable__icon,.mc-tag--s.tag--removable .tag-removable__icon,.mc-tag-removable.tag--s .tag-removable__icon,.tag--removable.tag--s .tag-removable__icon{width:1.25rem;height:1.25rem}.mc-tag-removable.mc-tag--l .mc-tag-removable__remove,.mc-tag--l.tag--removable .mc-tag-removable__remove,.mc-tag-removable.tag--l .mc-tag-removable__remove,.tag--removable.tag--l .mc-tag-removable__remove,.mc-tag-removable.mc-tag--l .tag-removable__remove,.mc-tag--l.tag--removable .tag-removable__remove,.mc-tag-removable.tag--l .tag-removable__remove,.tag--removable.tag--l .tag-removable__remove{width:2.5rem;height:2.5rem}.mc-tag-removable.mc-tag--l .mc-tag-removable__icon,.mc-tag--l.tag--removable .mc-tag-removable__icon,.mc-tag-removable.tag--l .mc-tag-removable__icon,.tag--removable.tag--l .mc-tag-removable__icon,.mc-tag-removable.mc-tag--l .tag-removable__icon,.mc-tag--l.tag--removable .tag-removable__icon,.mc-tag-removable.tag--l .tag-removable__icon,.tag--removable.tag--l .tag-removable__icon{width:2rem;height:2rem}.mc-tag-selectable,.tag--selectable{gap:.25rem;white-space:nowrap;cursor:pointer;padding-inline-start:.5rem;font-weight:var(--font-weight-semi-bold, 600)}.mc-tag-selectable:hover,.tag--selectable:hover{box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--tag-color-border, #999999)}.mc-tag-selectable:has(:focus-visible),.tag--selectable:has(:focus-visible){box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-tag-selectable:has(:checked),.tag--selectable:has(:checked){background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none}.mc-tag-selectable:has(:checked):before,.tag--selectable:has(:checked):before{display:inline-block;content:\"\";height:1.25rem;width:1.25rem;background-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,.tag--selectable:has(:checked):not(:has(:disabled)):hover{background:var(--tag-color-background-selected-hover, #006902);border-color:var(--tag-color-background-selected-hover, #006902);box-shadow:none}.mc-tag-selectable:has(:disabled),.tag--selectable:has(:disabled){cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none}.mc-tag-selectable:has(:disabled):before,.tag--selectable:has(:disabled):before{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,.tag--selectable .mc-tag__input,.mc-tag-selectable .tag__input,.tag--selectable .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,.tag--selectable .mc-tag__label,.mc-tag-selectable .tag__label,.tag--selectable .tag__label{-webkit-user-select:none;user-select:none}.mc-tag-selectable.mc-tag--s,.mc-tag--s.tag--selectable,.mc-tag-selectable.tag--s,.tag--selectable.tag--s{padding-inline-start:.25rem;gap:.125rem}.mc-tag-selectable.mc-tag--l,.mc-tag--l.tag--selectable,.mc-tag-selectable.tag--l,.tag--selectable.tag--l{padding-inline-start:.75rem}\n"] }]
|
|
1750
|
+
], template: "<ng-template #labelTemplate>\n <ng-content />\n</ng-template>\n\n<!-- Selectable -->\n@if (type() === 'selectable') {\n<label class=\"tag\" [class]=\"classes()\" [attr.for]=\"id()\">\n <input\n type=\"checkbox\"\n class=\"tag__input\"\n [id]=\"id()\"\n [name]=\"name()\"\n [checked]=\"_value()\"\n [disabled]=\"disabled()\"\n (change)=\"onCheckboxChange($event)\"\n />\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</label>\n}\n<!-- Interactive -->\n@if (type() === 'interactive') {\n<button type=\"button\" class=\"tag\" [class]=\"classes()\" [disabled]=\"disabled()\">\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</button>\n}\n<!-- Contextualised -->\n@if (type() === 'contextualised') {\n<button type=\"button\" class=\"tag\" [class]=\"classes()\" [disabled]=\"disabled()\">\n <moz-number-badge\n appearance=\"inverse\"\n [label]=\"contextualisedNumber()\"\n [size]=\"size() === 'l' ? 'm' : 's'\"\n />\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</button>\n}\n<!-- Removable -->\n@if (type() === 'removable') {\n<span class=\"tag\" [class]=\"classes()\">\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n <button class=\"tag-removable__remove\" type=\"button\" (click)=\"onRemove()\">\n <CrossCircleFilled24 class=\"tag-removable__icon\" aria-hidden=\"true\" />\n <span class=\"tag-removable__text\">{{ removableLabel() }}</span>\n </button>\n</span>\n}\n<!-- Informative -->\n@if (type() === 'informative') {\n<span class=\"tag\" [class]=\"classes()\">\n <span class=\"tag__label\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n </span>\n</span>\n}\n", styles: [".mc-tag,.tag{font-size:var(--font-size-100, .875rem);border-radius:2rem;height:2rem;padding-inline:.75rem;box-sizing:border-box;display:inline-flex;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,.tag--s{font-size:var(--font-size-50, .75rem);border-radius:1.5rem;height:1.5rem;padding-inline:.5rem}.mc-tag--l,.tag--l{font-size:var(--font-size-100, .875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem}.mc-tag.is-disabled,.is-disabled.tag,.mc-tag:disabled,.tag:disabled{cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none}.mc-tag.is-disabled .mc-badge,.is-disabled.tag .mc-badge,.mc-tag:disabled .mc-badge,.tag:disabled .mc-badge{color:currentColor}.mc-tag-interactive,.tag-interactive{text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600)}.mc-tag-interactive:not(:disabled):hover,.tag-interactive:not(:disabled):hover{box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--tag-color-border, #999999)}.mc-tag-interactive:focus-visible,.tag-interactive:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-tag-contextualised,.tag-contextualised{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,.tag-contextualised:not(:disabled):hover{background:var(--tag-color-background-selected-hover, #006902)}.mc-tag-contextualised:focus-visible,.tag-contextualised:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-tag-contextualised.mc-tag--s,.mc-tag--s.tag-contextualised,.mc-tag-contextualised.tag--s,.tag-contextualised.tag--s{padding-inline-end:.5rem;padding-inline-start:.25rem}.mc-tag-removable,.tag-removable{padding:0 0 0 1rem;background:var(--tag-color-background-inverse, #242938);color:var(--tag-color-text-inverse, #ffffff);border:none}.mc-tag-removable__remove,.tag-removable__remove{width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;margin:0 0 0 .125rem;padding:.25rem;display:block;cursor:pointer;border-radius:var(--border-radius-full, 100%)}.mc-tag-removable__remove:hover,.tag-removable__remove:hover{background:var(--tag-color-background-inverse-hover, #343b4c)}.mc-tag-removable__remove:focus-visible,.tag-removable__remove:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-tag-removable__icon,.tag-removable__icon{fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem}.mc-tag-removable__text,.tag-removable__text{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,.mc-tag--s.tag-removable,.mc-tag-removable.tag--s,.tag-removable.tag--s{padding:0 0 0 .5rem}.mc-tag-removable.mc-tag--s .mc-tag-removable__remove,.mc-tag--s.tag-removable .mc-tag-removable__remove,.mc-tag-removable.tag--s .mc-tag-removable__remove,.tag-removable.tag--s .mc-tag-removable__remove,.mc-tag-removable.mc-tag--s .tag-removable__remove,.mc-tag--s.tag-removable .tag-removable__remove,.mc-tag-removable.tag--s .tag-removable__remove,.tag-removable.tag--s .tag-removable__remove{width:1.5rem;height:1.5rem;padding:.125rem}.mc-tag-removable.mc-tag--s .mc-tag-removable__icon,.mc-tag--s.tag-removable .mc-tag-removable__icon,.mc-tag-removable.tag--s .mc-tag-removable__icon,.tag-removable.tag--s .mc-tag-removable__icon,.mc-tag-removable.mc-tag--s .tag-removable__icon,.mc-tag--s.tag-removable .tag-removable__icon,.mc-tag-removable.tag--s .tag-removable__icon,.tag-removable.tag--s .tag-removable__icon{width:1.25rem;height:1.25rem}.mc-tag-removable.mc-tag--l .mc-tag-removable__remove,.mc-tag--l.tag-removable .mc-tag-removable__remove,.mc-tag-removable.tag--l .mc-tag-removable__remove,.tag-removable.tag--l .mc-tag-removable__remove,.mc-tag-removable.mc-tag--l .tag-removable__remove,.mc-tag--l.tag-removable .tag-removable__remove,.mc-tag-removable.tag--l .tag-removable__remove,.tag-removable.tag--l .tag-removable__remove{width:2.5rem;height:2.5rem}.mc-tag-removable.mc-tag--l .mc-tag-removable__icon,.mc-tag--l.tag-removable .mc-tag-removable__icon,.mc-tag-removable.tag--l .mc-tag-removable__icon,.tag-removable.tag--l .mc-tag-removable__icon,.mc-tag-removable.mc-tag--l .tag-removable__icon,.mc-tag--l.tag-removable .tag-removable__icon,.mc-tag-removable.tag--l .tag-removable__icon,.tag-removable.tag--l .tag-removable__icon{width:2rem;height:2rem}.mc-tag-selectable,.tag-selectable{gap:.25rem;white-space:nowrap;cursor:pointer;padding-inline-start:.5rem;font-weight:var(--font-weight-semi-bold, 600)}.mc-tag-selectable:hover,.tag-selectable:hover{box-shadow:inset 0 0 0 var(--border-width-s, .0625rem) var(--tag-color-border, #999999)}.mc-tag-selectable:has(:focus-visible),.tag-selectable:has(:focus-visible){box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-tag-selectable:has(:checked),.tag-selectable:has(:checked){background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none}.mc-tag-selectable:has(:checked):before,.tag-selectable:has(:checked):before{display:inline-block;content:\"\";height:1.25rem;width:1.25rem;background-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,.tag-selectable:has(:checked):not(:has(:disabled)):hover{background:var(--tag-color-background-selected-hover, #006902);border-color:var(--tag-color-background-selected-hover, #006902);box-shadow:none}.mc-tag-selectable:has(:disabled),.tag-selectable:has(:disabled){cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none}.mc-tag-selectable:has(:disabled):before,.tag-selectable:has(:disabled):before{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,.tag-selectable .mc-tag__input,.mc-tag-selectable .tag__input,.tag-selectable .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,.tag-selectable .mc-tag__label,.mc-tag-selectable .tag__label,.tag-selectable .tag__label{-webkit-user-select:none;user-select:none}.mc-tag-selectable.mc-tag--s,.mc-tag--s.tag-selectable,.mc-tag-selectable.tag--s,.tag-selectable.tag--s{padding-inline-start:.25rem;gap:.125rem}.mc-tag-selectable.mc-tag--l,.mc-tag--l.tag-selectable,.mc-tag-selectable.tag--l,.tag-selectable.tag--l{padding-inline-start:.75rem}\n"] }]
|
|
1749
1751
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], contextualisedNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextualisedNumber", required: false }] }], removableLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removableLabel", required: false }] }], removeTag: [{ type: i0.Output, args: ["removeTag"] }] } });
|
|
1750
1752
|
|
|
1751
1753
|
/**
|