@ptsecurity/mosaic 13.6.0 → 13.7.1

package/fesm2020/ptsecurity-mosaic-checkbox.mjs

@@ -5,360 +5,360 @@ import { NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxRequiredValidator } from '@an
 import { mixinTabIndex, mixinColor, mixinDisabled, ThemePalette, toBoolean } from '@ptsecurity/mosaic/core';
 import { CommonModule } from '@angular/common';
 
-/**
- * Injection token that can be used to specify the checkbox click behavior.
- */
+/**
+ * Injection token that can be used to specify the checkbox click behavior.
+ */
 const MC_CHECKBOX_CLICK_ACTION = new InjectionToken('mc-checkbox-click-action');
 
-// Increasing integer for generating unique ids for checkbox components.
-let nextUniqueId = 0;
-/**
- * Provider Expression that allows mc-checkbox to register as a ControlValueAccessor.
- * This allows it to support [(ngModel)].
- * @docs-private
- */
-const MC_CHECKBOX_CONTROL_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => McCheckbox),
-    multi: true
-};
-/**
- * Represents the different states that require custom transitions between them.
- * @docs-private
- */
-var TransitionCheckState;
-(function (TransitionCheckState) {
-    /** The initial state of the component before any user interaction. */
-    TransitionCheckState[TransitionCheckState["Init"] = 0] = "Init";
-    /** The state representing the component when it's becoming checked. */
-    TransitionCheckState[TransitionCheckState["Checked"] = 1] = "Checked";
-    /** The state representing the component when it's becoming unchecked. */
-    TransitionCheckState[TransitionCheckState["Unchecked"] = 2] = "Unchecked";
-    /** The state representing the component when it's becoming indeterminate. */
-    TransitionCheckState[TransitionCheckState["Indeterminate"] = 3] = "Indeterminate";
-})(TransitionCheckState || (TransitionCheckState = {}));
-/** Change event object emitted by McCheckbox. */
-class McCheckboxChange {
-}
-// Boilerplate for applying mixins to McCheckbox.
-/** @docs-private */
-class McCheckboxBase {
-    // tslint:disable-next-line:naming-convention
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-    }
-}
-// tslint:disable-next-line:naming-convention
-const McCheckboxMixinBase = mixinTabIndex(mixinColor(mixinDisabled(McCheckboxBase), ThemePalette.Primary));
-/**
- * A mosaic checkbox component. Supports all of the functionality of an HTML5 checkbox,
- * and exposes a similar API. A McCheckbox can be either checked, unchecked, indeterminate, or
- * disabled. Note that all additional accessibility attributes are taken care of by the component,
- * so there is no need to provide them yourself. However, if you want to omit a label and still
- * have the checkbox be accessible, you may supply an [aria-label] input.
- */
-class McCheckbox extends McCheckboxMixinBase {
-    constructor(elementRef, _changeDetectorRef, _focusMonitor, _clickAction) {
-        super(elementRef);
-        this._changeDetectorRef = _changeDetectorRef;
-        this._focusMonitor = _focusMonitor;
-        this._clickAction = _clickAction;
-        /**
-         * Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will
-         * take precedence so this may be omitted.
-         */
-        this.ariaLabel = '';
-        /**
-         * Users can specify the `aria-labelledby` attribute which will be forwarded to the input element
-         */
-        this.ariaLabelledby = null;
-        /** Whether the label should appear after or before the checkbox. Defaults to 'after' */
-        this.labelPosition = 'after';
-        /** Name value will be applied to the input element if present */
-        this.name = null;
-        /** Event emitted when the checkbox's `checked` value changes. */
-        this.change = new EventEmitter();
-        /** Event emitted when the checkbox's `indeterminate` value changes. */
-        this.indeterminateChange = new EventEmitter();
-        this._checked = false;
-        this._disabled = false;
-        this._indeterminate = false;
-        this.uniqueId = `mc-checkbox-${++nextUniqueId}`;
-        this.currentAnimationClass = '';
-        this.currentCheckState = TransitionCheckState.Init;
-        /**
-         * Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor.
-         * @docs-private
-         */
-        // tslint:disable-next-line:no-empty
-        this.onTouched = () => { };
-        // tslint:disable-next-line:no-empty
-        this.controlValueAccessorChangeFn = () => { };
-        this.id = this.uniqueId;
-    }
-    /** Returns the unique id for the visual hidden input. */
-    get inputId() {
-        return `${this.id || this.uniqueId}-input`;
-    }
-    /** Whether the checkbox is required. */
-    get required() {
-        return this._required;
-    }
-    set required(value) {
-        this._required = toBoolean(value);
-    }
-    /**
-     * Whether the checkbox is checked.
-     */
-    get checked() {
-        return this._checked;
-    }
-    set checked(value) {
-        if (value !== this.checked) {
-            this._checked = value;
-            this._changeDetectorRef.markForCheck();
-        }
-    }
-    /**
-     * Whether the checkbox is disabled. This fully overrides the implementation provided by
-     * mixinDisabled, but the mixin is still required because mixinTabIndex requires it.
-     */
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        if (value !== this.disabled) {
-            this._disabled = value;
-            this._changeDetectorRef.markForCheck();
-        }
-    }
-    /**
-     * Whether the checkbox is indeterminate. This is also known as "mixed" mode and can be used to
-     * represent a checkbox with three states, e.g. a checkbox that represents a nested list of
-     * checkable items. Note that whenever checkbox is manually clicked, indeterminate is immediately
-     * set to false.
-     */
-    get indeterminate() {
-        return this._indeterminate;
-    }
-    set indeterminate(value) {
-        const changed = value !== this._indeterminate;
-        this._indeterminate = value;
-        if (changed) {
-            if (this._indeterminate) {
-                this.transitionCheckState(TransitionCheckState.Indeterminate);
-            }
-            else {
-                this.transitionCheckState(this.checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked);
-            }
-            this.indeterminateChange.emit(this._indeterminate);
-        }
-    }
-    ngAfterViewInit() {
-        this._focusMonitor
-            .monitor(this.inputElement.nativeElement)
-            .subscribe((focusOrigin) => this.onInputFocusChange(focusOrigin));
-    }
-    ngOnDestroy() {
-        this._focusMonitor.stopMonitoring(this.inputElement.nativeElement);
-    }
-    /** Method being called whenever the label text changes. */
-    onLabelTextChange() {
-        // This method is getting called whenever the label of the checkbox changes.
-        // Since the checkbox uses the OnPush strategy we need to notify it about the change
-        // that has been recognized by the cdkObserveContent directive.
-        this._changeDetectorRef.markForCheck();
-    }
-    // Implemented as part of ControlValueAccessor.
-    writeValue(value) {
-        this.checked = !!value;
-    }
-    // Implemented as part of ControlValueAccessor.
-    registerOnChange(fn) {
-        this.controlValueAccessorChangeFn = fn;
-    }
-    // Implemented as part of ControlValueAccessor.
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    // Implemented as part of ControlValueAccessor.
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    getAriaChecked() {
-        return this.checked ? 'true' : (this.indeterminate ? 'mixed' : 'false');
-    }
-    /** Toggles the `checked` state of the checkbox. */
-    toggle() {
-        this.checked = !this.checked;
-    }
-    /**
-     * Event handler for checkbox input element.
-     * Toggles checked state if element is not disabled.
-     * Do not toggle on (change) event since IE doesn't fire change event when
-     *   indeterminate checkbox is clicked.
-     * @param event Input click event
-     */
-    onInputClick(event) {
-        // We have to stop propagation for click events on the visual hidden input element.
-        // By default, when a user clicks on a label element, a generated click event will be
-        // dispatched on the associated input element. Since we are using a label element as our
-        // root container, the click event on the `checkbox` will be executed twice.
-        // The real click event will bubble up, and the generated click event also tries to bubble up.
-        // This will lead to multiple click events.
-        // Preventing bubbling for the second event will solve that issue.
-        event.stopPropagation();
-        // If resetIndeterminate is false, and the current state is indeterminate, do nothing on click
-        if (!this.disabled && this._clickAction !== 'noop') {
-            // When user manually click on the checkbox, `indeterminate` is set to false.
-            if (this.indeterminate && this._clickAction !== 'check') {
-                Promise.resolve().then(() => {
-                    this._indeterminate = false;
-                    this.indeterminateChange.emit(this._indeterminate);
-                });
-            }
-            this.toggle();
-            this.transitionCheckState(this._checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked);
-            // Emit our custom change event if the native input emitted one.
-            // It is important to only emit it, if the native input triggered one, because
-            // we don't want to trigger a change event, when the `checked` variable changes for example.
-            this.emitChangeEvent();
-        }
-        else if (!this.disabled && this._clickAction === 'noop') {
-            // Reset native input when clicked with noop. The native checkbox becomes checked after
-            // click, reset it to be align with `checked` value of `mc-checkbox`.
-            this.inputElement.nativeElement.checked = this.checked;
-            this.inputElement.nativeElement.indeterminate = this.indeterminate;
-        }
-    }
-    /** Focuses the checkbox. */
-    focus() {
-        this._focusMonitor.focusVia(this.inputElement.nativeElement, 'keyboard');
-    }
-    onInteractionEvent(event) {
-        // We always have to stop propagation on the change event.
-        // Otherwise the change event, from the input element, will bubble up and
-        // emit its event object to the `change` output.
-        event.stopPropagation();
-    }
-    transitionCheckState(newState) {
-        const oldState = this.currentCheckState;
-        const element = this._elementRef.nativeElement;
-        if (oldState === newState) {
-            return;
-        }
-        if (this.currentAnimationClass.length > 0) {
-            element.classList.remove(this.currentAnimationClass);
-        }
-        this.currentCheckState = newState;
-        if (this.currentAnimationClass.length > 0) {
-            element.classList.add(this.currentAnimationClass);
-        }
-    }
-    emitChangeEvent() {
-        const event = new McCheckboxChange();
-        event.source = this;
-        event.checked = this.checked;
-        this.controlValueAccessorChangeFn(this.checked);
-        this.change.emit(event);
-    }
-    /** Function is called whenever the focus changes for the input element. */
-    onInputFocusChange(focusOrigin) {
-        if (focusOrigin) {
-            this.onTouched();
-        }
-    }
-}
-/** @nocollapse */ /** @nocollapse */ McCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McCheckbox, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }, { token: MC_CHECKBOX_CLICK_ACTION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ McCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.7", type: McCheckbox, selector: "mc-checkbox", inputs: { color: "color", tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], id: "id", labelPosition: "labelPosition", name: "name", value: "value", required: "required", checked: "checked", disabled: "disabled", indeterminate: "indeterminate" }, outputs: { change: "change", indeterminateChange: "indeterminateChange" }, host: { properties: { "id": "id", "attr.id": "id", "attr.disabled": "disabled", "class.mc-indeterminate": "indeterminate", "class.mc-checked": "checked", "class.mc-disabled": "disabled", "class.mc-checkbox-label-before": "labelPosition == \"before\"" }, classAttribute: "mc-checkbox" }, providers: [MC_CHECKBOX_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["mcCheckbox"], usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"inputId\" class=\"mc-checkbox-layout\" #label>\r\n    <div class=\"mc-checkbox-inner-container\"\r\n         [class.mc-checkbox-inner-container-no-side-margin]=\"!checkboxLabel.textContent || !checkboxLabel.textContent.trim()\">\r\n        <input #input\r\n               type=\"checkbox\"\r\n               class=\"mc-checkbox-input cdk-visually-hidden\"\r\n               [id]=\"inputId\"\r\n               [required]=\"required\"\r\n               [checked]=\"checked\"\r\n               [attr.value]=\"value\"\r\n               [disabled]=\"disabled\"\r\n               [attr.name]=\"name\"\r\n               [tabIndex]=\"tabIndex\"\r\n               [indeterminate]=\"indeterminate\"\r\n               [attr.aria-label]=\"ariaLabel || null\"\r\n               [attr.aria-labelledby]=\"ariaLabelledby\"\r\n               [attr.aria-checked]=\"getAriaChecked()\"\r\n               (change)=\"onInteractionEvent($event)\"\r\n               (click)=\"onInputClick($event)\">\r\n        <div class=\"mc-checkbox-frame\">\r\n            <i class=\"mc-checkbox-checkmark mc mc-check_16\"></i>\r\n            <i class=\"mc-checkbox-mixedmark mc mc-minus_16\"></i>\r\n        </div>\r\n    </div>\r\n\r\n    <span class=\"mc-checkbox-label\" #checkboxLabel (cdkObserveContent)=\"onLabelTextChange()\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</label>\r\n", styles: [".mc-checkbox-frame{top:0;left:0;right:0;bottom:0;position:absolute;border-radius:3px;box-sizing:border-box;pointer-events:none}.mc-checkbox-checkmark,.mc-checkbox-mixedmark{display:none;position:absolute;top:-1px;left:-1px;right:0;bottom:0}.mc-checkbox-frame{background-color:transparent;border-width:var(--mc-checkbox-size-border-width, 1px);border-style:solid;box-shadow:var(--mc-checkbox-size-toggle-box-shadow, inset 0 0 1px 0 rgba(0, 0, 0, .2))}.mc-checkbox{display:inline-block;cursor:pointer;-webkit-tap-highlight-color:transparent}.mc-checkbox.mc-checked .mc-checkbox-checkmark{display:block}.mc-checkbox.mc-checked .mc-checkbox-mixedmark,.mc-checkbox.mc-indeterminate .mc-checkbox-checkmark{display:none}.mc-checkbox.mc-indeterminate .mc-checkbox-mixedmark{display:block}.mc-checkbox.mc-disabled{cursor:default}.mc-checkbox.mc-disabled .mc-checkbox-frame{box-shadow:none}.mc-checkbox-layout{cursor:inherit;align-items:baseline;vertical-align:middle;display:inline-flex;white-space:nowrap;width:100%}.mc-checkbox-inner-container{display:inline-block;height:var(--mc-checkbox-size-width, 16px);line-height:0;margin-right:8px;order:0;position:relative;align-self:center;white-space:nowrap;width:var(--mc-checkbox-size-width, 16px);flex-shrink:0}[dir=rtl] .mc-checkbox-inner-container{margin-left:8px;margin-right:auto}.mc-checkbox-inner-container-no-side-margin{margin-left:0;margin-right:0}.mc-checkbox-label-before .mc-checkbox-inner-container{order:1;margin-left:8px;margin-right:auto}[dir=rtl] .mc-checkbox-label-before .mc-checkbox-inner-container{margin-left:auto;margin-right:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McCheckbox, decorators: [{
-            type: Component,
-            args: [{ selector: 'mc-checkbox', exportAs: 'mcCheckbox', host: {
-                        class: 'mc-checkbox',
-                        '[id]': 'id',
-                        '[attr.id]': 'id',
-                        '[attr.disabled]': 'disabled',
-                        '[class.mc-indeterminate]': 'indeterminate',
-                        '[class.mc-checked]': 'checked',
-                        '[class.mc-disabled]': 'disabled',
-                        '[class.mc-checkbox-label-before]': 'labelPosition == "before"'
-                    }, providers: [MC_CHECKBOX_CONTROL_VALUE_ACCESSOR], inputs: ['color', 'tabIndex'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"inputId\" class=\"mc-checkbox-layout\" #label>\r\n    <div class=\"mc-checkbox-inner-container\"\r\n         [class.mc-checkbox-inner-container-no-side-margin]=\"!checkboxLabel.textContent || !checkboxLabel.textContent.trim()\">\r\n        <input #input\r\n               type=\"checkbox\"\r\n               class=\"mc-checkbox-input cdk-visually-hidden\"\r\n               [id]=\"inputId\"\r\n               [required]=\"required\"\r\n               [checked]=\"checked\"\r\n               [attr.value]=\"value\"\r\n               [disabled]=\"disabled\"\r\n               [attr.name]=\"name\"\r\n               [tabIndex]=\"tabIndex\"\r\n               [indeterminate]=\"indeterminate\"\r\n               [attr.aria-label]=\"ariaLabel || null\"\r\n               [attr.aria-labelledby]=\"ariaLabelledby\"\r\n               [attr.aria-checked]=\"getAriaChecked()\"\r\n               (change)=\"onInteractionEvent($event)\"\r\n               (click)=\"onInputClick($event)\">\r\n        <div class=\"mc-checkbox-frame\">\r\n            <i class=\"mc-checkbox-checkmark mc mc-check_16\"></i>\r\n            <i class=\"mc-checkbox-mixedmark mc mc-minus_16\"></i>\r\n        </div>\r\n    </div>\r\n\r\n    <span class=\"mc-checkbox-label\" #checkboxLabel (cdkObserveContent)=\"onLabelTextChange()\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</label>\r\n", styles: [".mc-checkbox-frame{top:0;left:0;right:0;bottom:0;position:absolute;border-radius:3px;box-sizing:border-box;pointer-events:none}.mc-checkbox-checkmark,.mc-checkbox-mixedmark{display:none;position:absolute;top:-1px;left:-1px;right:0;bottom:0}.mc-checkbox-frame{background-color:transparent;border-width:var(--mc-checkbox-size-border-width, 1px);border-style:solid;box-shadow:var(--mc-checkbox-size-toggle-box-shadow, inset 0 0 1px 0 rgba(0, 0, 0, .2))}.mc-checkbox{display:inline-block;cursor:pointer;-webkit-tap-highlight-color:transparent}.mc-checkbox.mc-checked .mc-checkbox-checkmark{display:block}.mc-checkbox.mc-checked .mc-checkbox-mixedmark,.mc-checkbox.mc-indeterminate .mc-checkbox-checkmark{display:none}.mc-checkbox.mc-indeterminate .mc-checkbox-mixedmark{display:block}.mc-checkbox.mc-disabled{cursor:default}.mc-checkbox.mc-disabled .mc-checkbox-frame{box-shadow:none}.mc-checkbox-layout{cursor:inherit;align-items:baseline;vertical-align:middle;display:inline-flex;white-space:nowrap;width:100%}.mc-checkbox-inner-container{display:inline-block;height:var(--mc-checkbox-size-width, 16px);line-height:0;margin-right:8px;order:0;position:relative;align-self:center;white-space:nowrap;width:var(--mc-checkbox-size-width, 16px);flex-shrink:0}[dir=rtl] .mc-checkbox-inner-container{margin-left:8px;margin-right:auto}.mc-checkbox-inner-container-no-side-margin{margin-left:0;margin-right:0}.mc-checkbox-label-before .mc-checkbox-inner-container{order:1;margin-left:8px;margin-right:auto}[dir=rtl] .mc-checkbox-label-before .mc-checkbox-inner-container{margin-left:auto;margin-right:8px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MC_CHECKBOX_CLICK_ACTION]
-                }] }]; }, propDecorators: { ariaLabel: [{
-                type: Input,
-                args: ['aria-label']
-            }], ariaLabelledby: [{
-                type: Input,
-                args: ['aria-labelledby']
-            }], id: [{
-                type: Input
-            }], labelPosition: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], change: [{
-                type: Output
-            }], indeterminateChange: [{
-                type: Output
-            }], value: [{
-                type: Input
-            }], inputElement: [{
-                type: ViewChild,
-                args: ['input', { static: false }]
-            }], required: [{
-                type: Input
-            }], checked: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], indeterminate: [{
-                type: Input
+// Increasing integer for generating unique ids for checkbox components.
+let nextUniqueId = 0;
+/**
+ * Provider Expression that allows mc-checkbox to register as a ControlValueAccessor.
+ * This allows it to support [(ngModel)].
+ * @docs-private
+ */
+const MC_CHECKBOX_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => McCheckbox),
+    multi: true
+};
+/**
+ * Represents the different states that require custom transitions between them.
+ * @docs-private
+ */
+var TransitionCheckState;
+(function (TransitionCheckState) {
+    /** The initial state of the component before any user interaction. */
+    TransitionCheckState[TransitionCheckState["Init"] = 0] = "Init";
+    /** The state representing the component when it's becoming checked. */
+    TransitionCheckState[TransitionCheckState["Checked"] = 1] = "Checked";
+    /** The state representing the component when it's becoming unchecked. */
+    TransitionCheckState[TransitionCheckState["Unchecked"] = 2] = "Unchecked";
+    /** The state representing the component when it's becoming indeterminate. */
+    TransitionCheckState[TransitionCheckState["Indeterminate"] = 3] = "Indeterminate";
+})(TransitionCheckState || (TransitionCheckState = {}));
+/** Change event object emitted by McCheckbox. */
+class McCheckboxChange {
+}
+// Boilerplate for applying mixins to McCheckbox.
+/** @docs-private */
+class McCheckboxBase {
+    // tslint:disable-next-line:naming-convention
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+}
+// tslint:disable-next-line:naming-convention
+const McCheckboxMixinBase = mixinTabIndex(mixinColor(mixinDisabled(McCheckboxBase), ThemePalette.Primary));
+/**
+ * A mosaic checkbox component. Supports all of the functionality of an HTML5 checkbox,
+ * and exposes a similar API. A McCheckbox can be either checked, unchecked, indeterminate, or
+ * disabled. Note that all additional accessibility attributes are taken care of by the component,
+ * so there is no need to provide them yourself. However, if you want to omit a label and still
+ * have the checkbox be accessible, you may supply an [aria-label] input.
+ */
+class McCheckbox extends McCheckboxMixinBase {
+    constructor(elementRef, _changeDetectorRef, _focusMonitor, _clickAction) {
+        super(elementRef);
+        this._changeDetectorRef = _changeDetectorRef;
+        this._focusMonitor = _focusMonitor;
+        this._clickAction = _clickAction;
+        /**
+         * Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will
+         * take precedence so this may be omitted.
+         */
+        this.ariaLabel = '';
+        /**
+         * Users can specify the `aria-labelledby` attribute which will be forwarded to the input element
+         */
+        this.ariaLabelledby = null;
+        /** Whether the label should appear after or before the checkbox. Defaults to 'after' */
+        this.labelPosition = 'after';
+        /** Name value will be applied to the input element if present */
+        this.name = null;
+        /** Event emitted when the checkbox's `checked` value changes. */
+        this.change = new EventEmitter();
+        /** Event emitted when the checkbox's `indeterminate` value changes. */
+        this.indeterminateChange = new EventEmitter();
+        this._checked = false;
+        this._disabled = false;
+        this._indeterminate = false;
+        this.uniqueId = `mc-checkbox-${++nextUniqueId}`;
+        this.currentAnimationClass = '';
+        this.currentCheckState = TransitionCheckState.Init;
+        /**
+         * Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor.
+         * @docs-private
+         */
+        // tslint:disable-next-line:no-empty
+        this.onTouched = () => { };
+        // tslint:disable-next-line:no-empty
+        this.controlValueAccessorChangeFn = () => { };
+        this.id = this.uniqueId;
+    }
+    /** Returns the unique id for the visual hidden input. */
+    get inputId() {
+        return `${this.id || this.uniqueId}-input`;
+    }
+    /** Whether the checkbox is required. */
+    get required() {
+        return this._required;
+    }
+    set required(value) {
+        this._required = toBoolean(value);
+    }
+    /**
+     * Whether the checkbox is checked.
+     */
+    get checked() {
+        return this._checked;
+    }
+    set checked(value) {
+        if (value !== this.checked) {
+            this._checked = value;
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    /**
+     * Whether the checkbox is disabled. This fully overrides the implementation provided by
+     * mixinDisabled, but the mixin is still required because mixinTabIndex requires it.
+     */
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        if (value !== this.disabled) {
+            this._disabled = value;
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    /**
+     * Whether the checkbox is indeterminate. This is also known as "mixed" mode and can be used to
+     * represent a checkbox with three states, e.g. a checkbox that represents a nested list of
+     * checkable items. Note that whenever checkbox is manually clicked, indeterminate is immediately
+     * set to false.
+     */
+    get indeterminate() {
+        return this._indeterminate;
+    }
+    set indeterminate(value) {
+        const changed = value !== this._indeterminate;
+        this._indeterminate = value;
+        if (changed) {
+            if (this._indeterminate) {
+                this.transitionCheckState(TransitionCheckState.Indeterminate);
+            }
+            else {
+                this.transitionCheckState(this.checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked);
+            }
+            this.indeterminateChange.emit(this._indeterminate);
+        }
+    }
+    ngAfterViewInit() {
+        this._focusMonitor
+            .monitor(this.inputElement.nativeElement)
+            .subscribe((focusOrigin) => this.onInputFocusChange(focusOrigin));
+    }
+    ngOnDestroy() {
+        this._focusMonitor.stopMonitoring(this.inputElement.nativeElement);
+    }
+    /** Method being called whenever the label text changes. */
+    onLabelTextChange() {
+        // This method is getting called whenever the label of the checkbox changes.
+        // Since the checkbox uses the OnPush strategy we need to notify it about the change
+        // that has been recognized by the cdkObserveContent directive.
+        this._changeDetectorRef.markForCheck();
+    }
+    // Implemented as part of ControlValueAccessor.
+    writeValue(value) {
+        this.checked = !!value;
+    }
+    // Implemented as part of ControlValueAccessor.
+    registerOnChange(fn) {
+        this.controlValueAccessorChangeFn = fn;
+    }
+    // Implemented as part of ControlValueAccessor.
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    // Implemented as part of ControlValueAccessor.
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    getAriaChecked() {
+        return this.checked ? 'true' : (this.indeterminate ? 'mixed' : 'false');
+    }
+    /** Toggles the `checked` state of the checkbox. */
+    toggle() {
+        this.checked = !this.checked;
+    }
+    /**
+     * Event handler for checkbox input element.
+     * Toggles checked state if element is not disabled.
+     * Do not toggle on (change) event since IE doesn't fire change event when
+     *   indeterminate checkbox is clicked.
+     * @param event Input click event
+     */
+    onInputClick(event) {
+        // We have to stop propagation for click events on the visual hidden input element.
+        // By default, when a user clicks on a label element, a generated click event will be
+        // dispatched on the associated input element. Since we are using a label element as our
+        // root container, the click event on the `checkbox` will be executed twice.
+        // The real click event will bubble up, and the generated click event also tries to bubble up.
+        // This will lead to multiple click events.
+        // Preventing bubbling for the second event will solve that issue.
+        event.stopPropagation();
+        // If resetIndeterminate is false, and the current state is indeterminate, do nothing on click
+        if (!this.disabled && this._clickAction !== 'noop') {
+            // When user manually click on the checkbox, `indeterminate` is set to false.
+            if (this.indeterminate && this._clickAction !== 'check') {
+                Promise.resolve().then(() => {
+                    this._indeterminate = false;
+                    this.indeterminateChange.emit(this._indeterminate);
+                });
+            }
+            this.toggle();
+            this.transitionCheckState(this._checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked);
+            // Emit our custom change event if the native input emitted one.
+            // It is important to only emit it, if the native input triggered one, because
+            // we don't want to trigger a change event, when the `checked` variable changes for example.
+            this.emitChangeEvent();
+        }
+        else if (!this.disabled && this._clickAction === 'noop') {
+            // Reset native input when clicked with noop. The native checkbox becomes checked after
+            // click, reset it to be align with `checked` value of `mc-checkbox`.
+            this.inputElement.nativeElement.checked = this.checked;
+            this.inputElement.nativeElement.indeterminate = this.indeterminate;
+        }
+    }
+    /** Focuses the checkbox. */
+    focus() {
+        this._focusMonitor.focusVia(this.inputElement.nativeElement, 'keyboard');
+    }
+    onInteractionEvent(event) {
+        // We always have to stop propagation on the change event.
+        // Otherwise the change event, from the input element, will bubble up and
+        // emit its event object to the `change` output.
+        event.stopPropagation();
+    }
+    transitionCheckState(newState) {
+        const oldState = this.currentCheckState;
+        const element = this._elementRef.nativeElement;
+        if (oldState === newState) {
+            return;
+        }
+        if (this.currentAnimationClass.length > 0) {
+            element.classList.remove(this.currentAnimationClass);
+        }
+        this.currentCheckState = newState;
+        if (this.currentAnimationClass.length > 0) {
+            element.classList.add(this.currentAnimationClass);
+        }
+    }
+    emitChangeEvent() {
+        const event = new McCheckboxChange();
+        event.source = this;
+        event.checked = this.checked;
+        this.controlValueAccessorChangeFn(this.checked);
+        this.change.emit(event);
+    }
+    /** Function is called whenever the focus changes for the input element. */
+    onInputFocusChange(focusOrigin) {
+        if (focusOrigin) {
+            this.onTouched();
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ McCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McCheckbox, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }, { token: MC_CHECKBOX_CLICK_ACTION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ McCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McCheckbox, selector: "mc-checkbox", inputs: { color: "color", tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], id: "id", labelPosition: "labelPosition", name: "name", value: "value", required: "required", checked: "checked", disabled: "disabled", indeterminate: "indeterminate" }, outputs: { change: "change", indeterminateChange: "indeterminateChange" }, host: { properties: { "id": "id", "attr.id": "id", "attr.disabled": "disabled", "class.mc-indeterminate": "indeterminate", "class.mc-checked": "checked", "class.mc-disabled": "disabled", "class.mc-checkbox-label-before": "labelPosition == \"before\"" }, classAttribute: "mc-checkbox" }, providers: [MC_CHECKBOX_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["mcCheckbox"], usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"inputId\" class=\"mc-checkbox-layout\" #label>\n    <div class=\"mc-checkbox-inner-container\"\n         [class.mc-checkbox-inner-container-no-side-margin]=\"!checkboxLabel.textContent || !checkboxLabel.textContent.trim()\">\n        <input #input\n               type=\"checkbox\"\n               class=\"mc-checkbox-input cdk-visually-hidden\"\n               [id]=\"inputId\"\n               [required]=\"required\"\n               [checked]=\"checked\"\n               [attr.value]=\"value\"\n               [disabled]=\"disabled\"\n               [attr.name]=\"name\"\n               [tabIndex]=\"tabIndex\"\n               [indeterminate]=\"indeterminate\"\n               [attr.aria-label]=\"ariaLabel || null\"\n               [attr.aria-labelledby]=\"ariaLabelledby\"\n               [attr.aria-checked]=\"getAriaChecked()\"\n               (change)=\"onInteractionEvent($event)\"\n               (click)=\"onInputClick($event)\">\n        <div class=\"mc-checkbox-frame\">\n            <i class=\"mc-checkbox-checkmark mc mc-check_16\"></i>\n            <i class=\"mc-checkbox-mixedmark mc mc-minus_16\"></i>\n        </div>\n    </div>\n\n    <span class=\"mc-checkbox-label\" #checkboxLabel (cdkObserveContent)=\"onLabelTextChange()\">\n    <ng-content></ng-content>\n  </span>\n</label>\n", styles: [".mc-checkbox-frame{top:0;left:0;right:0;bottom:0;position:absolute;border-radius:3px;box-sizing:border-box;pointer-events:none}.mc-checkbox-checkmark,.mc-checkbox-mixedmark{display:none;position:absolute;top:-1px;left:-1px;right:0;bottom:0}.mc-checkbox-frame{background-color:transparent;border-width:var(--mc-checkbox-size-border-width, 1px);border-style:solid;box-shadow:var(--mc-checkbox-size-toggle-box-shadow, inset 0 0 1px 0 rgba(0, 0, 0, .2))}.mc-checkbox{display:inline-block;cursor:pointer;-webkit-tap-highlight-color:transparent}.mc-checkbox.mc-checked .mc-checkbox-checkmark{display:block}.mc-checkbox.mc-checked .mc-checkbox-mixedmark,.mc-checkbox.mc-indeterminate .mc-checkbox-checkmark{display:none}.mc-checkbox.mc-indeterminate .mc-checkbox-mixedmark{display:block}.mc-checkbox.mc-disabled{cursor:default}.mc-checkbox.mc-disabled .mc-checkbox-frame{box-shadow:none}.mc-checkbox-layout{cursor:inherit;align-items:baseline;vertical-align:middle;display:inline-flex;white-space:nowrap;width:100%}.mc-checkbox-inner-container{display:inline-block;height:var(--mc-checkbox-size-width, 16px);line-height:0;margin-right:8px;order:0;position:relative;align-self:center;white-space:nowrap;width:var(--mc-checkbox-size-width, 16px);flex-shrink:0}[dir=rtl] .mc-checkbox-inner-container{margin-left:8px;margin-right:auto}.mc-checkbox-inner-container-no-side-margin{margin-left:0;margin-right:0}.mc-checkbox-label-before .mc-checkbox-inner-container{order:1;margin-left:8px;margin-right:auto}[dir=rtl] .mc-checkbox-label-before .mc-checkbox-inner-container{margin-left:auto;margin-right:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McCheckbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'mc-checkbox', exportAs: 'mcCheckbox', host: {
+                        class: 'mc-checkbox',
+                        '[id]': 'id',
+                        '[attr.id]': 'id',
+                        '[attr.disabled]': 'disabled',
+                        '[class.mc-indeterminate]': 'indeterminate',
+                        '[class.mc-checked]': 'checked',
+                        '[class.mc-disabled]': 'disabled',
+                        '[class.mc-checkbox-label-before]': 'labelPosition == "before"'
+                    }, providers: [MC_CHECKBOX_CONTROL_VALUE_ACCESSOR], inputs: ['color', 'tabIndex'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"inputId\" class=\"mc-checkbox-layout\" #label>\n    <div class=\"mc-checkbox-inner-container\"\n         [class.mc-checkbox-inner-container-no-side-margin]=\"!checkboxLabel.textContent || !checkboxLabel.textContent.trim()\">\n        <input #input\n               type=\"checkbox\"\n               class=\"mc-checkbox-input cdk-visually-hidden\"\n               [id]=\"inputId\"\n               [required]=\"required\"\n               [checked]=\"checked\"\n               [attr.value]=\"value\"\n               [disabled]=\"disabled\"\n               [attr.name]=\"name\"\n               [tabIndex]=\"tabIndex\"\n               [indeterminate]=\"indeterminate\"\n               [attr.aria-label]=\"ariaLabel || null\"\n               [attr.aria-labelledby]=\"ariaLabelledby\"\n               [attr.aria-checked]=\"getAriaChecked()\"\n               (change)=\"onInteractionEvent($event)\"\n               (click)=\"onInputClick($event)\">\n        <div class=\"mc-checkbox-frame\">\n            <i class=\"mc-checkbox-checkmark mc mc-check_16\"></i>\n            <i class=\"mc-checkbox-mixedmark mc mc-minus_16\"></i>\n        </div>\n    </div>\n\n    <span class=\"mc-checkbox-label\" #checkboxLabel (cdkObserveContent)=\"onLabelTextChange()\">\n    <ng-content></ng-content>\n  </span>\n</label>\n", styles: [".mc-checkbox-frame{top:0;left:0;right:0;bottom:0;position:absolute;border-radius:3px;box-sizing:border-box;pointer-events:none}.mc-checkbox-checkmark,.mc-checkbox-mixedmark{display:none;position:absolute;top:-1px;left:-1px;right:0;bottom:0}.mc-checkbox-frame{background-color:transparent;border-width:var(--mc-checkbox-size-border-width, 1px);border-style:solid;box-shadow:var(--mc-checkbox-size-toggle-box-shadow, inset 0 0 1px 0 rgba(0, 0, 0, .2))}.mc-checkbox{display:inline-block;cursor:pointer;-webkit-tap-highlight-color:transparent}.mc-checkbox.mc-checked .mc-checkbox-checkmark{display:block}.mc-checkbox.mc-checked .mc-checkbox-mixedmark,.mc-checkbox.mc-indeterminate .mc-checkbox-checkmark{display:none}.mc-checkbox.mc-indeterminate .mc-checkbox-mixedmark{display:block}.mc-checkbox.mc-disabled{cursor:default}.mc-checkbox.mc-disabled .mc-checkbox-frame{box-shadow:none}.mc-checkbox-layout{cursor:inherit;align-items:baseline;vertical-align:middle;display:inline-flex;white-space:nowrap;width:100%}.mc-checkbox-inner-container{display:inline-block;height:var(--mc-checkbox-size-width, 16px);line-height:0;margin-right:8px;order:0;position:relative;align-self:center;white-space:nowrap;width:var(--mc-checkbox-size-width, 16px);flex-shrink:0}[dir=rtl] .mc-checkbox-inner-container{margin-left:8px;margin-right:auto}.mc-checkbox-inner-container-no-side-margin{margin-left:0;margin-right:0}.mc-checkbox-label-before .mc-checkbox-inner-container{order:1;margin-left:8px;margin-right:auto}[dir=rtl] .mc-checkbox-label-before .mc-checkbox-inner-container{margin-left:auto;margin-right:8px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MC_CHECKBOX_CLICK_ACTION]
+                }] }]; }, propDecorators: { ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], ariaLabelledby: [{
+                type: Input,
+                args: ['aria-labelledby']
+            }], id: [{
+                type: Input
+            }], labelPosition: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }], indeterminateChange: [{
+                type: Output
+            }], value: [{
+                type: Input
+            }], inputElement: [{
+                type: ViewChild,
+                args: ['input', { static: false }]
+            }], required: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], indeterminate: [{
+                type: Input
             }] } });
 
