@mozaic-ds/angular 2.0.0-beta.12 → 2.0.0-beta.14
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.
|
@@ -47,35 +47,35 @@ class MozButtonComponent {
|
|
|
47
47
|
isLoading = input(...(ngDevMode ? [undefined, { debugName: "isLoading" }] : []));
|
|
48
48
|
iconTpl = contentChild('icon', { ...(ngDevMode ? { debugName: "iconTpl" } : {}), descendants: false });
|
|
49
49
|
hostClasses = computed(() => {
|
|
50
|
-
const classes = ['
|
|
50
|
+
const classes = ['button'];
|
|
51
51
|
if (this.appearance()) {
|
|
52
|
-
classes.push(`
|
|
52
|
+
classes.push(`button--${this.appearance()}`);
|
|
53
53
|
}
|
|
54
54
|
if (this.size()) {
|
|
55
|
-
classes.push(`
|
|
55
|
+
classes.push(`button--${this.size()}`);
|
|
56
56
|
}
|
|
57
57
|
if (this.ghost()) {
|
|
58
|
-
classes.push('
|
|
58
|
+
classes.push('button--ghost');
|
|
59
59
|
}
|
|
60
60
|
if (this.outlined()) {
|
|
61
|
-
classes.push('
|
|
61
|
+
classes.push('button--outlined');
|
|
62
62
|
}
|
|
63
63
|
if (this.iconPosition() === 'only') {
|
|
64
|
-
classes.push('
|
|
64
|
+
classes.push('button--icon-only');
|
|
65
65
|
}
|
|
66
66
|
if (this.isLoading()) {
|
|
67
|
-
classes.push('
|
|
67
|
+
classes.push('button--loading');
|
|
68
68
|
}
|
|
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: "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=\"mc-loader mc-loader--s mc-button__loader\">\n <span class=\"mc-loader__spinner\">\n <svg\n class=\"mc-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=\"mc-loader__path\" cx=\"50%\" cy=\"50%\" r=\"6\"></circle>\n </svg>\n </span>\n </div>\n }\n @if ((iconPosition() === 'left' || iconPosition() === 'only') && !isLoading()) {\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n }\n @if (iconPosition() !== 'only') {\n <span class=\"mc-button__label\">\n <ng-content></ng-content>\n </span>\n }\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{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c)}.mc-button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, .25rem);transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902)}.mc-button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined.mc-button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de)}.mc-button--outlined.mc-button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea)}.mc-button--outlined.mc-button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--outlined.mc-button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost.mc-button--standard:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1))}.mc-button--ghost.mc-button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1))}.mc-button--ghost.mc-button--danger:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--ghost.mc-button--inverse:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-loader .mc-loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path{stroke-width:4}.mc-loader{color:var(--loader-color-standard, #464e63)}.mc-loader .mc-loader__path{stroke:currentColor}.mc-loader{align-items:center;display:inline-flex;flex-direction:column}.mc-loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-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{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{height:1.25rem;width:1.25rem}.mc-loader--xs .mc-loader__path{stroke-width:2}.mc-loader--s .mc-loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path{stroke-width:8}.mc-loader--accent{color:var(--loader-color-accent, #117f03)}.mc-loader--accent .mc-loader__path{stroke:currentColor}.mc-loader--inverse{color:var(--loader-color-inverse, #ffffff)}.mc-loader--inverse .mc-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.ExperimentalIsolatedShadowDom });
|
|
72
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozButtonComponent, isStandalone: true, selector: "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 });
|
|
73
73
|
}
|
|
74
74
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozButtonComponent, decorators: [{
|
|
75
75
|
type: Component,
|
|
76
|
-
args: [{ selector: 'moz-button', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush,
|
|
76
|
+
args: [{ selector: 'moz-button', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
77
77
|
'[attr.disabled]': 'disabled() ? "" : null',
|
|
78
|
-
}, template: "<button [class]=\"hostClasses()\" [type]=\"type()\" [disabled]=\"disabled()\">\n @if (isLoading()) {\n <div class=\"mc-loader mc-loader--s mc-button__loader\">\n <span class=\"mc-loader__spinner\">\n <svg\n class=\"mc-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=\"mc-loader__path\" cx=\"50%\" cy=\"50%\" r=\"6\"></circle>\n </svg>\n </span>\n </div>\n }\n @if ((iconPosition() === 'left' || iconPosition() === 'only') && !isLoading()) {\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n }\n @if (iconPosition() !== 'only') {\n <span class=\"mc-button__label\">\n <ng-content></ng-content>\n </span>\n }\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{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c)}.mc-button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, .25rem);transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902)}.mc-button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined.mc-button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de)}.mc-button--outlined.mc-button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea)}.mc-button--outlined.mc-button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--outlined.mc-button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost.mc-button--standard:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1))}.mc-button--ghost.mc-button--accent:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1))}.mc-button--ghost.mc-button--danger:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--ghost.mc-button--inverse:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-loader .mc-loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path{stroke-width:4}.mc-loader{color:var(--loader-color-standard, #464e63)}.mc-loader .mc-loader__path{stroke:currentColor}.mc-loader{align-items:center;display:inline-flex;flex-direction:column}.mc-loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-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{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{height:1.25rem;width:1.25rem}.mc-loader--xs .mc-loader__path{stroke-width:2}.mc-loader--s .mc-loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path{stroke-width:8}.mc-loader--accent{color:var(--loader-color-accent, #117f03)}.mc-loader--accent .mc-loader__path{stroke:currentColor}.mc-loader--inverse{color:var(--loader-color-inverse, #ffffff)}.mc-loader--inverse .mc-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"] }]
|
|
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
79
|
}], 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
80
|
|
|
81
81
|
class MozCheckboxComponent {
|
|
@@ -250,13 +250,30 @@ class MozFieldComponent {
|
|
|
250
250
|
};
|
|
251
251
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
252
252
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
253
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozFieldComponent, isStandalone: true, selector: "moz-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, requirementText: { classPropertyName: "requirementText", publicName: "requirementText", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, helpId: { classPropertyName: "helpId", publicName: "helpId", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, messageId: { classPropertyName: "messageId", publicName: "messageId", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"
|
|
253
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozFieldComponent, isStandalone: true, selector: "moz-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, requirementText: { classPropertyName: "requirementText", publicName: "requirementText", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, helpId: { classPropertyName: "helpId", publicName: "helpId", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, messageId: { classPropertyName: "messageId", publicName: "messageId", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"field\">\n <label class=\"field__label\" [attr.for]=\"id()\">\n {{ label() }} @if (requirementText()) {\n <span class=\"field__requirement\"> ({{ requirementText() }}) </span>\n }\n </label>\n\n @if (helpId() && helpText()) {\n <span class=\"field__help\" [id]=\"helpId()\"> {{ helpText() }} </span>\n }\n\n <!-- <ng-content select=\"moz-field-content\"></ng-content> -->\n\n <div class=\"field__content\">\n <ng-content></ng-content>\n </div>\n\n @if ((isValid() || isInvalid()) && message()) {\n <span [id]=\"messageId()\" [class]=\"classes()\">\n {{ message() }}\n </span>\n }\n</div>\n", styles: [".mc-field__label,.field__label,.mc-field__legend{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000)}.mc-field__legend{padding-inline:0}.mc-field__requirement,.field__requirement,.mc-field__help,.field__help{font-size:var(--font-size-50, .75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help,.field__help{display:block;margin-top:.125rem}.mc-field__content,.field__content{margin-top:.5rem}.mc-field__validation-message{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:.25rem;margin-top:.25rem}.mc-field__validation-message.is-valid:before,.mc-field__validation-message.is-invalid:before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\")}.mc-field__validation-message.is-invalid{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\")}.mc-field__validation-message.is-loading{color:var(--field-color-validation-loading, #666666)}.mc-field--group{border-width:0;margin-inline:0;padding:0}.mc-field--group .mc-field__content,.mc-field--group .field__content{display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-field--group .mc-field__content:where(.mc-field__content--inline),.mc-field--group .field__content:where(.mc-field__content--inline){flex-flow:row wrap;gap:.25rem 1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
254
254
|
}
|
|
255
255
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozFieldComponent, decorators: [{
|
|
256
256
|
type: Component,
|
|
257
|
-
args: [{ selector: 'moz-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"
|
|
257
|
+
args: [{ selector: 'moz-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"field\">\n <label class=\"field__label\" [attr.for]=\"id()\">\n {{ label() }} @if (requirementText()) {\n <span class=\"field__requirement\"> ({{ requirementText() }}) </span>\n }\n </label>\n\n @if (helpId() && helpText()) {\n <span class=\"field__help\" [id]=\"helpId()\"> {{ helpText() }} </span>\n }\n\n <!-- <ng-content select=\"moz-field-content\"></ng-content> -->\n\n <div class=\"field__content\">\n <ng-content></ng-content>\n </div>\n\n @if ((isValid() || isInvalid()) && message()) {\n <span [id]=\"messageId()\" [class]=\"classes()\">\n {{ message() }}\n </span>\n }\n</div>\n", styles: [".mc-field__label,.field__label,.mc-field__legend{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000)}.mc-field__legend{padding-inline:0}.mc-field__requirement,.field__requirement,.mc-field__help,.field__help{font-size:var(--font-size-50, .75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help,.field__help{display:block;margin-top:.125rem}.mc-field__content,.field__content{margin-top:.5rem}.mc-field__validation-message{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:.25rem;margin-top:.25rem}.mc-field__validation-message.is-valid:before,.mc-field__validation-message.is-invalid:before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\")}.mc-field__validation-message.is-invalid{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\")}.mc-field__validation-message.is-loading{color:var(--field-color-validation-loading, #666666)}.mc-field--group{border-width:0;margin-inline:0;padding:0}.mc-field--group .mc-field__content,.mc-field--group .field__content{display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-field--group .mc-field__content:where(.mc-field__content--inline),.mc-field--group .field__content:where(.mc-field__content--inline){flex-flow:row wrap;gap:.25rem 1rem}\n"] }]
|
|
258
258
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], requirementText: [{ type: i0.Input, args: [{ isSignal: true, alias: "requirementText", required: false }] }], helpText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpText", required: false }] }], helpId: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpId", required: false }] }], isValid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isValid", required: false }] }], isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], messageId: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageId", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }] } });
|
|
259
259
|
|
|
260
|
+
class MozFieldContentComponent {
|
|
261
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozFieldContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
262
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: MozFieldContentComponent, isStandalone: true, selector: "moz-field-content", ngImport: i0, template: `
|
|
263
|
+
<div class="mc-field__content">
|
|
264
|
+
<ng-content></ng-content>
|
|
265
|
+
</div>
|
|
266
|
+
`, isInline: true, styles: [".mc-field__label,.field__label,.mc-field__legend{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000)}.mc-field__legend{padding-inline:0}.mc-field__requirement,.field__requirement,.mc-field__help,.field__help{font-size:var(--font-size-50, .75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help,.field__help{display:block;margin-top:.125rem}.mc-field__content,.field__content{margin-top:.5rem}.mc-field__validation-message{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:.25rem;margin-top:.25rem}.mc-field__validation-message.is-valid:before,.mc-field__validation-message.is-invalid:before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\")}.mc-field__validation-message.is-invalid{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\")}.mc-field__validation-message.is-loading{color:var(--field-color-validation-loading, #666666)}.mc-field--group{border-width:0;margin-inline:0;padding:0}.mc-field--group .mc-field__content,.mc-field--group .field__content{display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-field--group .mc-field__content:where(.mc-field__content--inline),.mc-field--group .field__content:where(.mc-field__content--inline){flex-flow:row wrap;gap:.25rem 1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
267
|
+
}
|
|
268
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozFieldContentComponent, decorators: [{
|
|
269
|
+
type: Component,
|
|
270
|
+
args: [{ selector: 'moz-field-content', template: `
|
|
271
|
+
<div class="mc-field__content">
|
|
272
|
+
<ng-content></ng-content>
|
|
273
|
+
</div>
|
|
274
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, styles: [".mc-field__label,.field__label,.mc-field__legend{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000)}.mc-field__legend{padding-inline:0}.mc-field__requirement,.field__requirement,.mc-field__help,.field__help{font-size:var(--font-size-50, .75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help,.field__help{display:block;margin-top:.125rem}.mc-field__content,.field__content{margin-top:.5rem}.mc-field__validation-message{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:.25rem;margin-top:.25rem}.mc-field__validation-message.is-valid:before,.mc-field__validation-message.is-invalid:before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\")}.mc-field__validation-message.is-invalid{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\")}.mc-field__validation-message.is-loading{color:var(--field-color-validation-loading, #666666)}.mc-field--group{border-width:0;margin-inline:0;padding:0}.mc-field--group .mc-field__content,.mc-field--group .field__content{display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-field--group .mc-field__content:where(.mc-field__content--inline),.mc-field--group .field__content:where(.mc-field__content--inline){flex-flow:row wrap;gap:.25rem 1rem}\n"] }]
|
|
275
|
+
}] });
|
|
276
|
+
|
|
260
277
|
class MozFieldGroupComponent {
|
|
261
278
|
id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
262
279
|
legend = input.required(...(ngDevMode ? [{ debugName: "legend" }] : []));
|
|
@@ -266,11 +283,11 @@ class MozFieldGroupComponent {
|
|
|
266
283
|
isInvalid = input(false, ...(ngDevMode ? [{ debugName: "isInvalid" }] : []));
|
|
267
284
|
message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
|
|
268
285
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozFieldGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
269
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozFieldGroupComponent, isStandalone: true, selector: "moz-field-group", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: true, transformFunction: null }, requirementText: { classPropertyName: "requirementText", publicName: "requirementText", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<fieldset class=\"mc-field--group\">\n <legend class=\"mc-field__legend\" [attr.for]=\"id()\">\n {{ legend() }} @if (requirementText()) {\n <span class=\"mc-field__requirement\">({{ requirementText() }})</span>\n }\n </legend>\n\n @if (helpText()) {\n <span class=\"mc-field__help\">{{ helpText() }}</span>\n }\n\n <div class=\"mc-field__content\">\n <ng-content></ng-content>\n </div>\n\n @if ((isValid() || isInvalid()) && message()) {\n <span\n class=\"mc-field__validation-message\"\n [class.is-valid]=\"isValid()\"\n [class.is-invalid]=\"isInvalid()\"\n >\n {{ message() }}\n </span>\n }\n</fieldset>\n", styles: [".mc-field__label,.mc-field__legend{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000)}.mc-field__legend{padding-inline:0}.mc-field__requirement,.mc-field__help{font-size:var(--font-size-50, .75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help{display:block;margin-top:.125rem}.mc-field__content{margin-top:.5rem}.mc-field__validation-message{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:.25rem;margin-top:.25rem}.mc-field__validation-message.is-valid:before,.mc-field__validation-message.is-invalid:before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\")}.mc-field__validation-message.is-invalid{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\")}.mc-field__validation-message.is-loading{color:var(--field-color-validation-loading, #666666)}.mc-field--group{border-width:0;margin-inline:0;padding:0}.mc-field--group .mc-field__content{display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-field--group .mc-field__content:where(.mc-field__content--inline){flex-flow:row wrap;gap:.25rem 1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
286
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MozFieldGroupComponent, isStandalone: true, selector: "moz-field-group", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: true, transformFunction: null }, requirementText: { classPropertyName: "requirementText", publicName: "requirementText", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<fieldset class=\"mc-field--group\">\n <legend class=\"mc-field__legend\" [attr.for]=\"id()\">\n {{ legend() }} @if (requirementText()) {\n <span class=\"mc-field__requirement\">({{ requirementText() }})</span>\n }\n </legend>\n\n @if (helpText()) {\n <span class=\"mc-field__help\">{{ helpText() }}</span>\n }\n\n <div class=\"mc-field__content\">\n <ng-content></ng-content>\n </div>\n\n @if ((isValid() || isInvalid()) && message()) {\n <span\n class=\"mc-field__validation-message\"\n [class.is-valid]=\"isValid()\"\n [class.is-invalid]=\"isInvalid()\"\n >\n {{ message() }}\n </span>\n }\n</fieldset>\n", styles: [".mc-field__label,.mc-field__legend{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000)}.mc-field__legend{padding-inline:0}.mc-field__requirement,.mc-field__help{font-size:var(--font-size-50, .75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help{display:block;margin-top:.125rem}.mc-field__content{margin-top:.5rem}.mc-field__validation-message{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:.25rem;margin-top:.25rem}.mc-field__validation-message.is-valid:before,.mc-field__validation-message.is-invalid:before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\")}.mc-field__validation-message.is-invalid{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\")}.mc-field__validation-message.is-loading{color:var(--field-color-validation-loading, #666666)}.mc-field--group{border-width:0;margin-inline:0;padding:0}.mc-field--group .mc-field__content{display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-field--group .mc-field__content:where(.mc-field__content--inline){flex-flow:row wrap;gap:.25rem 1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
270
287
|
}
|
|
271
288
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozFieldGroupComponent, decorators: [{
|
|
272
289
|
type: Component,
|
|
273
|
-
args: [{ selector: 'moz-field-group', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
290
|
+
args: [{ selector: 'moz-field-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fieldset class=\"mc-field--group\">\n <legend class=\"mc-field__legend\" [attr.for]=\"id()\">\n {{ legend() }} @if (requirementText()) {\n <span class=\"mc-field__requirement\">({{ requirementText() }})</span>\n }\n </legend>\n\n @if (helpText()) {\n <span class=\"mc-field__help\">{{ helpText() }}</span>\n }\n\n <div class=\"mc-field__content\">\n <ng-content></ng-content>\n </div>\n\n @if ((isValid() || isInvalid()) && message()) {\n <span\n class=\"mc-field__validation-message\"\n [class.is-valid]=\"isValid()\"\n [class.is-invalid]=\"isInvalid()\"\n >\n {{ message() }}\n </span>\n }\n</fieldset>\n", styles: [".mc-field__label,.mc-field__legend{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000)}.mc-field__legend{padding-inline:0}.mc-field__requirement,.mc-field__help{font-size:var(--font-size-50, .75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help{display:block;margin-top:.125rem}.mc-field__content{margin-top:.5rem}.mc-field__validation-message{font-size:var(--font-size-100, .875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:.25rem;margin-top:.25rem}.mc-field__validation-message.is-valid:before,.mc-field__validation-message.is-invalid:before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E\")}.mc-field__validation-message.is-invalid{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E\")}.mc-field__validation-message.is-loading{color:var(--field-color-validation-loading, #666666)}.mc-field--group{border-width:0;margin-inline:0;padding:0}.mc-field--group .mc-field__content{display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.mc-field--group .mc-field__content:where(.mc-field__content--inline){flex-flow:row wrap;gap:.25rem 1rem}\n"] }]
|
|
274
291
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: true }] }], requirementText: [{ type: i0.Input, args: [{ isSignal: true, alias: "requirementText", required: false }] }], helpText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpText", required: false }] }], isValid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isValid", required: false }] }], isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }] } });
|
|
275
292
|
|
|
276
293
|
class MozIconButtonComponent {
|
|
@@ -1830,6 +1847,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
1830
1847
|
}, styles: [".mc-textarea{font-family:inherit;transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-m, 1.5);min-height:4rem;padding:.5rem .75rem}.mc-textarea::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-textarea:hover{border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-textarea:focus{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-textarea:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373)}.mc-textarea[readonly]{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-textarea.is-invalid{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-textarea.is-invalid:hover{border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}\n"] }]
|
|
1831
1848
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }] } });
|
|
1832
1849
|
|
|
1850
|
+
class MozTextareaComponent {
|
|
1851
|
+
id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
|
|
1852
|
+
name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
|
|
1853
|
+
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
1854
|
+
isInvalid = input(false, ...(ngDevMode ? [{ debugName: "isInvalid" }] : []));
|
|
1855
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1856
|
+
rows = input(2, ...(ngDevMode ? [{ debugName: "rows" }] : []));
|
|
1857
|
+
minLength = input(...(ngDevMode ? [undefined, { debugName: "minLength" }] : []));
|
|
1858
|
+
maxLength = input(...(ngDevMode ? [undefined, { debugName: "maxLength" }] : []));
|
|
1859
|
+
valueChange = output();
|
|
1860
|
+
_value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : []));
|
|
1861
|
+
onChange = () => void 0;
|
|
1862
|
+
onTouched = () => void 0;
|
|
1863
|
+
classes = computed(() => ({
|
|
1864
|
+
'mc-textarea': true,
|
|
1865
|
+
'is-invalid': this.isInvalid(),
|
|
1866
|
+
'is-disabled': this.disabled(),
|
|
1867
|
+
}), ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
1868
|
+
handleInput(event) {
|
|
1869
|
+
const value = event.target.value;
|
|
1870
|
+
this._value.set(value);
|
|
1871
|
+
this.onChange(value);
|
|
1872
|
+
this.valueChange.emit(value);
|
|
1873
|
+
}
|
|
1874
|
+
handleBlur() {
|
|
1875
|
+
this.onTouched();
|
|
1876
|
+
}
|
|
1877
|
+
writeValue(value) {
|
|
1878
|
+
const normalizedValue = value ?? '';
|
|
1879
|
+
this._value.set(normalizedValue);
|
|
1880
|
+
}
|
|
1881
|
+
registerOnChange(fn) {
|
|
1882
|
+
this.onChange = fn;
|
|
1883
|
+
}
|
|
1884
|
+
registerOnTouched(fn) {
|
|
1885
|
+
this.onTouched = fn;
|
|
1886
|
+
}
|
|
1887
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1888
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: MozTextareaComponent, isStandalone: true, selector: "moz-text-area", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
|
|
1889
|
+
{
|
|
1890
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1891
|
+
useExisting: forwardRef(() => MozTextareaComponent),
|
|
1892
|
+
multi: true,
|
|
1893
|
+
},
|
|
1894
|
+
], ngImport: i0, template: "<textarea\n [class]=\"classes()\"\n [id]=\"id()\"\n [name]=\"name()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [rows]=\"rows()\"\n [attr.minlength]=\"minLength()\"\n [attr.maxlength]=\"maxLength()\"\n [attr.aria-invalid]=\"isInvalid()\"\n [value]=\"_value()\"\n (input)=\"handleInput($event)\"\n></textarea>\n", styles: [".mc-textarea{font-family:inherit;transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-m, 1.5);min-height:4rem;padding:.5rem .75rem}.mc-textarea::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-textarea:hover{border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-textarea:focus{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-textarea:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373)}.mc-textarea[readonly]{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-textarea.is-invalid{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-textarea.is-invalid:hover{border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ExperimentalIsolatedShadowDom });
|
|
1895
|
+
}
|
|
1896
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozTextareaComponent, decorators: [{
|
|
1897
|
+
type: Component,
|
|
1898
|
+
args: [{ selector: 'moz-text-area', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ExperimentalIsolatedShadowDom, providers: [
|
|
1899
|
+
{
|
|
1900
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1901
|
+
useExisting: forwardRef(() => MozTextareaComponent),
|
|
1902
|
+
multi: true,
|
|
1903
|
+
},
|
|
1904
|
+
], template: "<textarea\n [class]=\"classes()\"\n [id]=\"id()\"\n [name]=\"name()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [rows]=\"rows()\"\n [attr.minlength]=\"minLength()\"\n [attr.maxlength]=\"maxLength()\"\n [attr.aria-invalid]=\"isInvalid()\"\n [value]=\"_value()\"\n (input)=\"handleInput($event)\"\n></textarea>\n", styles: [".mc-textarea{font-family:inherit;transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-m, 1.5);min-height:4rem;padding:.5rem .75rem}.mc-textarea::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-textarea:hover{border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-textarea:focus{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-textarea:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373)}.mc-textarea[readonly]{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-textarea.is-invalid{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-textarea.is-invalid:hover{border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}\n"] }]
|
|
1905
|
+
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
1906
|
+
|
|
1833
1907
|
/**
|
|
1834
1908
|
* Directive that transforms a simple input into a styled text input with optional icon and clearable button.
|
|
1835
1909
|
* Wraps the input element in a container and adds additional elements as needed.
|
|
@@ -1978,7 +2052,7 @@ class MozTextInputDirective {
|
|
|
1978
2052
|
useExisting: forwardRef(() => MozTextInputDirective),
|
|
1979
2053
|
multi: true,
|
|
1980
2054
|
},
|
|
1981
|
-
], ngImport: i0, template: '', isInline: true, styles: [".mc-controls-options{align-items:center;display:inline-flex;justify-content:center;gap:.5rem}.mc-controls-options__button{background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--border-radius-full, 100%)}.mc-controls-options__button:hover .mc-controls-options__icon{fill:var(--forms-color-icon-clear-hover, #4d4d4d)}.mc-controls-options__button:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-controls-options__icon{fill:var(--forms-color-icon-clear, #666666)}.mc-controls-options__button,.mc-controls-options__icon{height:1.5rem;width:1.5rem}.mc-controls-options__label{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}.mc-controls-options__unit{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-text-input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;box-sizing:border-box;display:flex;align-items:center;gap:.5rem}.mc-text-input__control{background-color:transparent;border-width:0;font-family:inherit;outline:none}.mc-text-input__control[type=number]::-webkit-inner-spin-button,.mc-text-input__control[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input__control[type=number]{appearance:textfield}.mc-text-input__control[type=search]::-webkit-search-decoration,.mc-text-input__control[type=search]::-webkit-search-cancel-button{appearance:none}.mc-text-input__control{padding:.75rem .6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);flex-grow:1}.mc-text-input__control::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-text-input__icon{fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0}.mc-text-input:focus-within{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-text-input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-text-input:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-text-input:has(input[readonly]){border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-text-input:has(.mc-text-input__icon){padding-inline-start:.6875rem}.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control{padding-inline-start:0}.mc-text-input:has(.mc-controls-options){padding-inline-end:.6875rem}.mc-text-input:has(.mc-controls-options) .mc-text-input__control{padding-inline-end:0}.mc-text-input--s{height:2rem}.mc-text-input--s .mc-text-input__control{padding:.375rem .6875rem;font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3)}.mc-text-input--s:has(.mc-text-input__icon){padding-inline-start:.4375rem}.mc-text-input--s:has(.mc-controls-options){padding-inline-end:.4375rem}.mc-text-input.is-invalid{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-text-input.is-invalid:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-text-input *{box-sizing:border-box}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2055
|
+
], ngImport: i0, template: '', isInline: true, styles: [".mc-controls-options{align-items:center;display:inline-flex;justify-content:center;gap:.5rem}.mc-controls-options__button{background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--border-radius-full, 100%)}.mc-controls-options__button:hover .mc-controls-options__icon{fill:var(--forms-color-icon-clear-hover, #4d4d4d)}.mc-controls-options__button:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-controls-options__icon{fill:var(--forms-color-icon-clear, #666666)}.mc-controls-options__button,.mc-controls-options__icon{height:1.5rem;width:1.5rem}.mc-controls-options__label{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}.mc-controls-options__unit{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-text-input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;box-sizing:border-box;display:flex;align-items:center;gap:.5rem}.mc-text-input__control{background-color:transparent;border-width:0;font-family:inherit;outline:none}.mc-text-input__control[type=number]::-webkit-inner-spin-button,.mc-text-input__control[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input__control[type=number]{appearance:textfield}.mc-text-input__control[type=search]::-webkit-search-decoration,.mc-text-input__control[type=search]::-webkit-search-cancel-button{appearance:none}.mc-text-input__control{padding:.75rem .6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);flex-grow:1}.mc-text-input__control::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-text-input__icon{fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0}.mc-text-input:focus-within{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-text-input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-text-input:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-text-input:has(input[readonly]){border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-text-input:has(.mc-text-input__icon){padding-inline-start:.6875rem}.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control{padding-inline-start:0}.mc-text-input:has(.mc-controls-options){padding-inline-end:.6875rem}.mc-text-input:has(.mc-controls-options) .mc-text-input__control{padding-inline-end:0}.mc-text-input--s{height:2rem}.mc-text-input--s .mc-text-input__control{padding:.375rem .6875rem;font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3)}.mc-text-input--s:has(.mc-text-input__icon){padding-inline-start:.4375rem}.mc-text-input--s:has(.mc-controls-options){padding-inline-end:.4375rem}.mc-text-input.is-invalid{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-text-input.is-invalid:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-text-input *{box-sizing:border-box}.mc-text-input__icon:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1982
2056
|
}
|
|
1983
2057
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MozTextInputDirective, decorators: [{
|
|
1984
2058
|
type: Component,
|
|
@@ -1994,7 +2068,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
1994
2068
|
'[disabled]': 'disabled()',
|
|
1995
2069
|
'(input)': 'onInput($event)',
|
|
1996
2070
|
'(blur)': 'onTouched()',
|
|
1997
|
-
}, styles: [".mc-controls-options{align-items:center;display:inline-flex;justify-content:center;gap:.5rem}.mc-controls-options__button{background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--border-radius-full, 100%)}.mc-controls-options__button:hover .mc-controls-options__icon{fill:var(--forms-color-icon-clear-hover, #4d4d4d)}.mc-controls-options__button:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-controls-options__icon{fill:var(--forms-color-icon-clear, #666666)}.mc-controls-options__button,.mc-controls-options__icon{height:1.5rem;width:1.5rem}.mc-controls-options__label{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}.mc-controls-options__unit{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-text-input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;box-sizing:border-box;display:flex;align-items:center;gap:.5rem}.mc-text-input__control{background-color:transparent;border-width:0;font-family:inherit;outline:none}.mc-text-input__control[type=number]::-webkit-inner-spin-button,.mc-text-input__control[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input__control[type=number]{appearance:textfield}.mc-text-input__control[type=search]::-webkit-search-decoration,.mc-text-input__control[type=search]::-webkit-search-cancel-button{appearance:none}.mc-text-input__control{padding:.75rem .6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);flex-grow:1}.mc-text-input__control::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-text-input__icon{fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0}.mc-text-input:focus-within{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-text-input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-text-input:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-text-input:has(input[readonly]){border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-text-input:has(.mc-text-input__icon){padding-inline-start:.6875rem}.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control{padding-inline-start:0}.mc-text-input:has(.mc-controls-options){padding-inline-end:.6875rem}.mc-text-input:has(.mc-controls-options) .mc-text-input__control{padding-inline-end:0}.mc-text-input--s{height:2rem}.mc-text-input--s .mc-text-input__control{padding:.375rem .6875rem;font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3)}.mc-text-input--s:has(.mc-text-input__icon){padding-inline-start:.4375rem}.mc-text-input--s:has(.mc-controls-options){padding-inline-end:.4375rem}.mc-text-input.is-invalid{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-text-input.is-invalid:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-text-input *{box-sizing:border-box}\n"] }]
|
|
2071
|
+
}, styles: [".mc-controls-options{align-items:center;display:inline-flex;justify-content:center;gap:.5rem}.mc-controls-options__button{background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--border-radius-full, 100%)}.mc-controls-options__button:hover .mc-controls-options__icon{fill:var(--forms-color-icon-clear-hover, #4d4d4d)}.mc-controls-options__button:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-controls-options__icon{fill:var(--forms-color-icon-clear, #666666)}.mc-controls-options__button,.mc-controls-options__icon{height:1.5rem;width:1.5rem}.mc-controls-options__label{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}.mc-controls-options__unit{font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000)}.mc-text-input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;box-sizing:border-box;display:flex;align-items:center;gap:.5rem}.mc-text-input__control{background-color:transparent;border-width:0;font-family:inherit;outline:none}.mc-text-input__control[type=number]::-webkit-inner-spin-button,.mc-text-input__control[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input__control[type=number]{appearance:textfield}.mc-text-input__control[type=search]::-webkit-search-decoration,.mc-text-input__control[type=search]::-webkit-search-cancel-button{appearance:none}.mc-text-input__control{padding:.75rem .6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);flex-grow:1}.mc-text-input__control::placeholder{color:var(--forms-color-placeholder, #666666)}.mc-text-input__icon{fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0}.mc-text-input:focus-within{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-text-input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-text-input:has(input:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-text-input:has(input[readonly]){border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-text-input:has(.mc-text-input__icon){padding-inline-start:.6875rem}.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control{padding-inline-start:0}.mc-text-input:has(.mc-controls-options){padding-inline-end:.6875rem}.mc-text-input:has(.mc-controls-options) .mc-text-input__control{padding-inline-end:0}.mc-text-input--s{height:2rem}.mc-text-input--s .mc-text-input__control{padding:.375rem .6875rem;font-size:var(--font-size-100, .875rem);line-height:var(--line-height-s, 1.3)}.mc-text-input--s:has(.mc-text-input__icon){padding-inline-start:.4375rem}.mc-text-input--s:has(.mc-controls-options){padding-inline-end:.4375rem}.mc-text-input.is-invalid{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-text-input.is-invalid:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-text-input *{box-sizing:border-box}.mc-text-input__icon:empty{display:none}\n"] }]
|
|
1998
2072
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }] } });
|
|
1999
2073
|
|
|
2000
2074
|
class MozToggleComponent {
|
|
@@ -3805,5 +3879,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
3805
3879
|
* Generated bundle index. Do not edit.
|
|
3806
3880
|
*/
|
|
3807
3881
|
|
|
3808
|
-
export { BuiltInMenuComponent, DrawerComponent, MozAccordionComponent, MozAccordionContentComponent, MozAccordionHeaderComponent, MozAccordionPanelComponent, MozActionBottomBarComponent, MozActionListboxComponent, MozAvatarComponent, MozBreadcrumbComponent, MozButtonComponent, MozCalloutComponent, MozCarouselComponent, MozCheckListMenuComponent, MozCheckboxComponent, MozCheckboxGroupComponent, MozCircularProgressBarComponent, MozDatepickerComponent, MozDividerComponent, MozFieldComponent, MozFieldGroupComponent, MozFileUploaderComponent, MozFileUploaderItemComponent, MozFlagComponent, MozIconButtonComponent, MozKpiComponent, MozLinearProgressBarBufferComponent, MozLinearProgressBarPercentageComponent, MozLinkComponent, MozLoaderComponent, MozLoadingOverlayComponent, MozModalBodyComponent, MozModalComponent, MozModalContainerComponent, MozModalFooterComponent, MozModalHeaderComponent, MozModalRef, MozModalService, MozNumberBadgeComponent, MozOverlayComponent, MozPageHeaderComponent, MozPaginationComponent, MozPasswordInputDirective, MozPhoneNumberComponent, MozPincodeInputComponent, MozQuantitySelectorComponent, MozRadioComponent, MozRadioGroupComponent, MozSegmentedControlComponent, MozSelectComponent, MozSidebarComponent, MozStarRatingComponent, MozStatusBadgeComponent, MozStatusDotComponent, MozStatusMessageComponent, MozStatusNotificationComponent, MozStepperBottomBarComponent, MozStepperCompactComponent, MozStepperInlineComponent, MozStepperStackedComponent, MozTabComponent, MozTabsComponent, MozTagComponent, MozTextInputDirective, MozTextareaDirective, MozTileComponent, MozTileExpandableComponent, MozTileSelectableComponent, MozToasterComponent, MozToggleComponent, MozTooltipComponent, MozTooltipDirective };
|
|
3882
|
+
export { BuiltInMenuComponent, DrawerComponent, MozAccordionComponent, MozAccordionContentComponent, MozAccordionHeaderComponent, MozAccordionPanelComponent, MozActionBottomBarComponent, MozActionListboxComponent, MozAvatarComponent, MozBreadcrumbComponent, MozButtonComponent, MozCalloutComponent, MozCarouselComponent, MozCheckListMenuComponent, MozCheckboxComponent, MozCheckboxGroupComponent, MozCircularProgressBarComponent, MozDatepickerComponent, MozDividerComponent, MozFieldComponent, MozFieldContentComponent, MozFieldGroupComponent, MozFileUploaderComponent, MozFileUploaderItemComponent, MozFlagComponent, MozIconButtonComponent, MozKpiComponent, MozLinearProgressBarBufferComponent, MozLinearProgressBarPercentageComponent, MozLinkComponent, MozLoaderComponent, MozLoadingOverlayComponent, MozModalBodyComponent, MozModalComponent, MozModalContainerComponent, MozModalFooterComponent, MozModalHeaderComponent, MozModalRef, MozModalService, MozNumberBadgeComponent, MozOverlayComponent, MozPageHeaderComponent, MozPaginationComponent, MozPasswordInputDirective, MozPhoneNumberComponent, MozPincodeInputComponent, MozQuantitySelectorComponent, MozRadioComponent, MozRadioGroupComponent, MozSegmentedControlComponent, MozSelectComponent, MozSidebarComponent, MozStarRatingComponent, MozStatusBadgeComponent, MozStatusDotComponent, MozStatusMessageComponent, MozStatusNotificationComponent, MozStepperBottomBarComponent, MozStepperCompactComponent, MozStepperInlineComponent, MozStepperStackedComponent, MozTabComponent, MozTabsComponent, MozTagComponent, MozTextInputDirective, MozTextareaComponent, MozTextareaDirective, MozTileComponent, MozTileExpandableComponent, MozTileSelectableComponent, MozToasterComponent, MozToggleComponent, MozTooltipComponent, MozTooltipDirective };
|
|
3809
3883
|
//# sourceMappingURL=mozaic-ds-angular.mjs.map
|