@angular/material
Version:
Angular Material
89 lines (86 loc) • 10.2 kB
JavaScript
import * as i0 from '@angular/core';
import { Input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
import { _animationsDisabled } from './_animation-chunk.mjs';
class MatPseudoCheckbox {
_animationsDisabled = _animationsDisabled();
state = 'unchecked';
disabled = false;
appearance = 'full';
constructor() {}
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatPseudoCheckbox,
deps: [],
target: i0.ɵɵFactoryTarget.Component
});
static ɵcmp = i0.ɵɵngDeclareComponent({
minVersion: "14.0.0",
version: "22.0.0-next.5",
type: MatPseudoCheckbox,
isStandalone: true,
selector: "mat-pseudo-checkbox",
inputs: {
state: "state",
disabled: "disabled",
appearance: "appearance"
},
host: {
properties: {
"class.mat-pseudo-checkbox-indeterminate": "state === \"indeterminate\"",
"class.mat-pseudo-checkbox-checked": "state === \"checked\"",
"class.mat-pseudo-checkbox-disabled": "disabled",
"class.mat-pseudo-checkbox-minimal": "appearance === \"minimal\"",
"class.mat-pseudo-checkbox-full": "appearance === \"full\"",
"class._mat-animation-noopable": "_animationsDisabled"
},
classAttribute: "mat-pseudo-checkbox"
},
ngImport: i0,
template: '',
isInline: true,
styles: [".mat-pseudo-checkbox {\n border-radius: 2px;\n cursor: pointer;\n display: inline-block;\n vertical-align: middle;\n box-sizing: border-box;\n position: relative;\n flex-shrink: 0;\n transition: border-color 90ms cubic-bezier(0, 0, 0.2, 0.1), background-color 90ms cubic-bezier(0, 0, 0.2, 0.1);\n}\n.mat-pseudo-checkbox::after {\n position: absolute;\n opacity: 0;\n content: \"\";\n border-bottom: 2px solid currentColor;\n transition: opacity 90ms cubic-bezier(0, 0, 0.2, 0.1);\n}\n.mat-pseudo-checkbox._mat-animation-noopable {\n transition: none !important;\n animation: none !important;\n}\n.mat-pseudo-checkbox._mat-animation-noopable::after {\n transition: none;\n}\n\n.mat-pseudo-checkbox-disabled {\n cursor: default;\n}\n\n.mat-pseudo-checkbox-indeterminate::after {\n left: 1px;\n opacity: 1;\n border-radius: 2px;\n}\n\n.mat-pseudo-checkbox-checked::after {\n left: 1px;\n border-left: 2px solid currentColor;\n transform: rotate(-45deg);\n opacity: 1;\n box-sizing: content-box;\n}\n\n.mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-checked::after, .mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-indeterminate::after {\n color: var(--mat-pseudo-checkbox-minimal-selected-checkmark-color, var(--mat-sys-primary));\n}\n.mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled::after, .mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled::after {\n color: var(--mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));\n}\n\n.mat-pseudo-checkbox-full {\n border-color: var(--mat-pseudo-checkbox-full-unselected-icon-color, var(--mat-sys-on-surface-variant));\n border-width: 2px;\n border-style: solid;\n}\n.mat-pseudo-checkbox-full.mat-pseudo-checkbox-disabled {\n border-color: var(--mat-pseudo-checkbox-full-disabled-unselected-icon-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));\n}\n.mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate {\n background-color: var(--mat-pseudo-checkbox-full-selected-icon-color, var(--mat-sys-primary));\n border-color: transparent;\n}\n.mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked::after, .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate::after {\n color: var(--mat-pseudo-checkbox-full-selected-checkmark-color, var(--mat-sys-on-primary));\n}\n.mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled {\n background-color: var(--mat-pseudo-checkbox-full-disabled-selected-icon-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));\n}\n.mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled::after, .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled::after {\n color: var(--mat-pseudo-checkbox-full-disabled-selected-checkmark-color, var(--mat-sys-surface));\n}\n\n.mat-pseudo-checkbox {\n width: 18px;\n height: 18px;\n}\n\n.mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-checked::after {\n width: 14px;\n height: 6px;\n transform-origin: center;\n top: -4.2426406871px;\n left: 0;\n bottom: 0;\n right: 0;\n margin: auto;\n}\n.mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-indeterminate::after {\n top: 8px;\n width: 16px;\n}\n\n.mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked::after {\n width: 10px;\n height: 4px;\n transform-origin: center;\n top: -2.8284271247px;\n left: 0;\n bottom: 0;\n right: 0;\n margin: auto;\n}\n.mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate::after {\n top: 6px;\n width: 12px;\n}\n"],
changeDetection: i0.ChangeDetectionStrategy.OnPush,
encapsulation: i0.ViewEncapsulation.None
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatPseudoCheckbox,
decorators: [{
type: Component,
args: [{
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'mat-pseudo-checkbox',
template: '',
host: {
'class': 'mat-pseudo-checkbox',
'[class.mat-pseudo-checkbox-indeterminate]': 'state === "indeterminate"',
'[class.mat-pseudo-checkbox-checked]': 'state === "checked"',
'[class.mat-pseudo-checkbox-disabled]': 'disabled',
'[class.mat-pseudo-checkbox-minimal]': 'appearance === "minimal"',
'[class.mat-pseudo-checkbox-full]': 'appearance === "full"',
'[class._mat-animation-noopable]': '_animationsDisabled'
},
styles: [".mat-pseudo-checkbox {\n border-radius: 2px;\n cursor: pointer;\n display: inline-block;\n vertical-align: middle;\n box-sizing: border-box;\n position: relative;\n flex-shrink: 0;\n transition: border-color 90ms cubic-bezier(0, 0, 0.2, 0.1), background-color 90ms cubic-bezier(0, 0, 0.2, 0.1);\n}\n.mat-pseudo-checkbox::after {\n position: absolute;\n opacity: 0;\n content: \"\";\n border-bottom: 2px solid currentColor;\n transition: opacity 90ms cubic-bezier(0, 0, 0.2, 0.1);\n}\n.mat-pseudo-checkbox._mat-animation-noopable {\n transition: none !important;\n animation: none !important;\n}\n.mat-pseudo-checkbox._mat-animation-noopable::after {\n transition: none;\n}\n\n.mat-pseudo-checkbox-disabled {\n cursor: default;\n}\n\n.mat-pseudo-checkbox-indeterminate::after {\n left: 1px;\n opacity: 1;\n border-radius: 2px;\n}\n\n.mat-pseudo-checkbox-checked::after {\n left: 1px;\n border-left: 2px solid currentColor;\n transform: rotate(-45deg);\n opacity: 1;\n box-sizing: content-box;\n}\n\n.mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-checked::after, .mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-indeterminate::after {\n color: var(--mat-pseudo-checkbox-minimal-selected-checkmark-color, var(--mat-sys-primary));\n}\n.mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled::after, .mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled::after {\n color: var(--mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));\n}\n\n.mat-pseudo-checkbox-full {\n border-color: var(--mat-pseudo-checkbox-full-unselected-icon-color, var(--mat-sys-on-surface-variant));\n border-width: 2px;\n border-style: solid;\n}\n.mat-pseudo-checkbox-full.mat-pseudo-checkbox-disabled {\n border-color: var(--mat-pseudo-checkbox-full-disabled-unselected-icon-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));\n}\n.mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate {\n background-color: var(--mat-pseudo-checkbox-full-selected-icon-color, var(--mat-sys-primary));\n border-color: transparent;\n}\n.mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked::after, .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate::after {\n color: var(--mat-pseudo-checkbox-full-selected-checkmark-color, var(--mat-sys-on-primary));\n}\n.mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled, .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled {\n background-color: var(--mat-pseudo-checkbox-full-disabled-selected-icon-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));\n}\n.mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled::after, .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled::after {\n color: var(--mat-pseudo-checkbox-full-disabled-selected-checkmark-color, var(--mat-sys-surface));\n}\n\n.mat-pseudo-checkbox {\n width: 18px;\n height: 18px;\n}\n\n.mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-checked::after {\n width: 14px;\n height: 6px;\n transform-origin: center;\n top: -4.2426406871px;\n left: 0;\n bottom: 0;\n right: 0;\n margin: auto;\n}\n.mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-indeterminate::after {\n top: 8px;\n width: 16px;\n}\n\n.mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked::after {\n width: 10px;\n height: 4px;\n transform-origin: center;\n top: -2.8284271247px;\n left: 0;\n bottom: 0;\n right: 0;\n margin: auto;\n}\n.mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate::after {\n top: 6px;\n width: 12px;\n}\n"]
}]
}],
ctorParameters: () => [],
propDecorators: {
state: [{
type: Input
}],
disabled: [{
type: Input
}],
appearance: [{
type: Input
}]
}
});
export { MatPseudoCheckbox };
//# sourceMappingURL=_pseudo-checkbox-chunk.mjs.map