-const MC_CHECKBOX_REQUIRED_VALIDATOR = {
-    provide: NG_VALIDATORS,
-    useExisting: forwardRef(() => McCheckboxRequiredValidator),
-    multi: true
-};
-/**
- * Validator for Mosaic checkbox's required attribute in template-driven checkbox.
- * Current CheckboxRequiredValidator only work with `input type=checkbox` and does not
- * work with `mc-checkbox`.
- */
-class McCheckboxRequiredValidator extends CheckboxRequiredValidator {
-}
-/** @nocollapse */ /** @nocollapse */ McCheckboxRequiredValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McCheckboxRequiredValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ McCheckboxRequiredValidator.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.7", type: McCheckboxRequiredValidator, selector: "mc-checkbox[required][formControlName],\n             mc-checkbox[required][formControl], mc-checkbox[required][ngModel]", host: { properties: { "attr.required": "required ? \"\" : null" } }, providers: [MC_CHECKBOX_REQUIRED_VALIDATOR], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McCheckboxRequiredValidator, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: `mc-checkbox[required][formControlName],
-             mc-checkbox[required][formControl], mc-checkbox[required][ngModel]`,
-                    providers: [MC_CHECKBOX_REQUIRED_VALIDATOR],
-                    host: { '[attr.required]': 'required ? "" : null' }
-                }]
+const MC_CHECKBOX_REQUIRED_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => McCheckboxRequiredValidator),
+    multi: true
+};
+/**
+ * Validator for Mosaic checkbox's required attribute in template-driven checkbox.
+ * Current CheckboxRequiredValidator only work with `input type=checkbox` and does not
+ * work with `mc-checkbox`.
+ */
+class McCheckboxRequiredValidator extends CheckboxRequiredValidator {
+}
+/** @nocollapse */ /** @nocollapse */ McCheckboxRequiredValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McCheckboxRequiredValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McCheckboxRequiredValidator.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: McCheckboxRequiredValidator, selector: "mc-checkbox[required][formControlName],\n             mc-checkbox[required][formControl], mc-checkbox[required][ngModel]", host: { properties: { "attr.required": "required ? \"\" : null" } }, providers: [MC_CHECKBOX_REQUIRED_VALIDATOR], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McCheckboxRequiredValidator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `mc-checkbox[required][formControlName],
+             mc-checkbox[required][formControl], mc-checkbox[required][ngModel]`,
+                    providers: [MC_CHECKBOX_REQUIRED_VALIDATOR],
+                    host: { '[attr.required]': 'required ? "" : null' }
+                }]
         }] });
 
-class McCheckboxModule {
-}
-/** @nocollapse */ /** @nocollapse */ McCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ /** @nocollapse */ McCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McCheckboxModule, declarations: [McCheckbox, McCheckboxRequiredValidator], imports: [CommonModule], exports: [McCheckbox, McCheckboxRequiredValidator] });
-/** @nocollapse */ /** @nocollapse */ McCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McCheckboxModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McCheckboxModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    exports: [McCheckbox, McCheckboxRequiredValidator],
-                    declarations: [McCheckbox, McCheckboxRequiredValidator]
-                }]
+class McCheckboxModule {
+}
+/** @nocollapse */ /** @nocollapse */ McCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ McCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McCheckboxModule, declarations: [McCheckbox, McCheckboxRequiredValidator], imports: [CommonModule], exports: [McCheckbox, McCheckboxRequiredValidator] });
+/** @nocollapse */ /** @nocollapse */ McCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McCheckboxModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McCheckboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    exports: [McCheckbox, McCheckboxRequiredValidator],
+                    declarations: [McCheckbox, McCheckboxRequiredValidator]
+                }]
         }] });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { MC_CHECKBOX_CLICK_ACTION, MC_CHECKBOX_CONTROL_VALUE_ACCESSOR, MC_CHECKBOX_REQUIRED_VALIDATOR, McCheckbox, McCheckboxBase, McCheckboxChange, McCheckboxMixinBase, McCheckboxModule, McCheckboxRequiredValidator, TransitionCheckState };